Bug 1295456 - Add tests for css-color-4 color function changes. r=dholbert
authorJerryShih <hshih@mozilla.com>
Sun, 16 Oct 2016 03:15:36 +0800
changeset 318184 dfa15b95bb737d1a242537e5aac3e118226f2631
parent 318183 0fb1c914ee90312b10d497ca9c05ffa65ff674fa
child 318185 a29d5cb24af486be4c8d66cdc2a024d6badf787b
push id33211
push usercbook@mozilla.com
push dateMon, 17 Oct 2016 09:38:38 +0000
treeherderautoland@e4ef6fa03aa8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1295456
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1295456 - Add tests for css-color-4 color function changes. r=dholbert MozReview-Commit-ID: 61aMI3ZkLGi
layout/reftests/w3c-css/submitted/color4/background-color-hsl-001-ref.html
layout/reftests/w3c-css/submitted/color4/background-color-hsl-001.html
layout/reftests/w3c-css/submitted/color4/background-color-hsl-002-ref.html
layout/reftests/w3c-css/submitted/color4/background-color-hsl-002.html
layout/reftests/w3c-css/submitted/color4/background-color-hsl-003-ref.html
layout/reftests/w3c-css/submitted/color4/background-color-hsl-003.html
layout/reftests/w3c-css/submitted/color4/background-color-hsl-004-ref.html
layout/reftests/w3c-css/submitted/color4/background-color-hsl-004.html
layout/reftests/w3c-css/submitted/color4/background-color-rgb-001-ref.html
layout/reftests/w3c-css/submitted/color4/background-color-rgb-001.html
layout/reftests/w3c-css/submitted/color4/background-color-rgb-002-ref.html
layout/reftests/w3c-css/submitted/color4/background-color-rgb-002.html
layout/reftests/w3c-css/submitted/color4/background-color-rgb-003-ref.html
layout/reftests/w3c-css/submitted/color4/background-color-rgb-003.html
layout/reftests/w3c-css/submitted/color4/reftest-stylo.list
layout/reftests/w3c-css/submitted/color4/reftest.list
layout/reftests/w3c-css/submitted/reftest-stylo.list
layout/reftests/w3c-css/submitted/reftest.list
layout/style/test/property_database.js
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsla() syntax accepts comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120, 75%, 50%, 0.2); }
+      #p2 { background-color: hsla(120, 75%, 50%, 0.4); }
+      #p3 { background-color: hsla(120, 75%, 50%, 0.6); }
+      #p4 { background-color: hsl(120, 75%, 50%); }
+      #p5 { background-color: hsl(120, 75%, 50%); }
+      #p6 { background-color: hsl(120, 75%, 50%); }
+      #p7 { background-color: hsl(120, 75%, 50%); }
+      #p8 { background-color: hsl(120, 75%, 50%); }
+      #p9 { background-color: hsl(120, 75%, 50%); }
+      #p10 { background-color: hsl(120, 75%, 50%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsla() syntax accepts comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color/#the-hsl-notation" />
+    <meta name="assert" content="hsla() should accept comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component." />
+    <link rel="match" href="background-color-hsl-001-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120.0, 75%, 50%, 20%); }
+      #p2 { background-color: hsla(120, 75%, 50%, 0.4); }
+      #p3 { background-color: hsla(120 75% 50% / 60%); }
+      #p4 { background-color: hsla(120.0 75% 50% / 1.0); }
+      #p5 { background-color: hsla(120/* comment */75%/* comment */50%/1.0); }
+      #p6 { background-color: hsla(120,/* comment */75%,/* comment */50%,100%); }
+      #p7 { background-color: hsla(120.0, 75%, 50%); }
+      #p8 { background-color: hsla(120 75% 50%); }
+      #p9 { background-color: hsla(120/* comment */75%/* comment */50%); }
+      #p10 { background-color: hsla(120/* comment */,75%,/* comment */50%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsl() syntax accepts comma-less expressions (and comments as separators) and alpha component (and percentage alpha) - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120, 75%, 50%, 0.2); }
+      #p2 { background-color: hsla(120, 75%, 50%, 0.4); }
+      #p3 { background-color: hsla(120, 75%, 50%, 0.6); }
+      #p4 { background-color: hsla(120, 75%, 50%, 0.8); }
+      #p5 { background-color: hsla(120.0, 75%, 50%, 1.0); }
+      #p6 { background-color: hsla(120.0, 75%, 50%, 1.0); }
+      #p7 { background-color: hsla(120.0, 75%, 50%, 1.0); }
+      #p8 { background-color: hsla(120, 75%, 50%, 1.0); }
+      #p9 { background-color: hsla(120, 75%, 50%, 1.0); }
+      #p10 { background-color: hsla(120, 75%, 50%, 1.0); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsl() syntax accepts comma-less expressions (and comments as separators) and alpha component (and percentage alpha) - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color/#the-hsl-notation" />
+    <meta name="assert" content="hsl() should accept comma-less expressions (and comments as separators) and alpha component (and percentage alpha)." />
+    <link rel="match" href="background-color-hsl-002-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: hsl(120, 75%, 50%, 0.2); }
+      #p2 { background-color: hsl(120, 75%, 50%, 40%); }
+      #p3 { background-color: hsl(120 75% 50% / 0.6); }
+      #p4 { background-color: hsl(120 75% 50% / 80%); }
+      #p5 { background-color: hsl(120/* comment */75%/* comment */50%/1.0); }
+      #p6 { background-color: hsl(120/* comment */75%/* comment */50%/100%); }
+      #p7 { background-color: hsl(120,/* comment */75%,/* comment */50%,1.0); }
+      #p8 { background-color: hsl(120,/* comment */75%,/* comment */50%,100%); }
+      #p9 { background-color: hsl(120/* comment */75%/* comment */50%); }
+      #p10 { background-color: hsl(120/* comment */,75%,/* comment */50%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: support <angle> value for hsl()/hsla() hue component - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120, 75%, 50%, 0.2); }
+      #p2 { background-color: hsla(120.0, 75%, 50%, 0.4); }
+      #p3 { background-color: hsla(1.2e2, 75%, 50%, 0.6); }
+      #p4 { background-color: hsla(120, 75%, 50%, 0.8); }
+      #p5 { background-color: hsla(120, 75%, 50%, 1.0); }
+      #p6 { background-color: hsl(240, 75%, 50%); }
+      #p7 { background-color: hsl(600.0, 75%, 50%); }
+      #p8 { background-color: hsl(9.6e2, 75%, 50%); }
+      #p9 { background-color: hsl(600, 75%, 50%); }
+      #p10 { background-color: hsl(240, 75%, 50%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: support <angle> value for hsl()/hsla() hue component - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color/#the-hsl-notation" />
+    <meta name="assert" content="hsl()/hsla() hue component should support <angle> value." />
+    <link rel="match" href="background-color-hsl-003-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120, 75%, 50%, 0.2); }
+      #p2 { background-color: hsla(120deg, 75%, 50%, 0.4); }
+      #p3 { background-color: hsla(133.33333333grad, 75%, 50%, 0.6); }
+      #p4 { background-color: hsla(2.0943951024rad, 75%, 50%, 0.8); }
+      #p5 { background-color: hsla(0.3333333333turn, 75%, 50%, 1.0); }
+      #p6 { background-color: hsl(240, 75%, 50%); }
+      #p7 { background-color: hsl(600deg, 75%, 50%); }
+      #p8 { background-color: hsl(1066.66666666grad, 75%, 50%); }
+      #p9 { background-color: hsl(10.4719755118rad, 75%, 50%); }
+      #p10 { background-color: hsl(2.6666666666turn, 75%, 50%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsla() and hsl() are aliases of each other - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: hsl(120, 75%, 50%); }
+      #p2 { background-color: hsl(120.0, 75%, 50%); }
+      #p3 { background-color: hsl(1.2e2, 75%, 50%); }
+      #p4 { background-color: hsl(1.2E2, 75%, 50%); }
+      #p5 { background-color: hsl(60, 75%, 50%); }
+      #p6 { background-color: hsla(120, 75%, 50%, 0.2); }
+      #p7 { background-color: hsla(120.0, 75%, 50%, 0.4); }
+      #p8 { background-color: hsla(1.2e2, 75%, 50%, 0.6); }
+      #p9 { background-color: hsla(1.2E2, 75%, 50%, 0.8); }
+      #p10 { background-color: hsla(60.0, 75%, 50%, 1.0); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsla() and hsl() are aliases of each other - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color/#the-hsl-notation" />
+    <meta name="assert" content="hsla() should have the identical grammar and behavior to hsl()." />
+    <link rel="match" href="background-color-hsl-004-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120, 75%, 50%); }
+      #p2 { background-color: hsla(120.0, 75%, 50%); }
+      #p3 { background-color: hsla(1.2e2, 75%, 50%); }
+      #p4 { background-color: hsla(1.2E2, 75%, 50%); }
+      #p5 { background-color: hsla(60, 75%, 50%); }
+      #p6 { background-color: hsl(120, 75%, 50%, 0.2); }
+      #p7 { background-color: hsl(120.0, 75%, 50%, 0.4); }
+      #p8 { background-color: hsl(1.2e2, 75%, 50%, 0.6); }
+      #p9 { background-color: hsl(1.2E2, 75%, 50%, 0.8); }
+      #p10 { background-color: hsl(60.0, 75%, 50%, 1.0); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgb() syntax accepts alpha component (and percentage alpha value), non-integer components and comma-less expressions (and comments as separators) - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: rgba(10%, 60%, 10%, 0.2); }
+      #p2 { background-color: rgba(10, 175, 10, 0.4); }
+      #p3 { background-color: rgba(10, 175, 10, 0.6); }
+      #p4 { background-color: rgba(10, 175, 10, 0.8); }
+      #p5 { background-color: rgba(10, 175, 10, 1.0); }
+      #p6 { background-color: rgba(10, 150, 50, 1.0); }
+      #p7 { background-color: rgba(10%, 60%, 10%, 1.0); }
+      #p8 { background-color: rgb(10, 100, 100); }
+      #p9 { background-color: rgb(10, 75, 125); }
+      #p10 { background-color: rgb(10, 50, 150); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgb() syntax accepts alpha component (and percentage alpha value), non-integer components and comma-less expressions (and comments as separators) - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color/#rgb-functions" />
+    <meta name="assert" content="rgb() should accept alpha component (and percentage alpha value), non-integer components and comma-less expressions (and comments as separators)." />
+    <link rel="match" href="background-color-rgb-001-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: rgb(10%, 60%, 10%, 20%); }
+      #p2 { background-color: rgb(10, 175, 10, 0.4); }
+      #p3 { background-color: rgb(10 175 10 / 60%); }
+      #p4 { background-color: rgb(10.0 175.0 10.0 / 0.8); }
+      #p5 { background-color: rgb(10/* comment */175/* comment */10/100%); }
+      #p6 { background-color: rgb(10,/* comment */150,/* comment */50); }
+      #p7 { background-color: rgb(10%, 60%, 10%); }
+      #p8 { background-color: rgb(10.0 100.0 100.0); }
+      #p9 { background-color: rgb(10/* comment */75/* comment */125); }
+      #p10 { background-color: rgb(10.0, 50.0, 150.0); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgba() syntax accepts non-integer components, comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: rgba(10, 175, 10, 0.2); }
+      #p2 { background-color: rgba(10, 175, 10, 0.4); }
+      #p3 { background-color: rgba(10%, 75%, 10%, 0.6); }
+      #p4 { background-color: rgba(10, 175, 10, 0.8); }
+      #p5 { background-color: rgb(10, 175, 10); }
+      #p6 { background-color: rgb(10, 150, 50); }
+      #p7 { background-color: rgb(10, 125, 75); }
+      #p8 { background-color: rgb(10%, 45%, 45%); }
+      #p9 { background-color: rgb(10, 75, 125); }
+      #p10 { background-color: rgb(10, 50, 150); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgba() syntax accepts non-integer components, comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color/#rgb-functions" />
+    <meta name="assert" content="rgba() should accept non-integer components, comma-less expressions (and comments as separators), percentage alpha and omitting of alpha." />
+    <link rel="match" href="background-color-rgb-002-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: rgba(10.0, 175.0, 10.0, 0.2); }
+      #p2 { background-color: rgba(10, 175, 10, 40%); }
+      #p3 { background-color: rgba(10% 75% 10% / 0.6); }
+      #p4 { background-color: rgba(10 175 10 / 80%); }
+      #p5 { background-color: rgba(10/* comment */175/* comment */10/100%); }
+      #p6 { background-color: rgba(10,/* comment */150,/* comment */50); }
+      #p7 { background-color: rgba(10.0, 125.0, 75.0); }
+      #p8 { background-color: rgba(10%, 45%, 45%); }
+      #p9 { background-color: rgba(10/* comment */75/* comment */125); }
+      #p10 { background-color: rgba(10.0, 50.0, 150.0); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgb() and rgba() are aliases of each other - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: rgba(10, 175, 10, 0.2); }
+      #p2 { background-color: rgba(10, 175, 10, 0.4); }
+      #p3 { background-color: rgba(10, 175, 10, 0.6); }
+      #p4 { background-color: rgba(10%, 70%, 10%, 0.8); }
+      #p5 { background-color: rgba(10%, 70%, 10%, 1.0); }
+      #p6 { background-color: rgb(10, 150, 50); }
+      #p7 { background-color: rgb(10, 125, 75); }
+      #p8 { background-color: rgb(10%,40%, 40%); }
+      #p9 { background-color: rgb(10%, 45%, 50%); }
+      #p10 { background-color: rgb(10%, 50%, 60%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgb() and rgba() are aliases of each other - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color/#rgb-functions" />
+    <meta name="assert" content="rgb() should have the identical grammar and behavior to rgba()." />
+    <link rel="match" href="background-color-rgb-003-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: rgb(10, 175, 10, 0.2); }
+      #p2 { background-color: rgb(10, 175, 10, 0.4); }
+      #p3 { background-color: rgb(10, 175, 10, 0.6); }
+      #p4 { background-color: rgb(10%, 70%, 10%, 0.8); }
+      #p5 { background-color: rgb(10%, 70%, 10%, 1.0); }
+      #p6 { background-color: rgba(10, 150, 50); }
+      #p7 { background-color: rgba(10, 125, 75); }
+      #p8 { background-color: rgba(10%,40%, 40%); }
+      #p9 { background-color: rgba(10%, 45%, 50%); }
+      #p10 { background-color: rgba(10%, 50%, 60%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/reftest-stylo.list
@@ -0,0 +1,15 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+
+# This file was created in bug 1295456. Pretty sure they all fail with Stylo
+# since it doesn't implement css-color-4 yet.
+
+#css-color-4 function
+#hsl
+fails == background-color-hsl-001.html background-color-hsl-001-ref.html
+fails == background-color-hsl-002.html background-color-hsl-002-ref.html
+fails == background-color-hsl-003.html background-color-hsl-003-ref.html
+fails == background-color-hsl-004.html background-color-hsl-004-ref.html
+#rgb
+fails == background-color-rgb-001.html background-color-rgb-001-ref.html
+fails == background-color-rgb-002.html background-color-rgb-002-ref.html
+fails == background-color-rgb-003.html background-color-rgb-003-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/reftest.list
@@ -0,0 +1,10 @@
+#css-color-4 function
+#hsl
+== background-color-hsl-001.html background-color-hsl-001-ref.html
+== background-color-hsl-002.html background-color-hsl-002-ref.html
+== background-color-hsl-003.html background-color-hsl-003-ref.html
+== background-color-hsl-004.html background-color-hsl-004-ref.html
+#rgb
+== background-color-rgb-001.html background-color-rgb-001-ref.html
+== background-color-rgb-002.html background-color-rgb-002-ref.html
+== background-color-rgb-003.html background-color-rgb-003-ref.html
--- a/layout/reftests/w3c-css/submitted/reftest-stylo.list
+++ b/layout/reftests/w3c-css/submitted/reftest-stylo.list
@@ -9,16 +9,19 @@
 ## CSS Snapshot 2007
 
 # CSS2.1
 include css21/reftest-stylo.list
 
 # Backgrounds and Borders
 include background/reftest-stylo.list
 
+# Color Level 4
+include color4/reftest-stylo.list
+
 # Conditional Rules Level 3
 include conditional3/reftest-stylo.list
 
 # Containment
 include contain/reftest-stylo.list
 
 # Filter Effects Module
 include filters/reftest-stylo.list
--- a/layout/reftests/w3c-css/submitted/reftest.list
+++ b/layout/reftests/w3c-css/submitted/reftest.list
@@ -8,16 +8,19 @@
 ## CSS Snapshot 2007
 
 # CSS2.1
 include css21/reftest.list
 
 # Backgrounds and Borders
 include background/reftest.list
 
+# Color Level 4
+include color4/reftest.list
+
 # Conditional Rules Level 3
 include conditional3/reftest.list
 
 # Containment
 include contain/reftest.list
 
 # Filter Effects Module
 include filters/reftest.list
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -810,17 +810,18 @@ if (IsCSSPropertyPrefEnabled("layout.css
     "-webkit-gradient(linear, 1 2, 3 4, from(invalidcolorname))",
     "-webkit-gradient(linear, 1 2, 3 4, from(inherit))",
     "-webkit-gradient(linear, 1 2, 3 4, from(initial))",
     "-webkit-gradient(linear, 1 2, 3 4, from(currentColor))",
     "-webkit-gradient(linear, 1 2, 3 4, from(00ff00))",
     "-webkit-gradient(linear, 1 2, 3 4, from(##00ff00))",
     "-webkit-gradient(linear, 1 2, 3 4, from(#00fff))", // wrong num hex digits
     "-webkit-gradient(linear, 1 2, 3 4, from(xyz(0,0,0)))", // bogus color func
-    "-webkit-gradient(linear, 1 2, 3 4, from(rgb(100, 100.5, 30)))", // fraction
+    // Mixing <number> and <percentage> is invalid.
+    "-webkit-gradient(linear, 1 2, 3 4, from(rgb(100, 100%, 30)))",
 
     // linear w/ color stops that have comma issues
     "-webkit-gradient(linear, 1 2, 3 4 from(lime))",
     "-webkit-gradient(linear, 1 2, 3 4, from(lime,))",
     "-webkit-gradient(linear, 1 2, 3 4, from(lime),)",
     "-webkit-gradient(linear, 1 2, 3 4, from(lime) to(blue))",
     "-webkit-gradient(linear, 1 2, 3 4, from(lime),, to(blue))",
     "-webkit-gradient(linear, 1 2, 3 4, from(rbg(0, 0, 0,)))",
@@ -2340,18 +2341,18 @@ var gCSSProperties = {
     other_values: [ "content-box", "padding-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ],
     invalid_values: [ "margin-box", "border-box border-box" ]
   },
   "background-color": {
     domProp: "backgroundColor",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "transparent", "rgba(255, 127, 15, 0)", "hsla(240, 97%, 50%, 0.0)", "rgba(0, 0, 0, 0)", "rgba(255,255,255,-3.7)" ],
-    other_values: [ "green", "rgb(255, 0, 128)", "#fc2", "#96ed2a", "black", "rgba(255,255,0,3)", "hsl(240, 50%, 50%)", "rgb(50%, 50%, 50%)", "-moz-default-background-color" ],
-    invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "rgb(100, 100.0, 100)" ],
+    other_values: [ "green", "rgb(255, 0, 128)", "#fc2", "#96ed2a", "black", "rgba(255,255,0,3)", "hsl(240, 50%, 50%)", "rgb(50%, 50%, 50%)", "-moz-default-background-color", "rgb(100, 100.0, 100)" ],
+    invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "rgb(100, 100%, 100)" ],
     quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" },
   },
   "background-image": {
     domProp: "backgroundImage",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "none" ],
     other_values: [
@@ -2852,19 +2853,51 @@ var gCSSProperties = {
     invalid_values: [ "rect(auto, 3em, 2%, 5px)" ],
     quirks_values: { "rect(1, 2, 3, 4)": "rect(1px, 2px, 3px, 4px)" },
   },
   "color": {
     domProp: "color",
     inherited: true,
     type: CSS_TYPE_LONGHAND,
     /* XXX should test currentColor, but may or may not be initial */
-    initial_values: [ "black", "#000", "#000f", "#000000ff", "rgb(0, 0, 0)", "rgba(0, 0, 0, 1.0)", "-moz-default-color" ],
-    other_values: [ "green", "#f3c", "#fed292", "rgba(45,300,12,2)", "transparent", "-moz-nativehyperlinktext", "rgba(255,128,0,0.5)", "#e0fc", "#10fcee72" ],
-    invalid_values: [ "#f", "#ff", "#fffff", "#fffffff", "#fffffffff" ],
+    initial_values: [ "black", "#000", "#000f", "#000000ff", "-moz-default-color", "rgb(0, 0, 0)", "rgb(0%, 0%, 0%)",
+      /* css-color-4: */
+      /* rgb() and rgba() are aliases of each other. */
+      "rgb(0, 0, 0)", "rgba(0, 0, 0)", "rgb(0, 0, 0, 1)", "rgba(0, 0, 0, 1)",
+      /* hsl() and hsla() are aliases of each other. */
+      "hsl(0, 0%, 0%)", "hsla(0, 0%, 0%)", "hsl(0, 0%, 0%, 1)", "hsla(0, 0%, 0%, 1)",
+      /* rgb() and rgba() functions now accept <number> rather than <integer>. */
+      "rgb(0.0, 0.0, 0.0)", "rgba(0.0, 0.0, 0.0)", "rgb(0.0, 0.0, 0.0, 1)", "rgba(0.0, 0.0, 0.0, 1)",
+      /* <alpha-value> now accepts <percentage> as well as <number> in rgba() and hsla(). */
+      "rgb(0.0, 0.0, 0.0, 100%)", "hsl(0, 0%, 0%, 100%)",
+      /* rgb() and hsl() now support comma-less expression. */
+      "rgb(0 0 0)", "rgb(0 0 0 / 1)", "rgb(0/* comment */0/* comment */0)", "rgb(0/* comment */0/* comment*/0/1.0)",
+      "hsl(0 0% 0%)", "hsl(0 0% 0% / 1)", "hsl(0/* comment */0%/* comment */0%)", "hsl(0/* comment */0%/* comment */0%/1)",
+      /* Support <angle> for hsl() hue component. */
+      "hsl(0deg, 0%, 0%)", "hsl(360deg, 0%, 0%)", "hsl(0grad, 0%, 0%)", "hsl(400grad, 0%, 0%)", "hsl(0rad, 0%, 0%)", "hsl(0turn, 0%, 0%)", "hsl(1turn, 0%, 0%)",
+    ],
+    other_values: [ "green", "#f3c", "#fed292", "rgba(45,300,12,2)", "transparent", "-moz-nativehyperlinktext", "rgba(255,128,0,0.5)", "#e0fc", "#10fcee72",
+      /* css-color-4: */
+      "rgb(100, 100.0, 100)", "rgb(300 300 300 / 200%)", "rgb(300.0 300.0 300.0 / 2.0)", "hsl(720, 200%, 200%, 2.0)", "hsla(720 200% 200% / 200%)",
+      "hsl(480deg, 20%, 30%, 0.3)", "hsl(55grad, 400%, 30%)", "hsl(0.5grad 400% 500% / 9.0)", "hsl(33rad 100% 90% / 4)", "hsl(0.33turn, 40%, 40%, 10%)",
+    ],
+    invalid_values: [ "#f", "#ff", "#fffff", "#fffffff", "#fffffffff",
+      "rgb(100%, 0, 100%)", "rgba(100, 0, 100%, 30%)",
+      "hsl(0, 0, 0%)", "hsla(0%, 0%, 0%, 0.1)",
+      /* trailing commas */
+      "rgb(0, 0, 0,)", "rgba(0, 0, 0, 0,)",
+      "hsl(0, 0%, 0%,)", "hsla(0, 0%, 0%, 1,)",
+      /* css-color-4: */
+      /* comma and comma-less expressions should not mix together. */
+      "rgb(0, 0, 0 / 1)", "rgb(0 0 0, 1)", "rgb(0, 0 0, 1)", "rgb(0 0, 0 / 1)",
+      "hsl(0, 0%, 0% / 1)", "hsl(0 0% 0%, 1)", "hsl(0 0% 0%, 1)", "hsl(0 0%, 0% / 1)",
+      /* trailing slash */
+      "rgb(0 0 0 /)", "rgb(0, 0, 0 /)",
+      "hsl(0 0% 0% /)", "hsl(0, 0%, 0% /)",
+    ],
     quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a", "fff": "#ffffff", "ffffff": "#ffffff", },
   },
   "content": {
     domProp: "content",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     /* XXX needs to be on pseudo-elements */
     initial_values: [ "normal", "none" ],