summaryrefslogtreecommitdiffstats
path: root/layout/reftests/w3c-css/submitted/color4
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/reftests/w3c-css/submitted/color4
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/w3c-css/submitted/color4')
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-hsl-001-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-hsl-001.html36
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-hsl-002-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-hsl-002.html36
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-hsl-003-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-hsl-003.html36
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-hsl-004-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-hsl-004.html36
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-rgb-001-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-rgb-001.html36
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-rgb-002-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-rgb-002.html36
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-rgb-003-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/color4/background-color-rgb-003.html36
-rw-r--r--layout/reftests/w3c-css/submitted/color4/reftest-stylo.list15
-rw-r--r--layout/reftests/w3c-css/submitted/color4/reftest.list10
16 files changed, 508 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001-ref.html
new file mode 100644
index 000000000..f37a73d17
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001.html
new file mode 100644
index 000000000..2b8c7d313
--- /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-4/#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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002-ref.html
new file mode 100644
index 000000000..90284b999
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002.html
new file mode 100644
index 000000000..a1e9a0127
--- /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-4/#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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003-ref.html
new file mode 100644
index 000000000..e0db417c9
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003.html
new file mode 100644
index 000000000..f9c256e17
--- /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-4/#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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004-ref.html
new file mode 100644
index 000000000..f630740fa
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004.html
new file mode 100644
index 000000000..1cd6684c7
--- /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-4/#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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001-ref.html
new file mode 100644
index 000000000..b03f0a3fb
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001.html
new file mode 100644
index 000000000..061eeac2f
--- /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-4/#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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002-ref.html
new file mode 100644
index 000000000..be29c86ca
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002.html
new file mode 100644
index 000000000..8919f0ea3
--- /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-4/#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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003-ref.html
new file mode 100644
index 000000000..70227ad38
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003.html
new file mode 100644
index 000000000..6a22ba0db
--- /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-4/#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>
diff --git a/layout/reftests/w3c-css/submitted/color4/reftest-stylo.list b/layout/reftests/w3c-css/submitted/color4/reftest-stylo.list
new file mode 100644
index 000000000..6299bfb24
--- /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
diff --git a/layout/reftests/w3c-css/submitted/color4/reftest.list b/layout/reftests/w3c-css/submitted/color4/reftest.list
new file mode 100644
index 000000000..34f8d2570
--- /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