Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-masking/clip-path/clip-path-shape-svg-rotated-shape.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Masking: clip-path basic shape on a rotated SVG shape</title>
<link rel="author" title="Ahmad Saleem" href="mailto:ahmad.saleem792+github@gmail.com">
<link rel="match" href="clip-path-shape-svg-rotated-shape-ref.html">
<meta name="assert" content="The reference box is the shape's own bounding box in its own user space, so inset() trims 100 user units from its right edge and the result rotates with the shape.">
<svg width="300" height="300">
<rect x="50" y="50" width="200" height="100" transform="rotate(90 100 100)" style="clip-path: inset(0 100px 0 0)" fill="green"/>
</svg>