| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <script src="../../../resources/run-after-layout-and-paint.js"></script> |
| <script src="../resources/text-based-repaint.js"></script> |
| <style> |
| |
| svg { |
| position: absolute; |
| left: 100px; |
| top: 100px; |
| width: 100px; |
| height: 100px; |
| } |
| |
| .outerBox { |
| position: absolute; |
| left: 400px; |
| top: 100px; |
| width: 100px; |
| height: 100px; |
| } |
| |
| .innerBox { |
| width: 100px; |
| height: 100px; |
| background: lime; |
| } |
| |
| svg, .outerBox { |
| border-left-width: 15px; |
| border-left-style: solid; |
| border-left-color: blue; |
| padding-left: 10px; |
| |
| border-right-width: 20px; |
| border-right-style: solid; |
| border-right-color: yellow; |
| padding-right: 5px; |
| |
| border-top-width: 5px; |
| border-top-style: solid; |
| border-top-color: red; |
| padding-top: 20px; |
| |
| border-bottom-width: 10px; |
| border-bottom-style: solid; |
| border-bottom-color: green; |
| padding-bottom: 15px; |
| } |
| </style> |
| </head> |
| |
| <body onload="runRepaintAndPixelTest()"> |
| <svg id="svg" xmlns="http://www.w3.org/2000/svg"> |
| <rect width="100" height="100" fill="lime"/> |
| </svg> |
| |
| <div id="html" class="outerBox"><div class="innerBox"/></div> |
| |
| <script type="text/javascript"> |
| <![CDATA[ |
| var svgLeft = 100; |
| var htmlLeft = 400; |
| |
| var svgTop = 100; |
| var htmlTop = 100; |
| |
| var svgStyle = document.getElementById("svg").style; |
| var htmlStyle = document.getElementById("html").style; |
| |
| window.testIsAsync = true; |
| |
| var iterations = 0; |
| |
| function repaintTest() { |
| if (iterations < 10) { |
| svgLeft = svgLeft + 15; |
| htmlLeft = htmlLeft + 15; |
| |
| svgTop = svgTop + 25; |
| htmlTop = htmlTop + 25; |
| |
| svgStyle.left = svgLeft + "px"; |
| svgStyle.top = svgTop + "px"; |
| |
| htmlStyle.left = htmlLeft + "px"; |
| htmlStyle.top = htmlTop + "px"; |
| |
| ++iterations; |
| runAfterLayoutAndPaint(repaintTest); |
| } else { |
| finishRepaintTest(); |
| } |
| } |
| ]]> |
| </script> |
| </body> |
| </html> |
