summaryrefslogtreecommitdiffstats
path: root/layout/reftests/webkit-gradient
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/webkit-gradient
parentInitial commit. (diff)
downloadfirefox-esr-upstream.tar.xz
firefox-esr-upstream.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/webkit-gradient')
-rw-r--r--layout/reftests/webkit-gradient/reftest.list21
-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
-rw-r--r--layout/reftests/webkit-gradient/webkit-linear-gradient-1-ref.html15
-rw-r--r--layout/reftests/webkit-gradient/webkit-linear-gradient-1.html15
17 files changed, 1042 insertions, 0 deletions
diff --git a/layout/reftests/webkit-gradient/reftest.list b/layout/reftests/webkit-gradient/reftest.list
new file mode 100644
index 0000000000..33e721bfc0
--- /dev/null
+++ b/layout/reftests/webkit-gradient/reftest.list
@@ -0,0 +1,21 @@
+# This directory contains tests for -webkit-gradient() expressions.
+
+# In this test, we don't render a "-webkit-gradient" exactly correctly.
+# (It's just here to ensure that our approximate/do-something rendering doesn't
+# change unexpectedly.)
+== 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
+fuzzy(0-1,0-150) == 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
+
+# Tests for -webkit-linear-gradient
+== webkit-linear-gradient-1.html webkit-linear-gradient-1-ref.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 0000000000..274a466206
--- /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 0000000000..4f0760560b
--- /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 0000000000..d86354584e
--- /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 0000000000..1a6fe1650b
--- /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 0000000000..ae03d777ab
--- /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 0000000000..29ae3a7862
--- /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 0000000000..b1b54372ce
--- /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 0000000000..36b4c97180
--- /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 0000000000..95defb5081
--- /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 0000000000..bb1c67aea1
--- /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 0000000000..24e32492f4
--- /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 0000000000..08bbc0789a
--- /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 0000000000..c82e3dbb59
--- /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 0000000000..56e9cbb41f
--- /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>
diff --git a/layout/reftests/webkit-gradient/webkit-linear-gradient-1-ref.html b/layout/reftests/webkit-gradient/webkit-linear-gradient-1-ref.html
new file mode 100644
index 0000000000..290c75a939
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-linear-gradient-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ div {
+ width: 50px;
+ height: 200px;
+ background-image: -webkit-linear-gradient(top, red, blue);
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/webkit-gradient/webkit-linear-gradient-1.html b/layout/reftests/webkit-gradient/webkit-linear-gradient-1.html
new file mode 100644
index 0000000000..1d9d9e6142
--- /dev/null
+++ b/layout/reftests/webkit-gradient/webkit-linear-gradient-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ div {
+ width: 50px;
+ height: 200px;
+ background-image: -webkit-linear-gradient(red, blue);
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>