<
html>
<
head>
<
title>visibility state testing</
title>
<
link rel=
"stylesheet" type=
"text/css"
href=
"chrome://mochikit/content/tests/SimpleTest/test.css" />
<
script src=
"chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></
script>
<
script type=
"application/javascript"
src=
"../common.js"></
script>
<
script type=
"application/javascript"
src=
"../role.js"></
script>
<
script type=
"application/javascript"
src=
"../states.js"></
script>
<
script type=
"application/javascript">
// Tests
function doTests() {
testStates(
"div", 0, 0, STATE_INVISIBLE | STATE_OFFSCREEN);
testStates(
"div_off", STATE_OFFSCREEN, 0, STATE_INVISIBLE);
testStates(
"div_transformed", STATE_OFFSCREEN, 0, STATE_INVISIBLE);
testStates(
"div_abschild", 0, 0, STATE_INVISIBLE | STATE_OFFSCREEN);
testStates(
"ul", STATE_OFFSCREEN, 0, STATE_INVISIBLE);
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTests);
</
script>
</
head>
<
body>
<a target=
"_blank"
href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=591363"
title=
"(in)visible state is not always correct?">
Mozilla Bug 591363
</a>
<a target=
"_blank"
href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=768786"
title=
"Offscreen state is not exposed under certain circumstances">
Mozilla Bug 768786
</a>
<p id=
"display"></p>
<
div id=
"content" style=
"display: none"></
div>
<
pre id=
"test">
</
pre>
<
div id=
"outer_div">
<!-- trivial cases -->
<
div id=
"div">
div</
div>
<
div id=
"div_off" style=
"position: absolute; left:-999px; top:-999px">
offscreen!
</
div>
<
div id=
"div_transformed" style=
"transform: translate(-999px, -999px);">
transformed!
</
div>
<!-- edge case: no rect but has out of flow child -->
<
div id=
"div_abschild">
<p
style=
"position: absolute; left: 120px; top:120px;">absolute</p>
</
div>
<
ul id=
"ul" style=
"display: contents;">
<
li>Supermarket 1</
li>
<
li>Supermarket 2</
li>
</
ul>
</
div>
</
body>
</
html>
