Diff
Modified: trunk/LayoutTests/ChangeLog (107244 => 107245)
--- trunk/LayoutTests/ChangeLog 2012-02-09 15:49:13 UTC (rev 107244)
+++ trunk/LayoutTests/ChangeLog 2012-02-09 15:53:48 UTC (rev 107245)
@@ -1,3 +1,18 @@
+2012-02-09 Mike Lawther <[email protected]>
+
+ update CSS3 calc() color tests to use pre/post js
+ https://bugs.webkit.org/show_bug.cgi?id=77596
+
+ Note that these tests are intended to 'fail' as calc() functionality
+ had not yet landed (see http://webkit.org/b/16662)
+
+ Reviewed by Kent Tamura.
+
+ * css3/calc/color-hsl-expected.txt:
+ * css3/calc/color-hsl.html:
+ * css3/calc/color-rgb-expected.txt:
+ * css3/calc/color-rgb.html:
+
2012-02-09 Arun Patole <[email protected]>
Setting media element 'src' attribute to "" should trigger load
Modified: trunk/LayoutTests/css3/calc/color-hsl-expected.txt (107244 => 107245)
--- trunk/LayoutTests/css3/calc/color-hsl-expected.txt 2012-02-09 15:49:13 UTC (rev 107244)
+++ trunk/LayoutTests/css3/calc/color-hsl-expected.txt 2012-02-09 15:53:48 UTC (rev 107245)
@@ -1,5 +1,11 @@
-These two sentences should be the same color (simple)
-These two sentences should be the same color (simple)
-These two sentences should be the same color (alpha)
-These two sentences should be the same color (alpha)
-PASS
+Tests that CSS3 calc() can be used with the hsl() and hsla() functions
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(document.getElementById("simple"), null).color is "rgb(31, 223, 31)"
+PASS getComputedStyle(document.getElementById("alpha"), null).color is "rgba(31, 223, 31, 0.699219)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Modified: trunk/LayoutTests/css3/calc/color-hsl.html (107244 => 107245)
--- trunk/LayoutTests/css3/calc/color-hsl.html 2012-02-09 15:49:13 UTC (rev 107244)
+++ trunk/LayoutTests/css3/calc/color-hsl.html 2012-02-09 15:53:48 UTC (rev 107245)
@@ -1,41 +1,32 @@
+<!DOCTYPE HTML>
+<script src=""
<style>
-div {color: red;}
-#controlsimple {color: hsl(120,75%,50%);}
-#simple {color: hsl(-webkit-calc(120),-webkit-calc(75%),-webkit-calc(50%));}
+ #controlsimple { color: hsl(120,75%,50%); }
+ #simple { color: hsl(-webkit-calc(120),-webkit-calc(75%),-webkit-calc(50%)); }
-#controlalpha {color: hsla(120,75%,50%,0.7);}
-#alpha {color: hsla(-webkit-calc(120),-webkit-calc(75%),-webkit-calc(50%), -webkit-calc(0.7));}
+ #controlalpha { color: hsla(120,75%,50%,0.7); }
+ #alpha { color: hsla(-webkit-calc(120),-webkit-calc(75%),-webkit-calc(50%), -webkit-calc(0.7)); }
</style>
-
-<div id="controlsimple">These two sentences should be the same color (simple)</div>
-<div id="simple">These two sentences should be the same color (simple)</div>
-<hr/>
-<div id="controlalpha">These two sentences should be the same color (alpha)</div>
-<div id="alpha">These two sentences should be the same color (alpha)</div>
-<hr/>
-<div id="results"></div>
-
+<div id="test-container">
+ <hr/>
+ <div id="controlsimple">These two sentences should be the same color (simple)</div>
+ <div id="simple">These two sentences should be the same color (simple)</div>
+ <hr/>
+ <div id="controlalpha">These two sentences should be the same color (alpha)</div>
+ <div id="alpha">These two sentences should be the same color (alpha)</div>
+</div>
<script>
-if (window.layoutTestController)
- layoutTestController.dumpAsText();
+ description("Tests that CSS3 calc() can be used with the hsl() and hsla() functions");
+
+ tests = ["simple", "alpha"];
-tests = ["simple", "alpha"];
-
-var success = true;
-
-for (i = 0; i < tests.length; i++) {
- var test = tests[i];
- var expected = getComputedStyle(document.getElementById("control" + test), null).color;
- var actual = getComputedStyle(document.getElementById(test), null).color;
- success = success && (actual == expected);
-}
-
-var results = document.getElementById("results");
-if (success) {
- results.style.color = "green";
- results.innerHTML = "PASS";
-} else {
- results.style.color = "red";
- results.innerHTML = "FAIL";
-}
+ for (i = 0; i < tests.length; i++) {
+ var test = tests[i];
+ shouldBeEqualToString('getComputedStyle(document.getElementById("' + test + '"), null).color', getComputedStyle(document.getElementById("control" + test), null).color);
+ }
+
+ if (window.layoutTestController)
+ document.body.removeChild(document.getElementById("test-container"));
</script>
+<script src=""
+
Modified: trunk/LayoutTests/css3/calc/color-rgb-expected.txt (107244 => 107245)
--- trunk/LayoutTests/css3/calc/color-rgb-expected.txt 2012-02-09 15:49:13 UTC (rev 107244)
+++ trunk/LayoutTests/css3/calc/color-rgb-expected.txt 2012-02-09 15:53:48 UTC (rev 107245)
@@ -1,9 +1,15 @@
-These two sentences should be the same color (simple)
-These two sentences should be the same color (simple)
-B. These two sentences should be the same color (simple percent)
-B. These two sentences should be the same color (simple percent)
-C. These two sentences should be the same color (alpha)
-C. These two sentences should be the same color (alpha)
-These two sentences should be the same color (percent alpha)
-These two sentences should be the same color (percent alpha)
-PASS
+Tests that CSS3 calc() can be used with the rgb() and rgba() functions
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(document.getElementById("simple"), null).color is "rgb(10, 180, 30)"
+PASS getComputedStyle(document.getElementById("percentsimple"), null).color is "rgb(25, 243, 76)"
+FAIL getComputedStyle(document.getElementById("percentnumber"), null).color should be rgb(26, 240, 80). Was rgb(0, 0, 0).
+PASS getComputedStyle(document.getElementById("alpha"), null).color is "rgba(10, 180, 30, 0.699219)"
+PASS getComputedStyle(document.getElementById("percentalpha"), null).color is "rgba(25, 243, 76, 0.699219)"
+FAIL getComputedStyle(document.getElementById("percentnumberalpha"), null).color should be rgba(26, 240, 80, 0.496094). Was rgb(0, 0, 0).
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Modified: trunk/LayoutTests/css3/calc/color-rgb.html (107244 => 107245)
--- trunk/LayoutTests/css3/calc/color-rgb.html 2012-02-09 15:49:13 UTC (rev 107244)
+++ trunk/LayoutTests/css3/calc/color-rgb.html 2012-02-09 15:53:48 UTC (rev 107245)
@@ -1,53 +1,51 @@
+<!DOCTYPE HTML>
+<script src=""
<style>
-div {color: red;}
-#controlsimple {color: rgb(10,180,30);}
-#simple {color: rgb(-webkit-calc(10),-webkit-calc(18 * 10),-webkit-calc(30));}
-#controlpercentsimple {color: rgb(10%,95%,30%);}
-#percentsimple {color: rgb(-webkit-calc(2% + 8%),-webkit-calc(95%),-webkit-calc(3% * 10));}
+ #controlsimple { color: rgb(10,180,30); }
+ #simple { color: rgb(-webkit-calc(10),-webkit-calc(18 * 10),-webkit-calc(30)); }
+ #controlpercentsimple { color: rgb(10%,95%,30%); }
+ #percentsimple { color: rgb(-webkit-calc(2% + 8%),-webkit-calc(95%),-webkit-calc(3% * 10)); }
+ #controlpercentnumber { color: rgb(26,240,80); }
+ #percentnumber { color: rgb(-webkit-calc(2% + 8% + 1),-webkit-calc(95% - 3),-webkit-calc(3% * 10 + 4)); }
-#controlalpha {color: rgba(10,180,30,0.7);}
-#alpha {color: rgba(-webkit-calc(10),-webkit-calc(180),-webkit-calc(30), -webkit-calc(0.35 * 2));}
-#controlpercentalpha {color: rgba(10%,95%,30%,0.7);}
-#percentalpha {color: rgba(-webkit-calc(2 * 5%),-webkit-calc(100% - 5%),-webkit-calc(30%),-webkit-calc(0.2 * 3 + 0.1));}
+ #controlalpha { color: rgba(10,180,30,0.7); }
+ #alpha { color: rgba(-webkit-calc(10),-webkit-calc(180),-webkit-calc(30), -webkit-calc(0.35 * 2)); }
+ #controlpercentalpha { color: rgba(10%,95%,30%,0.7); }
+ #percentalpha { color: rgba(-webkit-calc(2 * 5%),-webkit-calc(100% - 5%),-webkit-calc(30%),-webkit-calc(0.2 * 3 + 0.1)); }
+ #controlpercentnumberalpha { color: rgba(26,240,80, 0.5); }
+ #percentnumberalpha { color: rgba(-webkit-calc(2% + 8% + 1),-webkit-calc(95% - 3),-webkit-calc(3% * 10 + 4), -webkit-calc(1.0 / 2)); }
</style>
-
-<div id="controlsimple">These two sentences should be the same color (simple)</div>
-<div id="simple">These two sentences should be the same color (simple)</div>
-<hr/>
-<div id="controlpercentsimple">B. These two sentences should be the same color (simple percent)</div>
-<div id="percentsimple">B. These two sentences should be the same color (simple percent)</div>
-<hr/>
-<div id="controlalpha">C. These two sentences should be the same color (alpha)</div>
-<div id="alpha">C. These two sentences should be the same color (alpha)</div>
-<hr/>
-<div id="controlpercentalpha">These two sentences should be the same color (percent alpha)</div>
-<div id="percentalpha">These two sentences should be the same color (percent alpha)</div>
-<hr/>
-<div id="results"></div>
-
+<div id="test-container">
+ <hr/>
+ <div id="controlsimple">These two sentences should be the same color (simple)</div>
+ <div id="simple">These two sentences should be the same color (simple)</div>
+ <hr/>
+ <div id="controlpercentsimple">These two sentences should be the same color (simple percent)</div>
+ <div id="percentsimple">These two sentences should be the same color (simple percent)</div>
+ <hr/>
+ <div id="controlpercentnumber">These two sentences should be the same color (percent number)</div>
+ <div id="percentnumber">These two sentences should be the same color (percent number)</div>
+ <hr/>
+ <div id="controlalpha">These two sentences should be the same color (alpha)</div>
+ <div id="alpha">These two sentences should be the same color (alpha)</div>
+ <hr/>
+ <div id="controlpercentalpha">These two sentences should be the same color (percent alpha)</div>
+ <div id="percentalpha">These two sentences should be the same color (percent alpha)</div>
+ <hr/>
+ <div id="controlpercentnumberalpha">These two sentences should be the same color (percent number alpha)</div>
+ <div id="percentnumberalpha">These two sentences should be the same color (percent number alpha)</div>
+</div>
<script>
-if (window.layoutTestController)
- layoutTestController.dumpAsText();
+ description("Tests that CSS3 calc() can be used with the rgb() and rgba() functions");
+
+ tests = ["simple", "percentsimple", "percentnumber", "alpha", "percentalpha", "percentnumberalpha"];
-tests = ["simple", "alpha"];
+ for (i = 0; i < tests.length; i++) {
+ var test = tests[i];
+ shouldBeEqualToString('getComputedStyle(document.getElementById("' + test + '"), null).color', getComputedStyle(document.getElementById("control" + test), null).color);
+ }
-var success = true;
-
-for (i = 0; i < tests.length; i++) {
- var test = tests[i];
- var expectedsimple = getComputedStyle(document.getElementById("control" + test), null).color;
- var actualsimple = getComputedStyle(document.getElementById(test), null).color;
- var expectedpercent = getComputedStyle(document.getElementById("controlpercent" + test), null).color;
- var actualpercent = getComputedStyle(document.getElementById("percent" + test), null).color;
- success = success && (actualsimple == expectedsimple) && (actualpercent == expectedpercent);
-}
-
-var results = document.getElementById("results");
-if (success) {
- results.style.color = "green";
- results.innerHTML = "PASS";
-} else {
- results.style.color = "red";
- results.innerHTML = "FAIL";
-}
+ if (window.layoutTestController)
+ document.body.removeChild(document.getElementById("test-container"));
</script>
+<script src=""
