third_party/WebKit/LayoutTests/compositing/will-change/composited-layers.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     .shouldComposite {
   6       width: 30px;
   7       height: 30px;
   8       margin: 4px;
   9       background-color: green;
  10     }
  11
  12     .shouldNotComposite {
  13       width: 30px;
  14       height: 30px;
  15       margin: 4px;
  16       background-color: red;
  17     }
  18
  19     .positioned {
  20       position: relative;
  21     }
  22
  23     #willChangeAuto {
  24       will-change: auto;
  25     }
  26
  27     #willChangeOpacity {
  28       will-change: opacity;
  29     }
  30
  31     #willChangeTransform {
  32       will-change: -webkit-transform;
  33     }
  34
  35     #willChangeLeft {
  36       will-change: left;
  37     }
  38
  39     #willChangeRight {
  40       will-change: right;
  41     }
  42
  43     #willChangeTop {
  44       will-change: top;
  45     }
  46
  47     #willChangeBottom {
  48       will-change: bottom;
  49     }
  50
  51     #willChangeFilter {
  52       will-change: -webkit-filter;
  53     }
  54
  55     #willChangeCombinationThatComposites {
  56       will-change: transition, -webkit-animation, opacity, z-index;
  57     }
  58
  59     #willChangeZIndex {
  60       will-change: z-index;
  61     }
  62   </style>
  63
  64   <script>
  65     window.addEventListener('load', function() {
  66       if (window.testRunner) {
  67         document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  68         testRunner.dumpAsText();
  69       }
  70     }, false);
  71   </script>
  72 </head>
  73 <body>
  74   <div id="willChangeAuto" class="shouldNotComposite"></div>
  75   <div id="willChangeOpacity" class="shouldComposite"></div>
  76   <div id="willChangeTransform" class="shouldComposite"></div>
  77   <div id="willChangeLeft" class="shouldNotComposite"></div>
  78   <div id="willChangeLeft" class="positioned shouldComposite"></div>
  79   <div id="willChangeRight" class="shouldNotComposite"></div>
  80   <div id="willChangeRight" class="positioned shouldComposite"></div>
  81   <div id="willChangeTop" class="shouldNotComposite"></div>
  82   <div id="willChangeTop" class="positioned shouldComposite"></div>
  83   <div id="willChangeBottom" class="shouldNotComposite"></div>
  84   <div id="willChangeBottom" class="positioned shouldComposite"></div>
  85   <div id="willChangeFilter" class="shouldNotComposite"></div>
  86   <div id="willChangeCombinationThatComposites" class="shouldComposite"></div>
  87   <div id="willChangeZIndex" class="shouldNotComposite"></div>
  88
  89   <pre id="layertree"></pre>
  90 </body>
  91 </html>