src/third_party/WebKit/LayoutTests/svg/custom/repaint-moving-svg-and-div.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <head>
   3 <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
   4 <style>
   5
   6 svg {
   7     position: absolute;
   8     left: 100px;
   9     top: 100px;
  10     width: 100px;
  11     height: 100px;
  12 }
  13
  14 .outerBox {
  15     position: absolute;
  16     left: 400px;
  17     top: 100px;
  18     width: 100px;
  19     height: 100px;
  20 }
  21
  22 .innerBox {
  23     width: 100px;
  24     height: 100px;
  25     background: lime;
  26 }
  27
  28 svg, .outerBox {
  29     border-left-width: 15px;
  30     border-left-style: solid;
  31     border-left-color: blue;
  32     padding-left: 10px;
  33
  34     border-right-width: 20px;
  35     border-right-style: solid;
  36     border-right-color: yellow;
  37     padding-right: 5px;
  38
  39     border-top-width: 5px;
  40     border-top-style: solid;
  41     border-top-color: red;
  42     padding-top: 20px;
  43
  44     border-bottom-width: 10px;
  45     border-bottom-style: solid;
  46     border-bottom-color: green;
  47     padding-bottom: 15px;
  48 }
  49 </style>
  50 </head>
  51
  52 <body onload="runRepaintAndPixelTest()">
  53 <svg id="svg" xmlns="http://www.w3.org/2000/svg">
  54   <rect width="100" height="100" fill="lime"/>
  55 </svg>
  56
  57 <div id="html" class="outerBox"><div class="innerBox"/></div>
  58
  59 <script type="text/javascript">
  60 <![CDATA[
  61 var svgLeft = 100;
  62 var htmlLeft = 400;
  63
  64 var svgTop = 100;
  65 var htmlTop = 100;
  66
  67 var iterations = 0;
  68
  69 var svgStyle = document.getElementById("svg").style;
  70 var htmlStyle = document.getElementById("html").style;
  71
  72 function repaintTest() {
  73     if (iterations < 10) {
  74         if (iterations == 0) {
  75             if (window.testRunner)
  76                 testRunner.waitUntilDone();
  77         }
  78
  79         svgLeft = svgLeft + 15;
  80         htmlLeft = htmlLeft + 15;
  81
  82         svgTop = svgTop + 25;
  83         htmlTop = htmlTop + 25;
  84
  85         svgStyle.left = svgLeft + "px";
  86         svgStyle.top = svgTop + "px";
  87
  88         htmlStyle.left = htmlLeft + "px";
  89         htmlStyle.top = htmlTop + "px";
  90
  91         ++iterations;
  92         window.setTimeout(repaintTest, 0);
  93     } else {
  94         if (window.testRunner)
  95             testRunner.notifyDone();
  96     }
  97 }
  98 ]]>
  99 </script>
 100 </body>
 101 </html>