clip-path-shape-parsing.html (4152B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> 6 <meta name="assert" content="clip-path supports the full shape() grammar."> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/parsing-testcommon.js"></script> 10 </head> 11 <body> 12 <script> 13 // basic 14 test_valid_value("clip-path", "shape(from 0px 0px, line to 10px 10px)"); 15 test_valid_value("clip-path", "shape(evenodd from 0px 0px, line to 10px 10px)"); 16 test_valid_value("clip-path", "shape(nonzero from 0px 0px, line to 10px 10px)", "shape(from 0px 0px, line to 10px 10px)"); 17 test_valid_value("clip-path", "shape( from 0px 0px, line to 10px 10px )", "shape(from 0px 0px, line to 10px 10px)"); 18 test_valid_value("clip-path", "shape(from 1em 50%, line to 10px 10px)"); 19 test_valid_value("clip-path", "shape(EvenOdd from 0px 0Px, CLOSE)", "shape(evenodd from 0px 0px, close)"); 20 test_valid_value("clip-path", "shape(from 1ch 50px, line to 10rem 10vh)"); 21 test_valid_value("clip-path", "shape(from 1ch -50px, line to -10% 12px)"); 22 23 // segment types 24 test_valid_value("clip-path", "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)"); 25 test_valid_value("clip-path", "shape(from 10px 10px, hline by 10px, vline to 5rem)"); 26 test_valid_value("clip-path", "shape(from 10px 10px, vline by 5%, hline to 1vw)"); 27 test_valid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px with 10rem 1%)"); 28 test_valid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px with 10rem 1px / 20vh 1ch)"); 29 test_valid_value("clip-path", "shape(from 10px 10px, curve by 50px 20px with 10rem 1px / 20vh 1ch)"); 30 test_valid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px with 10rem 1%)"); 31 test_valid_value("clip-path", "shape(from 10px 10px, smooth to 50px 1pt)"); 32 test_valid_value("clip-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px)"); 33 test_valid_value("clip-path", "shape(from 10px 10px, arc to 50px 1pt of 10%)"); 34 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)"); 35 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)"); 36 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)"); 37 test_valid_value("clip-path", "shape(evenodd from 0px 0px, close)"); 38 39 // arc with wrong order 40 test_invalid_value("clip-path", "shape(from 10% 1rem, arc of 20% 1pt to 50px cw large rotate 25deg)"); 41 test_invalid_value("clip-path", "shape(from 10% 1rem, arc cw to 50px of 20% 1pt large rotate 25deg)"); 42 test_invalid_value("clip-path", "shape(from 10% 1rem, arc rotate 25deg to 50px 1pt of 20% cw large )"); 43 44 // nonsense 45 test_invalid_value("clip-path", "shape(evenodd from 0px 0px, close path)"); 46 test_invalid_value("clip-path", "shape(nonzero, from 0px 0px, line to 10px 10px)"); 47 test_invalid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px via 10rem)"); 48 test_invalid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1% 12px)"); 49 test_invalid_value("clip-path", "shape(from 10px 10px, hline byy 10px, vline to 5rem)"); 50 test_invalid_value("clip-path", "shape(from 10px 10px, vline by 5% hline by 1vw"); 51 test_invalid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem)"); 52 test_invalid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 2px 2pt)"); 53 test_invalid_value("clip-path", "shape()"); 54 test_invalid_value("clip-path", "shape(from)"); 55 test_invalid_value("clip-path", "shape(from 0px)"); 56 test_invalid_value("clip-path", "shape(from 0px 20px,)"); 57 test_invalid_value("clip-path", "shape(close)"); 58 test_invalid_value("clip-path", "shape(nonzero, close)"); 59 test_invalid_value("clip-path", "shape(from 0px 10px)"); 60 test_invalid_value("clip-path", "shape(allkindsofnonsense)"); 61 test_invalid_value("clip-path", "shape(arc)"); 62 </script> 63 </body> 64 </html>