| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>shown_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'); | |
| goog.require('bot.dom'); | |
| goog.require('bot.locators'); | |
| goog.require('bot.userAgent'); | |
| goog.require('goog.dom'); | |
| goog.require('goog.style'); | |
| goog.require('goog.userAgent'); | |
| goog.require('goog.userAgent.platform'); | |
| </script> | |
| <style> | |
| #box { | |
| border: 1px solid black; | |
| } | |
| #box ul { | |
| height: 250px; | |
| overflow: hidden; | |
| } | |
| #box ul>li { | |
| height: 50px; | |
| } | |
| #box ul>li>a { | |
| height: 26px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| var isShown = bot.dom.isShown; | |
| var findElement = bot.locators.findElement; | |
| QUnit.testDone(function() { | |
| goog.style.setStyle(document.body, 'display', 'block'); | |
| goog.style.setStyle(document.body, 'overflow', 'auto'); | |
| }); | |
| QUnit.test('must be given an element', function(assert) { | |
| assert.throws(function () { | |
| isShown(undefined); | |
| }); | |
| }); | |
| QUnit.test('body shown', function(assert) { | |
| assert.ok(isShown(document.body)); | |
| }); | |
| QUnit.test('body always shown', function(assert) { | |
| goog.style.setStyle(document.body, 'display', 'none'); | |
| assert.ok(isShown(document.body), 'BODY element must *always* be shown'); | |
| }); | |
| QUnit.test('can determine if an element is shown or not', function(assert) { | |
| assert.ok(isShown(findElement({ id: 'displayed' }))); | |
| assert.notOk(isShown(findElement({ id: 'none' }))); | |
| assert.notOk(isShown(findElement({ id: 'suppressedParagraph' }))); | |
| assert.notOk(isShown(findElement({ id: 'hidden' }))); | |
| }); | |
| QUnit.test('is shown takes into account parent display', function(assert) { | |
| var parent = findElement({ id: 'hiddenparent' }); | |
| assert.notOk(isShown(parent), 'parent is explicitly set to display:none'); | |
| var childDiv = findElement({ id: 'hiddenchild' }); | |
| var hiddenLink = findElement({ id: 'hiddenlink' }); | |
| assert.notOk(isShown(childDiv)); | |
| assert.notOk(isShown(hiddenLink)); | |
| }); | |
| QUnit.test('is shown takes into account parent visibility', function(assert) { | |
| if (goog.userAgent.IE && goog.userAgent.platform.isVersion(6) && | |
| !goog.userAgent.platform.isVersion(6.1)) { | |
| assert.ok(true, 'Skipping: Vista fails this test'); | |
| return; | |
| } | |
| var parent = findElement({ id: 'hiddenFormFields' }); | |
| var child = findElement({ id: 'untogglable' }); | |
| assert.notOk(isShown(parent)); | |
| assert.notOk(isShown(child)); | |
| }); | |
| QUnit.test('count elements as visible if style property has been set', function(assert) { | |
| var shown = findElement({ id: 'visibleSubElement' }); | |
| assert.ok(isShown(shown)); | |
| }); | |
| QUnit.test('hidden input elements are never visible', function(assert) { | |
| var hidden = findElement({ name: 'hidden' }); | |
| assert.notOk(isShown(hidden)); | |
| }); | |
| QUnit.test('element with zero height is not considered displayed', function(assert) { | |
| if (goog.userAgent.IE && bot.userAgent.isEngineVersion(6)) { | |
| assert.ok(true, 'Skipping: IE6 doesn\'t render the element correctly'); | |
| return; | |
| } | |
| var zeroHeight = findElement({ id: 'zeroheight' }); | |
| assert.notOk(isShown(zeroHeight)); | |
| }); | |
| QUnit.test('element with zero width is not considered displayed', function(assert) { | |
| if (goog.userAgent.IE && bot.userAgent.isEngineVersion(6)) { | |
| assert.ok(true, 'Skipping: IE6 doesn\'t render the element correctly'); | |
| return; | |
| } | |
| var zeroWidth = findElement({ id: 'zerowidth' }); | |
| assert.notOk(isShown(zeroWidth)); | |
| }); | |
| QUnit.test('element with only whitespace returns consistent results', function(assert) { | |
| var span = findElement({ id: 'onlyWhitespace' }); | |
| assert.strictEqual(isShown(span), isShown(span)); | |
| }); | |
| QUnit.test('correctly determines visibility via display style', function(assert) { | |
| var span = findElement({ id: 'visibleSpan' }); | |
| assert.notOk(isShown(span)); | |
| }); | |
| QUnit.test('throws error if passed a text node', function(assert) { | |
| var textNode = findElement({ id: 'displayed' }).firstChild; | |
| var err = null; | |
| try { | |
| isShown(textNode); | |
| } catch (e) { | |
| err = e; | |
| } | |
| assert.ok(err !== null, 'Argument to isShown must be of type Element'); | |
| assert.strictEqual(err.message, 'Argument to isShown must be of type Element'); | |
| }); | |
| QUnit.test('option shown when enclosing select shown', function(assert) { | |
| var option = findElement({ id: 'shownOption' }); | |
| assert.ok(isShown(option)); | |
| }); | |
| QUnit.test('option not shown when enclosing select not shown', function(assert) { | |
| var option = findElement({ id: 'hiddenOption' }); | |
| assert.notOk(isShown(option)); | |
| }); | |
| QUnit.test('orphan option is not shown', function(assert) { | |
| var option = findElement({ id: 'orphanOption' }); | |
| assert.notOk(!!option && isShown(option)); | |
| }); | |
| QUnit.test('map shown when image shown', function(assert) { | |
| var map = findElement({ id: 'shownMap' }); | |
| assert.ok(isShown(map)); | |
| }); | |
| QUnit.test('map not shown when image not shown', function(assert) { | |
| var map = findElement({ id: 'hiddenImageMap' }); | |
| assert.notOk(isShown(map)); | |
| }); | |
| QUnit.test('map not shown when no image', function(assert) { | |
| var map = findElement({ id: 'noImageMap' }); | |
| assert.notOk(isShown(map)); | |
| }); | |
| QUnit.test('map not shown when no name', function(assert) { | |
| var map = findElement({ id: 'noNameMap' }); | |
| assert.notOk(isShown(map)); | |
| }); | |
| QUnit.test('area shown when enclosing map shown', function(assert) { | |
| var area = findElement({ id: 'shownArea' }); | |
| assert.ok(isShown(area)); | |
| }); | |
| QUnit.test('area not shown when enclosing map not shown', function(assert) { | |
| var area = findElement({ id: 'hiddenArea' }); | |
| assert.notOk(isShown(area)); | |
| }); | |
| QUnit.test('orphan area is not shown', function(assert) { | |
| var area = findElement({ id: 'orphanArea' }); | |
| assert.notOk(!!area && isShown(area)); | |
| }); | |
| QUnit.test('element with nested block level element shown', function(assert) { | |
| var containsNestedBlock = findElement({ id: 'containsNestedBlock' }); | |
| assert.ok(isShown(containsNestedBlock)); | |
| }); | |
| QUnit.test('zero opacity makes element not shown', function(assert) { | |
| var transparent = findElement({ id: 'transparent' }); | |
| assert.notOk(isShown(transparent)); | |
| }); | |
| QUnit.test('title is not shown', function(assert) { | |
| var title = findElement({ tagName: 'title' }); | |
| assert.notOk(isShown(title)); | |
| }); | |
| QUnit.test('title of frame window not shown', function(assert) { | |
| var iframe = findElement({ id: 'iframe' }); | |
| var iframeDoc = goog.dom.getFrameContentDocument(iframe); | |
| var iframeTitle = findElement({ tagName: 'title' }, iframeDoc); | |
| assert.notOk(isShown(iframeTitle)); | |
| }); | |
| QUnit.test('two empty divs are zero sized and not shown', function(assert) { | |
| var element = goog.dom.createDom('div', null, | |
| goog.dom.createDom('div')); | |
| document.body.appendChild(element); | |
| var size = bot.dom.getClientRect(element); | |
| assert.strictEqual(size.height, 0, 'Should have 0 height'); | |
| assert.notOk(isShown(element)); | |
| }); | |
| QUnit.test('zero sized div is shown if descendant has size', function(assert) { | |
| if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) { | |
| assert.ok(true, 'Skipping: not supported in this browser'); | |
| return; | |
| } | |
| var element = goog.dom.createDom('div', | |
| { id: 'ZeroSizedDiv', style: 'width:0;height:0' }, | |
| goog.dom.createDom('div', null, | |
| goog.dom.createDom('img', { | |
| src: 'testdata/map.png', | |
| height: '126', | |
| width: '364' | |
| }))); | |
| document.body.appendChild(element); | |
| var size = bot.dom.getClientRect(element); | |
| assert.strictEqual(size.width, 0, 'Should have 0 width'); | |
| assert.strictEqual(size.height, 0, 'Should have 0 height'); | |
| assert.ok(isShown(element)); | |
| }); | |
| QUnit.test('zero sized absolute positioned block elements are shown if descendant has size', function(assert) { | |
| var div = goog.partial(goog.dom.createDom, 'div'); | |
| function position(element, left, top, opt_zIndex) { | |
| element.style.position = 'absolute'; | |
| element.style.left = left; | |
| element.style.top = top; | |
| if (opt_zIndex) | |
| element.style.zIndex = opt_zIndex; | |
| return element; | |
| } | |
| function size(element, width, height) { | |
| element.style.width = width; | |
| element.style.height = height; | |
| return element; | |
| } | |
| var root = position(div(), 0, 0, 1), | |
| child = position(div(), 0, 0, 100), | |
| grandChild = position(div(), 0, 0), | |
| greatGrandChild = size(position(div(), 0, 0), '250px', '250px'); | |
| grandChild.appendChild(greatGrandChild); | |
| child.appendChild(grandChild); | |
| root.appendChild(child); | |
| document.body.appendChild(root); | |
| var rectSize = bot.dom.getClientRect(root); | |
| assert.strictEqual(rectSize.width, 0, 'Should have 0 width'); | |
| assert.strictEqual(rectSize.height, 0, 'Should have 0 height'); | |
| assert.ok(isShown(root), 'Should still be considered shown'); | |
| }); | |
| QUnit.test('options in invisible select are still shown', function(assert) { | |
| var select = goog.dom.$('invisiSelect'); | |
| assert.strictEqual(bot.dom.getOpacity(select), 0); | |
| assert.notOk(bot.dom.isShown(select)); | |
| assert.ok(bot.dom.isShown(select, true), 'Select should be visible when ignoring opacity'); | |
| assert.ok(bot.dom.isShown(select.firstElementChild)); | |
| }); | |
| QUnit.test('maps for invisible images are shown when ignoring opacity', function(assert) { | |
| var img = goog.dom.$('invisiImg'); | |
| assert.strictEqual(bot.dom.getOpacity(img), 0); | |
| assert.notOk(bot.dom.isShown(img)); | |
| assert.ok(bot.dom.isShown(img, true)); | |
| var map = goog.dom.$('invisiShownMap'); | |
| assert.notOk(bot.dom.isShown(map)); | |
| assert.ok(bot.dom.isShown(map, true)); | |
| var area = goog.dom.$('invisiShownArea'); | |
| assert.notOk(bot.dom.isShown(area)); | |
| assert.ok(bot.dom.isShown(area, true)); | |
| }); | |
| QUnit.test('noscript element is not shown', function(assert) { | |
| var noscript = findElement({ id: 'noscript' }); | |
| assert.notOk(isShown(noscript)); | |
| }); | |
| QUnit.test('that items hidden with overflow hidden are false', function(assert) { | |
| if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) { | |
| assert.ok(true, 'Skipping: not supported in this browser'); | |
| return; | |
| } | |
| var target = findElement({ id: 'target' }); | |
| assert.notOk(isShown(target)); | |
| }); | |
| QUnit.test('that items are considered invisible if absolute position is not in cascade', function(assert) { | |
| var target = findElement({ id: 'iHaveAbsolutePosition' }); | |
| assert.notOk(isShown(target)); | |
| }); | |
| QUnit.test('zero size elem with overflow hidden and text not shown', function(assert) { | |
| var target = findElement({ id: 'bug5022' }); | |
| assert.notOk(isShown(target)); | |
| }); | |
| QUnit.test('overflow hidden with fixed position child', function(assert) { | |
| var target = findElement({ id: 'overflowHiddenWithFixedPositionChild' }); | |
| var child = findElement({ id: 'fixedPositionChild' }); | |
| goog.dom.removeChildren(child); | |
| assert.notOk(isShown(target)); | |
| goog.dom.setTextContent(child, 'some content'); | |
| assert.ok(isShown(target)); | |
| }); | |
| QUnit.test('that element is shown with z index', function(assert) { | |
| assert.ok(isShown(findElement({ id: 'bug5109' }))); | |
| }); | |
| QUnit.test('negative positioned parent with position positioned child is shown', function(assert) { | |
| var target = findElement({ id: 'negativePositionWithPositivePositionChildren' }); | |
| assert.ok(isShown(target)); | |
| }); | |
| QUnit.test('can not see element with hidden attribute', function(assert) { | |
| if ((goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(11)) || | |
| bot.userAgent.ANDROID_PRE_GINGERBREAD) { | |
| assert.ok(true, 'Skipping: IE and Android Froyo do not understand hidden attribute'); | |
| return; | |
| } | |
| var elem = findElement({ id: 'html5hidden' }); | |
| assert.notOk(isShown(elem)); | |
| }); | |
| QUnit.test('table row default visibility', function(assert) { | |
| var elem = findElement({ id: 'visible-row' }); | |
| assert.ok(isShown(elem)); | |
| assert.ok(isShown(elem.firstElementChild)); | |
| }); | |
| QUnit.test('table row collapsed visibility', function(assert) { | |
| if (goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(8)) { | |
| assert.ok(true, 'Skipping: IE does not support visibility:collapsed until IE8'); | |
| return; | |
| } | |
| var elem = findElement({ id: 'collapsed-row' }); | |
| assert.notOk(isShown(elem)); | |
| assert.notOk(isShown(elem.firstElementChild)); | |
| }); | |
| QUnit.test('visible table row after collapsed row', function(assert) { | |
| var elem = findElement({ id: 'post-collapsed-row' }); | |
| assert.ok(isShown(elem)); | |
| assert.ok(isShown(elem.firstElementChild)); | |
| }); | |
| QUnit.test('display contents overflow ignored', function(assert) { | |
| assert.ok(isShown(findElement({ id: 'displayContentsInput' }))); | |
| }); | |
| QUnit.test('details summary visibility', function(assert) { | |
| var summary = findElement({ id: 'summary' }); | |
| assert.ok(isShown(summary)); | |
| }); | |
| QUnit.test('details non summary descendants visibility', function(assert) { | |
| var contents = findElement({ id: 'non-summary' }); | |
| assert.notOk(isShown(contents)); | |
| assert.notOk(isShown(contents.firstElementChild)); | |
| }); | |
| QUnit.test('content visible hidden', function(assert) { | |
| var content = findElement({ id: 'contentVisibility' }); | |
| assert.notOk(isShown(content)); | |
| assert.notOk(isShown(findElement({ id: 'b' }, content))); | |
| }); | |
| QUnit.test('nested text node', function(assert) { | |
| var content = findElement({ id: 'nestedTextNode' }); | |
| assert.notOk(isShown(content)); | |
| }); | |
| </script> | |
| <style type="text/css"> | |
| #nav { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| #nav li { | |
| float: left; | |
| position: relative; | |
| width: 10em; | |
| } | |
| #nav li ul { | |
| display: none; | |
| position: absolute; | |
| top: 1em; | |
| left: 0; | |
| } | |
| #nav li>ul { | |
| top: auto; | |
| left: auto; | |
| } | |
| #nav li:hover ul, | |
| #nav li.over ul { | |
| display: block; | |
| background: white; | |
| } | |
| #transparent { | |
| opacity: 0; | |
| /* non IE */ | |
| filter: alpha(opacity=0); | |
| /* IE 6+ */ | |
| } | |
| #zeroheight, | |
| #zerowidth { | |
| border: 0; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #zerowidth { | |
| width: 0; | |
| height: 70px; | |
| } | |
| #zeroheight { | |
| width: 70px; | |
| height: 0; | |
| } | |
| box-popup { | |
| border: 1px; | |
| min-width: 150px; | |
| } | |
| #box { | |
| border: 1px solid black; | |
| } | |
| #box ul { | |
| height: 250px; | |
| overflow: hidden; | |
| } | |
| #box ul>li { | |
| height: 50px; | |
| } | |
| #box ul>li>a { | |
| height: 26px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="qunit"></div> | |
| <div id="qunit-fixture"></div> | |
| <div style="left: 30px; top: 10px; visibility: visible; position: absolute; overflow: visible;" class="box-popup" | |
| id="suggest"> | |
| <p>Hello world. I like cheese.</p> | |
| </div> | |
| <div> | |
| <p id="displayed">Displayed</p> | |
| <p id="transparent">Transparent</p> | |
| <form action="#"><input type="hidden" name="hidden" /></form> | |
| <p id="none" style="display: none;">Display set to none</p> | |
| <p id="hidden" style="visibility: hidden;">Hidden</p> | |
| <div id="hiddenparent" style="height: 2em; display: none;"> | |
| <div id="hiddenchild"> | |
| <a href="#" id="hiddenlink">ok</a> | |
| </div> | |
| </div> | |
| <div id="hiddenFormFields" style="visibility: hidden;"> | |
| <span> | |
| <input id="unclickable" /> | |
| <input type="checkbox" id="untogglable" checked="checked" />Check box you can't see | |
| </span> | |
| </div> | |
| <div style="display:none"> | |
| <span id="visibleSpan" style="display:block">cheese puffs</span> | |
| </div> | |
| <p id="outer" style="visibility: hidden">A | |
| <b id="visibleSubElement" style="visibility: visible">sub-element that is | |
| explicitly visible</b> using CSS visibility=visible | |
| </p> | |
| <noscript id='noscript'>Noscript subelement that is not visible</noscript> | |
| </div> | |
| <img id="zeroheight" src="testdata/map.png"> | |
| <img id="zerowidth" src="testdata/map.png"> | |
| <p id="suppressedParagraph" style="display: none">A paragraph suppressed using CSS display=none</p> | |
| <select> | |
| <option id="shownOption" style="display:none;visibility:hidden;"> | |
| </select> | |
| <select style="display:none;"> | |
| <option id="hiddenOption"> | |
| </select> | |
| <option id="orphanOption"></option> | |
| <label>invisible select: | |
| <select id="invisiSelect" style="opacity:0; filter:alpha(opacity=0)"> | |
| <option>Test</option> | |
| </select> | |
| </label> | |
| <img usemap="#shownMap" src="testdata/map.png"> | |
| <map id="shownMap" name="shownMap"> | |
| <area id="shownArea" shape="rect" coords="0,0,1,1" href="#"> | |
| </map> | |
| <img usemap="#hiddenImageMap" src="testdata/map.png" style="visibility: hidden"> | |
| <map id="hiddenImageMap" name="hiddenImageMap"> | |
| <area id="hiddenArea" shape="rect" coords="0,0,1,1" href="#"> | |
| </map> | |
| <map id="noImageMap" name="noImageMap"></map> | |
| <map id="noNameMap"></map> | |
| <img id="invisiImg" usemap="#invisiShownMap" src="testdata/map.png" width="91" height="31" | |
| style="opacity:0; filter:alpha(opacity=0)"> | |
| <map id="invisiShownMap" name="invisiShownMap"> | |
| <area id="invisiShownArea" shape="rect" coords="0,0,1,1" href="#"> | |
| </map> | |
| <area id="orphanArea" shape="rect" coords="0,0,1,1" href="#"></area> | |
| <a id="containsNestedBlock" href="#"> | |
| <div style="display:block;">text</div> | |
| </a> | |
| <iframe id="iframe" src="testdata/iframe_page.html"></iframe> | |
| <span id="onlyWhitespace"> </span> | |
| <div id="box"> | |
| <ul id="list1"> | |
| <li><a>Item 1</a></li> | |
| <li><a>Item 2</a></li> | |
| <li><a>Item 3</a></li> | |
| <li><a>Item 4</a></li> | |
| <li><a>Item 5</a></li> | |
| <li><a>Item 6</a></li> | |
| <li><a>Item 7</a></li> | |
| <li id="target"><a>Item 8</a></li> | |
| </ul> | |
| </div> | |
| <div id="grandparent" style="display:none;width:10px;"> | |
| <div id="parent" style="position:absolute;right:10px;"> | |
| <div id="iHaveAbsolutePosition" style="display:block">I am over here</div> | |
| </div> | |
| </div> | |
| <div id="bug5022" style="overflow:hidden; height:0; width:0;"> | |
| This is a zero height/width div and overflow hidden | |
| </div> | |
| <div style="overflow:hidden; height:0; width:0;"> | |
| <div id="overflowHiddenWithFixedPositionChild"> | |
| This is a zero height/width div and overflow hidden | |
| <div id="fixedPositionChild" style="position:fixed"></div> | |
| </div> | |
| </div> | |
| <div style="position:relative; | |
| width:300px; | |
| height:300px; | |
| background-image:url(testdata/kitten1.jpg); | |
| background-position:center;"> | |
| <a id="bug5109" href="kitten2.jpg" style="display:block; | |
| position:relative; | |
| width:100px; | |
| height:100px; | |
| left:-60px; | |
| top:-66px; | |
| background-image:url(testdata/kitten2.jpg); | |
| background-position:center;"></a> | |
| </div> | |
| <div id="negativePositionWithPositivePositionChildren" style="position:absolute;left:-10px;top:-10px"> | |
| <div style="position:absolute;left:100px;top:100px"> | |
| positivePositionChildInNegativePositionParent | |
| </div> | |
| </div> | |
| <div id='html5hidden' hidden>This is not visible</div> | |
| <div style="display: contents; overflow-y: auto"> | |
| <input id="displayContentsInput" /> | |
| </div> | |
| <table> | |
| <tr id="visible-row"> | |
| <td>a</td> | |
| </tr> | |
| <tr id="collapsed-row" style="visibility:collapse"> | |
| <td>b</td> | |
| </tr> | |
| <tr id="post-collapsed-row"> | |
| <td>c</td> | |
| </tr> | |
| </table> | |
| <details> | |
| <summary id="summary">Some Summary</summary> | |
| <div id="non-summary"> | |
| <p>More text</p> | |
| </div> | |
| </details> | |
| <div id='contentVisibility' style='content-visibility: hidden'> | |
| A | |
| <div id='b'>B</div> | |
| </div> | |
| <div id='nestedTextNode' style='width: 0px; overflow: visible'> | |
| <div style="display: none;">text</div> | |
| </div> | |
| </body> | |
| </html> |