src/third_party/WebKit/LayoutTests/fast/repaint/region-painting-in-composited-view.html

   1 <!doctype html>
   2 <head>
   3 <title>Test for https://bugs.webkit.org/show_bug.cgi?id=102826</title>
   4 <script>
   5     if (window.testRunner)
   6         window.testRunner.overridePreference("WebKitCSSRegionsEnabled", "1");
   7 </script>
   8 <style type="text/css">
   9 #content {
  10     -webkit-flow-into: flow1;
  11 }
  12
  13 #target {
  14     background: red;
  15     width: 100px;
  16     height: 50px;
  17 }
  18
  19 #region1, #region2 {
  20     position: absolute;
  21     top: 0px;
  22     width: 100px;
  23     height: 50px;
  24     -webkit-flow-from: flow1;
  25 }
  26
  27 #region1 {
  28     /* Make sure that the content of the first region will display in a totally
  29        different place than it would have been displayed if regions were not used. */
  30     left: 120px;
  31     /* Force the composited mode on the current page. */
  32     -webkit-transform: translate3d(0,0,0);
  33 }
  34
  35 #region2 {
  36     left: 0px;
  37     background-color: green;
  38 }
  39
  40 </style>
  41 <script src="resources/repaint.js" type="text/javascript"></script>
  42 <script>
  43 function repaintTest()
  44 {
  45     document.getElementById('target').style.backgroundColor = 'green';
  46 }
  47 </script>
  48 </head>
  49 <body onload="runRepaintTest();">
  50     <!-- Testing that the repaint goes through the RenderRegions and not
  51     directly to the viewport. You should see two green rectangles. -->
  52     <div id="content">
  53         <div id="target"></div>
  54     </div>
  55     <div id="region1"></div>
  56     <div id="region2"></div>
  57 </body>
  58 </html>