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

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
   <title>shown_test.html</title>
   <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.testing.ExpectedFailures');
     goog.require('goog.testing.jsunit');
     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;
     var expectedFailures;

     function setUp() {
       expectedFailures = new goog.testing.ExpectedFailures();
     }


     function tearDown() {
       expectedFailures.handleTearDown();
       goog.style.setStyle(document.body, 'overflow', 'auto');
     }

     function testMustBeGivenAnElement() {
       assertThrows(function() {
         isShown(undefined);
       });
     }

     function testCanDetermineIfAnElementIsShownOrNot() {
       assertTrue(isShown(findElement({id: 'displayed'})));
       assertFalse(isShown(findElement({id: 'none'})));
       assertFalse(isShown(findElement({id: 'suppressedParagraph'})));
       assertFalse(isShown(findElement({id: 'hidden'})));
     }

     function testIsShownTakesIntoAccountParentDisplay() {
       var parent = findElement({id: 'hiddenparent'});
       assertFalse('parent is explicitly set to display:none',
           isShown(parent));

       var childDiv = findElement({id: 'hiddenchild'});
       var hiddenLink = findElement({id: 'hiddenlink'});

       assertFalse(isShown(childDiv));
       assertFalse(isShown(hiddenLink));
     }


     function testIsShownTakesIntoAccountParentVisibility() {
       var parent = findElement({id: 'hiddenFormFields'});
       var child = findElement({id: 'untogglable'});

       expectedFailures.expectFailureFor(
           goog.userAgent.IE && goog.userAgent.platform.VISTA,
           'Vista fails this test, have not figured it out yet...');
       // TODO(jleyba): Figure it out
       expectedFailures.run(function() {
         assertFalse(isShown(parent));
         assertFalse(isShown(child));
       });
     }

     function testCountElementsAsVisibleIfStylePropertyHasBeenSet() {
       var shown = findElement({id: 'visibleSubElement'});
       assertTrue(isShown(shown));
     }

     function testHiddenInputElementsAreNeverVisible() {
       var hidden = findElement({name: 'hidden'});
       assertFalse(isShown(hidden));
     }


     function testElementWithZeroHeightIsNotConsideredDisplayed() {
       // IE6 doesn't render the element correctly for the test to work.
       if (goog.userAgent.IE && bot.userAgent.isEngineVersion(6)) {
         return;
       }
       var zeroHeight = findElement({id: 'zeroheight'});
       assertFalse(isShown(zeroHeight));
     }


     function testElementWithZeroWidthIsNotConsideredDisplayed() {
       // IE6 doesn't render the element correctly for the test to work.
       if (goog.userAgent.IE && bot.userAgent.isEngineVersion(6)) {
         return;
       }

       var zeroWidth = findElement({id: 'zerowidth'});
       assertFalse(isShown(zeroWidth));
     }

     function testElementWithOnlyWhitespaceReturnsConsistentResults() {
       var span = findElement({id: 'onlyWhitespace'});
       // Make sure we report the same result every time. Both will be true in
       // most browsers, except IE7 and earlier, where they will both be false.
       assertEquals(isShown(span), isShown(span));
     }

     function testCorrectlyDeterminesVisibilityViaDisplayStyle() {
       var span = findElement({id: 'visibleSpan'});
       assertFalse(isShown(span));
     }


     function testThrowsErrorIfPassedATextNode() {
       var textNode = findElement({id: 'displayed'}).firstChild;
       var err = assertThrows('Argument to isShown must be of type Element',
           function() {
             isShown(textNode);
           });
       assertEquals('Argument to isShown must be of type Element', err.message);
     }


     function testOptionShownWhenEnclosingSelectShown() {
       var option = findElement({id: 'shownOption'});
       assertTrue(isShown(option));
     }


     function testOptionNotShownWhenEnclosingSelectNotShown() {
       var option = findElement({id: 'hiddenOption'});
       assertFalse(isShown(option));
     }


     function testOrphanOptionIsNotShown() {
       var option = findElement({id: 'orphanOption'});
       // In some browsers, an orphan option is not rendered at all.
       assertFalse(!!option && isShown(option));
     }

     function testMapShownWhenImageShown() {
       var map = findElement({id: 'shownMap'});
       assertTrue(isShown(map));
     }

     function testMapNotShownWhenImageNotShown() {
       var map = findElement({id: 'hiddenImageMap'});
       assertFalse(isShown(map));
     }

     function testMapNotShownWhenNoImage() {
       var map = findElement({id: 'noImageMap'});
       assertFalse(isShown(map));
     }

     function testMapNotShownWhenNoName() {
       var map = findElement({id: 'noNameMap'});
       assertFalse(isShown(map));
     }

     function testAreaShownWhenEnclosingMapShown() {
       var area = findElement({id: 'shownArea'});
       assertTrue(isShown(area));
     }

     function testAreaNotShownWhenEnclosingMapNotShown() {
       var area = findElement({id: 'hiddenArea'});
       assertFalse(isShown(area));
     }

     function testOrphanAreaIsNotShown() {
       var area = findElement({id: 'orphanArea'});
       // In some browsers, an orphan area is not rendered at all.
       assertFalse(!!area && isShown(area));
     }

     function testElementWithNestedBlockLevelElementShown() {
       var containsNestedBlock = findElement({id: 'containsNestedBlock'});
       assertTrue(isShown(containsNestedBlock));
     }

     function testZeroOpacityMakesElementNotShown() {
       var transparent = findElement({id: 'transparent'});
       assertFalse(isShown(transparent));
     }

     function testTitleIsNotShown() {
       var title = findElement({tagName: 'title'});
       assertFalse(isShown(title));
     }

     function testTitleOfFrameWindowNotShown() {
       var iframe = findElement({id: 'iframe'});
       var iframeDoc = goog.dom.getFrameContentDocument(iframe);
       var iframeTitle = findElement({tagName: 'title'}, iframeDoc);
       assertFalse(isShown(iframeTitle));
     }

     function testTwoEmptyDivsAreZeroSizedAndNotShown() {
       var element = goog.dom.createDom('div', null,
           goog.dom.createDom('div'));
       document.body.appendChild(element);
       var size = bot.dom.getElementSize(element);
       // Width will be equivalent of width:100%
       assertEquals('Should have 0 height', 0, size.height);
       assertFalse(isShown(element));
     }

     function testZeroSizedDivIsShownIfDescendantHasSize() {
        if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) {
        return;
       }
       var element = goog.dom.createDom('div', {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.getElementSize(element);
       assertEquals('Should have 0 width', 0, size.width);
       assertEquals('Should have 0 height', 0, size.height);
       assertTrue(isShown(element));
     }

     function testZeroSizedAbsolutePositionedBlockElemetnsAreShownIfDescendantHasSize() {
       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 size = bot.dom.getElementSize(root);
       assertEquals('Should have 0 width', 0, size.width);
       assertEquals('Should have 0 height', 0, size.height);
       assertTrue('Should still be considered shown', isShown(root));
     }

     /** @see http://code.google.com/p/selenium/issues/detail?id=2922 */
     function testOptionsInInvisibleSelectAreStillShown() {
       var select = goog.dom.$('invisiSelect');
       assertEquals(0, bot.dom.getOpacity(select));
       assertFalse(bot.dom.isShown(select));
       assertTrue('Select should be visible when ignoring opacity',
           bot.dom.isShown(select, true));
       assertTrue(bot.dom.isShown(select.firstChild));
     }

     /** @see http://code.google.com/p/selenium/issues/detail?id=1941 */
     function testMapsForInvisibleImagesAreShownWhenIgnoringOpacity() {
       var img = goog.dom.$('invisiImg');
       assertEquals(0, bot.dom.getOpacity(img));
       assertFalse(bot.dom.isShown(img));
       assertTrue(bot.dom.isShown(img, true));

       var map = goog.dom.$('invisiShownMap');
       assertFalse(bot.dom.isShown(map));
       assertTrue(bot.dom.isShown(map, true));

       var area = goog.dom.$('invisiShownArea');
       assertFalse(bot.dom.isShown(area));
       assertTrue(bot.dom.isShown(area, true));
      }

     function testNoscriptElementIsNotShown() {
       var noscript = findElement({id: 'noscript'});
       assertFalse(isShown(noscript));
     }

     function testThatItemsHiddenWithOverflowHiddenAreFalse() {
       if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) {
        return;
       }
       var target = findElement({id: 'target'});
       assertFalse(isShown(target));
     }

     function testThatItemsAreConsideredInvisbleIfAbsolutePositionIsNotInCascade() {
       var target = findElement({id: 'iHaveAbsolutePosition'});
       assertFalse(isShown(target));
     }

     function testParentNodeVisibleWhenAllChildrenAreAbsolutelyPositionedAndOverflowIsHidden() {
       goog.style.setStyle(document.body, 'overflow', 'hidden');
       var target = findElement({id: 'suggest'});
       var shown = isShown(target);
       assertTrue(shown);
     }

     function testElementsAreVisibleWhenBodyIsOverflowHiddenButHtmlMayNotBe() {
       var iframe = findElement({id: 'body-overflow'});
       var iframeDoc = goog.dom.getFrameContentDocument(iframe);
       var html = findElement({tagName: 'html'}, iframeDoc);
       var alwaysSeen = findElement({id: 'always_seen'}, iframeDoc);
       var sometimesSeen = findElement({id: 'sometimes_seen'}, iframeDoc);

       var possibilities = [
         ['auto', true],
         ['scroll', true],
         ['', false],
         ['visible', false]
       ];

       goog.array.forEach(possibilities, function(possibility) {
           html.style.overflow = possibility[0];
           assertTrue(isShown(alwaysSeen));
           assertEquals(possibility[1], isShown(sometimesSeen));
       });
     }

     function testElementWithTransformIsReallyHidden() {
       if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) {
        return;
       }
       var hiddenTransformY = findElement({id: 'hidden-transformY'});
       assertFalse(isShown(hiddenTransformY));
       var hiddenTransformX = findElement({id: 'hidden-transformX'});
       assertFalse(isShown(hiddenTransformX))
     }

     function testElementsParentWithTransformIsReallyHidden() {
       if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) {
        return;
       }
       var hiddenTransformY = findElement({id: 'child-of-hidden-transformY'});
       assertFalse(isShown(hiddenTransformY));
       var hiddenTransformX = findElement({id: 'child-of-hidden-transformX'});
       assertFalse(isShown(hiddenTransformX))
     }

     function testElementWithZeroTransformAreSeenAsVisible() {
       if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) {
        return;
       }
       var zeroTransform = findElement({id: "zero-transform"});
       assertTrue(isShown(zeroTransform));
     }

     function testElementWithNegativePercentTransformAreVisible() {
       if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) {
        return;
       }
       var negativePercentage = findElement({id: "negative-percentage-transform"});
       assertTrue(isShown(negativePercentage));
     }
     function testElementWithNegativePercentTransformAreHidden() {
       if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) {
        return;
       }
       var negativePercentage = findElement({id: "negative-percentage-transform"});
       assertTrue(isShown(negativePercentage));
     }
   </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;
         }

         #hidden-transformY {
           transform: translateY(-10000px);
           -webkit-transform: translateY(-10000px);
           -ms-transform: translateY(-10000px);
           -o-transform: translateY(-10000px);
           -moz-transform: translateY(-10000px);
         }
         #hidden-transformX {
           transform: translateX(-10000px);
           -webkit-transform: translateX(-10000px);
           -ms-transform: translateX(-10000px);
           -o-transform: translateX(-10000px);
           -moz-transform: translateX(-10000px);
         }
         #zero-transform {
           transform: translateX(0px);
           -webkit-transform: translateX(0px);
           -ms-transform: translateX(0px);
           -o-transform: translateX(0px);
           -moz-transform: translateX(0px);
           transform: translateY(0px);
           -webkit-transform: translateY(0px);
           -ms-transform: translateY(0px);
           -o-transform: translateY(0px);
           -moz-transform: translateY(0px);
         }
         #negative-percentage-transform {
           transform: translateY(-75%);
           -webkit-transform: translateY(-75%);
           -ms-transform: translateY(-75%);
           -o-transform: translateY(-75%);
           -moz-transform: translateY(-75%);
         }
         #negative-percentage-transform {
           transform: translateY(-75%);
           -webkit-transform: translateY(-75%);
           -ms-transform: translateY(-75%);
           -o-transform: translateY(-75%);
           -moz-transform: translateY(-75%);
         }
   </style>
 </head>
 <body>
 <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>
 <!-- This iframe is deliberately diminutive -->
 <iframe src="testdata/overflow_hidden.html" id="body-overflow" width="75%" height="100px"></iframe>
 </div>
 <div id='hidden-transformY'>will never be shown<div id='child-of-hidden-transformY'>I am a hidden child</div></div>
 <div id='hidden-transformX'>will never be shown<div id='child-of-hidden-transformX'>I am a hidden child</div></div>
 <div id='zero-transform'>I have a zero transform</div>
 <div id='negative-percentage-transform'>I have a negative percentage transform</div>
 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title>shown_test.html</title>
	<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.testing.ExpectedFailures');
	goog.require('goog.testing.jsunit');
	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;
	var expectedFailures;

	function setUp() {
	expectedFailures = new goog.testing.ExpectedFailures();
	}


	function tearDown() {
	expectedFailures.handleTearDown();
	goog.style.setStyle(document.body, 'overflow', 'auto');
	}

	function testMustBeGivenAnElement() {
	assertThrows(function() {
	isShown(undefined);
	});
	}

	function testCanDetermineIfAnElementIsShownOrNot() {
	assertTrue(isShown(findElement({id: 'displayed'})));
	assertFalse(isShown(findElement({id: 'none'})));
	assertFalse(isShown(findElement({id: 'suppressedParagraph'})));
	assertFalse(isShown(findElement({id: 'hidden'})));
	}

	function testIsShownTakesIntoAccountParentDisplay() {
	var parent = findElement({id: 'hiddenparent'});
	assertFalse('parent is explicitly set to display:none',
	isShown(parent));

	var childDiv = findElement({id: 'hiddenchild'});
	var hiddenLink = findElement({id: 'hiddenlink'});

	assertFalse(isShown(childDiv));
	assertFalse(isShown(hiddenLink));
	}


	function testIsShownTakesIntoAccountParentVisibility() {
	var parent = findElement({id: 'hiddenFormFields'});
	var child = findElement({id: 'untogglable'});

	expectedFailures.expectFailureFor(
	goog.userAgent.IE && goog.userAgent.platform.VISTA,
	'Vista fails this test, have not figured it out yet...');
	// TODO(jleyba): Figure it out
	expectedFailures.run(function() {
	assertFalse(isShown(parent));
	assertFalse(isShown(child));
	});
	}

	function testCountElementsAsVisibleIfStylePropertyHasBeenSet() {
	var shown = findElement({id: 'visibleSubElement'});
	assertTrue(isShown(shown));
	}

	function testHiddenInputElementsAreNeverVisible() {
	var hidden = findElement({name: 'hidden'});
	assertFalse(isShown(hidden));
	}


	function testElementWithZeroHeightIsNotConsideredDisplayed() {
	// IE6 doesn't render the element correctly for the test to work.
	if (goog.userAgent.IE && bot.userAgent.isEngineVersion(6)) {
	return;
	}
	var zeroHeight = findElement({id: 'zeroheight'});
	assertFalse(isShown(zeroHeight));
	}


	function testElementWithZeroWidthIsNotConsideredDisplayed() {
	// IE6 doesn't render the element correctly for the test to work.
	if (goog.userAgent.IE && bot.userAgent.isEngineVersion(6)) {
	return;
	}

	var zeroWidth = findElement({id: 'zerowidth'});
	assertFalse(isShown(zeroWidth));
	}

	function testElementWithOnlyWhitespaceReturnsConsistentResults() {
	var span = findElement({id: 'onlyWhitespace'});
	// Make sure we report the same result every time. Both will be true in
	// most browsers, except IE7 and earlier, where they will both be false.
	assertEquals(isShown(span), isShown(span));
	}

	function testCorrectlyDeterminesVisibilityViaDisplayStyle() {
	var span = findElement({id: 'visibleSpan'});
	assertFalse(isShown(span));
	}


	function testThrowsErrorIfPassedATextNode() {
	var textNode = findElement({id: 'displayed'}).firstChild;
	var err = assertThrows('Argument to isShown must be of type Element',
	function() {
	isShown(textNode);
	});
	assertEquals('Argument to isShown must be of type Element', err.message);
	}


	function testOptionShownWhenEnclosingSelectShown() {
	var option = findElement({id: 'shownOption'});
	assertTrue(isShown(option));
	}


	function testOptionNotShownWhenEnclosingSelectNotShown() {
	var option = findElement({id: 'hiddenOption'});
	assertFalse(isShown(option));
	}


	function testOrphanOptionIsNotShown() {
	var option = findElement({id: 'orphanOption'});
	// In some browsers, an orphan option is not rendered at all.
	assertFalse(!!option && isShown(option));
	}

	function testMapShownWhenImageShown() {
	var map = findElement({id: 'shownMap'});
	assertTrue(isShown(map));
	}

	function testMapNotShownWhenImageNotShown() {
	var map = findElement({id: 'hiddenImageMap'});
	assertFalse(isShown(map));
	}

	function testMapNotShownWhenNoImage() {
	var map = findElement({id: 'noImageMap'});
	assertFalse(isShown(map));
	}

	function testMapNotShownWhenNoName() {
	var map = findElement({id: 'noNameMap'});
	assertFalse(isShown(map));
	}

	function testAreaShownWhenEnclosingMapShown() {
	var area = findElement({id: 'shownArea'});
	assertTrue(isShown(area));
	}

	function testAreaNotShownWhenEnclosingMapNotShown() {
	var area = findElement({id: 'hiddenArea'});
	assertFalse(isShown(area));
	}

	function testOrphanAreaIsNotShown() {
	var area = findElement({id: 'orphanArea'});
	// In some browsers, an orphan area is not rendered at all.
	assertFalse(!!area && isShown(area));
	}

	function testElementWithNestedBlockLevelElementShown() {
	var containsNestedBlock = findElement({id: 'containsNestedBlock'});
	assertTrue(isShown(containsNestedBlock));
	}

	function testZeroOpacityMakesElementNotShown() {
	var transparent = findElement({id: 'transparent'});
	assertFalse(isShown(transparent));
	}

	function testTitleIsNotShown() {
	var title = findElement({tagName: 'title'});
	assertFalse(isShown(title));
	}

	function testTitleOfFrameWindowNotShown() {
	var iframe = findElement({id: 'iframe'});
	var iframeDoc = goog.dom.getFrameContentDocument(iframe);
	var iframeTitle = findElement({tagName: 'title'}, iframeDoc);
	assertFalse(isShown(iframeTitle));
	}

	function testTwoEmptyDivsAreZeroSizedAndNotShown() {
	var element = goog.dom.createDom('div', null,
	goog.dom.createDom('div'));
	document.body.appendChild(element);
	var size = bot.dom.getElementSize(element);
	// Width will be equivalent of width:100%
	assertEquals('Should have 0 height', 0, size.height);
	assertFalse(isShown(element));
	}

	function testZeroSizedDivIsShownIfDescendantHasSize() {
	if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) {
	return;
	}
	var element = goog.dom.createDom('div', {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.getElementSize(element);
	assertEquals('Should have 0 width', 0, size.width);
	assertEquals('Should have 0 height', 0, size.height);
	assertTrue(isShown(element));
	}

	function testZeroSizedAbsolutePositionedBlockElemetnsAreShownIfDescendantHasSize() {
	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 size = bot.dom.getElementSize(root);
	assertEquals('Should have 0 width', 0, size.width);
	assertEquals('Should have 0 height', 0, size.height);
	assertTrue('Should still be considered shown', isShown(root));
	}

	/** @see http://code.google.com/p/selenium/issues/detail?id=2922 */
	function testOptionsInInvisibleSelectAreStillShown() {
	var select = goog.dom.$('invisiSelect');
	assertEquals(0, bot.dom.getOpacity(select));
	assertFalse(bot.dom.isShown(select));
	assertTrue('Select should be visible when ignoring opacity',
	bot.dom.isShown(select, true));
	assertTrue(bot.dom.isShown(select.firstChild));
	}

	/** @see http://code.google.com/p/selenium/issues/detail?id=1941 */
	function testMapsForInvisibleImagesAreShownWhenIgnoringOpacity() {
	var img = goog.dom.$('invisiImg');
	assertEquals(0, bot.dom.getOpacity(img));
	assertFalse(bot.dom.isShown(img));
	assertTrue(bot.dom.isShown(img, true));

	var map = goog.dom.$('invisiShownMap');
	assertFalse(bot.dom.isShown(map));
	assertTrue(bot.dom.isShown(map, true));

	var area = goog.dom.$('invisiShownArea');
	assertFalse(bot.dom.isShown(area));
	assertTrue(bot.dom.isShown(area, true));
	}

	function testNoscriptElementIsNotShown() {
	var noscript = findElement({id: 'noscript'});
	assertFalse(isShown(noscript));
	}

	function testThatItemsHiddenWithOverflowHiddenAreFalse() {
	if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) {
	return;
	}
	var target = findElement({id: 'target'});
	assertFalse(isShown(target));
	}

	function testThatItemsAreConsideredInvisbleIfAbsolutePositionIsNotInCascade() {
	var target = findElement({id: 'iHaveAbsolutePosition'});
	assertFalse(isShown(target));
	}

	function testParentNodeVisibleWhenAllChildrenAreAbsolutelyPositionedAndOverflowIsHidden() {
	goog.style.setStyle(document.body, 'overflow', 'hidden');
	var target = findElement({id: 'suggest'});
	var shown = isShown(target);
	assertTrue(shown);
	}

	function testElementsAreVisibleWhenBodyIsOverflowHiddenButHtmlMayNotBe() {
	var iframe = findElement({id: 'body-overflow'});
	var iframeDoc = goog.dom.getFrameContentDocument(iframe);
	var html = findElement({tagName: 'html'}, iframeDoc);
	var alwaysSeen = findElement({id: 'always_seen'}, iframeDoc);
	var sometimesSeen = findElement({id: 'sometimes_seen'}, iframeDoc);

	var possibilities = [
	['auto', true],
	['scroll', true],
	['', false],
	['visible', false]
	];

	goog.array.forEach(possibilities, function(possibility) {
	html.style.overflow = possibility[0];
	assertTrue(isShown(alwaysSeen));
	assertEquals(possibility[1], isShown(sometimesSeen));
	});
	}

	function testElementWithTransformIsReallyHidden() {
	if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) {
	return;
	}
	var hiddenTransformY = findElement({id: 'hidden-transformY'});
	assertFalse(isShown(hiddenTransformY));
	var hiddenTransformX = findElement({id: 'hidden-transformX'});
	assertFalse(isShown(hiddenTransformX))
	}

	function testElementsParentWithTransformIsReallyHidden() {
	if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) {
	return;
	}
	var hiddenTransformY = findElement({id: 'child-of-hidden-transformY'});
	assertFalse(isShown(hiddenTransformY));
	var hiddenTransformX = findElement({id: 'child-of-hidden-transformX'});
	assertFalse(isShown(hiddenTransformX))
	}

	function testElementWithZeroTransformAreSeenAsVisible() {
	if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) {
	return;
	}
	var zeroTransform = findElement({id: "zero-transform"});
	assertTrue(isShown(zeroTransform));
	}

	function testElementWithNegativePercentTransformAreVisible() {
	if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) {
	return;
	}
	var negativePercentage = findElement({id: "negative-percentage-transform"});
	assertTrue(isShown(negativePercentage));
	}
	function testElementWithNegativePercentTransformAreHidden() {
	if (goog.userAgent.IE && !bot.userAgent.isProductVersion(9)) {
	return;
	}
	var negativePercentage = findElement({id: "negative-percentage-transform"});
	assertTrue(isShown(negativePercentage));
	}
	</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;
	}

	#hidden-transformY {
	transform: translateY(-10000px);
	-webkit-transform: translateY(-10000px);
	-ms-transform: translateY(-10000px);
	-o-transform: translateY(-10000px);
	-moz-transform: translateY(-10000px);
	}
	#hidden-transformX {
	transform: translateX(-10000px);
	-webkit-transform: translateX(-10000px);
	-ms-transform: translateX(-10000px);
	-o-transform: translateX(-10000px);
	-moz-transform: translateX(-10000px);
	}
	#zero-transform {
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	-moz-transform: translateY(0px);
	}
	#negative-percentage-transform {
	transform: translateY(-75%);
	-webkit-transform: translateY(-75%);
	-ms-transform: translateY(-75%);
	-o-transform: translateY(-75%);
	-moz-transform: translateY(-75%);
	}
	#negative-percentage-transform {
	transform: translateY(-75%);
	-webkit-transform: translateY(-75%);
	-ms-transform: translateY(-75%);
	-o-transform: translateY(-75%);
	-moz-transform: translateY(-75%);
	}
	</style>
	</head>
	<body>
	<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>
	<!-- This iframe is deliberately diminutive -->
	<iframe src="testdata/overflow_hidden.html" id="body-overflow" width="75%" height="100px"></iframe>
	</div>
	<div id='hidden-transformY'>will never be shown<div id='child-of-hidden-transformY'>I am a hidden child</div></div>
	<div id='hidden-transformX'>will never be shown<div id='child-of-hidden-transformX'>I am a hidden child</div></div>
	<div id='zero-transform'>I have a zero transform</div>
	<div id='negative-percentage-transform'>I have a negative percentage transform</div>
	</body>
	</html>