src/third_party/WebKit/ManualTests/compositing/requires-backing-change.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     #container, #container2 {
   7       height: 100px;
   8       width: 100px;
   9       margin: 10px 0;
  10       -webkit-perspective: 1000px;
  11     }
  12
  13     #container.transformed, #container2.transformed {
  14       transform: translateX(0);
  15     }
  16
  17     .box {
  18       margin-bottom: 5px;
  19       height: 100px;
  20       width: 100px;
  21       background-color: green;
  22       opacity: 0.5;
  23     }
  24   </style>
  25   <script>
  26     function doTest()
  27     {
  28       window.setTimeout(function() {
  29         document.getElementById('container').className = 'transformed';
  30         document.getElementById('container2').className = '';
  31
  32         if (window.layoutTestController)
  33           layoutTestController.notifyDone();
  34       }, 100);
  35     }
  36     window.addEventListener('load', doTest, false);
  37   </script>
  38 </head>
  39 <body>
  40   <p>All squares should have the same pale green color></p>
  41   <div class="box"></div>
  42   <div id="container">
  43     <div class="box">
  44     </div>
  45   </div>
  46
  47   <div id="container2" class="transformed">
  48     <div class="box">
  49     </div>
  50   </div>
  51 </body>
  52 </html>