layer-visibility.html | Explore in Territory

<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>
chromium/third_party/blink/web_tests/fast/layers/layer-visibility.html
