Index: LayoutTests/css3/calc/simple-calcs.html |
diff --git a/LayoutTests/css3/calc/simple-calcs.html b/LayoutTests/css3/calc/simple-calcs.html |
index 6e842f368fee5c8eb7e653ad966f5359bc487d43..fc0d560c776a6f0eb6d4a89eb60476658f23deb0 100644 |
--- a/LayoutTests/css3/calc/simple-calcs.html |
+++ b/LayoutTests/css3/calc/simple-calcs.html |
@@ -1,118 +1,118 @@ |
-<!DOCTYPE HTML> |
-<style> |
-.width-test { |
- height: 100px; |
- width: 256px; |
- background-color: red; |
-} |
- |
-.height-test { |
- width: 100px; |
- height: 50px; |
- background-color: red; |
-} |
-</style> |
- |
-<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: calc(50px + 50px);">50px + 50px</div> |
-<div class="width-test" style="width: calc(150px - 50px);">150px - 50px</div> |
-<div class="width-test" style="width: calc(50px + 50px);">50px + 50px (2 spaces around operator)</div> |
-<div class="width-test" style="width: calc(150px - 50px);">150px - 50px (2 spaces around operator)</div> |
-<div class="width-test" style="width: calc(50px*2);">50px*2</div> |
-<div class="width-test" style="width: calc(50px *2);">50px *2</div> |
-<div class="width-test" style="width: calc(50px* 2);">50px* 2</div> |
-<div class="width-test" style="width: calc(200px/2);">200px/2</div> |
-<div class="width-test" style="width: calc(200px /2);">200px /2</div> |
-<div class="width-test" style="width: calc(200px/ 2);">200px/ 2</div> |
-<div class="width-test" style="width: calc(50px*(2));">50px*(2)</div> |
-<div class="width-test" style="width: calc(50px *(2));">50px *(2)</div> |
-<div class="width-test" style="width: calc(50px* (2));">50px* (2)</div> |
-<div class="width-test" style="width: calc(50px*(1 + 1));">50px*(1 + 1)</div> |
-<div class="width-test" style="width: calc(50px*(12 - 10));">50px*(12 - 10)</div> |
-<div class="width-test" style="width: calc(50px*(10 / 5));">50px*(10 / 5)</div> |
-<div class="width-test" style="width: calc(10px* (5 * 2));">10px* (5 * 2)</div> |
-<div class="width-test" style="width: 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: 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: 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: 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: 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: 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: 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: 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: 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: calc(5 * 10%);">5 * 10% (where 100% is 200px)</div> |
-</div> |
-<div class="width-test" style="width: calc((100px));">(100px)</div> |
-<div class="width-test" style="width: calc((50px + 50px));">(50px + 50px)</div> |
-<div class="width-test" style="width: calc((50px) + 50px);">(50px) + 50px</div> |
-<div class="width-test" style="width: calc(50px + (50px));">50px + (50px)</div> |
-<div class="width-test" style="width: calc( 50px + 50px );"> 50px + 50px </div> |
-<div class="width-test" style="width: calc( 50px + 25px * 2 );"> 50px + 25px * 2 </div> |
-<div class="width-test" style="width: calc( (25px + 25px) * 2 );"> (25px + 25px) * 2 </div> |
-<div class="width-test" style="width: calc(2 * 50px);">2 * 50px</div> |
-<div class="width-test" style="width: calc(2 * 100px / 2);">2 * 100px / 2</div> |
-<div class="width-test" style="width: calc((1em - 1em) + 100px);">(1em - 1em) + 100px</div> |
-<div class="width-test" style="width: calc(50px + +50px);">50px + +50px</div> |
-<div class="width-test" style="width: calc(-50px + 150px);">-50px + 150px</div> |
-<div class="width-test" style="width: calc(-50px - -150px);">-50px - -150px</div> |
-<div class="width-test" style="width: calc((((((((100px))))))));">(((((((100px)))))))</div> |
-<div class="height-test" style="height: calc(100px);">100px</div> |
-<div style="height: 50px; background-color: white;" class="wrapper"> |
- <div class="height-test" style="height: 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> |
+<!DOCTYPE HTML> |
+<style> |
+.width-test { |
+ height: 100px; |
+ width: 256px; |
+ background-color: red; |
+} |
+ |
+.height-test { |
+ width: 100px; |
+ height: 50px; |
+ background-color: red; |
+} |
+</style> |
+ |
+<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: calc(50px + 50px);">50px + 50px</div> |
+<div class="width-test" style="width: calc(150px - 50px);">150px - 50px</div> |
+<div class="width-test" style="width: calc(50px + 50px);">50px + 50px (2 spaces around operator)</div> |
+<div class="width-test" style="width: calc(150px - 50px);">150px - 50px (2 spaces around operator)</div> |
+<div class="width-test" style="width: calc(50px*2);">50px*2</div> |
+<div class="width-test" style="width: calc(50px *2);">50px *2</div> |
+<div class="width-test" style="width: calc(50px* 2);">50px* 2</div> |
+<div class="width-test" style="width: calc(200px/2);">200px/2</div> |
+<div class="width-test" style="width: calc(200px /2);">200px /2</div> |
+<div class="width-test" style="width: calc(200px/ 2);">200px/ 2</div> |
+<div class="width-test" style="width: calc(50px*(2));">50px*(2)</div> |
+<div class="width-test" style="width: calc(50px *(2));">50px *(2)</div> |
+<div class="width-test" style="width: calc(50px* (2));">50px* (2)</div> |
+<div class="width-test" style="width: calc(50px*(1 + 1));">50px*(1 + 1)</div> |
+<div class="width-test" style="width: calc(50px*(12 - 10));">50px*(12 - 10)</div> |
+<div class="width-test" style="width: calc(50px*(10 / 5));">50px*(10 / 5)</div> |
+<div class="width-test" style="width: calc(10px* (5 * 2));">10px* (5 * 2)</div> |
+<div class="width-test" style="width: 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: 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: 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: 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: 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: 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: 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: 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: 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: calc(5 * 10%);">5 * 10% (where 100% is 200px)</div> |
+</div> |
+<div class="width-test" style="width: calc((100px));">(100px)</div> |
+<div class="width-test" style="width: calc((50px + 50px));">(50px + 50px)</div> |
+<div class="width-test" style="width: calc((50px) + 50px);">(50px) + 50px</div> |
+<div class="width-test" style="width: calc(50px + (50px));">50px + (50px)</div> |
+<div class="width-test" style="width: calc( 50px + 50px );"> 50px + 50px </div> |
+<div class="width-test" style="width: calc( 50px + 25px * 2 );"> 50px + 25px * 2 </div> |
+<div class="width-test" style="width: calc( (25px + 25px) * 2 );"> (25px + 25px) * 2 </div> |
+<div class="width-test" style="width: calc(2 * 50px);">2 * 50px</div> |
+<div class="width-test" style="width: calc(2 * 100px / 2);">2 * 100px / 2</div> |
+<div class="width-test" style="width: calc((1em - 1em) + 100px);">(1em - 1em) + 100px</div> |
+<div class="width-test" style="width: calc(50px + +50px);">50px + +50px</div> |
+<div class="width-test" style="width: calc(-50px + 150px);">-50px + 150px</div> |
+<div class="width-test" style="width: calc(-50px - -150px);">-50px - -150px</div> |
+<div class="width-test" style="width: calc((((((((100px))))))));">(((((((100px)))))))</div> |
+<div class="height-test" style="height: calc(100px);">100px</div> |
+<div style="height: 50px; background-color: white;" class="wrapper"> |
+ <div class="height-test" style="height: 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> |