| 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>
|
|
|