OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <style> | 3 <style> |
4 * { font-size: 16px; } | 4 * { font-size: 16px; } |
5 div { font-size: 8px; } | 5 div { font-size: 8px; } |
6 </style> | 6 </style> |
7 <body> | 7 <body> |
8 <script src="../../resources/js-test.js"></script> | 8 <script src="../../resources/js-test.js"></script> |
9 <script> | 9 <script> |
10 description('Test that clip-path shapes accept different length units'); | 10 description('Test that clip-path shapes accept different length units'); |
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
62 testInner("-webkit-clip-path", "circle(1vw at 1vw 1vw)", "circle(1vw at 1vw 1vw)
"); | 62 testInner("-webkit-clip-path", "circle(1vw at 1vw 1vw)", "circle(1vw at 1vw 1vw)
"); |
63 testInner("-webkit-clip-path", "circle(1vh at 1vh 1vh)", "circle(1vh at 1vh 1vh)
"); | 63 testInner("-webkit-clip-path", "circle(1vh at 1vh 1vh)", "circle(1vh at 1vh 1vh)
"); |
64 testInner("-webkit-clip-path", "circle(1vmin at 1vmin 1vmin)", "circle(1vmin at
1vmin 1vmin)"); | 64 testInner("-webkit-clip-path", "circle(1vmin at 1vmin 1vmin)", "circle(1vmin at
1vmin 1vmin)"); |
65 | 65 |
66 testComputed("-webkit-clip-path", "circle(1.5vw at .5vw 1vw)", "circle(12px at 4
px 8px)"); | 66 testComputed("-webkit-clip-path", "circle(1.5vw at .5vw 1vw)", "circle(12px at 4
px 8px)"); |
67 testComputed("-webkit-clip-path", "circle(1.5vh at .5vh 1vh)", "circle(9px at 3p
x 6px)"); | 67 testComputed("-webkit-clip-path", "circle(1.5vh at .5vh 1vh)", "circle(9px at 3p
x 6px)"); |
68 testComputed("-webkit-clip-path", "circle(1.5vmin at .5vmin 1vmin)", "circle(9px
at 3px 6px)"); | 68 testComputed("-webkit-clip-path", "circle(1.5vmin at .5vmin 1vmin)", "circle(9px
at 3px 6px)"); |
69 | 69 |
70 // percentage lengths - units | 70 // percentage lengths - units |
71 testComputed("-webkit-clip-path", "circle(150% at 50% 100%)", "circle(150% at 50
% 100%)"); | 71 testComputed("-webkit-clip-path", "circle(150% at 50% 100%)", "circle(150% at 50
% 100%)"); |
72 testComputed("-webkit-clip-path", "inset(45% 45% 90% 60% round 25% 10%)", "inset
(45% 45% 90% 60% round 25% 10% 25% 10% / 25% 10% 25% 10%)"); | 72 testComputed("-webkit-clip-path", "inset(45% 45% 90% 60% round 25% 10%)", "inset
(45% 45% 90% 60% round 25% 10%)"); |
73 testComputed("-webkit-clip-path", "ellipse(100% 100% at 100% 100%)", "ellipse(10
0% 100% at 100% 100%)"); | 73 testComputed("-webkit-clip-path", "ellipse(100% 100% at 100% 100%)", "ellipse(10
0% 100% at 100% 100%)"); |
74 testComputed("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon
(10% 20%, 30% 40%, 40% 50%)"); | 74 testComputed("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon
(10% 20%, 30% 40%, 40% 50%)"); |
75 | 75 |
76 // reject non-lengths | 76 // reject non-lengths |
77 negativeTest("-webkit-clip-path", "circle(1 at 1px 1px)"); | 77 negativeTest("-webkit-clip-path", "circle(1 at 1px 1px)"); |
78 negativeTest("-webkit-clip-path", "circle(px at 1px 1px)"); | 78 negativeTest("-webkit-clip-path", "circle(px at 1px 1px)"); |
79 negativeTest("-webkit-clip-path", "circle(1p at 1px 1px)"); | 79 negativeTest("-webkit-clip-path", "circle(1p at 1px 1px)"); |
80 negativeTest("-webkit-clip-path", "circle(calc() at 1px 1px)"); | 80 negativeTest("-webkit-clip-path", "circle(calc() at 1px 1px)"); |
81 | 81 |
82 // reject negative radiuses | 82 // reject negative radiuses |
83 negativeTest("-webkit-clip-path", "circle(-1.5px at -1.5px +1.5px)"); | 83 negativeTest("-webkit-clip-path", "circle(-1.5px at -1.5px +1.5px)"); |
84 negativeTest("-webkit-clip-path", "inset(1cm 1mm 1in 1px round -1pt, 1pc)"); | 84 negativeTest("-webkit-clip-path", "inset(1cm 1mm 1in 1px round -1pt, 1pc)"); |
85 negativeTest("-webkit-clip-path", "inset(1cm 1mm 1in 1px round 1pt -1pc)"); | 85 negativeTest("-webkit-clip-path", "inset(1cm 1mm 1in 1px round 1pt -1pc)"); |
86 negativeTest("-webkit-clip-path", "ellipse(-1em 1em at 1em 1em)"); | 86 negativeTest("-webkit-clip-path", "ellipse(-1em 1em at 1em 1em)"); |
87 negativeTest("-webkit-clip-path", "ellipse(1em -1em at 1em 1em)"); | 87 negativeTest("-webkit-clip-path", "ellipse(1em -1em at 1em 1em)"); |
88 | 88 |
89 // general negative tests | 89 // general negative tests |
90 negativeTest("-webkit-clip-path", "polygon(0, 0)"); | 90 negativeTest("-webkit-clip-path", "polygon(0, 0)"); |
91 negativeTest("-webkit-clip-path", "polygon(0 0, 0)"); | 91 negativeTest("-webkit-clip-path", "polygon(0 0, 0)"); |
92 negativeTest("-webkit-clip-path", "polygon(0)"); | 92 negativeTest("-webkit-clip-path", "polygon(0)"); |
93 negativeTest("-webkit-clip-path", "polygon()"); | 93 negativeTest("-webkit-clip-path", "polygon()"); |
94 negativeTest("-webkit-clip-path", "polygon(evenodd)"); | 94 negativeTest("-webkit-clip-path", "polygon(evenodd)"); |
95 negativeTest("-webkit-clip-path", "polygon(nonzero)"); | 95 negativeTest("-webkit-clip-path", "polygon(nonzero)"); |
96 | 96 |
97 </script> | 97 </script> |
98 </body> | 98 </body> |
99 </html> | 99 </html> |
OLD | NEW |