margin test for CSS3 calc

https://bugs.webkit.org/show_bug.cgi?id=76000

Reviewed by Daniel Bates.

Tests for future implementation of CSS3 calc() (see http://webkit.org/b/16662)

These tests are expected to 'fail', and will pass once calc() functionality is landed.
For now, they serve to demonstrate that the current code doesn't crash on these tests.

* css3/calc/margin-expected.txt: Added.
* css3/calc/margin.html: Added.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@104783 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent dd045517
2012-01-11 Mike Lawther <mikelawther@chromium.org>
margin test for CSS3 calc
https://bugs.webkit.org/show_bug.cgi?id=76000
Reviewed by Daniel Bates.
Tests for future implementation of CSS3 calc() (see http://webkit.org/b/16662)
These tests are expected to 'fail', and will pass once calc() functionality is landed.
For now, they serve to demonstrate that the current code doesn't crash on these tests.
* css3/calc/margin-expected.txt: Added.
* css3/calc/margin.html: Added.
2012-01-11 Adrienne Walker <enne@google.com>
Repaint all graphics layers when their renderer offset changes
FAIL document.getElementById("simple-all").parentNode.offsetWidth should be 250. Was 200.
FAIL document.getElementById("simple-all").parentNode.offsetHeight should be 170. Was 120.
FAIL document.getElementById("simple-left").parentNode.offsetWidth should be 225. Was 200.
PASS document.getElementById("simple-left").parentNode.offsetHeight is 120
FAIL document.getElementById("simple-right").parentNode.offsetWidth should be 225. Was 200.
PASS document.getElementById("simple-right").parentNode.offsetHeight is 120
PASS document.getElementById("simple-top").parentNode.offsetWidth is 200
FAIL document.getElementById("simple-top").parentNode.offsetHeight should be 145. Was 120.
PASS document.getElementById("simple-bottom").parentNode.offsetWidth is 200
FAIL document.getElementById("simple-bottom").parentNode.offsetHeight should be 145. Was 120.
FAIL document.getElementById("percent-all").parentNode.offsetWidth should be 250. Was 200.
FAIL document.getElementById("percent-all").parentNode.offsetHeight should be 170. Was 120.
FAIL document.getElementById("percent-left").parentNode.offsetWidth should be 225. Was 200.
PASS document.getElementById("percent-left").parentNode.offsetHeight is 120
FAIL document.getElementById("percent-right").parentNode.offsetWidth should be 225. Was 200.
PASS document.getElementById("percent-right").parentNode.offsetHeight is 120
PASS document.getElementById("percent-top").parentNode.offsetWidth is 200
FAIL document.getElementById("percent-top").parentNode.offsetHeight should be 145. Was 120.
PASS document.getElementById("percent-bottom").parentNode.offsetWidth is 200
FAIL document.getElementById("percent-bottom").parentNode.offsetHeight should be 145. Was 120.
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML>
<script src="../../fast/js/resources/js-test-pre.js"></script>
<style>
div { display: inline-block; }
p { width: 200px; height: 120px; margin: 0px; }
#simple-all { margin: -webkit-calc(13px + 12px); }
#simple-left { margin-left: -webkit-calc(13px + 12px); }
#simple-right { margin-right: -webkit-calc(13px + 12px); }
#simple-top { margin-top: -webkit-calc(13px + 12px); }
#simple-bottom { margin-bottom: -webkit-calc(13px + 12px); }
#percent-all { margin: -webkit-calc(10% - 5px); }
#percent-left { margin-left: -webkit-calc(10% - 5px); }
#percent-right { margin-right: -webkit-calc(10% - 5px); }
#percent-top { margin-top: -webkit-calc(10% - 5px); }
#percent-bottom { margin-bottom: -webkit-calc(10% - 5px); }
</style>
<div id="test-container">
<div><p id="simple-all">This element should have an overall margin of 25 pixels.</p></div><br/>
<div><p id="simple-left">This element should have a left margin of 25 pixels.</p></div><br/>
<div><p id="simple-right">This element should have a right margin of 25 pixels.</p></div><br/>
<div><p id="simple-top">This element should have a top margin of 25 pixels.</p></div><br/>
<div><p id="simple-bottom">This element should have a bottom margin of 25 pixels.</p></div><br/>
<div id="wrapper" style="width: 300px; background-color: cornsilk; display: block;">
<div><p id="percent-all">This element should have an overall margin of 25 pixels (10% of parent width of 300px minus 5px).</p></div><br/>
<div><p id="percent-left">This element should have a left margin of 25 pixels (10% of parent width of 300px minus 5px).</p></div><br/>
<div><p id="percent-right">This element should have a right margin of 25 pixels (10% of parent width of 300px minus 5px).</p></div><br/>
<div><p id="percent-top">This element should have a top margin of 25 pixels (10% of parent width of 300px minus 5px).</p></div><br/>
<div><p id="percent-bottom">This element should have a bottom margin of 25 pixels (10% of parent width of 300px minus 5px).</p></div><br/>
</div>
</div>
<script>
var innerWidth = 200;
var innerHeight = 120;
var margin = 25;
var tests = document.getElementsByTagName("p");
for (var i = 0; i < tests.length; ++i) {
var outerElement = tests[i].parentNode;
var innerElement = tests[i];
var width = outerElement.offsetWidth;
var height = outerElement.offsetHeight;
var expectedWidth = innerWidth;
var expectedHeight = innerHeight;
switch (innerElement.id.split("-")[1]) {
case "all":
expectedWidth += 2 * margin;
expectedHeight += 2 * margin;
break;
case "top":
case "bottom":
expectedHeight += margin;
break;
case "left":
case "right":
expectedWidth += margin;
break;
}
shouldEvaluateTo('document.getElementById("' + innerElement.id + '").parentNode.offsetWidth', expectedWidth);
shouldEvaluateTo('document.getElementById("' + innerElement.id + '").parentNode.offsetHeight', expectedHeight);
var error = [];
if (width != expectedWidth)
error.push("expected width " + expectedWidth + ", was " + width);
if (height != expectedHeight)
error.push("expected height " + expectedHeight + ", was " + height);
if (error == "") {
innerElement.style.backgroundColor = "green";
innerElement.innerHTML += " => PASS";
} else {
innerElement.style.backgroundColor = "red";
innerElement.innerHTML += " => FAIL: " + error.join(", ");
}
}
if (window.layoutTestController) {
var testContainer = document.getElementById("test-container");
if (testContainer)
document.body.removeChild(testContainer);
}
</script>
<script src="../../fast/js/resources/js-test-post.js"></script>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment