| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>overflow_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.dom'); | |
| goog.require('bot.userAgent'); | |
| goog.require('goog.array'); | |
| goog.require('goog.dom'); | |
| goog.require('goog.userAgent'); | |
| </script> | |
| <script type="text/javascript"> | |
| var NONE = bot.dom.OverflowState.NONE; | |
| var HIDDEN = bot.dom.OverflowState.HIDDEN; | |
| var SCROLL = bot.dom.OverflowState.SCROLL; | |
| QUnit.testDone(function() { | |
| document.documentElement.style.position = ''; | |
| }); | |
| QUnit.test('elemHiddenByParent', function(assert) { | |
| var positionStylesToOverflowStateTable = [ | |
| ['absolute', 'absolute', HIDDEN], | |
| ['absolute', 'fixed', HIDDEN], | |
| ['absolute', 'relative', HIDDEN], | |
| ['absolute', 'static', NONE ], | |
| ['fixed' , 'absolute', NONE ], | |
| ['fixed' , 'fixed', NONE ], | |
| ['fixed' , 'relative', NONE ], | |
| ['fixed' , 'static', NONE ], | |
| ['relative', 'absolute', HIDDEN], | |
| ['relative', 'fixed', HIDDEN], | |
| ['relative', 'relative', HIDDEN], | |
| ['relative', 'static', HIDDEN], | |
| ['static' , 'absolute', HIDDEN], | |
| ['static' , 'fixed', HIDDEN], | |
| ['static' , 'relative', HIDDEN], | |
| ['static' , 'static', HIDDEN] | |
| ]; | |
| goog.array.forEach(positionStylesToOverflowStateTable, function(test) { | |
| var position = test[0]; | |
| var parentPosition = test[1]; | |
| var expectedState = test[2]; | |
| var elem = document.createElement('DIV'); | |
| elem.style['position'] = position; | |
| elem.innerHTML = position + ' in ' + parentPosition; | |
| var parent = document.createElement('DIV'); | |
| parent.style['overflow'] = 'hidden'; | |
| parent.style['height'] = '0px'; | |
| parent.style['position'] = parentPosition; | |
| parent.appendChild(elem); | |
| document.body.appendChild(parent); | |
| assert.strictEqual(bot.dom.getOverflowState(elem), expectedState, | |
| 'position: ' + position + '; parent position: ' + parentPosition); | |
| }); | |
| }); | |
| QUnit.test('elemHiddenByGrandparent', function(assert) { | |
| var positionStylesToOverflowStateTable = [ | |
| ['absolute', 'absolute', 'absolute', HIDDEN], | |
| ['absolute', 'absolute', 'fixed' , HIDDEN], | |
| ['absolute', 'absolute', 'relative', HIDDEN], | |
| ['absolute', 'absolute', 'static' , NONE ], | |
| ['absolute', 'fixed' , 'absolute', NONE ], | |
| ['absolute', 'fixed' , 'fixed' , NONE ], | |
| ['absolute', 'fixed' , 'relative', NONE ], | |
| ['absolute', 'fixed' , 'static' , NONE ], | |
| ['absolute', 'relative', 'absolute', HIDDEN], | |
| ['absolute', 'relative', 'fixed' , HIDDEN], | |
| ['absolute', 'relative', 'relative', HIDDEN], | |
| ['absolute', 'relative', 'static' , HIDDEN], | |
| ['absolute', 'static' , 'absolute', HIDDEN], | |
| ['absolute', 'static' , 'fixed' , HIDDEN], | |
| ['absolute', 'static' , 'relative', HIDDEN], | |
| ['absolute', 'static' , 'static' , NONE ], | |
| ['fixed' , 'absolute', 'absolute', NONE ], | |
| ['fixed' , 'absolute', 'fixed' , NONE ], | |
| ['fixed' , 'absolute', 'relative', NONE ], | |
| ['fixed' , 'absolute', 'static' , NONE ], | |
| ['fixed' , 'fixed' , 'absolute', NONE ], | |
| ['fixed' , 'fixed' , 'fixed' , NONE ], | |
| ['fixed' , 'fixed' , 'relative', NONE ], | |
| ['fixed' , 'fixed' , 'static' , NONE ], | |
| ['fixed' , 'relative', 'absolute', NONE ], | |
| ['fixed' , 'relative', 'fixed' , NONE ], | |
| ['fixed' , 'relative', 'relative', NONE ], | |
| ['fixed' , 'relative', 'static' , NONE ], | |
| ['fixed' , 'static' , 'absolute', NONE ], | |
| ['fixed' , 'static' , 'fixed' , NONE ], | |
| ['fixed' , 'static' , 'relative', NONE ], | |
| ['fixed' , 'static' , 'static' , NONE ], | |
| ['relative', 'absolute', 'absolute', HIDDEN], | |
| ['relative', 'absolute', 'fixed' , HIDDEN], | |
| ['relative', 'absolute', 'relative', HIDDEN], | |
| ['relative', 'absolute', 'static' , NONE ], | |
| ['relative', 'fixed' , 'absolute', NONE ], | |
| ['relative', 'fixed' , 'fixed' , NONE ], | |
| ['relative', 'fixed' , 'relative', NONE ], | |
| ['relative', 'fixed' , 'static' , NONE ], | |
| ['relative', 'relative', 'absolute', HIDDEN], | |
| ['relative', 'relative', 'fixed' , HIDDEN], | |
| ['relative', 'relative', 'relative', HIDDEN], | |
| ['relative', 'relative', 'static' , HIDDEN], | |
| ['relative', 'static' , 'absolute', HIDDEN], | |
| ['relative', 'static' , 'fixed' , HIDDEN], | |
| ['relative', 'static' , 'relative', HIDDEN], | |
| ['relative', 'static' , 'static' , HIDDEN], | |
| ['static' , 'absolute', 'absolute', HIDDEN], | |
| ['static' , 'absolute', 'fixed' , HIDDEN], | |
| ['static' , 'absolute', 'relative', HIDDEN], | |
| ['static' , 'absolute', 'static' , NONE ], | |
| ['static' , 'fixed' , 'absolute', NONE ], | |
| ['static' , 'fixed' , 'fixed' , NONE ], | |
| ['static' , 'fixed' , 'relative', NONE ], | |
| ['static' , 'fixed' , 'static' , NONE ], | |
| ['static' , 'relative', 'absolute', HIDDEN], | |
| ['static' , 'relative', 'fixed' , HIDDEN], | |
| ['static' , 'relative', 'relative', HIDDEN], | |
| ['static' , 'relative', 'static' , HIDDEN], | |
| ['static' , 'static' , 'absolute', HIDDEN], | |
| ['static' , 'static' , 'fixed' , HIDDEN], | |
| ['static' , 'static' , 'relative', HIDDEN], | |
| ['static' , 'static' , 'static' , HIDDEN] | |
| ]; | |
| goog.array.forEach(positionStylesToOverflowStateTable, function(test) { | |
| var position = test[0]; | |
| var parentPosition = test[1]; | |
| var grandparentPosition = test[2]; | |
| var expectedState = test[3]; | |
| var elem = document.createElement('DIV'); | |
| elem.style['position'] = position; | |
| elem.innerHTML = | |
| position + ' in ' + parentPosition + ' in ' + grandparentPosition; | |
| var parent = document.createElement('DIV'); | |
| parent.style['position'] = parentPosition; | |
| var grandparent = document.createElement('DIV'); | |
| grandparent.style['overflow'] = 'hidden'; | |
| grandparent.style['height'] = '0px'; | |
| grandparent.style['position'] = grandparentPosition; | |
| parent.appendChild(elem); | |
| grandparent.appendChild(parent); | |
| document.body.appendChild(grandparent); | |
| assert.strictEqual(bot.dom.getOverflowState(elem), expectedState, | |
| 'position: ' + position + '; parent position: ' + | |
| parentPosition + '; grandparent position: ' + grandparentPosition); | |
| }); | |
| }); | |
| QUnit.test('childOfScrollStyleHasScrollStatus', function(assert) { | |
| var e = document.getElementById('overflowScroll'); | |
| assert.strictEqual(bot.dom.getOverflowState(e), SCROLL); | |
| }); | |
| QUnit.test('childOfAutoStyleHasScrollStatus', function(assert) { | |
| var e = document.getElementById('overflowAuto'); | |
| assert.strictEqual(bot.dom.getOverflowState(e), SCROLL); | |
| }); | |
| QUnit.test('childOfScrollStyleInHiddenHasScrollStatusWhenParentNotInOverflow', function(assert) { | |
| var e = document.getElementById('overflowScrollInHiddenIsScroll'); | |
| assert.strictEqual(bot.dom.getOverflowState(e), SCROLL); | |
| }); | |
| QUnit.test('childOfScrollStyleInHiddenHasHiddenStatusWhenParentInOverflow', function(assert) { | |
| var e = document.getElementById('overflowScrollInHiddenIsHidden'); | |
| assert.strictEqual(bot.dom.getOverflowState(e), HIDDEN); | |
| }); | |
| QUnit.test('overflowOfHtmlAndBodyElements', function(assert) { | |
| if (bot.userAgent.ANDROID_PRE_GINGERBREAD) { | |
| assert.ok(true, 'Skipping: Android pre-Gingerbread'); | |
| return; | |
| } | |
| var overflowStylesToOverflowStateTable = [ | |
| ['auto' , 'auto' , SCROLL, SCROLL], | |
| ['auto' , 'hidden' , HIDDEN, HIDDEN], | |
| ['auto' , 'scroll' , SCROLL, SCROLL], | |
| ['auto' , 'visible', NONE , SCROLL], | |
| ['hidden' , 'auto' , SCROLL, SCROLL], | |
| ['hidden' , 'hidden' , HIDDEN, HIDDEN], | |
| ['hidden' , 'scroll' , SCROLL, SCROLL], | |
| ['hidden' , 'visible', NONE , HIDDEN], | |
| ['scroll' , 'auto' , SCROLL, SCROLL], | |
| ['scroll' , 'hidden' , HIDDEN, HIDDEN], | |
| ['scroll' , 'scroll' , SCROLL, SCROLL], | |
| ['scroll' , 'visible', NONE , SCROLL], | |
| ['visible', 'auto' , NONE , SCROLL], | |
| ['visible', 'hidden' , NONE , HIDDEN], | |
| ['visible', 'scroll' , NONE , SCROLL], | |
| ['visible', 'visible', NONE , SCROLL] | |
| ]; | |
| var iframe = document.getElementById('iframe'); | |
| var iframeDoc = goog.dom.getFrameContentDocument(iframe); | |
| var overflowsNothing = iframeDoc.getElementById('overflowsNothing'); | |
| var overflowsBodyNotDoc = iframeDoc.getElementById('overflowsBodyNotDoc'); | |
| var overflowsBodyAndDoc = iframeDoc.getElementById('overflowsBodyAndDoc'); | |
| goog.array.forEach(overflowStylesToOverflowStateTable, function(test) { | |
| var htmlOverflowStyle = test[0]; | |
| var bodyOverflowStyle = test[1]; | |
| var expectedOverflowsBodyNotDocState = test[2]; | |
| var expectedOverflowsBodyAndDocState = test[3]; | |
| iframeDoc.documentElement.style['overflow'] = htmlOverflowStyle; | |
| iframeDoc.body.style['overflow'] = bodyOverflowStyle; | |
| var msg = 'html overflow style: ' + htmlOverflowStyle + '; ' + | |
| 'body overflow style: ' + bodyOverflowStyle; | |
| overflowsNothing.innerHTML = msg; | |
| assert.strictEqual(bot.dom.getOverflowState(overflowsNothing), NONE, msg); | |
| assert.strictEqual(bot.dom.getOverflowState(overflowsBodyNotDoc), | |
| expectedOverflowsBodyNotDocState, msg); | |
| assert.strictEqual(bot.dom.getOverflowState(overflowsBodyAndDoc), | |
| expectedOverflowsBodyAndDocState, msg); | |
| }); | |
| }); | |
| QUnit.test('childOfAnElementWithZeroHeightAndWidthAndOverflowHiddenIsNotVisible', function(assert) { | |
| var child = document.getElementById('bug5140-1-child'); | |
| assert.strictEqual(bot.dom.getOverflowState(child), HIDDEN); | |
| }); | |
| QUnit.test('farShiftedChildOfAnElementWitOverflowHiddenIsNotVisible', function(assert) { | |
| var child = document.getElementById('bug5140-2-child'); | |
| assert.strictEqual(bot.dom.getOverflowState(child), HIDDEN); | |
| }); | |
| QUnit.test('notFarShiftedChildOfAnElementWithOverflowHiddenIsVisible', function(assert) { | |
| var child = document.getElementById('bug5140-3-child'); | |
| assert.strictEqual(bot.dom.getOverflowState(child), NONE); | |
| }); | |
| QUnit.test('farShiftedGrandchildOfAnElementWitOverflowHiddenIsNotVisible', function(assert) { | |
| var child = document.getElementById('bug5140-4-grandchild'); | |
| assert.strictEqual(bot.dom.getOverflowState(child), HIDDEN); | |
| }); | |
| QUnit.test('floatingElemHiddenByBlockParent', function(assert) { | |
| var elem = document.getElementById('floatingInsideBlockParent'); | |
| assert.strictEqual(bot.dom.getOverflowState(elem), HIDDEN); | |
| }); | |
| QUnit.test('floatingElemNotHiddenByInlineParent', function(assert) { | |
| var elem = document.getElementById('floatingInsideInlineParent'); | |
| assert.strictEqual(bot.dom.getOverflowState(elem), NONE); | |
| }); | |
| QUnit.test('negativePositionInOverflowVisibleParent', function(assert) { | |
| if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) { | |
| assert.ok(true, 'Skipping: IE 6 does not support fixed-position elements properly'); | |
| return; | |
| } | |
| var positionStylesToOverflowStateTable = [ | |
| ['absolute', 'absolute', NONE ], | |
| ['absolute', 'fixed', NONE ], | |
| ['absolute', 'relative', NONE ], | |
| ['absolute', 'static', NONE ], | |
| ['fixed' , 'absolute', HIDDEN], | |
| ['fixed' , 'fixed', HIDDEN], | |
| ['fixed' , 'relative', HIDDEN], | |
| ['fixed' , 'static', HIDDEN], | |
| ['relative', 'absolute', NONE ], | |
| ['relative', 'fixed', NONE ], | |
| ['relative', 'relative', NONE ], | |
| ['relative', 'static', NONE ], | |
| ['static' , 'absolute', NONE ], | |
| ['static' , 'fixed', NONE ], | |
| ['static' , 'relative', NONE ], | |
| ['static' , 'static', NONE ] | |
| ]; | |
| var parentContainer = document.getElementById( | |
| 'negativePositionInOverflowVisible'); | |
| goog.array.forEach(positionStylesToOverflowStateTable, function(test) { | |
| var position = test[0]; | |
| var parentPosition = test[1]; | |
| var expectedState = test[2]; | |
| var elem = document.createElement('DIV'); | |
| elem.style['position'] = position; | |
| elem.style['height'] = '50px'; | |
| elem.style['width'] = '50px'; | |
| elem.style['left'] = '-100px'; | |
| elem.style['top'] = '-100px'; | |
| elem.innerHTML = position + ' in ' + parentPosition; | |
| var parent = document.createElement('DIV'); | |
| parent.style['height'] = '50px'; | |
| parent.style['width'] = '50px'; | |
| parent.style['position'] = parentPosition; | |
| parent.appendChild(elem); | |
| parentContainer.appendChild(parent); | |
| assert.strictEqual(bot.dom.getOverflowState(elem), expectedState, | |
| 'position: ' + position + '; parent position: ' + parentPosition); | |
| }); | |
| }); | |
| QUnit.test('negativePositionNotInOverflowVisibleParent', function(assert) { | |
| if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) { | |
| assert.ok(true, 'Skipping: IE 6 does not support fixed-position elements properly'); | |
| return; | |
| } | |
| var positionStylesToOverflowStateTable = [ | |
| ['absolute', 'absolute', HIDDEN], | |
| ['absolute', 'fixed', HIDDEN], | |
| ['absolute', 'relative', HIDDEN], | |
| ['absolute', 'static', NONE ], | |
| ['fixed' , 'absolute', HIDDEN], | |
| ['fixed' , 'fixed', HIDDEN], | |
| ['fixed' , 'relative', HIDDEN], | |
| ['fixed' , 'static', HIDDEN], | |
| ['relative', 'absolute', HIDDEN], | |
| ['relative', 'fixed', HIDDEN], | |
| ['relative', 'relative', HIDDEN], | |
| ['relative', 'static', HIDDEN], | |
| ['static' , 'absolute', NONE ], | |
| ['static' , 'fixed', NONE ], | |
| ['static' , 'relative', NONE ], | |
| ['static' , 'static', NONE ] | |
| ]; | |
| var parentContainer = document.getElementById( | |
| 'negativePositionNotInOverflowVisible'); | |
| var nonVisibleOverflowStyles = ['auto', 'hidden', 'scroll']; | |
| goog.array.forEach(positionStylesToOverflowStateTable, function(test) { | |
| var position = test[0]; | |
| var parentPosition = test[1]; | |
| var expectedState = test[2]; | |
| var elem = document.createElement('DIV'); | |
| elem.style['position'] = position; | |
| elem.style['height'] = '50px'; | |
| elem.style['width'] = '50px'; | |
| elem.style['left'] = '-100px'; | |
| elem.style['top'] = '-100px'; | |
| elem.innerHTML = position + ' in ' + parentPosition; | |
| var parent = document.createElement('DIV'); | |
| parent.style['height'] = '50px'; | |
| parent.style['width'] = '50px'; | |
| parent.style['position'] = parentPosition; | |
| parent.appendChild(elem); | |
| parentContainer.appendChild(parent); | |
| goog.array.forEach(nonVisibleOverflowStyles, function(parentOverflowStyle) { | |
| parent.style['overflow'] = parentOverflowStyle; | |
| assert.strictEqual(bot.dom.getOverflowState(elem), expectedState, | |
| 'position: ' + position + '; parent position: ' + parentPosition); | |
| }); | |
| }); | |
| }); | |
| QUnit.test('scrollingInAndOutOfView', function(assert) { | |
| var line1 = document.getElementById('line1'); | |
| var line5 = document.getElementById('line5'); | |
| assert.strictEqual(bot.dom.getOverflowState(line1), NONE); | |
| assert.strictEqual(bot.dom.getOverflowState(line5), SCROLL); | |
| line5.scrollIntoView(); | |
| assert.strictEqual(bot.dom.getOverflowState(line1), SCROLL); | |
| assert.strictEqual(bot.dom.getOverflowState(line5), NONE); | |
| line1.scrollIntoView(); | |
| assert.strictEqual(bot.dom.getOverflowState(line1), NONE); | |
| assert.strictEqual(bot.dom.getOverflowState(line5), SCROLL); | |
| }); | |
| QUnit.test('inOverflowHiddenByTransform', function(assert) { | |
| if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) { | |
| assert.ok(true, 'Skipping: IE versions < 9 do not support CSS transform styles'); | |
| return; | |
| } | |
| var hiddenTransformX = document.getElementById('hidden-transformX'); | |
| assert.strictEqual(bot.dom.getOverflowState(hiddenTransformX), HIDDEN); | |
| var hiddenTransformY = document.getElementById('hidden-transformY'); | |
| assert.strictEqual(bot.dom.getOverflowState(hiddenTransformY), HIDDEN); | |
| }); | |
| QUnit.test('overflowStateOfRelativeCoordinate', function(assert) { | |
| if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) { | |
| assert.ok(true, 'Skipping: IE 6 does not support overflow state properly'); | |
| return; | |
| } | |
| var elem = document.getElementById('halfHidden'); | |
| assert.strictEqual(bot.dom.getOverflowState(elem, | |
| new goog.math.Coordinate(1, 1)), NONE); | |
| assert.strictEqual(bot.dom.getOverflowState(elem, | |
| new goog.math.Coordinate(60, 60)), HIDDEN); | |
| }); | |
| QUnit.test('overflowStateOfRelativeRectangle', function(assert) { | |
| if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) { | |
| assert.ok(true, 'Skipping: IE 6 does not support overflow state properly'); | |
| return; | |
| } | |
| var elem = document.getElementById('halfHidden'); | |
| assert.strictEqual(bot.dom.getOverflowState(elem, | |
| new goog.math.Rect(25, 25, 50, 50)), NONE); | |
| assert.strictEqual(bot.dom.getOverflowState(elem, | |
| new goog.math.Coordinate(60, 60, 50, 50)), HIDDEN); | |
| }); | |
| QUnit.test('fixedPositionOffscreenIsHidden', function(assert) { | |
| if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) { | |
| assert.ok(true, 'Skipping: IE 6 does not support fixed-position elements properly'); | |
| return; | |
| } | |
| var fixedOffscreen = document.getElementById('fixed-offscreen'); | |
| assert.strictEqual(bot.dom.getOverflowState(fixedOffscreen), HIDDEN); | |
| }); | |
| QUnit.test('childOfFixedTreatedAsFixed', function(assert) { | |
| if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) { | |
| assert.ok(true, 'Skipping: IE 6 does not support fixed-position elements properly'); | |
| return; | |
| } | |
| var fixedParent = document.getElementById('fixed-parent'); | |
| assert.strictEqual(bot.dom.getOverflowState(fixedParent), NONE); | |
| var childOfFixed = document.getElementById('child-of-fixed'); | |
| assert.strictEqual(bot.dom.getOverflowState(childOfFixed), HIDDEN); | |
| }); | |
| QUnit.test('elementHiddenByZeroSizedContainer', function(assert) { | |
| var elem = document.getElementById('hasZeroSizedContainer'); | |
| assert.strictEqual(bot.dom.getOverflowState(elem), HIDDEN); | |
| }); | |
| QUnit.test('elementWithHtmlElementFixed', function(assert) { | |
| document.documentElement.style.position = 'fixed'; | |
| var elem = document.getElementById('line1'); | |
| assert.strictEqual(bot.dom.getOverflowState(elem), NONE); | |
| }); | |
| </script> | |
| <style> | |
| #hidden-transformX { | |
| transform: translateX(-10000px); | |
| -webkit-transform: translateX(-10000px); | |
| -ms-transform: translateX(-10000px); | |
| -o-transform: translateX(-10000px); | |
| -moz-transform: translateX(-10000px); | |
| } | |
| #hidden-transformY { | |
| transform: translateY(-10000px); | |
| -webkit-transform: translateY(-10000px); | |
| -ms-transform: translateY(-10000px); | |
| -o-transform: translateY(-10000px); | |
| -moz-transform: translateY(-10000px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="qunit"></div> | |
| <div id="qunit-fixture"></div> | |
| <div style="overflow:scroll; height:40px"> | |
| <div>scroll down to see element</div> | |
| <br><br><br><br><br><br><br><br><br> | |
| <div id="overflowScroll">in overflow scroll</div> | |
| </div> | |
| <div style="overflow:auto; height:40px"> | |
| <div>scroll down to see element</div> | |
| <br><br><br><br><br><br><br><br><br> | |
| <div id="overflowAuto">in overflow scroll</div> | |
| </div> | |
| <div style="overflow:hidden; height:40px;"> | |
| <div style="overflow:scroll; height:40px"> | |
| <div>scroll down to see element</div> | |
| <br><br><br><br><br><br><br><br><br> | |
| <div id="overflowScrollInHiddenIsScroll">in overflow scroll</div> | |
| </div> | |
| </div> | |
| <div style="overflow:hidden; height:0px;"> | |
| <div style="overflow:scroll; height:40px"> | |
| <div>scroll down to see element</div> | |
| <br><br><br><br><br><br><br><br><br> | |
| <div id="overflowScrollInHiddenIsHidden">in overflow hidden</div> | |
| </div> | |
| </div> | |
| <iframe src="testdata/overflow_hidden.html" id="iframe" width="75%" height="100"></iframe> | |
| <div id="bug5140-1" style="overflow:hidden; height:0; width:0;"> | |
| <div id="bug5140-1-child" style="height:25px; width:25px;">.</div> | |
| </div> | |
| <div id="bug5140-2" style="overflow:hidden; height:50px; width:50px;"> | |
| <div id="bug5140-2-child" style="height:25px; width:25px; margin:50px; background-color:red;">.</div> | |
| </div> | |
| <div id="bug5140-3" style="overflow:hidden; height:50px; width:50px;"> | |
| <div id="bug5140-3-child" style="height:25px; width:25px; margin:49px; background-color:red;">.</div> | |
| </div> | |
| <div id="bug5140-4" style="overflow:hidden; height:50px; width:50px;"> | |
| <div id="bug5140-4-child" style="overflow:hidden; height:25px; width:25px; margin:50px; background-color:red;"> | |
| <div id="bug5140-4-grandchild">.</div> | |
| </div> | |
| </div> | |
| <div style="overflow:hidden;height:0;width:0;"> | |
| <div id="floatingInsideBlockParent" style="float:left">floating inside block parent</div> | |
| </div> | |
| <span style="overflow:hidden;height:0;width:0;"> | |
| <div id="floatingInsideInlineParent" style="float:left">floating inside inline parent</div> | |
| </span> | |
| <div id="negativePositionInOverflowVisible" style="position:fixed; left:400px; top:110px"></div> | |
| <div id="negativePositionNotInOverflowVisible" style="position:fixed; left:400px; top:150px"></div> | |
| <ul style="overflow:auto; height:50px; width:80px; position:fixed; left:200px; top:200px"> | |
| <li id="line1">line1</li> | |
| <li id="line2">line2</li> | |
| <li id="line3">line3</li> | |
| <li id="line4">line4</li> | |
| <li id="line5">line5</li> | |
| </ul> | |
| <div id="hidden-transformX">will never be shown</div> | |
| <div id="hidden-transformY">will never be shown</div> | |
| <div style="position:fixed; left:0px; top:200px; width:100px; height:100px; overflow:hidden"> | |
| <div id="halfHidden" style="position:absolute; left:50px; top:50px; width:100px; height:100px"> | |
| half-visible, half-hidden | |
| </div> | |
| </div> | |
| <div id="fixed-offscreen" style="position:fixed; left:10000px;top:0px">fixed offscreen</div> | |
| <div id="fixed-parent" style="position:fixed; left:10px;top:10px"> | |
| <div id="child-of-fixed" style="position:absolute; left:10000px;top:0px">fixed offscreen</div> | |
| </div> | |
| <!-- div deliberately only has zero width but hidden in y dimension --> | |
| <div style="height:25px;width:0px;position:absolute;overflow-y:hidden;"> | |
| <div id="hasZeroSizedContainer" style="position:absolute;height:100px;width:100px;"> | |
| xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | |
| </div> | |
| </div> | |
| </body> | |
| </html> |