Move parseFontFaceDescriptor to CSSPropertyParser.cpp
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / css3 / calc / simple-calcs-prefixed.html
blobb23ef9addfe2c03698cfda00ae2124a72413e616
1 <!DOCTYPE HTML>
2 <style>
3 .width-test {
4 height: 100px;
5 width: 256px;
6 background-color: red;
9 .height-test {
10 width: 100px;
11 height: 50px;
12 background-color: red;
14 </style>
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>
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>
90 <script>
91 if (window.testRunner)
92 testRunner.dumpAsText();
93 var tolerance = 0.1;
94 zoomLevels = [1, 1.2, 2];
95 var test = document.getElementById("test");
96 for (var child = test.firstElementChild; child; child = child.nextElementSibling) {
97 var element = child;
98 if (element.className == "wrapper") {
99 element = element.firstChild;
100 while (element.tagName != "DIV") element = element.nextSibling;
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 = 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);
114 if (error == "") {
115 element.style.backgroundColor = "green";
116 element.innerHTML += " => PASS";
117 } else
118 element.innerHTML += " => FAIL: " + error.join("; ");
120 document.body.style.zoom = 1;
121 </script>