Status: PASS | Duration: 71ms | Subtests: 44/44 | Open test on wpt.live | wpt.fyi
Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)
| Subtest | Status | Message |
|---|---|---|
| e.style['clip-path'] = "shape(from 0px 0px, line to 10px 10px)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(evenodd from 0px 0px, line to 10px 10px)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(nonzero from 0px 0px, line to 10px 10px)" should set the property value | PASS | |
| e.style['clip-path'] = "shape( from 0px 0px, line to 10px 10px )" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 1em 50%, line to 10px 10px)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(EvenOdd from 0px 0Px, CLOSE)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 1ch 50px, line to 10rem 10vh)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 1ch -50px, line to -10% 12px)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, hline by 10px, vline to 5rem)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, vline by 5%, hline to 1vw)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, curve to 50px 20px with 10rem 1%)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, curve to 50px 20px with 10rem 1px / 20vh 1ch)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, curve by 50px 20px with 10rem 1px / 20vh 1ch)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, smooth to 50px 20px with 10rem 1%)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, smooth to 50px 1pt)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, arc to 50px 1pt of 10px 10px)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, arc to 50px 1pt of 10%)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, arc to 50px 1pt of 10px 10px small rotate 0deg)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, arc to 50px 1pt of 10px small rotate 0deg)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(evenodd from 0px 0px, close)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 0 0,curve to 5% calc(5% * var(--s,1)) with 5% 5%, vline to 100%)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 0 0,curve to 5% var(--s,1) with 5% 5%, vline to 100%)" should set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10% 1rem, arc of 20% 1pt to 50px cw large rotate 25deg)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10% 1rem, arc cw to 50px of 20% 1pt large rotate 25deg)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10% 1rem, arc rotate 25deg to 50px 1pt of 20% cw large )" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(evenodd from 0px 0px, close path)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(nonzero, from 0px 0px, line to 10px 10px)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, curve to 50px 20px via 10rem)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, curve to 50px 20px via 10rem 1% 12px)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, hline byy 10px, vline to 5rem)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, vline by 5% hline by 1vw" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, smooth to 50px 20px via 10rem)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 10px 10px, smooth to 50px 20px via 10rem 2px 2pt)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape()" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 0px)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 0px 20px,)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(close)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(nonzero, close)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(from 0px 10px)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(allkindsofnonsense)" should not set the property value | PASS | |
| e.style['clip-path'] = "shape(arc)" should not set the property value | PASS |
/css/css-masking/parsing/clip-path-shape-parsing.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> <meta name="assert" content="clip-path supports the full shape() grammar."> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> </head> <body> <script> // basic test_valid_value("clip-path", "shape(from 0px 0px, line to 10px 10px)"); test_valid_value("clip-path", "shape(evenodd from 0px 0px, line to 10px 10px)"); test_valid_value("clip-path", "shape(nonzero from 0px 0px, line to 10px 10px)", "shape(from 0px 0px, line to 10px 10px)"); test_valid_value("clip-path", "shape( from 0px 0px, line to 10px 10px )", "shape(from 0px 0px, line to 10px 10px)"); test_valid_value("clip-path", "shape(from 1em 50%, line to 10px 10px)"); test_valid_value("clip-path", "shape(EvenOdd from 0px 0Px, CLOSE)", "shape(evenodd from 0px 0px, close)"); test_valid_value("clip-path", "shape(from 1ch 50px, line to 10rem 10vh)"); test_valid_value("clip-path", "shape(from 1ch -50px, line to -10% 12px)"); // segment types test_valid_value("clip-path", "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)"); test_valid_value("clip-path", "shape(from 10px 10px, hline by 10px, vline to 5rem)"); test_valid_value("clip-path", "shape(from 10px 10px, vline by 5%, hline to 1vw)"); test_valid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px with 10rem 1%)"); test_valid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px with 10rem 1px / 20vh 1ch)"); test_valid_value("clip-path", "shape(from 10px 10px, curve by 50px 20px with 10rem 1px / 20vh 1ch)"); test_valid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px with 10rem 1%)"); test_valid_value("clip-path", "shape(from 10px 10px, smooth to 50px 1pt)"); test_valid_value("clip-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px)"); test_valid_value("clip-path", "shape(from 10px 10px, arc to 50px 1pt of 10%)"); test_valid_value("clip-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px small rotate 0deg)", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px)"); test_valid_value("clip-path", "shape(from 10px 10px, arc to 50px 1pt of 10px small rotate 0deg)", "shape(from 10px 10px, arc to 50px 1pt of 10px)"); test_valid_value("clip-path", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)"); test_valid_value("clip-path", "shape(evenodd from 0px 0px, close)"); test_valid_value("clip-path", "shape(from 0 0,curve to 5% calc(5% * var(--s,1)) with 5% 5%, vline to 100%)"); test_valid_value("clip-path", "shape(from 0 0,curve to 5% var(--s,1) with 5% 5%, vline to 100%)"); // arc with wrong order test_invalid_value("clip-path", "shape(from 10% 1rem, arc of 20% 1pt to 50px cw large rotate 25deg)"); test_invalid_value("clip-path", "shape(from 10% 1rem, arc cw to 50px of 20% 1pt large rotate 25deg)"); test_invalid_value("clip-path", "shape(from 10% 1rem, arc rotate 25deg to 50px 1pt of 20% cw large )"); // nonsense test_invalid_value("clip-path", "shape(evenodd from 0px 0px, close path)"); test_invalid_value("clip-path", "shape(nonzero, from 0px 0px, line to 10px 10px)"); test_invalid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px via 10rem)"); test_invalid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1% 12px)"); test_invalid_value("clip-path", "shape(from 10px 10px, hline byy 10px, vline to 5rem)"); test_invalid_value("clip-path", "shape(from 10px 10px, vline by 5% hline by 1vw"); test_invalid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem)"); test_invalid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 2px 2pt)"); test_invalid_value("clip-path", "shape()"); test_invalid_value("clip-path", "shape(from)"); test_invalid_value("clip-path", "shape(from 0px)"); test_invalid_value("clip-path", "shape(from 0px 20px,)"); test_invalid_value("clip-path", "shape(close)"); test_invalid_value("clip-path", "shape(nonzero, close)"); test_invalid_value("clip-path", "shape(from 0px 10px)"); test_invalid_value("clip-path", "shape(allkindsofnonsense)"); test_invalid_value("clip-path", "shape(arc)"); </script> </body> </html>