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

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