src/third_party/WebKit/LayoutTests/compositing/visibility/visibility-image-layers.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .set {
   7       display: inline-block;
   8       border: 1px solid black;
   9     }
  10     .box {
  11       height: 100px;
  12       width: 100px;
  13     }
  14
  15     .hidden {
  16       visibility: hidden;
  17     }
  18
  19     .container {
  20       margin: 10px;
  21       padding: 20px;
  22     }
  23     .container.hidden {
  24       outline: 4px solid red;
  25     }
  26
  27     .visible {
  28       visibility: visible;
  29     }
  30     .should-be-hidden {
  31       background-color: red !important;
  32     }
  33     .should-be-visible {
  34       background-color: green !important;
  35     }
  36     .composited {
  37       transform: translateZ(1px);
  38     }
  39
  40     .visible-indicator {
  41       background-color: green;
  42     }
  43
  44     .hidden-indicator {
  45       background-color: red;
  46     }
  47   </style>
  48   <script>
  49     if (window.testRunner)
  50       testRunner.dumpAsTextWithPixelResults();
  51   </script>
  52 </head>
  53 <body>
  54   <!-- Tests visibility with directly composited images. -->
  55   <!-- Left and right sides should look the same -->
  56   <div class="set">
  57     <div class="container"><img src="../resources/thiswayup.png" class="hidden box"></div>
  58     <div class="hidden container"><img src="../resources/thiswayup.png" class="box"></div>
  59     <div class="hidden container"><img src="../resources/thiswayup.png" class="visible box"></div>
  60   </div>
  61
  62   <div class="set">
  63     <div class="composited container"><img src="../resources/thiswayup.png" class="hidden composited box"></div>
  64     <div class="composited hidden container"><img src="../resources/thiswayup.png" class="composited box"></div>
  65     <div class="composited hidden container"><img src="../resources/thiswayup.png" class="visible composited box"></div>
  66   </div>
  67 </body>
  68 </html>