241d109dff1483f0553c430ac4ffa2234447886c
[WebKit-https.git] / LayoutTests / fast / exclusions / parsing-wrap-shape-lengths.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 * { font-size: 16px; }
5 div { font-size: 8px; }
6 </style>
7 <body>
8 <script src="../js/resources/js-test-pre.js"></script>
9 <script>
10 description('Test that exclusion shapes accept different length units');
11
12 if (window.internals)
13     window.internals.settings.setCSSExclusionsEnabled(true);
14
15 function computedStyle(property, value) {
16     var div = document.createElement("div");
17     document.body.appendChild(div);
18     div.style.setProperty(property, value);
19     var computedValue = getComputedStyle(div).getPropertyValue(property);
20     document.body.removeChild(div);
21     return computedValue;
22 }
23
24 function innerStyle(property, value) {
25     var div = document.createElement("div");
26     div.style.setProperty(property, value);
27     return div.style.getPropertyValue(property);
28 }
29
30 function testComputed(property, value, expected) {
31     shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
32 }
33
34 function testInner(property, value, expected) {
35     if (expected === null)
36         shouldBeNull('innerStyle("' + property + '", "' + value + '")');
37     else
38         shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
39 }
40
41 function negativeTest(property, value) {
42     testInner(property, value, null);
43     testComputed(property, value, 'auto');
44 }
45
46 // absolute lengths - number serialization, units
47 testInner("-webkit-shape-inside", "circle(0, 0, 0)", "circle(0px, 0px, 0px)");
48 testInner("-webkit-shape-inside", "circle(-1px, +1px, 1px)", "circle(-1px, 1px, 1px)");
49 testInner("-webkit-shape-inside", "circle(-1.5px, +1.5px, 1.5px)", "circle(-1.5px, 1.5px, 1.5px)");
50 testInner("-webkit-shape-inside", "circle(-.5px, +.5px, .5px)", "circle(-0.5px, 0.5px, 0.5px)");
51
52 testInner("-webkit-shape-inside", "rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)", "rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)");
53
54 // font-relative lengths - number serialization, units, resolution
55 testInner("-webkit-shape-inside", "circle(-1em, +1em, 1em)", "circle(-1em, 1em, 1em)");
56 testInner("-webkit-shape-inside", "circle(-1.5em, +1.5em, 1.5em)", "circle(-1.5em, 1.5em, 1.5em)");
57 testInner("-webkit-shape-inside", "circle(-.5em, +.5em, .5em)", "circle(-0.5em, 0.5em, 0.5em)");
58
59 testInner("-webkit-shape-inside", "circle(1ex, 1ex, 1ex)", "circle(1ex, 1ex, 1ex)");
60 // FIXME: Add ch test when it is supported
61 testInner("-webkit-shape-inside", "circle(1rem, 1rem, 1rem)", "circle(1rem, 1rem, 1rem)");
62
63 testComputed("-webkit-shape-inside", "circle(.5em, 1em, 1.5em)", "circle(4px, 8px, 12px)");
64 testComputed("-webkit-shape-inside", "circle(.5rem, 1rem, 1.5rem)", "circle(8px, 16px, 24px)");
65
66 // viewport-percentage lengths - units, resolution
67 testInner("-webkit-shape-inside", "circle(1vw, 1vw, 1vw)", "circle(1vw, 1vw, 1vw)");
68 testInner("-webkit-shape-inside", "circle(1vh, 1vh, 1vh)", "circle(1vh, 1vh, 1vh)");
69 testInner("-webkit-shape-inside", "circle(1vmin, 1vmin, 1vmin)", "circle(1vmin, 1vmin, 1vmin)");
70
71 testComputed("-webkit-shape-inside", "circle(.5vw, 1vw, 1.5vw)", "circle(0.5vw, 1vw, 1.5vw)");
72 testComputed("-webkit-shape-inside", "circle(.5vh, 1vh, 1.5vh)", "circle(0.5vh, 1vh, 1.5vh)");
73 testComputed("-webkit-shape-inside", "circle(.5vmin, 1vmin, 1.5vmin)", "circle(0.5vmin, 1vmin, 1.5vmin)");
74
75 // percentage lengths - units
76 testInner("-webkit-shape-inside", "circle(100%, 100%, 100%)", "circle(100%, 100%, 100%)");
77 testInner("-webkit-shape-inside", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)");
78 testInner("-webkit-shape-inside", "ellipse(100%, 100%, 100%, 100%)", "ellipse(100%, 100%, 100%, 100%)");
79 testInner("-webkit-shape-inside", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(nonzero, 10% 20%, 30% 40%, 40% 50%)");
80
81 testComputed("-webkit-shape-inside", "circle(50%, 100%, 150%)", "circle(50%, 100%, 150%)");
82 testComputed("-webkit-shape-inside", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)");
83 testComputed("-webkit-shape-inside", "ellipse(100%, 100%, 100%, 100%)", "ellipse(100%, 100%, 100%, 100%)");
84 testComputed("-webkit-shape-inside", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(nonzero, 10% 20%, 30% 40%, 40% 50%)");
85
86 // reject non-lengths
87 negativeTest("-webkit-shape-inside", "circle(1px, 1px, 1)");
88 negativeTest("-webkit-shape-inside", "circle(1px, 1px, px)");
89 negativeTest("-webkit-shape-inside", "circle(1px, 1px, 1p)");
90 negativeTest("-webkit-shape-inside", "circle(1px, 1px, calc())");
91 </script>
92 <script src="../js/resources/js-test-post.js"></script>
93 </body>
94 </html>