src/third_party/WebKit/LayoutTests/compositing/geometry/limit-layer-bounds-opacity-transition.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4   <style type="text/css" media="screen">
   5     .test {
   6       position: relative;
   7       top: -10px; /* overlap composited layer */
   8       width: 100px;
   9       height: 100px;
  10       background-color: white;
  11       text-indent: -10000px;
  12     }
  13
  14     .compositing {
  15       width: 1px;
  16       height: 1px;
  17       transform: translateZ(0);
  18     }
  19
  20     #fading {
  21       opacity: 0;
  22       -webkit-transition: opacity 0.1s;
  23     }
  24   </style>
  25   <script type="text/javascript" charset="utf-8">
  26     if (window.testRunner) {
  27       testRunner.waitUntilDone();
  28       testRunner.dumpAsText();
  29     }
  30
  31     function startFade()
  32     {
  33       // At the end of this fade we are interested in the size of .test in the layer dump.
  34       // It should be constrained to the size of the view, so not tiled.
  35       var fader = document.getElementById('fading');
  36       fader.addEventListener('webkitTransitionEnd', fadeDone, false);
  37       document.getElementById('fading').style.opacity = 1;
  38     }
  39
  40     function fadeDone()
  41     {
  42       if (window.testRunner) {
  43         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  44         testRunner.notifyDone();
  45       }
  46     }
  47   </script>
  48 <head>
  49 </head>
  50 <body>
  51
  52   <!-- Go into compositing. -->
  53   <div class="compositing"></div>
  54
  55   <div class="test">
  56     Test
  57   </div>
  58
  59   <div id="fading">
  60     Fader
  61   </div>
  62
  63   <pre id="layers">Layer tree goes here in DRT</pre>
  64   <script>
  65     window.onload = startFade;
  66   </script>
  67 </body>
  68 </html>