| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>scrolling_test.html</title> |
| <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css"> |
| <script src="/filez/_main/third_party/js/qunit/qunit.js"></script> |
| <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script> |
| <script src="test_bootstrap.js"></script> |
| <script type="text/javascript"> |
| goog.require('bot.action'); |
| goog.require('bot.dom'); |
| goog.require('goog.dom'); |
| goog.require('goog.labs.userAgent.browser'); |
| goog.require('goog.labs.userAgent.device'); |
| goog.require('goog.labs.userAgent.platform'); |
| goog.require('goog.math.Coordinate'); |
| goog.require('goog.userAgent'); |
| goog.require('goog.userAgent.product'); |
| </script> |
| </head> |
| <body> |
| <div id="qunit"></div> |
| <div id="qunit-fixture"></div> |
| <script type="text/javascript"> |
| var findElement = bot.locators.findElement; |
| |
| function getTopLevelParent() { |
| return goog.dom.getDocumentScrollElement(); |
| } |
| |
| QUnit.testStart(function() { |
| window.scrollTo(0, 0); |
| }); |
| |
| QUnit.testDone(function() { |
| window.scrollTo(0, 0); |
| }); |
| |
| QUnit.test('scrolls element in to view if required', function(assert) { |
| bot.action.scrollIntoView(findElement({id: 'offscreen'})); |
| |
| var isAndroidOrChromeRegression = |
| goog.userAgent.product.ANDROID || |
| goog.labs.userAgent.browser.isChrome() && |
| goog.labs.userAgent.platform.isAndroid() && |
| goog.labs.userAgent.browser.isVersionOrHigher('40') && |
| !goog.labs.userAgent.browser.isVersionOrHigher('41'); |
| |
| if (isAndroidOrChromeRegression) { |
| assert.ok(true, 'Skipping: Android doesn\'t currently provide scrolling information'); |
| return; |
| } |
| assert.notStrictEqual(getTopLevelParent().scrollLeft, 0); |
| }); |
| |
| QUnit.test('does not scroll element in to view if already visible', function(assert) { |
| bot.action.scrollIntoView(findElement({id: 'onscreen'})); |
| assert.strictEqual(getTopLevelParent().scrollLeft, 0); |
| }); |
| |
| QUnit.test('scrolls element if hidden by scrollable overflow', function(assert) { |
| var element = findElement({id: 'scrollable'}); |
| bot.action.scrollIntoView(element); |
| assert.notStrictEqual(findElement({id: 'scrollable-container'}).scrollLeft, 0); |
| }); |
| |
| QUnit.test('does not scroll container if not hidden by overflow', function(assert) { |
| var element = findElement({id: 'scrollable-in-view'}); |
| bot.action.scrollIntoView(element); |
| var container = findElement({id: 'scrollable-in-view-container'}) |
| assert.strictEqual(container.scrollLeft, 0); |
| }); |
| |
| QUnit.test('does not scroll container if not hidden by overflow with offset', function(assert) { |
| var element = findElement({id: 'scrollable-in-view2'}); |
| bot.action.scrollIntoView(element, new goog.math.Coordinate(0, 0)); |
| var container = findElement({id: 'scrollable-in-view-container2'}) |
| assert.strictEqual(container.scrollLeft, 0); |
| assert.strictEqual(getTopLevelParent().scrollTop, 0); |
| }); |
| |
| QUnit.test('scrolls container if hidden by overflow', function(assert) { |
| bot.action.scrollIntoView(findElement({id: 'scrollable'})); |
| assert.notStrictEqual(findElement({id: 'scrollable-container'}).scrollLeft, 0); |
| }); |
| |
| QUnit.test('returns false if element hidden by overflow', function(assert) { |
| var element = findElement({id: 'hidden-by-overflow'}); |
| assert.notOk(bot.action.scrollIntoView(element)); |
| var container = findElement({id: 'hidden-by-overflow-container'}) |
| assert.strictEqual(container.scrollLeft, 0); |
| }); |
| |
| QUnit.test('scrolls nested scroll containers', function(assert) { |
| var top = findElement({id: 'nested-top-container'}); |
| var middle = findElement({id: 'nested-inner-container'}); |
| var element = findElement({id: 'nested'}); |
| var nestedOriginalPosition = goog.style.getClientPosition(element); |
| |
| bot.action.scrollIntoView(element); |
| |
| var nestedNewPosition = goog.style.getClientPosition(element); |
| assert.notStrictEqual(top.scrollLeft, 0); |
| assert.notStrictEqual(middle.scrollLeft, 0); |
| assert.notDeepEqual(nestedNewPosition, nestedOriginalPosition); |
| }); |
| |
| QUnit.test('only scrolls containers that need scrolling', function(assert) { |
| if (goog.userAgent.IE) { |
| assert.ok(true, 'Skipping: IE scrollIntoView scrolls quite eagerly'); |
| return; |
| } |
| var element = findElement({id: 'scrollable-but-unscrolled-not-hidden'}); |
| var origX = goog.style.getClientPosition(element).x; |
| |
| bot.action.scrollIntoView(element); |
| |
| var middleContainer = findElement({id: |
| 'scrollable-but-unscrolled-middle-container'}); |
| var topContainer = findElement({id: |
| 'scrollable-but-unscrolled-top-container'}); |
| |
| assert.notStrictEqual(topContainer.scrollLeft, 0); |
| assert.strictEqual(middleContainer.scrollLeft, 0); |
| var newX = goog.style.getClientPosition(element).x; |
| assert.ok(newX < origX); |
| }); |
| |
| QUnit.test('scrolls nested scroll containers in iframes', function(assert) { |
| var iframe = findElement({id: 'scrollable-iframe'}); |
| var frameDocument = iframe.contentWindow.document; |
| var top = |
| findElement({id: 'iframe-scrollable-top-container'}, frameDocument); |
| var middle = |
| findElement({id: 'iframe-scrollable-nested-container'}, frameDocument); |
| var element = findElement({id: 'iframe-scrollable'}, frameDocument); |
| |
| bot.action.scrollIntoView(element); |
| |
| if (goog.userAgent.product.ANDROID && !bot.userAgent.isProductVersion(4.1)) { |
| assert.ok(true, 'Skipping: Android pre-Jellybean doesn\'t provide scrolling information'); |
| return; |
| } |
| assert.notStrictEqual(frameDocument.body.scrollLeft, 0); |
| assert.notStrictEqual(top.scrollLeft, 0); |
| assert.notStrictEqual(middle.scrollLeft, 0); |
| }); |
| |
| QUnit.test('document for iframe', function(assert) { |
| var iframe = findElement({id: 'offscreen-scrollable-iframe'}); |
| var frameDocument = iframe.contentWindow.document; |
| var top = |
| findElement({id: 'iframe-scrollable-top-container'}, frameDocument); |
| var middle = |
| findElement({id: 'iframe-scrollable-nested-container'}, frameDocument); |
| var element = findElement({id: 'iframe-scrollable'}, frameDocument); |
| |
| bot.action.scrollIntoView(element); |
| |
| var isAndroidOrChromeRegression = |
| goog.userAgent.product.ANDROID || |
| goog.labs.userAgent.browser.isChrome() && |
| goog.labs.userAgent.platform.isAndroid() && |
| goog.labs.userAgent.browser.isVersionOrHigher('40') && |
| !goog.labs.userAgent.browser.isVersionOrHigher('41'); |
| |
| if (isAndroidOrChromeRegression) { |
| assert.ok(true, 'Skipping: Android doesn\'t currently provide scrolling information'); |
| } else { |
| assert.notStrictEqual(getTopLevelParent().scrollLeft, 0); |
| } |
| |
| if (goog.userAgent.product.ANDROID) { |
| assert.ok(true, 'Skipping: Android doesn\'t currently provide scrolling information'); |
| return; |
| } |
| assert.notStrictEqual(frameDocument.body.scrollLeft, 0); |
| assert.notStrictEqual(top.scrollLeft, 0); |
| assert.notStrictEqual(middle.scrollLeft, 0); |
| }); |
| |
| QUnit.test('scrolls overflow if click point is out of view but element is in view', function(assert) { |
| var outer = findElement({id: 'outer'}); |
| var inner = findElement({id: 'inner'}); |
| var coord = new goog.math.Coordinate(75, 2500); |
| |
| bot.action.scrollIntoView(inner, coord); |
| |
| assert.notStrictEqual(outer.scrollTop, 0); |
| }); |
| |
| QUnit.test('scrolling to relative rectangle', function(assert) { |
| var elem = findElement({id: 'relative-rect'}); |
| var region = new goog.math.Rect(60, 60, 10, 10); |
| assert.strictEqual(bot.dom.getOverflowState(elem, region), bot.dom.OverflowState.SCROLL); |
| |
| bot.action.scrollIntoView(elem, region); |
| assert.strictEqual(bot.dom.getOverflowState(elem, region), bot.dom.OverflowState.NONE); |
| }); |
| |
| QUnit.test('scrolling accounts for scrollbar widths', function(assert) { |
| var isMobileOrTabletOrOldIEOrChromeMac = |
| goog.labs.userAgent.device.isMobile() || goog.labs.userAgent.device.isTablet() || |
| (goog.userAgent.IE && !goog.userAgent.isVersion(7)) || |
| (goog.userAgent.product.CHROME && goog.userAgent.MAC); |
| |
| if (isMobileOrTabletOrOldIEOrChromeMac) { |
| assert.ok(true, 'Skipping: scrollbars not shown or special IE behavior'); |
| return; |
| } |
| |
| var elem = findElement({id: 'outside-both-scrollbars'}); |
| var rectBefore = bot.dom.getClientRect(elem); |
| bot.action.scrollIntoView(elem, new goog.math.Coordinate(75, 75)); |
| var rectAfter = bot.dom.getClientRect(elem); |
| |
| var horizontalScroll = rectBefore.left - rectAfter.left; |
| var verticalScroll = rectBefore.top - rectAfter.top; |
| |
| assert.ok(horizontalScroll > 26, |
| 'Horizontal scroll did not account for scrollbar. ' + |
| 'It scrolled ' + horizontalScroll + 'px, but should have ' + |
| 'scrolled at least 26px plus the scrollbar width.'); |
| assert.ok(verticalScroll > 26, |
| 'Vertical scroll did not account for scrollbar. ' + |
| 'It scrolled ' + verticalScroll + 'px, but should have ' + |
| 'scrolled at least 26px plus the scrollbar height.'); |
| }); |
| </script> |
| <div style="position: absolute; left: 150px; top: 100px; border: 2px yellow solid;"><a id="onscreen">Onscreen</a></div> |
| <div style="position: absolute; left: 8000px; border: 2px orange solid;"><a id="offscreen">Offscreen</a></div> |
| <div style="overflow: hidden; width: 50px; height: 30px; border: 2px blue solid;" id="hidden-by-overflow-container"> |
| <a style="margin-left: 100px;" id="hidden-by-overflow">Hidden</a></div> |
| </div> |
| <div id="scrollable-container" style="overflow: scroll; width: 100px; height: 100px; border: 2px purple solid;"> |
| <a id="scrollable" style="margin-left: 150px;">Scrollable</a> |
| </div> |
| <div id="scrollable-in-view-container" style="overflow: scroll; width: 200px; |
| height: 50px; border: 2px grey solid;"> <a |
| id="scrollable-in-view">Scrollable in view</a> |
| </div> |
| <div id="scrollable-in-view-container2" style="overflow: scroll; width: 200px; |
| height: 50px; border: 2px grey solid;"> <a |
| id="scrollable-in-view2">Scrollable in view</a> |
| </div> |
| <div style="overflow: hidden; width: 100px; height: 30px; border: 2px black solid;" id="not-hidden-by-hidden-overflow-container"> <a id="not-hidden-by-hidden-overflow">Not hidden</a></div> |
| <div style="overflow: scroll; width: 100px; height: 100px;" id="nested-top-container"> |
| <div style="overflow: scroll; width: 150px; left: 150px; margin-left: |
| 200px;" id="nested-inner-container"><a id="nested" style="margin-left: 200px;">Nested</a></div> |
| </div> |
| |
| <div id="scrollable-but-unscrolled-top-container" style="overflow: scroll; |
| width: 150px; height: 100px; border: 2px cyan solid;"> |
| <div id="scrollable-but-unscrolled-middle-container" style="overflow: |
| scroll; width: 100px; height: 50px; border: 2px green solid; margin-left: |
| 200px"> <a style="margin-right: 200px;" |
| id="scrollable-but-unscrolled-not-hidden">X</a> </div> |
| </div> |
| |
| <iframe src="testdata/scrolling_iframe.html" style="width: 200px; height: 100px;" id="scrollable-iframe"></iframe> |
| <div style="position: absolute; left: 8000px; top: 200px; border: 2px orange solid;"> |
| <iframe src="testdata/scrolling_iframe.html" style="width: 200px; height: 100px;" id="offscreen-scrollable-iframe"></iframe> |
| </div> |
| |
| <div style="overflow: scroll; width: 150px; height: 200px;" id="outer"> |
| <div style="width: 150px; height: 5000px;" id="inner"> |
| </div> |
| </div> |
| |
| <div style="position:absolute; overflow: scroll; top:0px; left:300px; width: 100px; height: 100px;"> |
| <div style="position:relative; top: 50px; left: 50px; width:100px; height:100px" id="outside-both-scrollbars">H</div> |
| </div> |
| |
| <div style="position:absolute; overflow: scroll; top:200px; left:300px; width: 100px; height: 100px;"> |
| <div style="position:relative; top: 50px; left: 50px; width:100px; height:100px" id="relative-rect">H</div> |
| </div> |
| </body> |
| </html> |
