third_party/WebKit/LayoutTests/compositing/visibility/visibility-composited-incremental-update.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.add('visible');
  50         setTimeout(function() {
  51           if (window.testRunner)
  52             testRunner.notifyDone();
  53         });
  54       });
  55     });
  56   </script>
  57 </head>
  58 <body>
  59   <!-- Tests that making a child of a composited layer visible causes that child to actually paint -->
  60   <div class="set">
  61     <div class="hidden-indicator box"></div>
  62     <div class="visible-indicator box"></div>
  63     <div class="hidden-indicator box"></div>
  64   </div>
  65
  66   <div class="set">
  67     <div class="hidden container composited">
  68       <div class="visible box should-be-visible"></div>
  69     </div>
  70
  71     <div class="hidden container composited">
  72       <div class="box should-be-hidden"></div>
  73     </div>
  74
  75     <div class="hidden container composited">
  76       <div id="target" class="box should-be-visible"></div>
  77     </div>
  78   </div>
  79 </body>
  80 </html>