Diff
Modified: trunk/LayoutTests/ChangeLog (106628 => 106629)
--- trunk/LayoutTests/ChangeLog 2012-02-03 05:44:35 UTC (rev 106628)
+++ trunk/LayoutTests/ChangeLog 2012-02-03 06:44:54 UTC (rev 106629)
@@ -1,3 +1,20 @@
+2012-02-02 Mike Lawther <[email protected]>
+
+ gradient tests for CSS3 calc
+ https://bugs.webkit.org/show_bug.cgi?id=75822
+
+ Reviewed by Hajime Morita.
+
+ 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/css3-radial-gradients-expected-mismatch.html: Added.
+ * css3/calc/css3-radial-gradients.html: Added.
+ * css3/calc/gradient-color-stops-expected-mismatch.html: Added.
+ * css3/calc/gradient-color-stops.html: Added.
+
2012-02-02 Bear Travis <[email protected]>
Support 'disabled' attribute on SVGStyleElement
Added: trunk/LayoutTests/css3/calc/css3-radial-gradients-expected-mismatch.html (0 => 106629)
--- trunk/LayoutTests/css3/calc/css3-radial-gradients-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/css3/calc/css3-radial-gradients-expected-mismatch.html 2012-02-03 06:44:54 UTC (rev 106629)
@@ -0,0 +1,56 @@
+<style>
+.box {
+ display: inline-block;
+ height: 120px;
+ width: 200px;
+ margin: 10px;
+ border: 1px solid black;
+ background-repeat: no-repeat;
+}
+
+.gradient1 {
+ background-image: -webkit-radial-gradient(50px 50%, circle closest-side, white, black);
+ background-image: -moz-radial-gradient(50px 50%, circle closest-side, white, black);
+}
+
+.gradient2 {
+ background-image: -webkit-radial-gradient(20px 50px, ellipse closest-corner, white, black);
+ background-image: -moz-radial-gradient(20px 50px, ellipse closest-corner, white, black);
+}
+
+.gradient3 {
+ background-image: -webkit-radial-gradient(20% 20%, circle closest-corner, white, black);
+ background-image: -moz-radial-gradient(20% 20%, circle closest-corner, white, black);
+}
+
+.gradient4 {
+ background-image: -webkit-radial-gradient(left, circle cover, red, green 30%, blue);
+ background-image: -moz-radial-gradient(left, circle cover, red, green 30%, blue);
+}
+
+.gradient5 {
+ background-image: -webkit-radial-gradient(ellipse cover, red, green 80px, blue);
+ background-image: -moz-radial-gradient(ellipse cover, red, green 80px, blue);
+}
+
+.gradient6 {
+ background-image: -webkit-radial-gradient(circle cover, red 20%, green, blue 150%);
+ background-image: -moz-radial-gradient(circle cover, red 20%, green, blue 150%);
+}
+
+.gradient7 {
+ background-image: -webkit-radial-gradient(20% 20%, circle closest-corner, red -50%, green, blue 150%);
+ background-image: -moz-radial-gradient(20% 20%, circle closest-corner, red -50%, green, blue 150%);
+}
+</style>
+<body>
+ <div class="gradient1 box"></div>
+ <div class="gradient2 box"></div>
+ <div class="gradient3 box"></div>
+ <br>
+ <div class="gradient4 box"></div>
+ <div class="gradient5 box"></div>
+ <div class="gradient6 box"></div>
+ <br>
+ <div class="gradient7 box"></div>
+</body>
Added: trunk/LayoutTests/css3/calc/css3-radial-gradients.html (0 => 106629)
--- trunk/LayoutTests/css3/calc/css3-radial-gradients.html (rev 0)
+++ trunk/LayoutTests/css3/calc/css3-radial-gradients.html 2012-02-03 06:44:54 UTC (rev 106629)
@@ -0,0 +1,56 @@
+<style>
+.box {
+ display: inline-block;
+ height: 120px;
+ width: 200px;
+ margin: 10px;
+ border: 1px solid black;
+ background-repeat: no-repeat;
+}
+
+.gradient1 {
+ background-image: -webkit-radial-gradient(-webkit-calc(50px) -webkit-calc(50%), circle closest-side, white, black);
+ background-image: -moz-radial-gradient(-webkit-calc(50px) -webkit-calc(50%), circle closest-side, white, black);
+}
+
+.gradient2 {
+ background-image: -webkit-radial-gradient(-webkit-calc(20px) -webkit-calc(50px), ellipse closest-corner, white, black);
+ background-image: -moz-radial-gradient(-webkit-calc(20px) -webkit-calc(50px), ellipse closest-corner, white, black);
+}
+
+.gradient3 {
+ background-image: -webkit-radial-gradient(-webkit-calc(20%) -webkit-calc(20%), circle closest-corner, white, black);
+ background-image: -moz-radial-gradient(-webkit-calc(20%) -webkit-calc(20%), circle closest-corner, white, black);
+}
+
+.gradient4 {
+ background-image: -webkit-radial-gradient(left, circle cover, red, green -webkit-calc(30%), blue);
+ background-image: -moz-radial-gradient(left, circle cover, red, green -webkit-calc(30%), blue);
+}
+
+.gradient5 {
+ background-image: -webkit-radial-gradient(ellipse cover, red, green -webkit-calc(80px), blue);
+ background-image: -moz-radial-gradient(ellipse cover, red, green -webkit-calc(80px), blue);
+}
+
+.gradient6 {
+ background-image: -webkit-radial-gradient(circle cover, red -webkit-calc(20%), green, blue -webkit-calc(150%));
+ background-image: -moz-radial-gradient(circle cover, red -webkit-calc(20%), green, blue -webkit-calc(150%));
+}
+
+.gradient7 {
+ background-image: -webkit-radial-gradient(-webkit-calc(20%) -webkit-calc(20%), circle closest-corner, red -50%, green, blue -webkit-calc(150%));
+ background-image: -moz-radial-gradient(-webkit-calc(20%) -webkit-calc(20%), circle closest-corner, red -50%, green, blue -webkit-calc(150%));
+}
+</style>
+<body>
+ <div class="gradient1 box"></div>
+ <div class="gradient2 box"></div>
+ <div class="gradient3 box"></div>
+ <br>
+ <div class="gradient4 box"></div>
+ <div class="gradient5 box"></div>
+ <div class="gradient6 box"></div>
+ <br>
+ <div class="gradient7 box"></div>
+</body>
Added: trunk/LayoutTests/css3/calc/gradient-color-stops-expected-mismatch.html (0 => 106629)
--- trunk/LayoutTests/css3/calc/gradient-color-stops-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/css3/calc/gradient-color-stops-expected-mismatch.html 2012-02-03 06:44:54 UTC (rev 106629)
@@ -0,0 +1,44 @@
+<style>
+.box {
+ display: inline-block;
+ height: 120px;
+ width: 200px;
+ margin: 10px;
+ border: 1px solid black;
+ background-repeat: no-repeat;
+}
+
+.linear1 {
+ background-image: -webkit-linear-gradient(left, red 25%, green 50%, blue 75%);
+ background-image: -moz-linear-gradient(left, red 25%, green 50%, blue 75%);
+}
+
+.linear2 {
+ /* Green should get shifted to 50% */
+ background-image: -webkit-linear-gradient(left, red 50%, green 30%, blue 90%);
+ background-image: -moz-linear-gradient(left, red 50%, green 30%, blue 90%);
+}
+
+.linear3 {
+ background-image: -webkit-linear-gradient(red -50%, green, blue, green, blue 150%);
+ background-image: -moz-linear-gradient(red -50%, green, blue, green, blue 150%);
+}
+
+.linear4 {
+ background-image: -webkit-linear-gradient(left, red, green 100px, blue);
+ background-image: -moz-linear-gradient(left, red, green 100px, blue);
+}
+
+.linear5 {
+ background-image: -webkit-linear-gradient(left, red, green 120%, blue);
+ background-image: -moz-linear-gradient(left, red, green 120%, blue);
+}
+</style>
+<body>
+ <div class="linear1 box"></div>
+ <div class="linear2 box"></div>
+ <div class="linear3 box"></div>
+ <br>
+ <div class="linear4 box"></div>
+ <div class="linear5 box"></div>
+</body>
Added: trunk/LayoutTests/css3/calc/gradient-color-stops.html (0 => 106629)
--- trunk/LayoutTests/css3/calc/gradient-color-stops.html (rev 0)
+++ trunk/LayoutTests/css3/calc/gradient-color-stops.html 2012-02-03 06:44:54 UTC (rev 106629)
@@ -0,0 +1,44 @@
+<style>
+.box {
+ display: inline-block;
+ height: 120px;
+ width: 200px;
+ margin: 10px;
+ border: 1px solid black;
+ background-repeat: no-repeat;
+}
+
+.linear1 {
+ background-image: -webkit-linear-gradient(left, red -webkit-calc(25%), green -webkit-calc(50%), blue -webkit-calc(75%));
+ background-image: -moz-linear-gradient(left, red -webkit-calc(25%), green -webkit-calc(50%), blue -webkit-calc(75%));
+}
+
+.linear2 {
+ /* Green should get shifted to -webkit-calc(50%) */
+ background-image: -webkit-linear-gradient(left, red -webkit-calc(50%), green -webkit-calc(30%), blue -webkit-calc(90%));
+ background-image: -moz-linear-gradient(left, red -webkit-calc(50%), green -webkit-calc(30%), blue -webkit-calc(90%));
+}
+
+.linear3 {
+ background-image: -webkit-linear-gradient(red -webkit-calc(-50%), green, blue, green, blue -webkit-calc(150%));
+ background-image: -moz-linear-gradient(red -webkit-calc(-50%), green, blue, green, blue -webkit-calc(150%));
+}
+
+.linear4 {
+ background-image: -webkit-linear-gradient(left, red, green -webkit-calc(100px), blue);
+ background-image: -moz-linear-gradient(left, red, green -webkit-calc(100px), blue);
+}
+
+.linear5 {
+ background-image: -webkit-linear-gradient(left, red, green -webkit-calc(120%), blue);
+ background-image: -moz-linear-gradient(left, red, green -webkit-calc(120%), blue);
+}
+</style>
+<body>
+ <div class="linear1 box"></div>
+ <div class="linear2 box"></div>
+ <div class="linear3 box"></div>
+ <br>
+ <div class="linear4 box"></div>
+ <div class="linear5 box"></div>
+</body>
