OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 * { font-size: 16px; } | 5 * { font-size: 16px; } |
6 div { font-size: 8px; } | 6 div { font-size: 8px; } |
7 </style> | 7 </style> |
8 <script src="../../../resources/js-test.js"></script> | 8 <script src="../../../resources/js-test.js"></script> |
9 </head> | 9 </head> |
10 <body> | 10 <body> |
(...skipping 18 matching lines...) Expand all Loading... |
29 function testComputedStyleValue(value, expected) { | 29 function testComputedStyleValue(value, expected) { |
30 testShapeComputedProperty("shape-inside", value, expected); | 30 testShapeComputedProperty("shape-inside", value, expected); |
31 } | 31 } |
32 | 32 |
33 function testInvalidValue(property, value) { | 33 function testInvalidValue(property, value) { |
34 testStyleValue(value, null); | 34 testStyleValue(value, null); |
35 testComputedStyleValue(value, 'none'); | 35 testComputedStyleValue(value, 'none'); |
36 } | 36 } |
37 | 37 |
38 // absolute lengths - number serialization, units | 38 // absolute lengths - number serialization, units |
39 testStyleValue("circle(0, 0, 0)", "circle(0px, 0px, 0px)"); | 39 testStyleValue("circle(0 at 0 0)", "circle(0px at 0% 0%)"); |
40 testStyleValue("circle(-1px, +1px, 1px)", "circle(-1px, 1px, 1px)"); | 40 testStyleValue("circle(1px at +1px -1px)", "circle(1px at 1px -1px)"); |
41 testStyleValue("circle(-1.5px, +1.5px, 1.5px)", "circle(-1.5px, 1.5px, 1.5px)"); | 41 testStyleValue("circle(1.5px at -1.5px +1.5px)", "circle(1.5px at -1.5px 1.5px)"
); |
42 testStyleValue("circle(-.5px, +.5px, .5px)", "circle(-0.5px, 0.5px, 0.5px)"); | 42 testStyleValue("circle(.5px at -.5px +.5px)", "circle(0.5px at -0.5px 0.5px)"); |
43 | 43 |
44 testStyleValue("rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)", "rectangle(1cm, 1mm, 1
in, 1px, 1pt, 1pc)"); | |
45 testStyleValue("inset-rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)", "inset-rectangle
(1cm, 1mm, 1in, 1px, 1pt, 1pc)"); | |
46 testStyleValue("inset(1cm 1mm 1in 1px round 1pt 1pc)", "inset(1cm 1mm 1in 1px ro
und 1pt 1pc 1pt 1pc / 1pt 1pc 1pt 1pc)"); | 44 testStyleValue("inset(1cm 1mm 1in 1px round 1pt 1pc)", "inset(1cm 1mm 1in 1px ro
und 1pt 1pc 1pt 1pc / 1pt 1pc 1pt 1pc)"); |
47 testStyleValue("inset(-1cm 1mm 1in 1px round 1pt 1pc)", "inset(-1cm 1mm 1in 1px
round 1pt 1pc 1pt 1pc / 1pt 1pc 1pt 1pc)"); | 45 testStyleValue("inset(-1px 1px 1px 1px round 1px 1px 1px 1px)", "inset(-1px 1px
1px 1px round 1px 1px 1px 1px / 1px 1px 1px 1px)"); |
48 testStyleValue("inset(-1cm 1mm -1in 1px round 1pt 1pc)", "inset(-1cm 1mm -1in 1p
x round 1pt 1pc 1pt 1pc / 1pt 1pc 1pt 1pc)"); | 46 testStyleValue("inset(1px -1px 1px 1px round 1px 1px 1px 1px)", "inset(1px -1px
1px 1px round 1px 1px 1px 1px / 1px 1px 1px 1px)"); |
| 47 testStyleValue("inset(1px 1px -1px 1px round 1px 1px 1px 1px)", "inset(1px 1px -
1px 1px round 1px 1px 1px 1px / 1px 1px 1px 1px)"); |
| 48 testStyleValue("inset(1px 1px 1px -1px round 1px 1px 1px 1px)", "inset(1px 1px 1
px -1px round 1px 1px 1px 1px / 1px 1px 1px 1px)"); |
49 | 49 |
50 // font-relative lengths - number serialization, units, resolution | 50 // font-relative lengths - number serialization, units, resolution |
51 testStyleValue("circle(-1em, +1em, 1em)", "circle(-1em, 1em, 1em)"); | 51 testStyleValue("circle(1em at -1em +1em)", "circle(1em at -1em 1em)"); |
52 testStyleValue("circle(-1.5em, +1.5em, 1.5em)", "circle(-1.5em, 1.5em, 1.5em)"); | 52 testStyleValue("circle(1.5em at -1.5em +1.5em)", "circle(1.5em at -1.5em 1.5em)"
); |
53 testStyleValue("circle(-.5em, +.5em, .5em)", "circle(-0.5em, 0.5em, 0.5em)"); | 53 testStyleValue("circle(.5em at -.5em +.5em)", "circle(0.5em at -0.5em 0.5em)"); |
54 | 54 |
55 testStyleValue("circle(1ex, 1ex, 1ex)", "circle(1ex, 1ex, 1ex)"); | 55 testStyleValue("circle(1ex at 1ex 1ex)", "circle(1ex at 1ex 1ex)"); |
56 // FIXME: Add ch test when it is supported | 56 // FIXME: Add ch test when it is supported |
57 testStyleValue("circle(1rem, 1rem, 1rem)", "circle(1rem, 1rem, 1rem)"); | 57 testStyleValue("circle(1rem at 1rem 1rem)", "circle(1rem at 1rem 1rem)"); |
58 | 58 |
59 testComputedStyleValue("circle(.5em, 1em, 1.5em)", "circle(4px, 8px, 12px)"); | 59 testComputedStyleValue("circle(1.5em at .5em 1em)", "circle(12px at 4px 8px)"); |
60 testComputedStyleValue("circle(.5rem, 1rem, 1.5rem)", "circle(8px, 16px, 24px)")
; | 60 testComputedStyleValue("circle(1.5rem at .5rem 1rem)", "circle(24px at 8px 16px)
"); |
61 | 61 |
62 // viewport-percentage lengths - units, resolution | 62 // viewport-percentage lengths - units, resolution |
63 testStyleValue("circle(1vw, 1vw, 1vw)", "circle(1vw, 1vw, 1vw)"); | 63 testStyleValue("circle(1vw at 1vw 1vw)", "circle(1vw at 1vw 1vw)"); |
64 testStyleValue("circle(1vh, 1vh, 1vh)", "circle(1vh, 1vh, 1vh)"); | 64 testStyleValue("circle(1vh at 1vh 1vh)", "circle(1vh at 1vh 1vh)"); |
65 testStyleValue("circle(1vmin, 1vmin, 1vmin)", "circle(1vmin, 1vmin, 1vmin)"); | 65 testStyleValue("circle(1vmin at 1vmin 1vmin)", "circle(1vmin at 1vmin 1vmin)"); |
66 | 66 |
67 testComputedStyleValue("circle(.5vw, 1vw, 1.5vw)", "circle(4px, 8px, 12px)"); | 67 testComputedStyleValue("circle(1.5vw at .5vw 1vw)", "circle(12px at 4px 8px)"); |
68 testComputedStyleValue("circle(.5vh, 1vh, 1.5vh)", "circle(3px, 6px, 9px)"); | 68 testComputedStyleValue("circle(1.5vh at .5vh 1vh)", "circle(9px at 3px 6px)"); |
69 testComputedStyleValue("circle(.5vmin, 1vmin, 1.5vmin)", "circle(3px, 6px, 9px)"
); | 69 testComputedStyleValue("circle(1.5vmin at .5vmin 1vmin)", "circle(9px at 3px 6px
)"); |
70 | 70 |
71 // percentage lengths - units | 71 // percentage lengths - units |
72 testStyleValue("circle(100%, 100%, 100%)", "circle(100%, 100%, 100%)"); | 72 testStyleValue("circle(100% at 100% 100%)", "circle(100% at 100% 100%)"); |
73 testStyleValue("rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "rectangle(45%, 45%, 9
0%, 60%, 25%, 10%)"); | |
74 testStyleValue("inset-rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "inset-rectangle
(45%, 45%, 90%, 60%, 25%, 10%)"); | |
75 testStyleValue("inset(45% 45% 90% 60% round 25% 10%)", "inset(45% 45% 90% 60% ro
und 25% 10% 25% 10% / 25% 10% 25% 10%)"); | 73 testStyleValue("inset(45% 45% 90% 60% round 25% 10%)", "inset(45% 45% 90% 60% ro
und 25% 10% 25% 10% / 25% 10% 25% 10%)"); |
76 testStyleValue("ellipse(100%, 100%, 100%, 100%)", "ellipse(100%, 100%, 100%, 100
%)"); | 74 testStyleValue("ellipse(100% 100% at 100% 100%)", "ellipse(100% 100% at 100% 100
%)"); |
77 testStyleValue("polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(10% 20%, 30% 40%,
40% 50%)"); | 75 testStyleValue("polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(10% 20%, 30% 40%,
40% 50%)"); |
78 | 76 |
79 testComputedStyleValue("circle(50%, 100%, 150%)", "circle(50%, 100%, 150%)"); | 77 testComputedStyleValue("circle(150% at 50% 100%)", "circle(150% at 50% 100%)"); |
80 testComputedStyleValue("rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "rectangle(45%
, 45%, 90%, 60%, 25%, 10%)"); | |
81 testComputedStyleValue("inset-rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "inset-r
ectangle(45%, 45%, 90%, 60%, 25%, 10%)"); | |
82 testComputedStyleValue("inset(45% 45% 90% 60% round 25% 10%)", "inset(45% 45% 90
% 60% round 25% 10% 25% 10% / 25% 10% 25% 10%)"); | 78 testComputedStyleValue("inset(45% 45% 90% 60% round 25% 10%)", "inset(45% 45% 90
% 60% round 25% 10% 25% 10% / 25% 10% 25% 10%)"); |
83 testComputedStyleValue("ellipse(100%, 100%, 100%, 100%)", "ellipse(100%, 100%, 1
00%, 100%)"); | 79 testComputedStyleValue("ellipse(100% 100% at 100% 100%)", "ellipse(100% 100% at
100% 100%)"); |
84 testComputedStyleValue("polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(10% 20%, 3
0% 40%, 40% 50%)"); | 80 testComputedStyleValue("polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(10% 20%, 3
0% 40%, 40% 50%)"); |
85 | 81 |
86 // reject non-lengths | 82 // reject non-lengths |
87 testInvalidValue("shape-inside", "circle(1px, 1px, 1)"); | 83 testInvalidValue("-webkit-shape-outside", "circle(1 at 1px 1px)"); |
88 testInvalidValue("shape-inside", "circle(1px, 1px, px)"); | 84 testInvalidValue("-webkit-shape-outside", "circle(px at 1px 1px)"); |
89 testInvalidValue("shape-inside", "circle(1px, 1px, 1p)"); | 85 testInvalidValue("-webkit-shape-outside", "circle(1p at 1px 1px)"); |
90 testInvalidValue("shape-inside", "circle(1px, 1px, calc())"); | 86 testInvalidValue("-webkit-shape-outside", "circle(calc( at 1px 1px))"); |
91 | 87 |
92 // reject negative radiuses | 88 // reject negative radiuses |
93 testInvalidValue("shape-inside", "circle(-1.5px, +1.5px, -1.5px)"); | 89 testInvalidValue("shape-outside", "circle(-1.5px at -1.5px +1.5px)"); |
94 testInvalidValue("shape-inside", "rectangle(1cm, 1mm, 1in, 1px, -1pt, 1pc)"); | 90 testInvalidValue("shape-outside", "inset(1cm 1mm 1in 1px round 1pt -1pc)"); |
95 testInvalidValue("shape-inside", "rectangle(1cm, 1mm, 1in, 1px, 1pt, -1pc)"); | 91 testInvalidValue("shape-outside", "ellipse(-1em 1em at 1em 1em)"); |
96 testInvalidValue("shape-inside", "inset-rectangle(1cm, 1mm, 1in, 1px, -1pt, 1pc)
"); | 92 testInvalidValue("shape-outside", "ellipse(1em -1em at 1em 1em)"); |
97 testInvalidValue("shape-inside", "inset-rectangle(1cm, 1mm, 1in, 1px, 1pt, -1pc)
"); | |
98 testInvalidValue("shape-inside", "inset(1cm 1mm 1in 1px round 1pt -1pc)"); | |
99 testInvalidValue("shape-inside", "ellipse(1em, 1em, -1em, 1em)"); | |
100 testInvalidValue("shape-inside", "ellipse(1em, 1em, 1em, -1em)"); | |
101 | 93 |
102 // reject negative height and width | |
103 testInvalidValue("shape-inside", "rectangle(1cm, 1mm, -1in, 1px, 1pt, 1pc)"); | |
104 testInvalidValue("shape-inside", "rectangle(1cm, 1mm, 1in, -1px, 1pt, 1pc)"); | |
105 | |
106 // reject negative top, right, bottom, and left | |
107 testInvalidValue("shape-inside", "inset-rectangle(-1cm, 1mm, 1in, 1px, 1pt, 1pc)
"); | |
108 testInvalidValue("shape-inside", "inset-rectangle(1cm, -1mm, 1in, 1px, 1pt, 1pc)
"); | |
109 testInvalidValue("shape-inside", "inset-rectangle(1cm, 1mm, -1in, 1px, 1pt, 1pc)
"); | |
110 testInvalidValue("shape-inside", "inset-rectangle(1cm, 1mm, 1in, -1px, 1pt, 1pc)
"); | |
111 </script> | 94 </script> |
112 </body> | 95 </body> |
113 </html> | 96 </html> |
OLD | NEW |