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 28 matching lines...) Expand all Loading... |
39 testInner(property, value, null); | 39 testInner(property, value, null); |
40 testComputed(property, value, 'none'); | 40 testComputed(property, value, 'none'); |
41 } | 41 } |
42 | 42 |
43 // absolute lengths - number serialization, units | 43 // absolute lengths - number serialization, units |
44 testInner("-webkit-clip-path", "circle(0, 0, 0)", "circle(0px, 0px, 0px)"); | 44 testInner("-webkit-clip-path", "circle(0, 0, 0)", "circle(0px, 0px, 0px)"); |
45 testInner("-webkit-clip-path", "circle(-1px, +1px, 1px)", "circle(-1px, 1px, 1px
)"); | 45 testInner("-webkit-clip-path", "circle(-1px, +1px, 1px)", "circle(-1px, 1px, 1px
)"); |
46 testInner("-webkit-clip-path", "circle(-1.5px, +1.5px, 1.5px)", "circle(-1.5px,
1.5px, 1.5px)"); | 46 testInner("-webkit-clip-path", "circle(-1.5px, +1.5px, 1.5px)", "circle(-1.5px,
1.5px, 1.5px)"); |
47 testInner("-webkit-clip-path", "circle(-.5px, +.5px, .5px)", "circle(-0.5px, 0.5
px, 0.5px)"); | 47 testInner("-webkit-clip-path", "circle(-.5px, +.5px, .5px)", "circle(-0.5px, 0.5
px, 0.5px)"); |
48 | 48 |
| 49 testInner("-webkit-clip-path", "circle(0 at 0 0)", "circle(0px at 0px 0px)"); |
| 50 testInner("-webkit-clip-path", "circle(1px at -1px +1px)", "circle(1px at -1px 1
px)"); |
| 51 testInner("-webkit-clip-path", "circle(1.5px at -1.5px +1.5px)", "circle(1.5px a
t -1.5px 1.5px)"); |
| 52 testInner("-webkit-clip-path", "circle(.5px at -.5px +.5px)", "circle(0.5px at -
0.5px 0.5px)"); |
| 53 |
49 testInner("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)", "recta
ngle(1cm, 1mm, 1in, 1px, 1pt, 1pc)"); | 54 testInner("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)", "recta
ngle(1cm, 1mm, 1in, 1px, 1pt, 1pc)"); |
50 | 55 |
51 // font-relative lengths - number serialization, units, resolution | 56 // font-relative lengths - number serialization, units, resolution |
52 testInner("-webkit-clip-path", "circle(-1em, +1em, 1em)", "circle(-1em, 1em, 1em
)"); | 57 testInner("-webkit-clip-path", "circle(-1em, +1em, 1em)", "circle(-1em, 1em, 1em
)"); |
53 testInner("-webkit-clip-path", "circle(-1.5em, +1.5em, 1.5em)", "circle(-1.5em,
1.5em, 1.5em)"); | 58 testInner("-webkit-clip-path", "circle(-1.5em, +1.5em, 1.5em)", "circle(-1.5em,
1.5em, 1.5em)"); |
54 testInner("-webkit-clip-path", "circle(-.5em, +.5em, .5em)", "circle(-0.5em, 0.5
em, 0.5em)"); | 59 testInner("-webkit-clip-path", "circle(-.5em, +.5em, .5em)", "circle(-0.5em, 0.5
em, 0.5em)"); |
55 | 60 |
56 testInner("-webkit-clip-path", "circle(1ex, 1ex, 1ex)", "circle(1ex, 1ex, 1ex)")
; | 61 testInner("-webkit-clip-path", "circle(1ex, 1ex, 1ex)", "circle(1ex, 1ex, 1ex)")
; |
57 // FIXME: Add ch test when it is supported | 62 // FIXME: Add ch test when it is supported |
58 testInner("-webkit-clip-path", "circle(1rem, 1rem, 1rem)", "circle(1rem, 1rem, 1
rem)"); | 63 testInner("-webkit-clip-path", "circle(1rem, 1rem, 1rem)", "circle(1rem, 1rem, 1
rem)"); |
59 | 64 |
60 testComputed("-webkit-clip-path", "circle(.5em, 1em, 1.5em)", "circle(4px, 8px,
12px)"); | 65 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)"); | 66 testComputed("-webkit-clip-path", "circle(.5rem, 1rem, 1.5rem)", "circle(8px, 16
px, 24px)"); |
62 | 67 |
| 68 testInner("-webkit-clip-path", "circle(1em at -1em +1em)", "circle(1em at -1em 1
em)"); |
| 69 testInner("-webkit-clip-path", "circle(1.5em at -1.5em +1.5em)", "circle(1.5em a
t -1.5em 1.5em)"); |
| 70 testInner("-webkit-clip-path", "circle(.5em at -.5em +.5em)", "circle(0.5em at -
0.5em 0.5em)"); |
| 71 |
| 72 testInner("-webkit-clip-path", "circle(1ex at 1ex 1ex)", "circle(1ex at 1ex 1ex)
"); |
| 73 // FIXME: Add ch test when it is supported |
| 74 testInner("-webkit-clip-path", "circle(1rem at 1rem 1rem)", "circle(1rem at 1rem
1rem)"); |
| 75 |
| 76 testComputed("-webkit-clip-path", "circle(1.5em at .5em 1em)", "circle(12px at 4
px 8px)"); |
| 77 testComputed("-webkit-clip-path", "circle(1.5rem at .5rem 1rem)", "circle(24px a
t 8px 16px)"); |
| 78 |
63 // viewport-percentage lengths - units, resolution | 79 // viewport-percentage lengths - units, resolution |
64 testInner("-webkit-clip-path", "circle(1vw, 1vw, 1vw)", "circle(1vw, 1vw, 1vw)")
; | 80 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)")
; | 81 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)"); | 82 testInner("-webkit-clip-path", "circle(1vmin, 1vmin, 1vmin)", "circle(1vmin, 1vm
in, 1vmin)"); |
67 | 83 |
68 testComputed("-webkit-clip-path", "circle(.5vw, 1vw, 1.5vw)", "circle(0.5vw, 1vw
, 1.5vw)"); | 84 testComputed("-webkit-clip-path", "circle(.5vw, 1vw, 1.5vw)", "circle(0.5vw, 1vw
, 1.5vw)"); |
69 testComputed("-webkit-clip-path", "circle(.5vh, 1vh, 1.5vh)", "circle(0.5vh, 1vh
, 1.5vh)"); | 85 testComputed("-webkit-clip-path", "circle(.5vh, 1vh, 1.5vh)", "circle(0.5vh, 1vh
, 1.5vh)"); |
70 testComputed("-webkit-clip-path", "circle(.5vmin, 1vmin, 1.5vmin)", "circle(0.5v
min, 1vmin, 1.5vmin)"); | 86 testComputed("-webkit-clip-path", "circle(.5vmin, 1vmin, 1.5vmin)", "circle(0.5v
min, 1vmin, 1.5vmin)"); |
71 | 87 |
| 88 testInner("-webkit-clip-path", "circle(1vw at 1vw 1vw)", "circle(1vw at 1vw 1vw)
"); |
| 89 testInner("-webkit-clip-path", "circle(1vh at 1vh 1vh)", "circle(1vh at 1vh 1vh)
"); |
| 90 testInner("-webkit-clip-path", "circle(1vmin at 1vmin 1vmin)", "circle(1vmin at
1vmin 1vmin)"); |
| 91 |
| 92 testComputed("-webkit-clip-path", "circle(1.5vw at .5vw 1vw)", "circle(1.5vw at
0.5vw 1vw)"); |
| 93 testComputed("-webkit-clip-path", "circle(1.5vh at .5vh 1vh)", "circle(1.5vh at
0.5vh 1vh)"); |
| 94 testComputed("-webkit-clip-path", "circle(1.5vmin at .5vmin 1vmin)", "circle(1.5
vmin at 0.5vmin 1vmin)"); |
| 95 |
72 // percentage lengths - units | 96 // percentage lengths - units |
73 testInner("-webkit-clip-path", "circle(100%, 100%, 100%)", "circle(100%, 100%, 1
00%)"); | 97 testInner("-webkit-clip-path", "circle(100%, 100%, 100%)", "circle(100%, 100%, 1
00%)"); |
| 98 testInner("-webkit-clip-path", "circle(100% at 100% 100%)", "circle(100% at 100%
100%)"); |
74 testInner("-webkit-clip-path", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "recta
ngle(45%, 45%, 90%, 60%, 25%, 10%)"); | 99 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%)"); | 100 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%)"); | 101 testInner("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(no
nzero, 10% 20%, 30% 40%, 40% 50%)"); |
77 | 102 |
78 testComputed("-webkit-clip-path", "circle(50%, 100%, 150%)", "circle(50%, 100%,
150%)"); | 103 testComputed("-webkit-clip-path", "circle(50%, 100%, 150%)", "circle(50%, 100%,
150%)"); |
| 104 testComputed("-webkit-clip-path", "circle(150% at 50% 100%)", "circle(150% at 50
% 100%)"); |
79 testComputed("-webkit-clip-path", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "re
ctangle(45%, 45%, 90%, 60%, 25%, 10%)"); | 105 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%)"); | 106 testComputed("-webkit-clip-path", "ellipse(100%, 100%, 100%, 100%)", "ellipse(10
0%, 100%, 100%, 100%)"); |
81 testComputed("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon
(nonzero, 10% 20%, 30% 40%, 40% 50%)"); | 107 testComputed("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon
(nonzero, 10% 20%, 30% 40%, 40% 50%)"); |
82 | 108 |
83 // reject non-lengths | 109 // reject non-lengths |
84 negativeTest("-webkit-clip-path", "circle(1px, 1px, 1)"); | 110 negativeTest("-webkit-clip-path", "circle(1px, 1px, 1)"); |
85 negativeTest("-webkit-clip-path", "circle(1px, 1px, px)"); | 111 negativeTest("-webkit-clip-path", "circle(1px, 1px, px)"); |
86 negativeTest("-webkit-clip-path", "circle(1px, 1px, 1p)"); | 112 negativeTest("-webkit-clip-path", "circle(1px, 1px, 1p)"); |
87 negativeTest("-webkit-clip-path", "circle(1px, 1px, calc())"); | 113 negativeTest("-webkit-clip-path", "circle(1px, 1px, calc())"); |
88 | 114 |
| 115 negativeTest("-webkit-clip-path", "circle(1 at 1px 1px)"); |
| 116 negativeTest("-webkit-clip-path", "circle(px at 1px 1px)"); |
| 117 negativeTest("-webkit-clip-path", "circle(1p at 1px 1px)"); |
| 118 negativeTest("-webkit-clip-path", "circle(calc() at 1px 1px)"); |
| 119 |
89 // reject negative radiuses | 120 // reject negative radiuses |
90 negativeTest("-webkit-clip-path", "circle(-1.5px, +1.5px, -1.5px)"); | 121 negativeTest("-webkit-clip-path", "circle(-1.5px, +1.5px, -1.5px)"); |
| 122 negativeTest("-webkit-clip-path", "circle(-1.5px at -1.5px +1.5px)"); |
91 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, -1pt, 1pc)"); | 123 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, -1pt, 1pc)"); |
92 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, 1pt, -1pc)"); | 124 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, 1pt, -1pc)"); |
93 negativeTest("-webkit-clip-path", "ellipse(1em, 1em, -1em, 1em)"); | 125 negativeTest("-webkit-clip-path", "ellipse(1em, 1em, -1em, 1em)"); |
94 negativeTest("-webkit-clip-path", "ellipse(1em, 1em, 1em, -1em)"); | 126 negativeTest("-webkit-clip-path", "ellipse(1em, 1em, 1em, -1em)"); |
95 | 127 |
96 // reject negative height and width | 128 // reject negative height and width |
97 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, -1in, 1px, 1pt, 1pc)"); | 129 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, -1in, 1px, 1pt, 1pc)"); |
98 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, -1px, 1pt, 1pc)"); | 130 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, -1px, 1pt, 1pc)"); |
99 | 131 |
100 // general negative tests | 132 // general negative tests |
101 negativeTest("-webkit-clip-path", "circle(0, 0)"); | 133 negativeTest("-webkit-clip-path", "circle(0, 0)"); |
102 negativeTest("-webkit-clip-path", "circle(0)"); | |
103 negativeTest("-webkit-clip-path", "circle()"); | |
104 negativeTest("-webkit-clip-path", "polygon(0, 0)"); | 134 negativeTest("-webkit-clip-path", "polygon(0, 0)"); |
105 negativeTest("-webkit-clip-path", "polygon(0 0, 0)"); | 135 negativeTest("-webkit-clip-path", "polygon(0 0, 0)"); |
106 negativeTest("-webkit-clip-path", "polygon(0)"); | 136 negativeTest("-webkit-clip-path", "polygon(0)"); |
107 negativeTest("-webkit-clip-path", "polygon()"); | 137 negativeTest("-webkit-clip-path", "polygon()"); |
108 negativeTest("-webkit-clip-path", "polygon(evenodd)"); | 138 negativeTest("-webkit-clip-path", "polygon(evenodd)"); |
109 negativeTest("-webkit-clip-path", "polygon(nonzero)"); | 139 negativeTest("-webkit-clip-path", "polygon(nonzero)"); |
110 | 140 |
111 </script> | 141 </script> |
112 </body> | 142 </body> |
113 </html> | 143 </html> |
OLD | NEW |