third_party/WebKit/LayoutTests/fast/layers/layer-visibility-sublayer.html

   1 <html>
   2 <style>
   3 .red { border: 2px solid red }
   4 .green { border: 2px solid green }
   5 .visible { visibility: visible}
   6 .invisible { visibility: hidden}
   7 //.invisible:hover { visibility: visible}
   8 .abstop { position: absolute; left:0; right:0; height:30px   }
   9 .abs { position: absolute; left:0; right:0; top:0; bottom:0 }
  10 </style>
  11
  12 <script>
  13 var node1;
  14 var node2;
  15
  16 function startTest() {
  17     if (window.testRunner) {
  18         testRunner.waitUntilDone();
  19         testRunner.layoutAndPaintAsyncThen(doTest)
  20     } else {
  21         requestAnimationFrame(doTest)
  22     }
  23 }
  24
  25 function doTest()
  26 {
  27     //24
  28     document.getElementById('24c').style.setProperty('visibility','hidden','');
  29     document.getElementById('24a').removeChild(document.getElementById('24b'));
  30
  31     //25
  32     document.getElementById('25c').style.setProperty('visibility','hidden','');
  33     document.getElementById('25a').removeChild(document.getElementById('25b'));
  34
  35     //26
  36     document.getElementById('26c').style.setProperty('visibility','hidden','');
  37     document.getElementById('26a').removeChild(document.getElementById('26b'));
  38
  39     if (window.testRunner) {
  40         testRunner.layoutAndPaintAsyncThen(function() {
  41             testRunner.notifyDone();
  42         });
  43     }
  44 }
  45
  46
  47 </script>
  48 </head>
  49 <body onload="startTest();">
  50 <br><br><br><br>
  51 24 green box with word ok:
  52 <div id="24a" class="invisible abstop red">
  53 <div class="abs invisible red">
  54 <span>blah</span>
  55 </div>
  56 <div id="24b" class="abs invisible red">
  57 </div>
  58 <div id="24c" class="visible red">
  59 </div>
  60 <div class="visible green">
  61 ok
  62 </div>
  63 </div>
  64 <br><br><br><br>
  65
  66 25 green box with word ok:
  67 <div id="25a" class="invisible abstop red">
  68 <div class="invisible red">
  69 </div>
  70 <div class="abs invisible red">
  71 </div>
  72 <div id="25b" class="abs invisible red">
  73 <span>blah</span>
  74 </div>
  75 <div id="25c" class="visible red">
  76 </div>
  77 <div class="visible green">
  78 ok
  79 </div>
  80 </div>
  81 <br><br><br><br>
  82
  83 26 green box with word ok:
  84 <div id="26a" class="invisible abstop red">
  85 <div class="invisible red">
  86 <div>blah</div>
  87 </div>
  88 <div class="abs invisible red">
  89 <span>blah</span>
  90 </div>
  91 <div id="26b" class="abs invisible red">
  92 <span>blah</span>
  93 </div>
  94 <div id="26c" class="visible red">
  95 </div>
  96 <div class="visible green">
  97 ok
  98 </div>
  99 </div>
 100 <br><br><br><br>
 101 </body>
 102 </html>