shape-function-valid.html (7296B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Shapes Module Level 2: 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_valid_value("clip-path", "shape(from 20px 40px, line to 20px 30px)"); 15 test_valid_value("clip-path", "shape(from 20px 40px, line to 20px 30px )", "shape(from 20px 40px, line to 20px 30px)"); 16 test_valid_value("clip-path", "shape(from 0 0, line to 100% 100%)", "shape(from 0px 0px, line to 100% 100%)"); 17 18 test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, line by 20px 30px)"); 19 test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to 100px)"); 20 test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline by 100%)"); 21 test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to 100px)"); 22 test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline by 100%)"); 23 24 test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to left, hline to center, hline to right)"); 25 test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to x-start, vline to y-start)"); 26 test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to top, vline to center, vline to bottom)"); 27 test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to y-start, vline to y-end)"); 28 29 test_valid_value("clip-path", "shape(from 20px 40px, curve to 20px 20px with 10px 30px)"); 30 test_valid_value("clip-path", "shape(from 20px 40px, curve to 20em 20pt with 10vw 30vh)"); 31 test_valid_value("clip-path", "shape(from 20px 40px, curve to 10% 20% with 10px 30px / 12px 32px)"); 32 test_valid_value("clip-path", "shape(from 20px 40px, curve to top left with 10px 30px / 12px 32px)", 33 "shape(from 20px 40px, curve to left top with 10px 30px / 12px 32px)"); 34 35 test_valid_value("clip-path", "shape(from 20% 40%, curve to center with center right / bottom center)", 36 "shape(from 20% 40%, curve to center center with right center / center bottom)"); 37 38 test_valid_value("clip-path", "shape(from bottom right, curve to left with center right / bottom center)", 39 "shape(from right bottom, curve to left center with right center / center bottom)"); 40 41 test_valid_value("clip-path", "shape(from 20px 40px, curve to bottom left with 10px 30px from end)", 42 "shape(from 20px 40px, curve to left bottom with 10px 30px from end)"); 43 44 test_valid_value("clip-path", "shape(from 20px 40px, curve to right center with 10px 30px from start / 12px 32px from end)"); 45 test_valid_value("clip-path", "shape(from 20px 40px, curve to right center with 10px 30px from start/12px 32px from end)" 46 , "shape(from 20px 40px, curve to right center with 10px 30px from start / 12px 32px from end)"); 47 48 test_valid_value("clip-path", "shape(from 20px 40px, curve to right center with 10px 30px from end / 12px 32px from origin)", 49 "shape(from 20px 40px, curve to right center with 10px 30px from end / 12px 32px)"); 50 51 test_valid_value("clip-path", "shape(from 20px 40px, curve to right center with 10px 30px from origin / 12px 32px from start)", 52 "shape(from 20px 40px, curve to right center with 10px 30px / 12px 32px from start)"); 53 54 test_valid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px)"); 55 test_valid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px from origin)"); 56 test_valid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px / 12px 32px)"); 57 test_valid_value("clip-path", "shape(from 20px 40px, curve by 20% 20em with 10px 30px from start / 12px 32px from end)", 58 "shape(from 20px 40px, curve by 20% 20em with 10px 30px / 12px 32px from end)"); 59 test_valid_value("clip-path", "shape(from 20px 40px, curve by 20% 20em with 10.3% 30px from origin / 12pt 5.4% from start)", 60 "shape(from 20px 40px, curve by 20% 20em with 10.3% 30px from origin / 12pt 5.4%)"); 61 62 test_valid_value("clip-path", "shape(from top left, smooth to top right)", 63 "shape(from left top, smooth to right top)"); 64 65 test_valid_value("clip-path", "shape(from 20px 40px, smooth to center 20%)"); 66 67 test_valid_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px)"); 68 69 test_valid_value("clip-path", "shape(from right bottom, smooth by 20px 20px with 12px 32px)"); 70 71 test_valid_value("clip-path", "shape(from 20px 40px, smooth by 20pt 20px with 12px 32px from start)", 72 "shape(from 20px 40px, smooth by 20pt 20px with 12px 32px)"); 73 test_valid_value("clip-path", "shape(from center 40px, smooth by 20% 20% with 12px 32px from end)"); 74 test_valid_value("clip-path", "shape(from center, smooth by 20px 20px with 12px 32px from origin)", 75 "shape(from center center, smooth by 20px 20px with 12px 32px from origin)"); 76 77 test_valid_value("clip-path", "shape(from 20px 40px, arc to top right of 10%)", 78 "shape(from 20px 40px, arc to right top of 10%)"); 79 80 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10%)"); 81 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 0)", "shape(from 20px 40px, arc by 20px 20px of 0px)"); 82 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 0)", "shape(from 20px 40px, arc by 20px 20px of 10% 0px)"); 83 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20% 20pt of 10% rotate 0deg)", 84 "shape(from 20px 40px, arc by 20% 20pt of 10%)"); 85 86 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20%)"); 87 88 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw)"); 89 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large)"); 90 91 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of -10% -20% large)"); 92 93 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% rotate 1deg)"); 94 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 12deg)"); 95 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10px 20px cw rotate 0.52rad)"); 96 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)"); 97 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)"); 98 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large cw)", 99 "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)"); 100 test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% rotate 12deg large)", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)"); 101 </script> 102 </body> 103 </html>