6 div { font-size: 8px; }
8 <script src="../../../resources/js-test.js"></script>
11 <script src="parsing-test-utils.js"></script>
13 description('Test that basic shapes accept different length units');
15 // The test functions and globals used here are defined parsing-test-utils.js.
17 function getStyleValue(property, value) {
18 var div = document.createElement("div");
19 div.style.setProperty(property, value);
20 return div.style.getPropertyValue(property);
23 function testStyleValue(value, expected) {
24 if (expected === null)
25 shouldBeNull('getStyleValue("shape-inside", "' + value + '")');
27 shouldBeEqualToString('getStyleValue("shape-inside", "' + value + '")', expected);
29 function testComputedStyleValue(value, expected) {
30 testShapeComputedProperty("shape-inside", value, expected);
33 function testInvalidValue(property, value) {
34 testStyleValue(value, null);
35 testComputedStyleValue(value, 'none');
38 // absolute lengths - number serialization, units
39 testStyleValue("circle(0, 0, 0)", "circle(0px, 0px, 0px)");
40 testStyleValue("circle(-1px, +1px, 1px)", "circle(-1px, 1px, 1px)");
41 testStyleValue("circle(-1.5px, +1.5px, 1.5px)", "circle(-1.5px, 1.5px, 1.5px)");
42 testStyleValue("circle(-.5px, +.5px, .5px)", "circle(-0.5px, 0.5px, 0.5px)");
44 testStyleValue("rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)", "rectangle(1cm, 1mm, 1in, 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 round 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)");
48 testStyleValue("inset(-1cm 1mm -1in 1px round 1pt 1pc)", "inset(-1cm 1mm -1in 1px round 1pt 1pc 1pt 1pc / 1pt 1pc 1pt 1pc)");
50 // font-relative lengths - number serialization, units, resolution
51 testStyleValue("circle(-1em, +1em, 1em)", "circle(-1em, 1em, 1em)");
52 testStyleValue("circle(-1.5em, +1.5em, 1.5em)", "circle(-1.5em, 1.5em, 1.5em)");
53 testStyleValue("circle(-.5em, +.5em, .5em)", "circle(-0.5em, 0.5em, 0.5em)");
55 testStyleValue("circle(1ex, 1ex, 1ex)", "circle(1ex, 1ex, 1ex)");
56 // FIXME: Add ch test when it is supported
57 testStyleValue("circle(1rem, 1rem, 1rem)", "circle(1rem, 1rem, 1rem)");
59 testComputedStyleValue("circle(.5em, 1em, 1.5em)", "circle(4px, 8px, 12px)");
60 testComputedStyleValue("circle(.5rem, 1rem, 1.5rem)", "circle(8px, 16px, 24px)");
62 // viewport-percentage lengths - units, resolution
63 testStyleValue("circle(1vw, 1vw, 1vw)", "circle(1vw, 1vw, 1vw)");
64 testStyleValue("circle(1vh, 1vh, 1vh)", "circle(1vh, 1vh, 1vh)");
65 testStyleValue("circle(1vmin, 1vmin, 1vmin)", "circle(1vmin, 1vmin, 1vmin)");
67 testComputedStyleValue("circle(.5vw, 1vw, 1.5vw)", "circle(4px, 8px, 12px)");
68 testComputedStyleValue("circle(.5vh, 1vh, 1.5vh)", "circle(3px, 6px, 9px)");
69 testComputedStyleValue("circle(.5vmin, 1vmin, 1.5vmin)", "circle(3px, 6px, 9px)");
71 // percentage lengths - units
72 testStyleValue("circle(100%, 100%, 100%)", "circle(100%, 100%, 100%)");
73 testStyleValue("rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "rectangle(45%, 45%, 90%, 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% round 25% 10% 25% 10% / 25% 10% 25% 10%)");
76 testStyleValue("ellipse(100%, 100%, 100%, 100%)", "ellipse(100%, 100%, 100%, 100%)");
77 testStyleValue("polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(nonzero, 10% 20%, 30% 40%, 40% 50%)");
79 testComputedStyleValue("circle(50%, 100%, 150%)", "circle(50%, 100%, 150%)");
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-rectangle(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%)");
83 testComputedStyleValue("ellipse(100%, 100%, 100%, 100%)", "ellipse(100%, 100%, 100%, 100%)");
84 testComputedStyleValue("polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(nonzero, 10% 20%, 30% 40%, 40% 50%)");
87 testInvalidValue("shape-inside", "circle(1px, 1px, 1)");
88 testInvalidValue("shape-inside", "circle(1px, 1px, px)");
89 testInvalidValue("shape-inside", "circle(1px, 1px, 1p)");
90 testInvalidValue("shape-inside", "circle(1px, 1px, calc())");
92 // reject negative radiuses
93 testInvalidValue("shape-inside", "circle(-1.5px, +1.5px, -1.5px)");
94 testInvalidValue("shape-inside", "rectangle(1cm, 1mm, 1in, 1px, -1pt, 1pc)");
95 testInvalidValue("shape-inside", "rectangle(1cm, 1mm, 1in, 1px, 1pt, -1pc)");
96 testInvalidValue("shape-inside", "inset-rectangle(1cm, 1mm, 1in, 1px, -1pt, 1pc)");
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)");
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)");
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)");