diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
index 484ca80736757..3b9a87a693e05 100644
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -678,6 +678,86 @@ linear
 -
 gradient
 (
+red
+0
+%
+100
+%
+)
+"
+"
+linear
+-
+gradient
+(
+red
+0
+%
+50
+%
+blue
+50
+%
+)
+"
+"
+linear
+-
+gradient
+(
+red
+0
+%
+50
+%
+blue
+50
+%
+100
+%
+)
+"
+"
+linear
+-
+gradient
+(
+red
+0
+%
+50
+%
+0
+%
+blue
+50
+%
+)
+"
+"
+linear
+-
+gradient
+(
+red
+0
+%
+50
+%
+0
+%
+blue
+50
+%
+100
+%
+)
+"
+"
+linear
+-
+gradient
+(
 0
 red
 blue
@@ -1248,6 +1328,86 @@ blue
 )
 "
 "
+radial
+-
+gradient
+(
+red
+0
+%
+100
+%
+)
+"
+"
+radial
+-
+gradient
+(
+red
+0
+%
+50
+%
+blue
+50
+%
+)
+"
+"
+radial
+-
+gradient
+(
+red
+0
+%
+50
+%
+blue
+50
+%
+100
+%
+)
+"
+"
+radial
+-
+gradient
+(
+red
+0
+%
+50
+%
+0
+%
+blue
+50
+%
+)
+"
+"
+radial
+-
+gradient
+(
+red
+0
+%
+50
+%
+0
+%
+blue
+50
+%
+100
+%
+)
+"
+"
 repeating
 -
 radial
@@ -2942,6 +3102,136 @@ red
 blue
 )
 "
+"
+linear
+-
+gradient
+(
+red
+0
+%
+50
+%
+100
+%
+)
+"
+"
+linear
+-
+gradient
+(
+red
+0
+%
+50
+%
+75
+%
+blue
+75
+%
+)
+"
+"
+linear
+-
+gradient
+(
+to
+bottom
+red
+0
+%
+50
+%
+100
+%
+)
+"
+"
+linear
+-
+gradient
+(
+to
+bottom
+red
+0
+%
+50
+%
+75
+%
+blue
+75
+%
+)
+"
+"
+radial
+-
+gradient
+(
+red
+0
+%
+50
+%
+100
+%
+)
+"
+"
+radial
+-
+gradient
+(
+red
+0
+%
+50
+%
+75
+%
+blue
+75
+%
+)
+"
+"
+radial
+-
+gradient
+(
+center
+red
+0
+%
+50
+%
+100
+%
+)
+"
+"
+radial
+-
+gradient
+(
+center
+red
+0
+%
+50
+%
+75
+%
+blue
+75
+%
+)
+"
 ]
 ;
 var
diff --git a/servo/components/style/values/specified/image.rs b/servo/components/style/values/specified/image.rs
index 3accc6861d7b3..96e5929bff5e0 100644
--- a/servo/components/style/values/specified/image.rs
+++ b/servo/components/style/values/specified/image.rs
@@ -8,6 +8,7 @@ cssparser
 {
 Parser
 Token
+Delimiter
 }
 ;
 use
@@ -6750,17 +6751,31 @@ i
 {
 let
 mut
-seen_stop
+items
 =
-false
+Vec
+:
+:
+new
+(
+)
 ;
 let
-items
+mut
+seen_stop
 =
+false
+;
+loop
+{
 input
 .
-parse_comma_separated
+parse_until_before
 (
+Delimiter
+:
+:
+Comma
 |
 input
 |
@@ -6796,8 +6811,9 @@ seen_stop
 =
 false
 ;
-return
-Ok
+items
+.
+push
 (
 generic
 :
@@ -6811,12 +6827,18 @@ hint
 )
 )
 ;
+return
+Ok
+(
+(
+)
+)
+;
 }
 }
-seen_stop
+let
+stop
 =
-true
-;
 ColorStop
 :
 :
@@ -6825,8 +6847,62 @@ parse
 context
 input
 )
+?
+;
+if
+let
+Ok
+(
+multi_position
+)
+=
+input
+.
+try
+(
+|
+i
+|
+LengthOrPercentage
+:
+:
+parse
+(
+context
+i
+)
+)
+{
+let
+stop_color
+=
+stop
 .
-map
+color
+.
+clone
+(
+)
+;
+items
+.
+push
+(
+generic
+:
+:
+GradientItem
+:
+:
+ColorStop
+(
+stop
+)
+)
+;
+items
+.
+push
 (
 generic
 :
@@ -6835,11 +6911,92 @@ GradientItem
 :
 :
 ColorStop
+(
+ColorStop
+{
+color
+:
+stop_color
+position
+:
+Some
+(
+multi_position
+)
+}
+)
+)
+;
+}
+else
+{
+items
+.
+push
+(
+generic
+:
+:
+GradientItem
+:
+:
+ColorStop
+(
+stop
+)
+)
+;
+}
+seen_stop
+=
+true
+;
+Ok
+(
+(
+)
 )
 }
 )
 ?
 ;
+match
+input
+.
+next
+(
+)
+{
+Err
+(
+_
+)
+=
+>
+break
+Ok
+(
+&
+Token
+:
+:
+Comma
+)
+=
+>
+continue
+Ok
+(
+_
+)
+=
+>
+unreachable
+!
+(
+)
+}
+}
 if
 !
 seen_stop
diff --git a/testing/web-platform/meta/css/css-images/gradient/color-stops-parsing.html.ini b/testing/web-platform/meta/css/css-images/gradient/color-stops-parsing.html.ini
index 3133f9b37168d..55a2af4f390b8 100644
--- a/testing/web-platform/meta/css/css-images/gradient/color-stops-parsing.html.ini
+++ b/testing/web-platform/meta/css/css-images/gradient/color-stops-parsing.html.ini
@@ -8,518 +8,6 @@ parsing
 html
 ]
 [
-linear
--
-gradient
-(
-black
-0
-%
-50
-%
-white
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-linear
--
-gradient
-(
-black
-0
-%
-50
-%
-white
-50
-%
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-linear
--
-gradient
-(
-black
-0
-%
-50
-%
-green
-25
-%
-75
-%
-white
-50
-%
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-linear
--
-gradient
-(
-black
-0
-%
-calc
-(
-100
-%
-/
-5
-)
-25
-%
-green
-30
-%
-60
-%
-calc
-(
-100
-%
-*
-3
-/
-4
-)
-white
-calc
-(
-100
-%
--
-20
-%
-)
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-repeating
--
-linear
--
-gradient
-(
-black
-0
-%
-50
-%
-white
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-repeating
--
-linear
--
-gradient
-(
-black
-0
-%
-50
-%
-white
-50
-%
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-repeating
--
-linear
--
-gradient
-(
-black
-0
-%
-50
-%
-green
-25
-%
-75
-%
-white
-50
-%
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-repeating
--
-linear
--
-gradient
-(
-black
-0
-%
-calc
-(
-100
-%
-/
-5
-)
-25
-%
-green
-30
-%
-60
-%
-calc
-(
-100
-%
-*
-3
-/
-4
-)
-white
-calc
-(
-100
-%
--
-20
-%
-)
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-radial
--
-gradient
-(
-black
-0
-%
-50
-%
-white
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-radial
--
-gradient
-(
-black
-0
-%
-50
-%
-white
-50
-%
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-radial
--
-gradient
-(
-black
-0
-%
-50
-%
-green
-25
-%
-75
-%
-white
-50
-%
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-radial
--
-gradient
-(
-black
-0
-%
-calc
-(
-100
-%
-/
-5
-)
-25
-%
-green
-30
-%
-60
-%
-calc
-(
-100
-%
-*
-3
-/
-4
-)
-white
-calc
-(
-100
-%
--
-20
-%
-)
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-repeating
--
-radial
--
-gradient
-(
-black
-0
-%
-50
-%
-white
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-repeating
--
-radial
--
-gradient
-(
-black
-0
-%
-50
-%
-white
-50
-%
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-repeating
--
-radial
--
-gradient
-(
-black
-0
-%
-50
-%
-green
-25
-%
-75
-%
-white
-50
-%
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
-repeating
--
-radial
--
-gradient
-(
-black
-0
-%
-calc
-(
-100
-%
-/
-5
-)
-25
-%
-green
-30
-%
-60
-%
-calc
-(
-100
-%
-*
-3
-/
-4
-)
-white
-calc
-(
-100
-%
--
-20
-%
-)
-100
-%
-)
-[
-parsable
-\
-]
-]
-expected
-:
-FAIL
-[
 conic
 -
 gradient
diff --git a/testing/web-platform/meta/css/css-images/multiple-position-color-stop-linear.html.ini b/testing/web-platform/meta/css/css-images/multiple-position-color-stop-linear.html.ini
deleted file mode 100644
index ee2df5cdfcc82..0000000000000
--- a/testing/web-platform/meta/css/css-images/multiple-position-color-stop-linear.html.ini
+++ /dev/null
@@ -1,16 +0,0 @@
-[
-multiple
--
-position
--
-color
--
-stop
--
-linear
-.
-html
-]
-expected
-:
-FAIL
diff --git a/testing/web-platform/meta/css/css-images/multiple-position-color-stop-radial.html.ini b/testing/web-platform/meta/css/css-images/multiple-position-color-stop-radial.html.ini
deleted file mode 100644
index b62f814d2ac3a..0000000000000
--- a/testing/web-platform/meta/css/css-images/multiple-position-color-stop-radial.html.ini
+++ /dev/null
@@ -1,16 +0,0 @@
-[
-multiple
--
-position
--
-color
--
-stop
--
-radial
-.
-html
-]
-expected
-:
-FAIL
diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2-ref.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2-ref.html
new file mode 100644
index 0000000000000..868b3e6ea81bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2-ref.html
@@ -0,0 +1,70 @@
+<
+!
+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/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2.html
new file mode 100644
index 0000000000000..3a50e1438c9e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2.html
@@ -0,0 +1,173 @@
+<
+!
+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/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2-ref.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2-ref.html
new file mode 100644
index 0000000000000..450a2709fee52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2-ref.html
@@ -0,0 +1,69 @@
+<
+!
+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/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2.html
new file mode 100644
index 0000000000000..b43517d654a73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2.html
@@ -0,0 +1,172 @@
+<
+!
+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
+>