src/third_party/WebKit/LayoutTests/css3/filters/composited-during-transition-layertree.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     img {
   6         margin: 10px;
   7     }
   8
   9     #grayscale-box {
  10         -webkit-transition: -webkit-filter 5s;
  11         -webkit-filter: grayscale(0);
  12     }
  13
  14     .trigger #grayscale-box {
  15         -webkit-filter: grayscale(1);
  16     }
  17
  18     #sepia-box {
  19         -webkit-filter: sepia(1);
  20     }
  21
  22     #saturate-box {
  23         -webkit-transition: -webkit-filter 5s;
  24         -webkit-filter: saturate(0);
  25     }
  26
  27     .trigger #saturate-box {
  28         -webkit-filter: saturate(1);
  29     }
  30
  31     #huerotate-box {
  32         -webkit-filter: hue-rotate(90deg);
  33     }
  34
  35     #invert-box {
  36         -webkit-transition: -webkit-filter 5s;
  37         -webkit-filter: invert(0);
  38     }
  39
  40     .trigger #invert-box {
  41         -webkit-filter: invert(1);
  42     }
  43
  44     #opacity-box {
  45         -webkit-filter: opacity(0.5);
  46     }
  47
  48     #brightness-box {
  49         -webkit-transition: -webkit-filter 5s;
  50         -webkit-filter: brightness(0);
  51     }
  52
  53     .trigger #brightness-box {
  54         -webkit-filter: brightness(1);
  55     }
  56
  57     #contrast-box {
  58         -webkit-filter: contrast(0);
  59     }
  60   </style>
  61   <script>
  62       if (window.testRunner) {
  63           testRunner.waitUntilDone();
  64           testRunner.dumpAsText();
  65       }
  66
  67       function doTest() {
  68           if (window.testRunner) {
  69               document.getElementById('layer-tree').innerText = window.internals.layerTreeAsText(document)
  70               testRunner.notifyDone();
  71           }
  72       }
  73
  74       function triggerTransition() {
  75           document.body.className = "trigger";
  76           setTimeout(doTest, 200);
  77       }
  78
  79       window.addEventListener("load", triggerTransition, false);
  80   </script>
  81 </head>
  82 <body>
  83
  84 <!-- Every third image below will transition, and thus might
  85      get a compositing layer. Every 3n+1 element is not transitioning but
  86      has a static filter, and shouldn't need a compositing layer.
  87      Every 3n+2 element is a purely static image, and shouldn't
  88      even be a layer -->
  89 <img src="resources/reference.png" id="grayscale-box">
  90 <img src="resources/reference.png" id="sepia-box">
  91 <img src="resources/reference.png">
  92 <br>
  93 <img src="resources/reference.png" id="saturate-box">
  94 <img src="resources/reference.png" id="huerotate-box">
  95 <img src="resources/reference.png">
  96 <br>
  97 <img src="resources/reference.png" id="invert-box">
  98 <img src="resources/reference.png" id="opacity-box">
  99 <img src="resources/reference.png">
 100 <br>
 101 <img src="resources/reference.png" id="brightness-box">
 102 <img src="resources/reference.png" id="contrast-box">
 103 <img src="resources/reference.png">
 104
 105 <pre id="layer-tree">Layer tree goes here in DRT</pre>
 106
 107 </body>
 108 </html>