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 svgStyle = document.getElementById("svg").style;
  68 var htmlStyle = document.getElementById("html").style;
  69
  70 window.testIsAsync = true;
  71
  72 var iterations = 0;
  73
  74 function repaintTest() {
  75     if (iterations < 10) {
  76         svgLeft = svgLeft + 15;
  77         htmlLeft = htmlLeft + 15;
  78
  79         svgTop = svgTop + 25;
  80         htmlTop = htmlTop + 25;
  81
  82         svgStyle.left = svgLeft + "px";
  83         svgStyle.top = svgTop + "px";
  84
  85         htmlStyle.left = htmlLeft + "px";
  86         htmlStyle.top = htmlTop + "px";
  87
  88         ++iterations;
  89         requestAnimationFrame(repaintTest);
  90     } else {
  91         finishRepaintTest();
  92     }
  93 }
  94 ]]>
  95 </script>
  96 </body>
  97 </html>