<!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>
Codebase Browser
chromium