LayoutTests/fast/layers/layer-visibility.html

   1 <html>
   2 <style>
   3 .red { border: 2px solid red }
   4 .case {  float: left; width: 130px; height: 100px; display: inline-block;  border: 2px solid blue}
   5 .positioned-root { position: relative; }
   6 .green { border: 2px solid green }
   7 .visible { visibility: visible}
   8 .invisible { visibility: hidden}
   9 //.invisible:hover { visibility: visible}
  10 .abstop { position: absolute; left:0; right:0; height:30px   }
  11 .abs { position: absolute; left:0; right:0; top:0; bottom:0 }
  12 .zindex { z-index: 1 }
  13 </style>
  14
  15 <script>
  16 if (window.testRunner)
  17     testRunner.waitUntilDone();
  18
  19 var node1;
  20 var node2;
  21 function dotest()
  22 {
  23 // force layout
  24 document.body.offsetTop;
  25
  26 //9
  27 document.getElementById('9').style.setProperty('visibility','visible','');
  28 //10
  29 document.getElementById('10').style.setProperty('visibility','visible','');
  30 document.getElementById('10').style.setProperty('visibility','hidden','');
  31 //11
  32 document.getElementById('11').style.setProperty('visibility','visible','');
  33 //12
  34 document.getElementById('12').style.setProperty('visibility','hidden','');
  35 document.getElementById('12').style.setProperty('visibility','visible','');
  36 //13
  37 document.getElementById('13a').style.setProperty('visibility','hidden','');
  38 document.getElementById('13b').style.setProperty('visibility','hidden','');
  39 document.getElementById('13c').style.setProperty('visibility','hidden','');
  40 document.getElementById('13b').style.setProperty('visibility','visible','');
  41 //14
  42 node1 = document.createElement('div');
  43 node1.appendChild(document.createTextNode('ok'));
  44 document.getElementById('14').appendChild(node1);
  45 //15
  46 node2 = document.createElement('div');
  47 node2.setAttribute('class','invisible abs green');
  48 node2.appendChild(document.createTextNode('ok'));
  49 document.getElementById('15').appendChild(node2);
  50 node2.style.setProperty('visibility','visible','');
  51 document.getElementById('15').removeChild(node2);
  52 //16
  53 document.getElementById('16').style.setProperty('visibility','hidden','');
  54 //17
  55 document.getElementById('17').style.setProperty('visibility','visible','');
  56 //18
  57 document.getElementById('18a').style.setProperty('visibility','hidden','');
  58 //19
  59 document.getElementById('19a').style.setProperty('visibility','hidden','');
  60 //20
  61 document.getElementById('20a').style.setProperty('visibility','hidden','');
  62 //21
  63 document.getElementById('21a').style.setProperty('visibility','hidden','');
  64 //22
  65 document.getElementById('22').style.setProperty('visibility','visible','');
  66
  67 // force layout
  68 document.body.offsetTop;
  69
  70 setTimeout(dotest2,20);
  71 }
  72
  73 function dotest2()
  74 {
  75 //14
  76 node1.style.setProperty('visibility','visible','');
  77 document.getElementById('14').removeChild(node1);
  78 document.getElementById('14').appendChild(node1);
  79 node1.setAttribute('class','green');
  80 //15
  81 document.getElementById('15').appendChild(node2);
  82 //18
  83 document.getElementById('18b').style.setProperty('visibility','visible','');
  84 //19
  85 document.getElementById('19b').style.setProperty('visibility','visible','');
  86 //20
  87 document.getElementById('20b').style.setProperty('visibility','visible','');
  88 document.getElementById('20b').style.setProperty('visibility','hidden','');
  89 //21
  90 document.getElementById('21b').style.setProperty('visibility','visible','');
  91 //22
  92 document.getElementById('22').style.setProperty('visibility','hidden','');
  93
  94 // force layout
  95 document.body.offsetTop;
  96
  97 if (window.testRunner)
  98     testRunner.notifyDone();
  99 }
 100
 101 </script>
 102 </head>
 103 <body onload="setTimeout(dotest,20)">
 104 <div class=case>
 105 <div class=positioned-root>
 106 1 green box:
 107 <div class="visible green">
 108 <div class="invisible red">
 109 failed
 110 </div>
 111 </div>
 112 </div>
 113 </div>
 114
 115 <div class=case>
 116 <div class=positioned-root>
 117 2  green box with word ok:
 118 <div class="invisible red">
 119 <div class="visible green">
 120 ok
 121 </div>
 122 </div>
 123 </div>
 124 </div>
 125
 126 <div class=case>
 127 <div class=positioned-root>
 128 3 green box with word ok:
 129 <div class="invisible abstop red" >
 130 <div class="visible green">
 131 ok
 132 </div>
 133 </div>
 134 </div>
 135 </div>
 136
 137 <div class=case>
 138 <div class=positioned-root>
 139 4 green box with word ok:
 140 <div class="invisible abstop red" >
 141 <div class="visible abs green">
 142 ok
 143 </div>
 144 </div>
 145 </div>
 146 </div>
 147
 148
 149 <div class=case>
 150 <div class=positioned-root>
 151 5 green box with word ok:
 152 <div class="invisible abstop red">
 153 <div class="invisible red">
 154 <div class="visible green">
 155 ok
 156 </div>
 157 </div>
 158 </div>
 159 </div>
 160 </div>
 161
 162 <div class=case>
 163 <div class=positioned-root>
 164 6 green box with word ok:
 165 <div class="invisible abstop red">
 166 <div class="invisible abs red">
 167 <div class="visible green">
 168 ok
 169 </div>
 170 </div>
 171 </div>
 172 </div>
 173 </div>
 174
 175 <div class=case>
 176 <div class=positioned-root>
 177 7 green box with word ok:
 178 <div class="invisible abstop red">
 179 <div class="invisible abs red">
 180 <div class="visible abs green">
 181 ok
 182 </div>
 183 </div>
 184 </div>
 185 </div>
 186 </div>
 187
 188 <div class=case>
 189 <div class=positioned-root>
 190 8 double green box with word ok:
 191 <div class="visible abstop green">
 192 <div class="invisible abs red">
 193 <div class="visible abs green">
 194 ok
 195 </div>
 196 </div>
 197 </div>
 198 </div>
 199 </div>
 200
 201 <div class=case>
 202 <div class=positioned-root>
 203 9 green box with word ok:
 204 <div class="invisible abstop red">
 205 <div class="invisible abs red">
 206 <div id="9" class="invisible abs green">
 207 ok
 208 </div>
 209 </div>
 210 </div>
 211 </div>
 212 </div>
 213
 214 <div class=case>
 215 <div class=positioned-root>
 216 10 green box:
 217 <div class="invisible abstop red">
 218 <div class="visible abs green">
 219 <div id="10" class="invisible abs red">
 220 failed
 221 </div>
 222 </div>
 223 </div>
 224 </div>
 225 </div>
 226
 227 <div class=case>
 228 <div class=positioned-root>
 229 11 green box with word ok:
 230 <div class="invisible abstop red">
 231 <div class="invisible red">
 232 <div id="11" class="invisible green">
 233 ok
 234 </div>
 235 </div>
 236 </div>
 237 </div>
 238 </div>
 239
 240 <div class=case>
 241 <div class=positioned-root>
 242 12 green box with word ok:
 243 <div class="invisible abstop red">
 244 <div class="invisible red">
 245 <div id="12" class="visible green">
 246 ok
 247 </div>
 248 </div>
 249 </div>
 250 </div>
 251 </div>
 252
 253
 254 <div class=case>
 255 <div class=positioned-root>
 256 13 green box:
 257 <div id="13a" class="visible abstop red">
 258 <div id="13b" class="visible green">
 259 <div id="13c" class="visible red">
 260 failed
 261 </div>
 262 </div>
 263 </div>
 264 </div>
 265 </div>
 266
 267 <div class=case>
 268 <div class=positioned-root>
 269 14 green box with word ok:
 270 <div id="14" class="invisible abstop">
 271 </div>
 272 </div>
 273 </div>
 274
 275 <div class=case>
 276 <div class=positioned-root>
 277 15 green box with word ok:
 278 <div id="15" class="invisible abstop">
 279 </div>
 280 </div>
 281 </div>
 282
 283 <div class=case>
 284 <div class=positioned-root>
 285 16 green box with word ok:
 286 <div class="invisible abstop red">
 287 <div class="invisible red">
 288 <div id="16" class="visible red">
 289 fail
 290 </div>
 291 <div class="visible green">
 292 ok
 293 </div>
 294 </div>
 295 </div>
 296 </div>
 297 </div>
 298 </div>
 299 </div>
 300
 301 <div class=case>
 302 <div class=positioned-root>
 303 17 green box with word ok:
 304 <div class="invisible abstop red">
 305 <div class="invisible red">
 306 <div id="17" class="invisible green">
 307 ok
 308 </div>
 309 <div class="invisible red">
 310 fail
 311 </div>
 312 </div>
 313 </div>
 314 </div>
 315 </div>
 316
 317 <div class=case>
 318 <div class=positioned-root>
 319 18 green box with word ok:
 320 <div class="invisible abstop red">
 321 <div class="invisible red">
 322 <div id="18a" class="visible red">
 323 fail
 324 </div>
 325 <div id="18b" class="invisible green">
 326 ok
 327 </div>
 328 </div>
 329 </div>
 330 </div>
 331 </div>
 332
 333 <div class=case>
 334 <div class=positioned-root>
 335 19 green box with word ok:
 336 <div class="invisible abstop red">
 337 <div class="invisible red">
 338 <div id="19a" class="visible red">
 339 fail
 340 </div>
 341 </div>
 342 <div class="invisible red">
 343 <div id="19b" class="invisible green">
 344 ok
 345 </div>
 346 </div>
 347 </div>
 348 </div>
 349 </div>
 350
 351 <div class=case>
 352 <div class=positioned-root>
 353 20 green box:
 354 <div class="invisible abstop red">
 355 <div class="visible green">
 356 <div id="20a" class="visible red">
 357 ok
 358 </div>
 359 <div id="20b" class="invisible green">
 360 ok
 361 </div>
 362 </div>
 363 </div>
 364 </div>
 365 </div>
 366
 367 <div class=case>
 368 <div class=positioned-root>
 369 21 two green boxes with word ok:
 370 <div class="invisible abstop red">
 371 <div id="21a" class="visible red">
 372 <div class="visible green">
 373 ok
 374 </div>
 375 </div>
 376 <div class="invisible red">
 377 <div id="21b" class="invisible green">
 378 ok
 379 </div>
 380 </div>
 381 </div>
 382 </div>
 383 </div>
 384
 385 <div class=case>
 386 <div class=positioned-root>
 387 22 green box with word ok:
 388 <div id="22" class="invisible abstop red" >
 389 <div class="visible abs green">
 390 ok
 391 </div>
 392 </div>
 393 </div>
 394 </div>
 395
 396 <div class=case>
 397 <div class=positioned-root>
 398 23 green box with word ok:
 399 <div class="invisible abstop red zindex" >
 400 <div class="abs red">
 401 <div class="visible abs green">
 402 ok
 403 </div>
 404 </div>
 405 </div>
 406 </div>
 407 </div>
 408
 409 </body>
 410 </html>