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