411 lines
8.0 KiB
HTML
411 lines
8.0 KiB
HTML
<html>
|
|
<style>
|
|
.red { border: 2px solid red }
|
|
.case { float: left; width: 130px; height: 100px; display: inline-block; border: 2px solid blue}
|
|
.positioned-root { position: relative; }
|
|
.green { border: 2px solid green }
|
|
.visible { visibility: visible}
|
|
.invisible { visibility: hidden}
|
|
//.invisible:hover { visibility: visible}
|
|
.abstop { position: absolute; left:0; right:0; height:30px }
|
|
.abs { position: absolute; left:0; right:0; top:0; bottom:0 }
|
|
.zindex { z-index: 1 }
|
|
</style>
|
|
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
var node1;
|
|
var node2;
|
|
function dotest()
|
|
{
|
|
// force layout
|
|
document.body.offsetTop;
|
|
|
|
//9
|
|
document.getElementById('9').style.setProperty('visibility','visible','');
|
|
//10
|
|
document.getElementById('10').style.setProperty('visibility','visible','');
|
|
document.getElementById('10').style.setProperty('visibility','hidden','');
|
|
//11
|
|
document.getElementById('11').style.setProperty('visibility','visible','');
|
|
//12
|
|
document.getElementById('12').style.setProperty('visibility','hidden','');
|
|
document.getElementById('12').style.setProperty('visibility','visible','');
|
|
//13
|
|
document.getElementById('13a').style.setProperty('visibility','hidden','');
|
|
document.getElementById('13b').style.setProperty('visibility','hidden','');
|
|
document.getElementById('13c').style.setProperty('visibility','hidden','');
|
|
document.getElementById('13b').style.setProperty('visibility','visible','');
|
|
//14
|
|
node1 = document.createElement('div');
|
|
node1.appendChild(document.createTextNode('ok'));
|
|
document.getElementById('14').appendChild(node1);
|
|
//15
|
|
node2 = document.createElement('div');
|
|
node2.setAttribute('class','invisible abs green');
|
|
node2.appendChild(document.createTextNode('ok'));
|
|
document.getElementById('15').appendChild(node2);
|
|
node2.style.setProperty('visibility','visible','');
|
|
document.getElementById('15').removeChild(node2);
|
|
//16
|
|
document.getElementById('16').style.setProperty('visibility','hidden','');
|
|
//17
|
|
document.getElementById('17').style.setProperty('visibility','visible','');
|
|
//18
|
|
document.getElementById('18a').style.setProperty('visibility','hidden','');
|
|
//19
|
|
document.getElementById('19a').style.setProperty('visibility','hidden','');
|
|
//20
|
|
document.getElementById('20a').style.setProperty('visibility','hidden','');
|
|
//21
|
|
document.getElementById('21a').style.setProperty('visibility','hidden','');
|
|
//22
|
|
document.getElementById('22').style.setProperty('visibility','visible','');
|
|
|
|
// force layout
|
|
document.body.offsetTop;
|
|
|
|
setTimeout(dotest2,20);
|
|
}
|
|
|
|
function dotest2()
|
|
{
|
|
//14
|
|
node1.style.setProperty('visibility','visible','');
|
|
document.getElementById('14').removeChild(node1);
|
|
document.getElementById('14').appendChild(node1);
|
|
node1.setAttribute('class','green');
|
|
//15
|
|
document.getElementById('15').appendChild(node2);
|
|
//18
|
|
document.getElementById('18b').style.setProperty('visibility','visible','');
|
|
//19
|
|
document.getElementById('19b').style.setProperty('visibility','visible','');
|
|
//20
|
|
document.getElementById('20b').style.setProperty('visibility','visible','');
|
|
document.getElementById('20b').style.setProperty('visibility','hidden','');
|
|
//21
|
|
document.getElementById('21b').style.setProperty('visibility','visible','');
|
|
//22
|
|
document.getElementById('22').style.setProperty('visibility','hidden','');
|
|
|
|
// force layout
|
|
document.body.offsetTop;
|
|
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="setTimeout(dotest,20)">
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
1 green box:
|
|
<div class="visible green">
|
|
<div class="invisible red">
|
|
failed
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
2 green box with word ok:
|
|
<div class="invisible red">
|
|
<div class="visible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
3 green box with word ok:
|
|
<div class="invisible abstop red" >
|
|
<div class="visible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
4 green box with word ok:
|
|
<div class="invisible abstop red" >
|
|
<div class="visible abs green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
5 green box with word ok:
|
|
<div class="invisible abstop red">
|
|
<div class="invisible red">
|
|
<div class="visible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
6 green box with word ok:
|
|
<div class="invisible abstop red">
|
|
<div class="invisible abs red">
|
|
<div class="visible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
7 green box with word ok:
|
|
<div class="invisible abstop red">
|
|
<div class="invisible abs red">
|
|
<div class="visible abs green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
8 double green box with word ok:
|
|
<div class="visible abstop green">
|
|
<div class="invisible abs red">
|
|
<div class="visible abs green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
9 green box with word ok:
|
|
<div class="invisible abstop red">
|
|
<div class="invisible abs red">
|
|
<div id="9" class="invisible abs green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
10 green box:
|
|
<div class="invisible abstop red">
|
|
<div class="visible abs green">
|
|
<div id="10" class="invisible abs red">
|
|
failed
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
11 green box with word ok:
|
|
<div class="invisible abstop red">
|
|
<div class="invisible red">
|
|
<div id="11" class="invisible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
12 green box with word ok:
|
|
<div class="invisible abstop red">
|
|
<div class="invisible red">
|
|
<div id="12" class="visible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
13 green box:
|
|
<div id="13a" class="visible abstop red">
|
|
<div id="13b" class="visible green">
|
|
<div id="13c" class="visible red">
|
|
failed
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
14 green box with word ok:
|
|
<div id="14" class="invisible abstop">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
15 green box with word ok:
|
|
<div id="15" class="invisible abstop">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
16 green box with word ok:
|
|
<div class="invisible abstop red">
|
|
<div class="invisible red">
|
|
<div id="16" class="visible red">
|
|
fail
|
|
</div>
|
|
<div class="visible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
17 green box with word ok:
|
|
<div class="invisible abstop red">
|
|
<div class="invisible red">
|
|
<div id="17" class="invisible green">
|
|
ok
|
|
</div>
|
|
<div class="invisible red">
|
|
fail
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
18 green box with word ok:
|
|
<div class="invisible abstop red">
|
|
<div class="invisible red">
|
|
<div id="18a" class="visible red">
|
|
fail
|
|
</div>
|
|
<div id="18b" class="invisible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
19 green box with word ok:
|
|
<div class="invisible abstop red">
|
|
<div class="invisible red">
|
|
<div id="19a" class="visible red">
|
|
fail
|
|
</div>
|
|
</div>
|
|
<div class="invisible red">
|
|
<div id="19b" class="invisible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
20 green box:
|
|
<div class="invisible abstop red">
|
|
<div class="visible green">
|
|
<div id="20a" class="visible red">
|
|
ok
|
|
</div>
|
|
<div id="20b" class="invisible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
21 two green boxes with word ok:
|
|
<div class="invisible abstop red">
|
|
<div id="21a" class="visible red">
|
|
<div class="visible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
<div class="invisible red">
|
|
<div id="21b" class="invisible green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
22 green box with word ok:
|
|
<div id="22" class="invisible abstop red" >
|
|
<div class="visible abs green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=case>
|
|
<div class=positioned-root>
|
|
23 green box with word ok:
|
|
<div class="invisible abstop red zindex" >
|
|
<div class="abs red">
|
|
<div class="visible abs green">
|
|
ok
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|