test_visibility.html (2106B)
1 <html> 2 <head> 3 <title>visibility state testing</title> 4 5 <link rel="stylesheet" type="text/css" 6 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 10 <script type="application/javascript" 11 src="../common.js"></script> 12 <script type="application/javascript" 13 src="../role.js"></script> 14 <script type="application/javascript" 15 src="../states.js"></script> 16 17 <script type="application/javascript"> 18 // Tests 19 20 function doTests() { 21 testStates("div", 0, 0, STATE_INVISIBLE | STATE_OFFSCREEN); 22 testStates("div_off", STATE_OFFSCREEN, 0, STATE_INVISIBLE); 23 testStates("div_transformed", STATE_OFFSCREEN, 0, STATE_INVISIBLE); 24 testStates("div_abschild", 0, 0, STATE_INVISIBLE | STATE_OFFSCREEN); 25 testStates("ul", STATE_OFFSCREEN, 0, STATE_INVISIBLE); 26 27 SimpleTest.finish(); 28 } 29 30 SimpleTest.waitForExplicitFinish(); 31 addA11yLoadEvent(doTests); 32 </script> 33 34 </head> 35 36 <body> 37 38 <a target="_blank" 39 href="https://bugzilla.mozilla.org/show_bug.cgi?id=591363" 40 title="(in)visible state is not always correct?"> 41 Mozilla Bug 591363 42 </a> 43 <a target="_blank" 44 href="https://bugzilla.mozilla.org/show_bug.cgi?id=768786" 45 title="Offscreen state is not exposed under certain circumstances"> 46 Mozilla Bug 768786 47 </a> 48 <p id="display"></p> 49 <div id="content" style="display: none"></div> 50 <pre id="test"> 51 </pre> 52 53 <div id="outer_div"> 54 55 <!-- trivial cases --> 56 <div id="div">div</div> 57 <div id="div_off" style="position: absolute; left:-999px; top:-999px"> 58 offscreen! 59 </div> 60 <div id="div_transformed" style="transform: translate(-999px, -999px);"> 61 transformed! 62 </div> 63 64 <!-- edge case: no rect but has out of flow child --> 65 <div id="div_abschild"> 66 <p style="position: absolute; left: 120px; top:120px;">absolute</p> 67 </div> 68 69 <ul id="ul" style="display: contents;"> 70 <li>Supermarket 1</li> 71 <li>Supermarket 2</li> 72 </ul> 73 </div> 74 </body> 75 </html>