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 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
58 testInner("-webkit-clip-path", "circle(1rem, 1rem, 1rem)", "circle(1rem, 1rem, 1
rem)"); | 58 testInner("-webkit-clip-path", "circle(1rem, 1rem, 1rem)", "circle(1rem, 1rem, 1
rem)"); |
59 | 59 |
60 testComputed("-webkit-clip-path", "circle(.5em, 1em, 1.5em)", "circle(4px, 8px,
12px)"); | 60 testComputed("-webkit-clip-path", "circle(.5em, 1em, 1.5em)", "circle(4px, 8px,
12px)"); |
61 testComputed("-webkit-clip-path", "circle(.5rem, 1rem, 1.5rem)", "circle(8px, 16
px, 24px)"); | 61 testComputed("-webkit-clip-path", "circle(.5rem, 1rem, 1.5rem)", "circle(8px, 16
px, 24px)"); |
62 | 62 |
63 // viewport-percentage lengths - units, resolution | 63 // viewport-percentage lengths - units, resolution |
64 testInner("-webkit-clip-path", "circle(1vw, 1vw, 1vw)", "circle(1vw, 1vw, 1vw)")
; | 64 testInner("-webkit-clip-path", "circle(1vw, 1vw, 1vw)", "circle(1vw, 1vw, 1vw)")
; |
65 testInner("-webkit-clip-path", "circle(1vh, 1vh, 1vh)", "circle(1vh, 1vh, 1vh)")
; | 65 testInner("-webkit-clip-path", "circle(1vh, 1vh, 1vh)", "circle(1vh, 1vh, 1vh)")
; |
66 testInner("-webkit-clip-path", "circle(1vmin, 1vmin, 1vmin)", "circle(1vmin, 1vm
in, 1vmin)"); | 66 testInner("-webkit-clip-path", "circle(1vmin, 1vmin, 1vmin)", "circle(1vmin, 1vm
in, 1vmin)"); |
67 | 67 |
68 testComputed("-webkit-clip-path", "circle(.5vw, 1vw, 1.5vw)", "circle(0.5vw, 1vw
, 1.5vw)"); | 68 testComputed("-webkit-clip-path", "circle(.5vw, 1vw, 1.5vw)", "circle(4px, 8px,
12px)"); |
69 testComputed("-webkit-clip-path", "circle(.5vh, 1vh, 1.5vh)", "circle(0.5vh, 1vh
, 1.5vh)"); | 69 testComputed("-webkit-clip-path", "circle(.5vh, 1vh, 1.5vh)", "circle(3px, 6px,
9px)"); |
70 testComputed("-webkit-clip-path", "circle(.5vmin, 1vmin, 1.5vmin)", "circle(0.5v
min, 1vmin, 1.5vmin)"); | 70 testComputed("-webkit-clip-path", "circle(.5vmin, 1vmin, 1.5vmin)", "circle(3px,
6px, 9px)"); |
71 | 71 |
72 // percentage lengths - units | 72 // percentage lengths - units |
73 testInner("-webkit-clip-path", "circle(100%, 100%, 100%)", "circle(100%, 100%, 1
00%)"); | 73 testInner("-webkit-clip-path", "circle(100%, 100%, 100%)", "circle(100%, 100%, 1
00%)"); |
74 testInner("-webkit-clip-path", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "recta
ngle(45%, 45%, 90%, 60%, 25%, 10%)"); | 74 testInner("-webkit-clip-path", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "recta
ngle(45%, 45%, 90%, 60%, 25%, 10%)"); |
75 testInner("-webkit-clip-path", "ellipse(100%, 100%, 100%, 100%)", "ellipse(100%,
100%, 100%, 100%)"); | 75 testInner("-webkit-clip-path", "ellipse(100%, 100%, 100%, 100%)", "ellipse(100%,
100%, 100%, 100%)"); |
76 testInner("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(no
nzero, 10% 20%, 30% 40%, 40% 50%)"); | 76 testInner("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(no
nzero, 10% 20%, 30% 40%, 40% 50%)"); |
77 | 77 |
78 testComputed("-webkit-clip-path", "circle(50%, 100%, 150%)", "circle(50%, 100%,
150%)"); | 78 testComputed("-webkit-clip-path", "circle(50%, 100%, 150%)", "circle(50%, 100%,
150%)"); |
79 testComputed("-webkit-clip-path", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "re
ctangle(45%, 45%, 90%, 60%, 25%, 10%)"); | 79 testComputed("-webkit-clip-path", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "re
ctangle(45%, 45%, 90%, 60%, 25%, 10%)"); |
80 testComputed("-webkit-clip-path", "ellipse(100%, 100%, 100%, 100%)", "ellipse(10
0%, 100%, 100%, 100%)"); | 80 testComputed("-webkit-clip-path", "ellipse(100%, 100%, 100%, 100%)", "ellipse(10
0%, 100%, 100%, 100%)"); |
(...skipping 23 matching lines...) Expand all Loading... |
104 negativeTest("-webkit-clip-path", "polygon(0, 0)"); | 104 negativeTest("-webkit-clip-path", "polygon(0, 0)"); |
105 negativeTest("-webkit-clip-path", "polygon(0 0, 0)"); | 105 negativeTest("-webkit-clip-path", "polygon(0 0, 0)"); |
106 negativeTest("-webkit-clip-path", "polygon(0)"); | 106 negativeTest("-webkit-clip-path", "polygon(0)"); |
107 negativeTest("-webkit-clip-path", "polygon()"); | 107 negativeTest("-webkit-clip-path", "polygon()"); |
108 negativeTest("-webkit-clip-path", "polygon(evenodd)"); | 108 negativeTest("-webkit-clip-path", "polygon(evenodd)"); |
109 negativeTest("-webkit-clip-path", "polygon(nonzero)"); | 109 negativeTest("-webkit-clip-path", "polygon(nonzero)"); |
110 | 110 |
111 </script> | 111 </script> |
112 </body> | 112 </body> |
113 </html> | 113 </html> |
OLD | NEW |