third_party/WebKit/LayoutTests/compositing/repaint/layer-repaint-rects.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2   "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4   <head>
   5     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   6     <title>Layer repaint</title>
   7     <style type="text/css" media="screen">
   8       body {
   9         margin: 0;
  10       }
  11
  12       #container {
  13         position: absolute;
  14         top: 100px;
  15         height: 230px;
  16         width: 400px;
  17         border: 1px solid black;
  18       }
  19
  20       #container > div {
  21         position: absolute;
  22         background-color: #8888FF;
  23         width: 200px;
  24         height: 100px;
  25       }
  26
  27       #translate {
  28         top: 10px;
  29       }
  30       #container.over #translate {
  31         transform: translate(200px, 0px);
  32         -webkit-transition-property: -webkit-transform;
  33         -webkit-transition-duration: 0.1s;
  34       }
  35       #widen {
  36         top: 120px;
  37         background-color: red !important;
  38       }
  39       #container.over #widen {
  40         width: 400px;
  41         -webkit-transition-property: width;
  42         -webkit-transition-duration: 0.1s;
  43       }
  44
  45       #tester {
  46         position: absolute;
  47         background-color: green;
  48         width: 200px;
  49         height: 100px;
  50         top: 221px;
  51         left: 1px;
  52       }
  53     </style>
  54     <script type="text/javascript" charset="utf-8">
  55
  56       if (window.testRunner)
  57         testRunner.waitUntilDone();
  58
  59       function startTest()
  60       {
  61         var container = document.getElementById('container');
  62         container.addEventListener('webkitTransitionEnd', function() {
  63           container.className = '';
  64           if (window.testRunner)
  65             testRunner.notifyDone();
  66         });
  67         container.className = 'over';
  68       }
  69       window.addEventListener('load', startTest, false);
  70     </script>
  71   </head>
  72   <body>
  73
  74     <p>Tests repaint after a layer stops compositing. You should see no red below after the end of the transition.</p>
  75     <div id="container">
  76       <div id="translate"></div>
  77       <div id="widen"></div>
  78     </div>
  79
  80     <div id="tester"></div>
  81   </body>
  82 </html>