Implement multi-position gradient color-stops syntax.

This commit adds the multi-position gradient color-stops syntax. GradientItem::parse_comma_separated is extended to attempt to parse a LengthOrPercent after each color stop. If it succeeds, it appends an additional color stop with a duplicate color and the specified position. This change is only to the parsing, serialization is left unchanged as per [1]. [1] w3c/csswg-drafts#2714 Differential Revision: https://phabricator.services.mozilla.com/D7380 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1352643 gecko-commit: 984902ba6faf1864c04fef525f6764983439ce1b gecko-integration-branch: central gecko-reviewers: emilio
web-platform-tests · Oct 3, 2018 · 6eeafdf · 6eeafdf
1 parent a49e763
commit 6eeafdf
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git a/css/css-images/multiple-position-color-stop-linear-2-ref.html b/css/css-images/multiple-position-color-stop-linear-2-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<body>
+    <div style="background: linear-gradient(to bottom, red 0%, red 25%, blue 25%, blue 75%, red 75%, red 100%); width: 100px; height: 100px;"><br></div>
+</body>
diff --git a/css/css-images/multiple-position-color-stop-linear-2.html b/css/css-images/multiple-position-color-stop-linear-2.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Linear gradient with a two position color stops</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
+<meta name="assert" content="Color stops with two positions are equivalent to two color stops with the same color">
+<link rel=match href=/css/css-images/multiple-position-color-stop-linear-2-ref.html>
+<body>
+    <div style="background: linear-gradient(to bottom, red 0% 25%, blue 25% 75%, red 75% 100%); width: 100px; height: 100px;"><br></div>
+</body>
diff --git a/css/css-images/multiple-position-color-stop-radial-2-ref.html b/css/css-images/multiple-position-color-stop-radial-2-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<body>
+    <div style="background: radial-gradient(center, red 0%, red 25%, blue 25%, blue 75%, red 75%, red 100%); width: 100px; height: 100px;"><br></div>
+</body>
diff --git a/css/css-images/multiple-position-color-stop-radial-2.html b/css/css-images/multiple-position-color-stop-radial-2.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Radial gradient with a two position color stops</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
+<meta name="assert" content="Color stops with two positions are equivalent to two color stops with the same color">
+<link rel=match href=/css/css-images/multiple-position-color-stop-radial-2-ref.html>
+<body>
+    <div style="background: radial-gradient(center, red 0% 25%, blue 25% 75%, red 75% 100%); width: 100px; height: 100px;"><br></div>
+</body>