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 function dotest()
  16 {
  17
  18 //24
  19 document.getElementById('24c').style.setProperty('visibility','hidden','');
  20 document.getElementById('24a').removeChild(document.getElementById('24b'));
  21
  22 //25
  23 document.getElementById('25c').style.setProperty('visibility','hidden','');
  24 document.getElementById('25a').removeChild(document.getElementById('25b'));
  25
  26 //26
  27 document.getElementById('26c').style.setProperty('visibility','hidden','');
  28 document.getElementById('26a').removeChild(document.getElementById('26b'));
  29 setTimeout(dotest2,20);
  30 }
  31
  32 function dotest2()
  33 {
  34
  35 //xx
  36 //document.getElementById('23').style.setProperty('visibility','hidden','');
  37 }
  38
  39 </script>
  40 </head>
  41 <body onload="setTimeout(dotest,20)">
  42 <br><br><br><br>
  43 24 green box with word ok:
  44 <div id="24a" class="invisible abstop red">
  45 <div class="abs invisible red">
  46 <span>blah</span>
  47 </div>
  48 <div id="24b" class="abs invisible red">
  49 </div>
  50 <div id="24c" class="visible red">
  51 </div>
  52 <div class="visible green">
  53 ok
  54 </div>
  55 </div>
  56 <br><br><br><br>
  57
  58 25 green box with word ok:
  59 <div id="25a" class="invisible abstop red">
  60 <div class="invisible red">
  61 </div>
  62 <div class="abs invisible red">
  63 </div>
  64 <div id="25b" class="abs invisible red">
  65 <span>blah</span>
  66 </div>
  67 <div id="25c" class="visible red">
  68 </div>
  69 <div class="visible green">
  70 ok
  71 </div>
  72 </div>
  73 <br><br><br><br>
  74
  75 26 green box with word ok:
  76 <div id="26a" class="invisible abstop red">
  77 <div class="invisible red">
  78 <div>blah</div>
  79 </div>
  80 <div class="abs invisible red">
  81 <span>blah</span>
  82 </div>
  83 <div id="26b" class="abs invisible red">
  84 <span>blah</span>
  85 </div>
  86 <div id="26c" class="visible red">
  87 </div>
  88 <div class="visible green">
  89 ok
  90 </div>
  91 </div>
  92 <br><br><br><br>
  93 </body>
  94 </html>