javascript/atoms/test/shown_test.html - external/github.com/SeleniumHQ/selenium - Git at Google

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