Upstream version 7.36.149.0
[platform/framework/web/crosswalk.git] / src / third_party / WebKit / LayoutTests / css3 / calc / simple-calcs-prefixed.html
index 335e3ca..b23ef9a 100644 (file)
-<!DOCTYPE HTML>\r
-<style>\r
-.width-test {\r
-    height: 100px;\r
-    width: 256px;\r
-    background-color: red;\r
-}\r
-\r
-.height-test {\r
-    width: 100px;\r
-    height: 50px;\r
-    background-color: red;\r
-}\r
-</style>\r
-\r
-<p>\r
-    This file tests legacy support for the -webkit prefixed version of calc (ie -webkit-calc()).\r
-</p>\r
-<p>\r
-  All boxes below should be 100px * 100px and green.\r
-</p>\r
-\r
-<div id="test">\r
-<div style="width:100px; height:100px;">control</div>\r
-<div class="width-test" style="width: -webkit-calc(50px + 50px);">50px + 50px</div>\r
-<div class="width-test" style="width: -webkit-calc(150px - 50px);">150px - 50px</div>\r
-<div class="width-test" style="width: -webkit-calc(50px  +  50px);">50px  +  50px (2 spaces around operator)</div>\r
-<div class="width-test" style="width: -webkit-calc(150px  -  50px);">150px  - 50px (2 spaces around operator)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px*2);">50px*2</div>\r
-<div class="width-test" style="width: -webkit-calc(50px *2);">50px *2</div>\r
-<div class="width-test" style="width: -webkit-calc(50px* 2);">50px* 2</div>\r
-<div class="width-test" style="width: -webkit-calc(200px/2);">200px/2</div>\r
-<div class="width-test" style="width: -webkit-calc(200px /2);">200px /2</div>\r
-<div class="width-test" style="width: -webkit-calc(200px/ 2);">200px/ 2</div>\r
-<div class="width-test" style="width: -webkit-calc(50px*(2));">50px*(2)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px *(2));">50px *(2)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px* (2));">50px* (2)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px*(1 + 1));">50px*(1 + 1)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px*(12 - 10));">50px*(12 - 10)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px*(10 / 5));">50px*(10 / 5)</div>\r
-<div class="width-test" style="width: -webkit-calc(10px* (5 * 2));">10px* (5 * 2)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px + 10px * 5);">50px + 10px * 5 (operation order)</div>\r
-<div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(100%/2);">100%/2 (where 100% is 200px)</div>\r
-</div>\r
-<div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(100% + -100px);">100% + -100px (where 100% is 200px)</div>\r
-</div>\r
-<div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(80% - 60px);">80% - 60px (where 100% is 200px)</div>\r
-</div>\r
-<div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(300px - 100%);">300px - 100% (where 100% is 200px)</div>\r
-</div>\r
-<div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(-100px + 100%);">-100px + 100% (where 100% is 200px)</div>\r
-</div>\r
-<div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(20% + 30%);">20% + 30% (where 100% is 200px)</div>\r
-</div>\r
-<div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(80% - 30%);">80% - 30% (where 100% is 200px)</div>\r
-</div>\r
-<div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(10% * 5);">10% * 5 (where 100% is 200px)</div>\r
-</div>\r
-<div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(5 * 10%);">5 * 10% (where 100% is 200px)</div>\r
-</div>\r
-<div class="width-test" style="width: -webkit-calc((100px));">(100px)</div>\r
-<div class="width-test" style="width: -webkit-calc((50px + 50px));">(50px + 50px)</div>\r
-<div class="width-test" style="width: -webkit-calc((50px) + 50px);">(50px) + 50px</div>\r
-<div class="width-test" style="width: -webkit-calc(50px + (50px));">50px + (50px)</div>\r
-<div class="width-test" style="width: -webkit-calc( 50px +  50px );"> 50px +  50px </div>\r
-<div class="width-test" style="width: -webkit-calc( 50px + 25px * 2 );"> 50px + 25px * 2 </div>\r
-<div class="width-test" style="width: -webkit-calc( (25px + 25px) * 2 );"> (25px + 25px) * 2 </div>\r
-<div class="width-test" style="width: -webkit-calc(2 * 50px);">2 * 50px</div>\r
-<div class="width-test" style="width: -webkit-calc(2 * 100px / 2);">2 * 100px / 2</div>\r
-<div class="width-test" style="width: -webkit-calc((1em - 1em) + 100px);">(1em - 1em) + 100px</div>\r
-<div class="width-test" style="width: -webkit-calc(50px +  +50px);">50px +  +50px</div>\r
-<div class="width-test" style="width: -webkit-calc(-50px + 150px);">-50px + 150px</div>\r
-<div class="width-test" style="width: -webkit-calc(-50px - -150px);">-50px - -150px</div>\r
-<div class="width-test" style="width: -webkit-calc((((((((100px))))))));">(((((((100px)))))))</div>\r
-<div class="height-test" style="height: -webkit-calc(100px);">100px</div>\r
-<div style="height: 50px; background-color: white;" class="wrapper">\r
-  <div class="height-test" style="height: -webkit-calc(100% * 2);">100% * 2</div>\r
-</div>\r
-</div>\r
-\r
-<script>\r
-if (window.testRunner)\r
-    testRunner.dumpAsText();\r
-\r
-zoomLevels = [1, 1.2, 2];\r
-var test = document.getElementById("test");\r
-for (var child = test.firstChild; child; child = child.nextSibling) {\r
-    var element = child;\r
-    if (element.className == "wrapper") {\r
-        element = element.firstChild;\r
-        while (element.tagName != "DIV") element = element.nextSibling;\r
-    }\r
-\r
-    var error = [];\r
-    for (var z = 0; z < zoomLevels.length; z++) {\r
-        var zoom = zoomLevels[z];\r
-        document.body.style.zoom = zoom;\r
-        var width = element.offsetWidth;\r
-        if (width != 100)\r
-            error.push("@zoom=" + zoom + " expected width of 100, but was " + width);\r
-        var height = element.offsetHeight;\r
-        if (height != 100)\r
-            error.push("@zoom=" + zoom + " expected height of 100, but was " + height);\r
-    }\r
-    if (error == "") {\r
-        element.style.backgroundColor = "green";\r
-        element.innerHTML += " => PASS";\r
-    } else\r
-        element.innerHTML += " => FAIL: " + error.join("; ");\r
-}\r
-document.body.style.zoom = 1;\r
-</script>\r
+<!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();
+var tolerance = 0.1;
+zoomLevels = [1, 1.2, 2];
+var test = document.getElementById("test");
+for (var child = test.firstElementChild; child; child = child.nextElementSibling) {
+    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 (Math.abs(100 - width) > tolerance)
+            error.push("@zoom=" + zoom + " expected width of 100, but was " + width);
+        var height = element.offsetHeight;
+        if (Math.abs(100 - height) > tolerance)
+            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>