Loading…
Dataset 20260827-2142-2f1b575 · measured 2026-08-27 21:42 UTC
clip-path
✕renders differentlycss-masking-1
The property takes effect, but our pixels are not Chrome's. The difference map on this page shows where.
What the specification says
- Initial value
- none
- Applies to
- All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
- Inherited
- no
- Percentages
- n/a
- Computed value
- as specified, but with <url> values made absolute
- Syntax
- <clip-source> | [ <basic-shape> || <geometry-box> ] | none
The measurements
Each example is one declaration on a small page, drawn by Chrome and by our engine. Drag the handle to wipe between them.
clip-path:ellipse(80px 40px)✓pixel-exact
Our renderChrome2,136 pixels differ from Chrome, the largest by 6 of 255 on one channel.
- Differing pixels
- 2,136
- Max channel delta
- 6
clip-path:circle(60px)✓pixel-exact
Our renderChrome3,066 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 3,066
- Max channel delta
- 3
clip-path:content-box✓pixel-exact
Our renderChrome3,490 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 3,490
- Max channel delta
- 3
clip-path:fill-box✓pixel-exact
Our renderChrome3,490 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 3,490
- Max channel delta
- 3
clip-path:inset(20px)✓pixel-exact
Our renderChrome4,690 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 4,690
- Max channel delta
- 3
clip-path:padding-box✕renders differently
Our renderChrome5,140 pixels differ from Chrome, the largest by 37 of 255 on one channel.
- Differing pixels
- 5,140
- Max channel delta
- 37
clip-path:polygon(0 0, 100% 0, 50% 100%)≈below the visible threshold
Our renderChrome5,807 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 5,807
- Max channel delta
- 3
Which values were measured
“Supported” on one example means “supported at the value we tried”. The property’s declared grammar has 14 branches; 7 of them carry a measurement. The publishing ceiling is 12 examples per property — a branch past it is left out by our choice, not by accident.
| Value | Measured |
|---|---|
| url(data:image/gif;base64,R0lGODlhAQABAIAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=) | not measured |
| inset(20px) | ✓pixel-exact |
| circle(60px) | ✓pixel-exact |
| ellipse(80px 40px) | ✓pixel-exact |
| polygon(0 0, 100% 0, 50% 100%) | ≈below the visible threshold |
| content-box | ✓pixel-exact |
| padding-box | ✕renders differently |
| border-box | not measured |
| margin-box | not measured |
| half-border-box | not measured |
| fill-box | ✓pixel-exact |
| stroke-box | not measured |
| view-box | not measured |
| none | not measured |
Tests in the suite that name this property
Secondary evidence: 30 Web Platform Tests carry a spec anchor pointing at this property. Only 1,254 tests in the whole corpus carry such an anchor, so an empty list here means nothing at all.
✓css/css-masking/clip-path/clip-path-element-userSpaceOnUse-001.html✓css/css-masking/clip-path/clip-path-element-userSpaceOnUse-002.html✕css/css-masking/clip-path/clip-path-element-userSpaceOnUse-003.html✕css/css-masking/clip-path/clip-path-element-userSpaceOnUse-004.html✓css/css-masking/clip-path/clip-path-ellipse-001.html✓css/css-masking/clip-path/clip-path-ellipse-002.html✓css/css-masking/clip-path/clip-path-ellipse-003.html✓css/css-masking/clip-path/clip-path-ellipse-004.html✓css/css-masking/clip-path/clip-path-ellipse-005.html✓css/css-masking/clip-path/clip-path-ellipse-006.html✓css/css-masking/clip-path/clip-path-ellipse-007.html✓css/css-masking/clip-path/clip-path-ellipse-008.html
+ 18 more
Measured against Chrome 148.0.7778.96 on 2026-08-27, with up to 40 candidate values tried per property. All properties · How the measurement works