12 background-color: red;
17 This file tests legacy support for the -webkit prefixed version of calc (ie -webkit-calc()).
20 All boxes below should be
100px *
100px and green.
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
91 if (window
.testRunner
)
92 testRunner
.dumpAsText();
94 zoomLevels
= [1, 1.2, 2];
95 var test
= document
.getElementById("test");
96 for (var child
= test
.firstElementChild
; child
; child
= child
.nextElementSibling
) {
98 if (element
.className
== "wrapper") {
99 element
= element
.firstChild
;
100 while (element
.tagName
!= "DIV") element
= element
.nextSibling
;
104 for (var z
= 0; z
< zoomLevels
.length
; z
++) {
105 var zoom
= zoomLevels
[z
];
106 document
.body
.style
.zoom
= zoom
;
107 var width
= element
.offsetWidth
;
108 if (Math
.abs(100 - width
) > tolerance
)
109 error
.push("@zoom=" + zoom
+ " expected width of 100, but was " + width
);
110 var height
= element
.offsetHeight
;
111 if (Math
.abs(100 - height
) > tolerance
)
112 error
.push("@zoom=" + zoom
+ " expected height of 100, but was " + height
);
115 element
.style
.backgroundColor
= "green";
116 element
.innerHTML
+= " => PASS";
118 element
.innerHTML
+= " => FAIL: " + error
.join("; ");
120 document
.body
.style
.zoom
= 1;