src/third_party/WebKit/LayoutTests/svg/zoom/page/zoom-clip-path.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5 div {
   6   position: absolute;
   7   width: 100px;
   8   height: 100px;
   9   background-color: green;
  10 }
  11     </style>
  12   </head>
  13   <body onload="forceStyleRecalc();repaintTest();">
  14     <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  15       <defs>
  16         <clipPath id="clip1">
  17           <rect width="50" height="50"/>
  18         </clipPath>
  19
  20         <clipPath id="clip2">
  21           <rect width="50" height="50"/>
  22           <rect x="50" y="50" width="50" height="50"/>
  23         </clipPath>
  24
  25         <clipPath id="clip3" clipPathUnits="objectBoundingBox">
  26           <rect width="0.5" height="0.5"/>
  27         </clipPath>
  28
  29         <clipPath id="clip4" clipPathUnits="objectBoundingBox">
  30           <rect width="0.5" height="0.5"/>
  31           <rect x="0.5" y="0.5" width="0.5" height="0.5"/>
  32         </clipPath>
  33       </defs>
  34     </svg>
  35
  36     <div style="transform: translate(10px, 10px); width: 200px; height: 200px; top: 0px; left: 0px; background-color: black;"></div>
  37
  38     <!-- The 4x4 checkerboard should stay well-formed when zoomed -->
  39     <div style="transform: translate(10px, 10px); top: 0px; left: 0px; -webkit-clip-path: url(#clip1);"></div>
  40     <div style="transform: translate(60px, 60px); top: 0px; left: 0px; -webkit-clip-path: url(#clip1);"></div>
  41     <div style="transform: translate(110px, 10px); top: 0px; left: 0px; -webkit-clip-path: url(#clip2);"></div>
  42     <div style="transform: translate(10px, 110px); top: 0px; left: 0px; -webkit-clip-path: url(#clip3);"></div>
  43     <div style="transform: translate(60px, 160px); top: 0px; left: 0px; -webkit-clip-path: url(#clip3);"></div>
  44     <div style="transform: translate(110px, 110px); top: 0px; left: 0px; -webkit-clip-path: url(#clip4);"></div>
  45
  46     <script>var zoomCount = 4; window.shouldZoomOut = false;</script>
  47     <script src="../../../fast/repaint/resources/text-based-repaint.js"></script>
  48     <script src="../resources/testPageZoom.js"></script>
  49   </body>
  50 </html>