From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 11:22:09 +0200
Subject: Adding upstream version 110.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/reftests/webkit-gradient/reftest.list       |  21 ++++
 .../webkit-gradient-approx-radial-1-ref.html       |  62 +++++++++++
 .../webkit-gradient-approx-radial-1.html           |  64 ++++++++++++
 .../webkit-gradient-linear-1-ref.html              |  51 +++++++++
 .../webkit-gradient/webkit-gradient-linear-1a.html |  67 ++++++++++++
 .../webkit-gradient/webkit-gradient-linear-1b.html |  67 ++++++++++++
 .../webkit-gradient/webkit-gradient-linear-1c.html |  67 ++++++++++++
 .../webkit-gradient/webkit-gradient-linear-1d.html |  67 ++++++++++++
 .../webkit-gradient-linear-2-ref.html              |  56 ++++++++++
 .../webkit-gradient/webkit-gradient-linear-2.html  |  80 +++++++++++++++
 .../webkit-gradient-radial-1-ref.html              |  71 +++++++++++++
 .../webkit-gradient/webkit-gradient-radial-1a.html | 114 +++++++++++++++++++++
 .../webkit-gradient/webkit-gradient-radial-1b.html | 114 +++++++++++++++++++++
 .../webkit-gradient-radial-2-ref.html              |  49 +++++++++
 .../webkit-gradient/webkit-gradient-radial-2.html  |  62 +++++++++++
 .../webkit-linear-gradient-1-ref.html              |  15 +++
 .../webkit-gradient/webkit-linear-gradient-1.html  |  15 +++
 17 files changed, 1042 insertions(+)
 create mode 100644 layout/reftests/webkit-gradient/reftest.list
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1-ref.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-linear-1-ref.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-linear-1a.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-linear-1b.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-linear-1c.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-linear-1d.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-linear-2-ref.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-linear-2.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-radial-1-ref.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-radial-1a.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-radial-1b.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-radial-2-ref.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-gradient-radial-2.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-linear-gradient-1-ref.html
 create mode 100644 layout/reftests/webkit-gradient/webkit-linear-gradient-1.html

(limited to 'layout/reftests/webkit-gradient')

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>
-- 
cgit v1.2.3