third_party/WebKit/LayoutTests/compositing/geometry/require-own-backing-recalc-order.html

   1 <!DOCTYPE html>
   2 <style>
   3 #clipping-repaint-container {
   4     transform: translateZ(0);
   5     overflow: hidden;
   6     position: absolute;
   7     left: 49px;
   8     top: 49px;
   9     width: 348px;
  10     height: 348px;
  11     border: black 1px solid;
  12 }
  13
  14 #non-repaint-container-compositing-layer {
  15     -webkit-perspective: 1px;
  16     position: absolute;
  17     left: 49px;
  18     top: 49px;
  19     width: 248px;
  20     height: 248px;
  21     border: red 1px solid;
  22 }
  23
  24 #painting-layer {
  25     display: none;
  26     position: absolute;
  27     left: 49px;
  28     top: 49px;
  29     width: 148px;
  30     height: 148px;
  31     border: green 1px solid;
  32 }
  33
  34 #compositing-child1 {
  35     transform: translateZ(-1px);
  36     position: absolute;
  37     left: 48px;
  38     top: 48px;
  39     width: 48px;
  40     height: 48px;
  41     border: blue 2px solid;
  42 }
  43
  44 #compositing-child2 {
  45     transform: translateZ(-1px);
  46     position: absolute;
  47     left: 49px;
  48     top: 49px;
  49     width: 48px;
  50     height: 48px;
  51     border: blue 1px solid;
  52 }
  53 </style>
  54
  55 <script src="../../resources/run-after-layout-and-paint.js"></script>
  56 <script>
  57     if (window.testRunner)
  58         testRunner.waitUntilDone();
  59
  60     window.onload = function() {
  61         var paintingLayer = document.getElementById("painting-layer");
  62         paintingLayer.style.display = "block";
  63         runAfterLayoutAndPaint(function() {
  64             var compositingChild2 = document.getElementById("compositing-child2");
  65             compositingChild2.style.transform = "translateZ(0)";
  66             if (window.testRunner)
  67                 testRunner.notifyDone();
  68         });
  69     }
  70 </script>
  71
  72 <div id="clipping-repaint-container">
  73     <div id="non-repaint-container-compositing-layer">
  74         <div id="painting-layer">
  75             <div id="compositing-child1">
  76             </div>
  77             <div id="compositing-child2">
  78             </div>
  79         </div>
  80     </div>
  81 </div>