summaryrefslogtreecommitdiffstats
path: root/layout/reftests/webkit-gradient
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/webkit-gradient')
-rw-r--r--layout/reftests/webkit-gradient/reftest-stylo.list23
-rw-r--r--layout/reftests/webkit-gradient/reftest.list21
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1-ref.html68
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1.html73
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1-ref.html62
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1.html64
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-linear-1-ref.html51
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-linear-1a.html67
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-linear-1b.html67
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-linear-1c.html67
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-linear-1d.html67
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-linear-2-ref.html56
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-linear-2.html80
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-radial-1-ref.html71
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-radial-1a.html114
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-radial-1b.html114
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-radial-2-ref.html49
-rw-r--r--layout/reftests/webkit-gradient/webkit-gradient-radial-2.html62
18 files changed, 1176 insertions, 0 deletions
diff --git a/layout/reftests/webkit-gradient/reftest-stylo.list b/layout/reftests/webkit-gradient/reftest-stylo.list
new file mode 100644
index 000000000..629e8f184
--- /dev/null
+++ b/layout/reftests/webkit-gradient/reftest-stylo.list
@@ -0,0 +1,23 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# This directory contains tests for -webkit-gradient() expressions.
+# They require webkit prefix support to be enabled.
+default-preferences pref(layout.css.prefixes.webkit,true)
+
+# Tests where we don't render a "-webkit-gradient" exactly correctly.
+# (These just ensure that our approximate/do-something rendering does not
+# change unexpectedly.)
+skip fuzzy-if(cocoaWidget,3,3369) == webkit-gradient-approx-linear-1.html webkit-gradient-approx-linear-1.html
+# bug 1225372
+skip == webkit-gradient-approx-radial-1.html webkit-gradient-approx-radial-1.html
+
+# Tests for -webkit-gradient(linear, ...)
+== webkit-gradient-linear-1a.html webkit-gradient-linear-1a.html
+== webkit-gradient-linear-1b.html webkit-gradient-linear-1b.html
+== webkit-gradient-linear-1c.html webkit-gradient-linear-1c.html
+== webkit-gradient-linear-1d.html webkit-gradient-linear-1d.html
+== webkit-gradient-linear-2.html webkit-gradient-linear-2.html
+
+# Tests for -webkit-gradient(radial, ...)
+== webkit-gradient-radial-1a.html webkit-gradient-radial-1a.html
+== webkit-gradient-radial-1b.html webkit-gradient-radial-1b.html
+== webkit-gradient-radial-2.html webkit-gradient-radial-2.html
diff --git a/layout/reftests/webkit-gradient/reftest.list b/layout/reftests/webkit-gradient/reftest.list
new file mode 100644
index 000000000..0f822256d
--- /dev/null
+++ b/layout/reftests/webkit-gradient/reftest.list
@@ -0,0 +1,21 @@
+# This directory contains tests for -webkit-gradient() expressions.
+# They require webkit prefix support to be enabled.
+default-preferences pref(layout.css.prefixes.webkit,true)
+
+# Tests where we don't render a "-webkit-gradient" exactly correctly.
+# (These just ensure that our approximate/do-something rendering does not
+# change unexpectedly.)
+fuzzy-if(cocoaWidget,3,3369) == webkit-gradient-approx-linear-1.html webkit-gradient-approx-linear-1-ref.html # bug 1225372
+== webkit-gradient-approx-radial-1.html webkit-gradient-approx-radial-1-ref.html
+
+# Tests for -webkit-gradient(linear, ...)
+== webkit-gradient-linear-1a.html webkit-gradient-linear-1-ref.html
+== webkit-gradient-linear-1b.html webkit-gradient-linear-1-ref.html
+== webkit-gradient-linear-1c.html webkit-gradient-linear-1-ref.html
+== webkit-gradient-linear-1d.html webkit-gradient-linear-1-ref.html
+== webkit-gradient-linear-2.html webkit-gradient-linear-2-ref.html
+
+# Tests for -webkit-gradient(radial, ...)
+== webkit-gradient-radial-1a.html webkit-gradient-radial-1-ref.html
+== webkit-gradient-radial-1b.html webkit-gradient-radial-1-ref.html
+== webkit-gradient-radial-2.html webkit-gradient-radial-2-ref.html
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1-ref.html
new file mode 100644
index 000000000..326607440
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reference</title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 50px;
+ height: 30px;
+ margin: 1px;
+ float: left;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Start point and end point are the same, in testcase:
+ We end up detecting that the start & end have the same "y" value,
+ so we render a gradient going from left to right horizontally. -->
+ <div style="background: linear-gradient(to right,
+ blue, yellow)"></div>
+ <div style="background: linear-gradient(to right,
+ blue, yellow)"></div>
+ <div style="background: linear-gradient(to right,
+ blue, yellow)"></div>
+ <br>
+
+ <!-- For the rest of the gradients here, we end up rendering a "legacy"
+ gradient (-moz-linear-gradient) with the gradient line starting at the
+ testcase's specified "start" point, and we ignore the "end" point. -->
+ <div style="background: -moz-linear-gradient(center center,
+ blue, yellow)"></div>
+ <div style="background: -moz-linear-gradient(left top,
+ blue, yellow)"></div>
+ <div style="background: -moz-linear-gradient(10px 15px,
+ blue, yellow)"></div>
+ <br>
+
+ <div style="background: -moz-linear-gradient(-10px -15px,
+ blue, yellow)"></div>
+ <div style="background: -moz-linear-gradient(-100px 10px,
+ blue, yellow)"></div>
+ <div style="background: -moz-linear-gradient(10px -100px,
+ blue, yellow)"></div>
+ <br>
+
+ <div style="background: -moz-linear-gradient(center top,
+ blue, yellow)"></div>
+ <div style="background: -moz-linear-gradient(left center,
+ blue, yellow)"></div>
+ <div style="background: -moz-linear-gradient(right center,
+ blue, yellow)"></div>
+ <br>
+
+ <div style="background: -moz-linear-gradient(right top,
+ blue, yellow)"></div>
+ <div style="background: -moz-linear-gradient(left top,
+ blue, yellow)"></div>
+ <div style="background: -moz-linear-gradient(left bottom,
+ blue, yellow)"></div>
+ <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1.html b/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1.html
new file mode 100644
index 000000000..e1642b92a
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(linear, ...) expressions which we don't render
+ quite correctly because they can't easily be represented with modern syntax.
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 50px;
+ height: 30px;
+ margin: 1px;
+ float: left;
+
+ /* We include a fallback background, to easily distinguish failures at
+ * parse time (which fall back to this value) vs. something later on. */
+ background: red;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Start point and end point are the same: -->
+ <div style="background: -webkit-gradient(linear, left top, left top,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, 40 40, 40 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, center center, center center,
+ from(blue), to(yellow))"></div>
+ <br>
+
+ <!-- Gradient starting and/or ending somewhere in the middle (not an edge): -->
+ <div style="background: -webkit-gradient(linear, center center, right top,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, left top, center center,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, 10 15, 5 20,
+ from(blue), to(yellow))"></div>
+ <br>
+
+ <!-- Gradient starting and/or ending somewhere arbitrary outside: -->
+ <div style="background: -webkit-gradient(linear, -10 -15, left top,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, -100 10, 20 30,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, 10 -100, 100 10,
+ from(blue), to(yellow))"></div>
+ <br>
+
+ <!-- Slanted gradient between sides/corners: -->
+ <div style="background: -webkit-gradient(linear, center top, left center,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, left center, center top,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, right center, center top,
+ from(blue), to(yellow))"></div>
+ <br>
+
+ <div style="background: -webkit-gradient(linear, right top, center bottom,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, left top, right bottom,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, left bottom, right top,
+ from(blue), to(yellow))"></div>
+ <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1-ref.html
new file mode 100644
index 000000000..274a46620
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reference</title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 50px;
+ height: 40px;
+ margin: 1px;
+ float: left;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Note: -webkit-gradient(radial, ...) expressions involve *two* circles,
+ with the gradient progressing between their edges. But, the standard
+ syntax (& hence our emulation) only supports *one* circle.
+
+ So, in our reference renderings below, we ignore the smaller circle from
+ the testcase's gradient expression, and we use a gradient that progresses
+ from the outer circle's center to its edge. (Conceptually, we collapse
+ the smaller circle to a point at the center of the larger circle.) -->
+
+ <!-- Inner circle has nonzero radius, in testcase:
+ (We ignore it here.) -->
+ <div style="background: radial-gradient(circle 40px at left top,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 50px at center center,
+ yellow, blue)"></div>
+ <br>
+
+ <!-- Both circles have the same radius, in testcase:
+ (We pretend the first one is 0-sized.) -->
+ <div style="background: radial-gradient(circle 40px at center center,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 10px at 10px 10px,
+ blue, yellow)"></div>
+ <br>
+
+ <!-- Inner circle has different center than outer circle, in testcase:
+ (We collapse it to center of outer circle.) -->
+ <div style="background: radial-gradient(circle 40px at left top,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 40px at 10px 20px,
+ yellow, blue)"></div>
+ <br>
+
+ <!-- Inner circle and outer circle do not even intersect, in testcase:
+ (We collapse smaller circle to center of larger circle.) -->
+ <div style="background: radial-gradient(circle 10px at 30px 10px,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 30px at 150px 10px,
+ blue, yellow)"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1.html b/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1.html
new file mode 100644
index 000000000..4f0760560
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(radial, ...) expressions which we don't render
+ quite correctly because they can't easily be represented with modern syntax.
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 50px;
+ height: 40px;
+ margin: 1px;
+ float: left;
+
+ /* We include a fallback background, to easily distinguish failures at
+ * parse time (which fall back to this value) vs. something later on. */
+ background: red;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Inner circle has nonzero radius: -->
+ <div style="background: -webkit-gradient(radial,
+ left top, 10, left top, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ center center, 50, center center, 40,
+ from(blue), to(yellow))"></div>
+ <br>
+
+ <!-- Both circles have the same radius: -->
+ <div style="background: -webkit-gradient(radial,
+ center center, 40, center center, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ 10 10, 10, 10 10, 10,
+ from(blue), to(yellow))"></div>
+ <br>
+
+ <!-- Inner circle has different center than outer circle: -->
+ <div style="background: -webkit-gradient(radial,
+ left bottom, 0, left top, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ 10 20, 40, 30 10, 5,
+ from(blue), to(yellow))"></div>
+ <br>
+
+ <!-- Inner circle and outer circle do not even intersect: -->
+ <div style="background: -webkit-gradient(radial,
+ 10 10, 5, 30 10, 10,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ -50 10, 5, 150 10, 30,
+ from(blue), to(yellow))"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-1-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-1-ref.html
new file mode 100644
index 000000000..d86354584
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-1-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reference</title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 100px;
+ height: 50px;
+ margin: 1px;
+ float: left;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Left to right gradients: -->
+ <div style="background: linear-gradient(to right,
+ blue, yellow)"></div>
+
+ <div style="background: linear-gradient(to right,
+ blue, pink 30%, yellow"></div>
+ <br>
+
+ <!-- Right to left gradients: -->
+ <div style="background: linear-gradient(to left,
+ blue, yellow)"></div>
+ <div style="background: linear-gradient(to left,
+ blue, pink 30%, yellow"></div>
+ <br>
+
+ <!-- Top to bottom gradients: -->
+ <div style="background: linear-gradient(to bottom,
+ blue, yellow)"></div>
+
+ <div style="background: linear-gradient(to bottom,
+ blue, pink 30%, yellow"></div>
+ <br>
+
+ <!-- Bottom to top gradients: -->
+ <div style="background: linear-gradient(to top,
+ blue, yellow)"></div>
+
+ <div style="background: linear-gradient(to top,
+ blue, pink 30%, yellow"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-1a.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-1a.html
new file mode 100644
index 000000000..1a6fe1650
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-1a.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(linear, ...) expressions,
+ from center of each side to center of opposite side.
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 100px;
+ height: 50px;
+ margin: 1px;
+ float: left;
+
+ /* We include a fallback background, to easily distinguish failures at
+ * parse time (which fall back to this value) vs. something later on. */
+ background: red;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Left to right gradients: -->
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ from(blue), to(yellow))"></div>
+
+
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Right to left gradients: -->
+ <div style="background: -webkit-gradient(linear, right center, left center,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, right center, left center,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Top to bottom gradients: -->
+ <div style="background: -webkit-gradient(linear, center top, center bottom,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, center top, center bottom,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Bottom to top gradients: -->
+ <div style="background: -webkit-gradient(linear, center bottom, center top,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, center bottom, center top,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-1b.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-1b.html
new file mode 100644
index 000000000..ae03d777a
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-1b.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(linear, ...) expressions,
+ from the top-left-most end of each side to the
+ top-left-most end of opposite side.
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 100px;
+ height: 50px;
+ margin: 1px;
+ float: left;
+
+ /* We include a fallback background, to easily distinguish failures at
+ * parse time (which fall back to this value) vs. something later on. */
+ background: red;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Left to right gradients: -->
+ <div style="background: -webkit-gradient(linear, left top, right top,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, left top, right top,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Right to left gradients: -->
+ <div style="background: -webkit-gradient(linear, right top, left top,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, right top, left top,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Top to bottom gradients: -->
+ <div style="background: -webkit-gradient(linear, left top, left bottom,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, left top, left bottom,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Bottom to top gradients: -->
+ <div style="background: -webkit-gradient(linear, left bottom, left top,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, left bottom, left top,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-1c.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-1c.html
new file mode 100644
index 000000000..29ae3a786
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-1c.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(linear, ...) expressions,
+ from the bottom-right-most end of each side to the
+ bottom-right-most end of opposite side.
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 100px;
+ height: 50px;
+ margin: 1px;
+ float: left;
+
+ /* We include a fallback background, to easily distinguish failures at
+ * parse time (which fall back to this value) vs. something later on. */
+ background: red;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Left to right gradients: -->
+ <div style="background: -webkit-gradient(linear, left bottom, right bottom,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, left bottom, right bottom,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Right to left gradients: -->
+ <div style="background: -webkit-gradient(linear, right bottom, left bottom,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, right bottom, left bottom,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Top to bottom gradients: -->
+ <div style="background: -webkit-gradient(linear, right top, right bottom,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, right top, right bottom,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Bottom to top gradients: -->
+ <div style="background: -webkit-gradient(linear, right bottom, right top,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, right bottom, right top,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-1d.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-1d.html
new file mode 100644
index 000000000..b1b54372c
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-1d.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(linear, ...) expressions,
+ from the an arbitrary spot along each side to the same arbitrary
+ place on opposite side.
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 100px;
+ height: 50px;
+ margin: 1px;
+ float: left;
+
+ /* We include a fallback background, to easily distinguish failures at
+ * parse time (which fall back to this value) vs. something later on. */
+ background: red;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Left to right gradients: -->
+ <div style="background: -webkit-gradient(linear, left 25%, right 25%,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, left -123%, right -123%,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Right to left gradients: -->
+ <div style="background: -webkit-gradient(linear, right -10, left -10,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, right 9999, left 9999,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Top to bottom gradients: -->
+ <div style="background: -webkit-gradient(linear, 1.11 top, 1.11 bottom,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, -56.78 top, -56.78 bottom,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- Bottom to top gradients: -->
+ <div style="background: -webkit-gradient(linear, -0 bottom, 0 top,
+ from(blue), to(yellow))"></div>
+
+ <div style="background: -webkit-gradient(linear, 0% bottom, -0% top,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-2-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-2-ref.html
new file mode 100644
index 000000000..36b4c9718
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-2-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reference</title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 30px;
+ height: 50px;
+ margin: 1px;
+ float: left;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- No color stops (transparent): -->
+ <div></div>
+
+ <!-- Add another background to be sure we're transparent, not white: -->
+ <div style="background: linear-gradient(to right, pink, purple)"></div>
+ <br>
+
+ <!-- One color stop, at various positions (renders as solid color): -->
+ <div style="background: blue"></div>
+ <div style="background: blue"></div>
+ <div style="background: blue"></div>
+ <div style="background: blue"></div>
+ <br>
+
+ <!-- Two color stops, both at the same position: -->
+ <div style="background: yellow"></div>
+ <div style="background: blue"></div>
+ <div style="background: linear-gradient(to right,
+ blue 30%, yellow 30%)"></div>
+ <div style="background: yellow"></div>
+ <div style="background: blue"></div>
+ <br>
+
+ <!-- Color stops out of order & need (stable) sorting: -->
+ <div style="background: linear-gradient(to right,
+ blue, yellow)"></div>
+ <div style="background: linear-gradient(to right,
+ salmon, yellow)"></div>
+ <div style="background: linear-gradient(to right,
+ blue, yellow)"></div>
+ <div style="background: linear-gradient(to right,
+ blue, yellow)"></div>
+ <div style="background: linear-gradient(to right,
+ yellow, salmon 80%, blue)"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-2.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-2.html
new file mode 100644
index 000000000..95defb508
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-2.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(linear, ...) expressions with special cases
+ for color stops.
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 30px;
+ height: 50px;
+ margin: 1px;
+ float: left;
+
+ /* We include a fallback background, to easily distinguish failures at
+ * parse time (which fall back to this value) vs. something later on. */
+ background: red;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- No color stops (transparent): -->
+ <div style="background: -webkit-gradient(linear, left center, right center
+ )"></div>
+ <!-- Add another background to be sure we're transparent, not white: -->
+ <div style="background: linear-gradient(to right, pink, purple),
+ -webkit-gradient(linear, left center, right center)"></div>
+ <br>
+
+ <!-- One color stop, at various positions (renders as solid color): -->
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ from(blue))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ to(blue))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ color-stop(30%, blue))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ color-stop(1.5, blue))"></div>
+ <br>
+
+ <!-- Two color stops, both at the same position: -->
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ from(blue), from(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ to(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ color-stop(30%, blue),
+ color-stop(30%, yellow))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ color-stop(-1.5, blue),
+ color-stop(-1.5, yellow))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ color-stop(4.5, blue),
+ color-stop(4.5, yellow))"></div>
+ <br>
+
+ <!-- Color stops out of order & need (stable) sorting: -->
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ to(yellow), from(blue))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ to(yellow), from(blue),
+ from(salmon))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ from(salmon), to(yellow),
+ from(blue))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ from(salmon), to(yellow),
+ from(orange), to(gray), from(blue))"></div>
+ <div style="background: -webkit-gradient(linear, left center, right center,
+ color-stop(0.8, salmon),
+ from(black), from(yellow),
+ to(blue), to(gray))"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-radial-1-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-radial-1-ref.html
new file mode 100644
index 000000000..bb1c67aea
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-radial-1-ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reference</title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 40px;
+ height: 50px;
+ margin: 1px;
+ float: left;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- left top: -->
+ <div style="background: radial-gradient(circle 40px at left top,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 40px at left top,
+ blue, pink 30%, yellow)"></div>
+ <!-- center top: -->
+ <div style="background: radial-gradient(circle 40px at center top,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 40px at center top,
+ blue, pink 30%, yellow)"></div>
+ <!-- right top: -->
+ <div style="background: radial-gradient(circle 40px at right top,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 40px at right top,
+ blue, pink 30%, yellow)"></div>
+ <br>
+
+ <!-- left center: -->
+ <div style="background: radial-gradient(circle 40px at left center,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 40px at left center,
+ blue, pink 30%, yellow)"></div>
+ <!-- center center: -->
+ <div style="background: radial-gradient(circle 40px at center center,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 40px at center center,
+ blue, pink 30%, yellow)"></div>
+ <!-- right center: -->
+ <div style="background: radial-gradient(circle 40px at right center,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 40px at right center,
+ blue, pink 30%, yellow)"></div>
+ <br>
+
+ <!-- left bottom: -->
+ <div style="background: radial-gradient(circle 40px at left bottom,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 40px at left bottom,
+ blue, pink 30%, yellow)"></div>
+ <!-- center bottom: -->
+ <div style="background: radial-gradient(circle 40px at center bottom,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 40px at center bottom,
+ blue, pink 30%, yellow)"></div>
+ <!-- right bottom: -->
+ <div style="background: radial-gradient(circle 40px at right bottom,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 40px at right bottom,
+ blue, pink 30%, yellow)"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-radial-1a.html b/layout/reftests/webkit-gradient/webkit-gradient-radial-1a.html
new file mode 100644
index 000000000..24e32492f
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-radial-1a.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(radial, ...) expressions,
+ with 0-sized inner circle listed first
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 40px;
+ height: 50px;
+ margin: 1px;
+ float: left;
+
+ /* We include a fallback background, to easily distinguish failures at
+ * parse time (which fall back to this value) vs. something later on. */
+ background: red;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- left top: -->
+ <div style="background: -webkit-gradient(radial,
+ left top, 0, left top, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ left top, 0, left top, 40,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <!-- center top: -->
+ <div style="background: -webkit-gradient(radial,
+ center top, 0, center top, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ center top, 0, center top, 40,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <!-- right top: -->
+ <div style="background: -webkit-gradient(radial,
+ right top, 0, right top, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ right top, 0, right top, 40,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- left center: -->
+ <div style="background: -webkit-gradient(radial,
+ left center, 0, left center, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ left center, 0, left center, 40,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <!-- center center: -->
+ <div style="background: -webkit-gradient(radial,
+ center center, 0, center center, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ center center, 0, center center, 40,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <!-- right center: -->
+ <div style="background: -webkit-gradient(radial,
+ right center, 0, right center, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ right center, 0, right center, 40,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <br>
+
+ <!-- left bottom: -->
+ <div style="background: -webkit-gradient(radial,
+ left bottom, 0, left bottom, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ left bottom, 0, left bottom, 40,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <!-- center bottom: -->
+ <div style="background: -webkit-gradient(radial,
+ center bottom, 0, center bottom, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ center bottom, 0, center bottom, 40,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+ <!-- right bottom: -->
+ <div style="background: -webkit-gradient(radial,
+ right bottom, 0, right bottom, 40,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ right bottom, 0, right bottom, 40,
+ from(blue),
+ color-stop(0.3, pink),
+ to(yellow))"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-radial-1b.html b/layout/reftests/webkit-gradient/webkit-gradient-radial-1b.html
new file mode 100644
index 000000000..08bbc0789
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-radial-1b.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(radial, ...) expressions,
+ with 0-sized inner circle listed second
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 40px;
+ height: 50px;
+ margin: 1px;
+ float: left;
+
+ /* We include a fallback background, to easily distinguish failures at
+ * parse time (which fall back to this value) vs. something later on. */
+ background: red;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- left top: -->
+ <div style="background: -webkit-gradient(radial,
+ left top, 40, left top, 0,
+ from(yellow), to(blue))"></div>
+ <div style="background: -webkit-gradient(radial,
+ left top, 40, left top, 0,
+ from(yellow),
+ color-stop(0.7, pink),
+ to(blue))"></div>
+ <!-- center top: -->
+ <div style="background: -webkit-gradient(radial,
+ center top, 40, center top, 0,
+ from(yellow), to(blue))"></div>
+ <div style="background: -webkit-gradient(radial,
+ center top, 40, center top, 0,
+ from(yellow),
+ color-stop(0.7, pink),
+ to(blue))"></div>
+ <!-- right top: -->
+ <div style="background: -webkit-gradient(radial,
+ right top, 40, right top, 0,
+ from(yellow), to(blue))"></div>
+ <div style="background: -webkit-gradient(radial,
+ right top, 40, right top, 0,
+ from(yellow),
+ color-stop(0.7, pink),
+ to(blue))"></div>
+ <br>
+
+ <!-- left center: -->
+ <div style="background: -webkit-gradient(radial,
+ left center, 40, left center, 0,
+ from(yellow), to(blue))"></div>
+ <div style="background: -webkit-gradient(radial,
+ left center, 40, left center, 0,
+ from(yellow),
+ color-stop(0.7, pink),
+ to(blue))"></div>
+ <!-- center center: -->
+ <div style="background: -webkit-gradient(radial,
+ center center, 40, center center, 0,
+ from(yellow), to(blue))"></div>
+ <div style="background: -webkit-gradient(radial,
+ center center, 40, center center, 0,
+ from(yellow),
+ color-stop(0.7, pink),
+ to(blue))"></div>
+ <!-- right center: -->
+ <div style="background: -webkit-gradient(radial,
+ right center, 40, right center, 0,
+ from(yellow), to(blue))"></div>
+ <div style="background: -webkit-gradient(radial,
+ right center, 40, right center, 0,
+ from(yellow),
+ color-stop(0.7, pink),
+ to(blue))"></div>
+ <br>
+
+ <!-- left bottom: -->
+ <div style="background: -webkit-gradient(radial,
+ left bottom, 40, left bottom, 0,
+ from(yellow), to(blue))"></div>
+ <div style="background: -webkit-gradient(radial,
+ left bottom, 40, left bottom, 0,
+ from(yellow),
+ color-stop(0.7, pink),
+ to(blue))"></div>
+ <!-- center bottom: -->
+ <div style="background: -webkit-gradient(radial,
+ center bottom, 40, center bottom, 0,
+ from(yellow), to(blue))"></div>
+ <div style="background: -webkit-gradient(radial,
+ center bottom, 40, center bottom, 0,
+ from(yellow),
+ color-stop(0.7, pink),
+ to(blue))"></div>
+ <!-- right bottom: -->
+ <div style="background: -webkit-gradient(radial,
+ right bottom, 40, right bottom, 0,
+ from(yellow), to(blue))"></div>
+ <div style="background: -webkit-gradient(radial,
+ right bottom, 40, right bottom, 0,
+ from(yellow),
+ color-stop(0.7, pink),
+ to(blue))"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-radial-2-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-radial-2-ref.html
new file mode 100644
index 000000000..c82e3dbb5
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-radial-2-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(radial, ...) expressions
+ with various numeric positions and/or side keywords.
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 50px;
+ height: 40px;
+ margin: 1px;
+ float: left;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Placing gradient's center outside of the element: -->
+ <div style="background: radial-gradient(circle 50px at -10px -20px,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 50px at 15px -2px,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 50px at -10px 55px,
+ blue, yellow)"></div>
+ <br>
+
+ <!-- Mixing side keywords with numeric values: -->
+ <div style="background: radial-gradient(circle 50px at left 5px,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 50px at center 10px,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 50px at right 30px,
+ blue, yellow)"></div>
+ <br>
+
+ <div style="background: radial-gradient(circle 50px at 5px top,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 50px at 10px center,
+ blue, yellow)"></div>
+ <div style="background: radial-gradient(circle 50px at 30px bottom,
+ blue, yellow)"></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-gradient-radial-2.html b/layout/reftests/webkit-gradient/webkit-gradient-radial-2.html
new file mode 100644
index 000000000..56e9cbb41
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-gradient-radial-2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>
+ CSS Test: -webkit-gradient(radial, ...) expressions
+ with various numeric positions and/or side keywords.
+ </title>
+ <style>
+ div {
+ border: 1px solid black;
+ width: 50px;
+ height: 40px;
+ margin: 1px;
+ float: left;
+
+ /* We include a fallback background, to easily distinguish failures at
+ * parse time (which fall back to this value) vs. something later on. */
+ background: red;
+ }
+ br { clear: both; }
+ </style>
+</head>
+<body>
+ <!-- Placing gradient's center outside of the element: -->
+ <div style="background: -webkit-gradient(radial,
+ -10 -20, 0, -10 -20, 50,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ 15 -2, 0, 15 -2, 50,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ -10 55, 0, -10 55, 50,
+ from(blue), to(yellow))"></div>
+ <br>
+
+ <!-- Mixing side keywords with numeric values: -->
+ <div style="background: -webkit-gradient(radial,
+ left 5, 0, left 5, 50,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ center 10, 0, center 10, 50,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ right 30, 0, right 30, 50,
+ from(blue), to(yellow))"></div>
+ <br>
+
+ <div style="background: -webkit-gradient(radial,
+ 5 top, 0, 5 top, 50,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ 10 center, 0, 10 center, 50,
+ from(blue), to(yellow))"></div>
+ <div style="background: -webkit-gradient(radial,
+ 30 bottom, 0, 30 bottom, 50,
+ from(blue), to(yellow))"></div>
+</body>
+</html>