shape-function-computed.html (5404B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Shapes Module Level 2: computed values for 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/computed-testcommon.js"></script> 11 </head> 12 <body> 13 <div id="target"></div> 14 <script> 15 test_computed_value("clip-path", "shape(from 20px 40px, line to 20px 30px)"); 16 test_computed_value("clip-path", "shape(from 20px 40px, line to 20px 30px )", "shape(from 20px 40px, line to 20px 30px)"); 17 test_computed_value("clip-path", "shape(from 0 0, line to 100% 100%)", "shape(from 0px 0px, line to 100% 100%)"); 18 19 test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, line by 20px 30px)"); 20 test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to 100px)"); 21 test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline by 100%)"); 22 test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to 100px)"); 23 test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline by 100%)"); 24 25 test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to left, hline to center, hline to right)", 26 "shape(from 20px 40px, move to 20px 30px, hline to 0%, hline to 50%, hline to 100%)"); 27 test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to x-start, vline to y-start)", 28 "shape(from 20px 40px, move to 20px 30px, hline to 0%, vline to 0%)"); 29 test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to top, vline to center, vline to bottom)", 30 "shape(from 20px 40px, move to 20px 30px, vline to 0%, vline to 50%, vline to 100%)"); 31 test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to y-start, vline to y-end)", 32 "shape(from 20px 40px, move to 20px 30px, vline to 0%, vline to 100%)"); 33 34 test_computed_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px)"); 35 test_computed_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px / 12px 32px)"); 36 37 test_computed_value("clip-path", "shape(from center, curve to center bottom with top right / bottom right)", 38 "shape(from 50% 50%, curve to 50% 100% with 100% 0% / 100% 100%)"); 39 40 test_computed_value("clip-path", "shape(from center, curve by 20px 20px with 10px 30px from end / 12px 32px from start)", 41 "shape(from 50% 50%, curve by 20px 20px with 10px 30px from end / 12px 32px)"); 42 43 test_computed_value("clip-path", "shape(from center right, curve by 20px 20px with 10px 30px from origin / 12px 32px from origin)", 44 "shape(from 100% 50%, curve by 20px 20px with 10px 30px from origin / 12px 32px from origin)"); 45 46 test_computed_value("clip-path", "shape(from 20px 40px, curve to top right with 10px 30px from origin / 12px 32px from origin)", 47 "shape(from 20px 40px, curve to 100% 0% with 10px 30px / 12px 32px)"); 48 49 test_computed_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px)"); 50 test_computed_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px with 12px 32px)"); 51 52 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10%)"); 53 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 0)", "shape(from 20px 40px, arc by 20px 20px of 0px)"); 54 test_computed_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)"); 55 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% rotate 0deg)", "shape(from 20px 40px, arc by 20px 20px of 10%)"); 56 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20%)"); 57 58 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw)"); 59 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large)"); 60 61 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of -10% -20% large)"); 62 63 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% rotate 1deg)"); 64 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 12deg)"); 65 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 3.14159265rad)", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 180deg)"); 66 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)"); 67 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)"); 68 test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large cw)", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)"); 69 test_computed_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)"); 70 71 document.getElementById('target').remove(); 72 </script> 73 </body> 74 </html>