third_party/WebKit/LayoutTests/compositing/visibility/visibility-remove-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     .set {
   6       position: absolute;
   7       top: 8px;
   8     }
   9     .box {
  10       height: 100px;
  11       width: 100px;
  12       background-color: blue;
  13     }
  14
  15     .hidden {
  16       visibility: hidden;
  17     }
  18
  19     .container.hidden {
  20       outline: 4px solid red;
  21     }
  22
  23     .visible {
  24       visibility: visible;
  25     }
  26     .should-be-hidden {
  27       background-color: red !important;
  28     }
  29     .should-be-visible {
  30       background-color: green !important;
  31     }
  32     .composited {
  33       transform: translateZ(1px);
  34     }
  35
  36     .visible-indicator {
  37       background-color: green;
  38     }
  39
  40     .hidden-indicator {
  41       background-color: red;
  42     }
  43   </style>
  44   <script>
  45     if (window.testRunner)
  46       testRunner.waitUntilDone();
  47     requestAnimationFrame(function() {
  48       requestAnimationFrame(function() {
  49         document.getElementById('target').classList.remove('composited');
  50         setTimeout(function() {
  51           if (window.testRunner)
  52             testRunner.notifyDone();
  53         });
  54       });
  55     });
  56   </script>
  57 </head>
  58 <body>
  59   <div class="set">
  60     <div class="hidden-indicator box"></div>
  61   </div>
  62
  63   <div class="set">
  64     <div class="hidden container composited">
  65       <div id="target" class="hidden composited">
  66         <div class="visible box should-be-visible"></div>
  67       </div>
  68     </div>
  69   </div>
  70 </body>
  71 </html>