shape-function-invalid.html (4641B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Shapes Module Level 1: parsing the shape() function</title> 6 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> 7 <meta name="assert" content="Tests parsing of the circle() function"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/parsing-testcommon.js"></script> 11 </head> 12 <body> 13 <script> 14 test_invalid_value("clip-path", "shape(from 20px 40px line to 20px 30px)"); 15 test_invalid_value("clip-path", "shape(from 20px 40px line to 20px 30px,)"); 16 test_invalid_value("clip-path", "shape(from 20px, 40px, line to 20px, 30px)"); 17 18 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to top)"); 19 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to bottom)"); 20 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to y-start)"); 21 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to y-end)"); 22 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to left)"); 23 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to right)"); 24 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to x-start)"); 25 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to x-end)"); 26 27 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to top 20px)"); 28 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to right, vline to bottom left, close)"); 29 30 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline by left)"); 31 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline by right)"); 32 33 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline by top)"); 34 test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline by bottom)"); 35 36 // Control points start after "with" 37 test_invalid_value("clip-path", "shape(from 20px 40px, curve to 20px 20px, using 10px 30px)"); 38 test_invalid_value("clip-path", "shape(from 20px 40px, curve to 20px 20px using 10px 30px, 12px 32px)"); 39 40 test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px, using 10px 30px)"); 41 test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px using 10px 30px, 12px 32px)"); 42 test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px via 10px 30px)"); 43 test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px via 10px 30px 12px 32px)"); 44 45 test_invalid_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px via 10px 30px / 12px 32px)"); 46 test_invalid_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px using 10px 30px 12px 32px)"); 47 48 // Multiple control points should be separated by / 49 test_invalid_value("clip-path", "shape(from 20px 40px, curve to 20px 20px with 10px 30px 12px 32px)"); 50 test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px 12px 32px)"); 51 test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px /)"); 52 53 // <position> in places that only accept <coordinate-pair> 54 test_invalid_value("clip-path", "shape(from 20px 40px, curve by top left using 10px 30px)"); 55 test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 30px using top right)"); 56 test_invalid_value("clip-path", "shape(from 20px 40px, curve to 20px 30px using top right / 20px from end)"); 57 58 test_invalid_value("clip-path", "shape(from 20px 40px, arc by top right of 10% 20%)"); 59 test_invalid_value("clip-path", "shape(from 20px 40px, arc by 10px 20px of top right small cw)"); 60 61 // "from start" only applies to control points 62 test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 30px from start, using 23px 32px)"); 63 64 // 'from origin' not allowed for <position> control points 65 test_invalid_value("clip-path", "shape(from 20px 40px, curve to 20px 20px using top left from origin / 12px 32px from end)"); 66 67 test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% 12deg)"); 68 test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% rotate 12deg rotate 13deg)"); 69 test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large 12deg)"); 70 test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% small large)"); 71 test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw ccw)"); 72 </script> 73 </body> 74 </html>