зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1295456 - Add tests for css-color-4 color function changes. r=dholbert
MozReview-Commit-ID: 61aMI3ZkLGi --HG-- extra : rebase_source : bfbfdc7a8dd1a9a7b86358fb3e855bcc1ce78422 extra : histedit_source : 0703740a5fd9248b43fa78c2aff85832740bd42c
This commit is contained in:
JerryShih
Родитель
fcb391b776
Коммит
d2351f91bd
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -14,6 +14,9 @@ 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
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@ 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
|
||||
|
||||
|
|
|
|||
|
|
@ -815,7 +815,8 @@ if (IsCSSPropertyPrefEnabled("layout.css.prefixes.webkit")) {
|
|||
"-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))",
|
||||
|
|
@ -2345,8 +2346,8 @@ var gCSSProperties = {
|
|||
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": {
|
||||
|
|
@ -2857,9 +2858,41 @@ var gCSSProperties = {
|
|||
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": {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче