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