| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div { |
| position: absolute; |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| } |
| </style> |
| </head> |
| <body onload="runAfterLayoutAndPaint(repaintTest, true);"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> |
| <defs> |
| <clipPath id="clip1"> |
| <rect width="50" height="50"/> |
| </clipPath> |
| |
| <clipPath id="clip2"> |
| <rect width="50" height="50"/> |
| <rect x="50" y="50" width="50" height="50"/> |
| </clipPath> |
| |
| <clipPath id="clip3" clipPathUnits="objectBoundingBox"> |
| <rect width="0.5" height="0.5"/> |
| </clipPath> |
| |
| <clipPath id="clip4" clipPathUnits="objectBoundingBox"> |
| <rect width="0.5" height="0.5"/> |
| <rect x="0.5" y="0.5" width="0.5" height="0.5"/> |
| </clipPath> |
| </defs> |
| </svg> |
| |
| <div style="transform: translate(10px, 10px); width: 200px; height: 200px; top: 0px; left: 0px; background-color: black;"></div> |
| |
| <!-- The 4x4 checkerboard should stay well-formed when zoomed --> |
| <div style="transform: translate(10px, 10px); top: 0px; left: 0px; -webkit-clip-path: url(#clip1);"></div> |
| <div style="transform: translate(60px, 60px); top: 0px; left: 0px; -webkit-clip-path: url(#clip1);"></div> |
| <div style="transform: translate(110px, 10px); top: 0px; left: 0px; -webkit-clip-path: url(#clip2);"></div> |
| <div style="transform: translate(10px, 110px); top: 0px; left: 0px; -webkit-clip-path: url(#clip3);"></div> |
| <div style="transform: translate(60px, 160px); top: 0px; left: 0px; -webkit-clip-path: url(#clip3);"></div> |
| <div style="transform: translate(110px, 110px); top: 0px; left: 0px; -webkit-clip-path: url(#clip4);"></div> |
| |
| <script>var zoomCount = 4; window.shouldZoomOut = false;</script> |
| <script src="../../../resources/run-after-layout-and-paint.js"></script> |
| <script src="../resources/testPageZoom.js"></script> |
| </body> |
| </html> |
