[css-grid] Unprefix CSS Grid Layout properties
[WebKit-https.git] / LayoutTests / css3 / calc / simple-calcs.html
1 <!DOCTYPE HTML>
2 <style>
3 .width-test {
4     height: 100px;
5     width: 256px;
6     background-color: red;
7 }
8
9 .height-test {
10     width: 100px;
11     height: 50px;
12     background-color: red;
13 }
14 </style>
15
16 <p>
17   All boxes below should be 100px * 100px and green.
18 </p>
19
20 <div id="test">
21 <div style="width:100px; height:100px;">control</div>
22 <div class="width-test" style="width: calc(50px + 50px);">50px + 50px</div>
23 <div class="width-test" style="width: calc(150px - 50px);">150px - 50px</div>
24 <div class="width-test" style="width: calc(50px  +  50px);">50px  +  50px (2 spaces around operator)</div>
25 <div class="width-test" style="width: calc(150px  -  50px);">150px  - 50px (2 spaces around operator)</div>
26 <div class="width-test" style="width: calc(50px*2);">50px*2</div>
27 <div class="width-test" style="width: calc(50px *2);">50px *2</div>
28 <div class="width-test" style="width: calc(50px* 2);">50px* 2</div>
29 <div class="width-test" style="width: calc(200px/2);">200px/2</div>
30 <div class="width-test" style="width: calc(200px /2);">200px /2</div>
31 <div class="width-test" style="width: calc(200px/ 2);">200px/ 2</div>
32 <div class="width-test" style="width: calc(50px*(2));">50px*(2)</div>
33 <div class="width-test" style="width: calc(50px *(2));">50px *(2)</div>
34 <div class="width-test" style="width: calc(50px* (2));">50px* (2)</div>
35 <div class="width-test" style="width: calc(50px*(1 + 1));">50px*(1 + 1)</div>
36 <div class="width-test" style="width: calc(50px*(12 - 10));">50px*(12 - 10)</div>
37 <div class="width-test" style="width: calc(50px*(10 / 5));">50px*(10 / 5)</div>
38 <div class="width-test" style="width: calc(10px* (5 * 2));">10px* (5 * 2)</div>
39 <div class="width-test" style="width: calc(50px + 10px * 5);">50px + 10px * 5 (operation order)</div>
40 <div style="width: 200px; background-color: white;" class="wrapper">
41     <div class="width-test" style="width: calc(100%/2);">100%/2 (where 100% is 200px)</div>
42 </div>
43 <div style="width: 200px; background-color: white;" class="wrapper">
44     <div class="width-test" style="width: calc(100% + -100px);">100% + -100px (where 100% is 200px)</div>
45 </div>
46 <div style="width: 200px; background-color: white;" class="wrapper">
47     <div class="width-test" style="width: calc(80% - 60px);">80% - 60px (where 100% is 200px)</div>
48 </div>
49 <div style="width: 200px; background-color: white;" class="wrapper">
50     <div class="width-test" style="width: calc(300px - 100%);">300px - 100% (where 100% is 200px)</div>
51 </div>
52 <div style="width: 200px; background-color: white;" class="wrapper">
53     <div class="width-test" style="width: calc(-100px + 100%);">-100px + 100% (where 100% is 200px)</div>
54 </div>
55 <div style="width: 200px; background-color: white;" class="wrapper">
56     <div class="width-test" style="width: calc(20% + 30%);">20% + 30% (where 100% is 200px)</div>
57 </div>
58 <div style="width: 200px; background-color: white;" class="wrapper">
59     <div class="width-test" style="width: calc(80% - 30%);">80% - 30% (where 100% is 200px)</div>
60 </div>
61 <div style="width: 200px; background-color: white;" class="wrapper">
62     <div class="width-test" style="width: calc(10% * 5);">10% * 5 (where 100% is 200px)</div>
63 </div>
64 <div style="width: 200px; background-color: white;" class="wrapper">
65     <div class="width-test" style="width: calc(5 * 10%);">5 * 10% (where 100% is 200px)</div>
66 </div>
67 <div class="width-test" style="width: calc((100px));">(100px)</div>
68 <div class="width-test" style="width: calc((50px + 50px));">(50px + 50px)</div>
69 <div class="width-test" style="width: calc((50px) + 50px);">(50px) + 50px</div>
70 <div class="width-test" style="width: calc(50px + (50px));">50px + (50px)</div>
71 <div class="width-test" style="width: calc( 50px +  50px );"> 50px +  50px </div>
72 <div class="width-test" style="width: calc( 50px + 25px * 2 );"> 50px + 25px * 2 </div>
73 <div class="width-test" style="width: calc( (25px + 25px) * 2 );"> (25px + 25px) * 2 </div>
74 <div class="width-test" style="width: calc(2 * 50px);">2 * 50px</div>
75 <div class="width-test" style="width: calc(2 * 100px / 2);">2 * 100px / 2</div>
76 <div class="width-test" style="width: calc((1em - 1em) + 100px);">(1em - 1em) + 100px</div>
77 <div class="width-test" style="width: calc(50px +  +50px);">50px +  +50px</div>
78 <div class="width-test" style="width: calc(-50px + 150px);">-50px + 150px</div>
79 <div class="width-test" style="width: calc(-50px - -150px);">-50px - -150px</div>
80 <div class="width-test" style="width: calc((((((((100px))))))));">(((((((100px)))))))</div>
81 <div class="height-test" style="height: calc(100px);">100px</div>
82 <div style="height: 50px; background-color: white;" class="wrapper">
83   <div class="height-test" style="height: calc(100% * 2);">100% * 2</div>
84 </div>
85 </div>
86
87 <script>
88 if (window.testRunner)
89     testRunner.dumpAsText();
90
91 zoomLevels = [1, 1.2, 2];
92 var test = document.getElementById("test");
93 for (var child = test.firstChild; child; child = child.nextSibling) {
94     var element = child;
95     if (element.className == "wrapper") {
96         element = element.firstChild;
97         while (element.tagName != "DIV") element = element.nextSibling;
98     }
99
100     var error = [];
101     for (var z = 0; z < zoomLevels.length; z++) {
102         var zoom = zoomLevels[z];
103         document.body.style.zoom = zoom;
104         var width = Math.round(element.offsetWidth);
105         if (width != 100)
106             error.push("@zoom=" + zoom + " expected width of 100, but was " + width);
107         var height = Math.round(element.offsetHeight);
108         if (height != 100)
109             error.push("@zoom=" + zoom + " expected height of 100, but was " + height);
110     }
111     if (error == "") {
112         element.style.backgroundColor = "green";
113         element.innerHTML += " => PASS";
114     } else
115         element.innerHTML += " => FAIL: " + error.join("; ");
116 }
117 document.body.style.zoom = 1;
118 </script>