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