| <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> |
