| <!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> |
