1<html>
2<head>
3
4<style>
5.width-test {
6 height: 100px;
7 width: 256px;
8 background-color: red;
9}
10
11.height-test {
12 width: 100px;
13 height: 50px;
14 background-color: red;
15}
16
17</style>
18
19<script>
20if (window.layoutTestController)
21 layoutTestController.dumpAsText();
22
23function test()
24{
25 var test = document.getElementById("test");
26 for (var child = test.firstChild; child; child = child.nextSibling) {
27 var element = child;
28 if (element.className == "wrapper") {
29 element = element.firstChild;
30 while (element.tagName != "DIV") element = element.nextSibling;
31 }
32
33 var width = element.offsetWidth;
34 var error = [];
35 if (width != 100)
36 error.push("expected width of 100, but was " + width);
37 var height = element.offsetHeight;
38 if (height != 100)
39 error.push("expected height of 100, but was " + height);
40
41 if (error == "") {
42 element.style.backgroundColor = "green";
43 element.innerHTML += " => PASS";
44 } else
45 element.innerHTML += " => FAIL: " + error.join(", ");
46 }
47}
48</script>
49</head>
50
51<body onload="test()">
52
53<p>
54 All boxes below should be 100px * 100px and green.
55</p>
56
57<div id="test">
58
59<div class="width-test" style="width: -webkit-calc(50px + 50px);">50px + 50px</div>
60<div class="width-test" style="width: -webkit-calc(150px - 50px);">150px - 50px</div>
61<div class="width-test" style="width: -webkit-calc(50px + 50px);">50px + 50px (2 spaces around operator)</div>
62<div class="width-test" style="width: -webkit-calc(150px - 50px);">150px - 50px (2 spaces around operator)</div>
63<div class="width-test" style="width: -webkit-calc(50px*2);">50px*2</div>
64<div class="width-test" style="width: -webkit-calc(50px *2);">50px *2</div>
65<div class="width-test" style="width: -webkit-calc(50px* 2);">50px* 2</div>
66<div class="width-test" style="width: -webkit-calc(200px/2);">200px/2</div>
67<div class="width-test" style="width: -webkit-calc(200px /2);">200px /2</div>
68<div class="width-test" style="width: -webkit-calc(200px/ 2);">200px/ 2</div>
69<div class="width-test" style="width: -webkit-calc(50px + 10px * 5);">50px + 10px * 5 (operation order)</div>
70<div class="width-test" style="width: -webkit-calc(1100px mod 1000);">1100px mod 1000</div>
71<div style="width: 200px; background-color: white;" class="wrapper">
72 <div class="width-test" style="width: -webkit-calc(100%/2);">100%/2 (where 100% is 200px)</div>
73</div>
74<div class="width-test" style="width: -webkit-calc((100px));">(100px)</div>
75<div class="width-test" style="width: -webkit-calc((50px + 50px));">(50px + 50px)</div>
76<div class="width-test" style="width: -webkit-calc((50px) + 50px);">(50px) + 50px</div>
77<div class="width-test" style="width: -webkit-calc(50px + (50px));">50px + (50px)</div>
78<div class="width-test" style="width: -webkit-calc( 50px + 50px );"> 50px + 50px </div>
79<div class="width-test" style="width: -webkit-calc( 50px + 25px * 2 );"> 50px + 25px * 2 </div>
80<div class="width-test" style="width: -webkit-calc( (25px + 25px) * 2 );"> (25px + 25px) * 2 </div>
81<div class="width-test" style="width: -webkit-calc(2 * 50px);">2 * 50px</div>
82<div class="width-test" style="width: -webkit-calc(2 * 100px / 2);">2 * 100px / 2</div>
83<div class="width-test" style="width: -webkit-calc(100px / 50px * 50px);">100px / 50px * 50px</div>
84<div class="width-test" style="width: -webkit-calc(12 mod 10 * 50px);">12 mod 10 * 50px</div>
85<div class="width-test" style="width: -webkit-calc((1em - 1em) + 100px);">(1em - 1em) + 100px</div>
86<div class="width-test" style="width: -webkit-calc(50px + +50px);">50px + +50px</div>
87<div class="width-test" style="width: -webkit-calc(-50px + 150px);">-50px + 150px</div>
88<div class="width-test" style="width: -webkit-calc(-50px - -150px);">-50px - -150px</div>
89<div class="width-test" style="width: -webkit-calc((((((((100px))))))));">(((((((100px)))))))</div>
90<div class="height-test" style="height: -webkit-calc(100px);">100px</div>
91<div style="height: 50px; background-color: white;" class="wrapper">
92 <div class="height-test" style="height: -webkit-calc(100% * 2);">100% * 2</div>
93</div>
94
95</div>
96
97</body>
98
99</html>