6 tháng trước cách đây · 61755b29c9
--- a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/blacktext-ref.html
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/blacktext-ref.html
@@ -0,0 +1,9 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>Black text reference</title>
			
 
				+<style>
			
 
				+    .test { color: #000000}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p class="test">Test passes if this text is black</p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/greentext-ref.html
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/greentext-ref.html
@@ -0,0 +1,9 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>Green text reference</title>
			
 
				+<style>
			
 
				+    .test { color: #008000}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p class="test">Test passes if this text is green</p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/hex-003-ref.html
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/hex-003-ref.html
@@ -0,0 +1,10 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>Green text reference for hex shorthand tests</title>
			
 
				+<style>
			
 
				+    .test { background-color: #007700; width: 12em; height: 12em;}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <div class="test"></div>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/color-001.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/color-001.html
@@ -0,0 +1,13 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: color property</title>
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-color-property">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greentext-ref.html">
			
 
				+<meta name="assert" content="This property describes the foreground fill color of an element’s text content.">
			
 
				+<style>
			
 
				+    .test {color: green}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p class="test">Test passes if this text is green</p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/color-002.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/color-002.html
@@ -0,0 +1,13 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: color property, initial value</title>
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-color-property">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/blacktext-ref.html">
			
 
				+<meta name="assert" content="The initial value of this property is black.">
			
 
				+<style>
			
 
				+    .test {color: initial}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p class="test">Test passes if this text is black</p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/color-003.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/color-003.html
@@ -0,0 +1,14 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: color property, initial value</title>
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-color-property">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greentext-ref.html">
			
 
				+<meta name="assert" content="If the currentcolor keyword is set on the color property itself, it is treated as color: inherit.">
			
 
				+<style>
			
 
				+    .outer {color: green;}
			
 
				+    .inner {color: currentcolor;}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p class="outer"><span class="inner">Test passes if this text is green</span></p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-001.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-001.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: The RGB hexadecimal notations: #RRGGBB</title>
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
			
 
				+<meta name="assert" content="6 digit hex">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test {background-color: #008000}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-002.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-002.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: The RGB hexadecimal notations: #RRGGBB</title>
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
			
 
				+<meta name="assert" content="8 digit hex, fully opaque">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test { background-color: #008000FF}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-003.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-003.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: The RGB hexadecimal notations: #RRGGBB</title>
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/hex-003-ref.html">
			
 
				+<meta name="assert" content="3 digit hex">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #007700; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test {background-color: #070}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-004.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-004.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: The RGB hexadecimal notations: #RRGGBB</title>
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation">
			
 
				+<meta name="assert" content="4 digit hex, fully opaque">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/hex-003-ref.html">
			
 
				+<style>
			
 
				+        .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #007700; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test {background-color: #070F}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-001.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-001.html
@@ -0,0 +1,18 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: HSL functions hsl() and hsla()</title>
			
 
				+<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
			
 
				+<meta name="assert" content="hsl() with number and no alpha, also no comma">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test { background-color: hsl(120 100% 25%)}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-002.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-002.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: HSL functions hsl() and hsla()</title>
			
 
				+<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
			
 
				+<meta name="assert" content="hsl() with angle and no alpha, also no comma">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test {background-color: hsl(120deg 100% 25%)}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-003.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-003.html
@@ -0,0 +1,18 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: HSL functions hsl() and hsla()</title>
			
 
				+<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
			
 
				+<meta name="assert" content="hsl() with number and numeric alpha, also no comma">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test {background-color: hsl(120 100% 25% / 1.0)}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-004.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-004.html
@@ -0,0 +1,18 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: HSL functions hsl() and hsla()</title>
			
 
				+<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
			
 
				+<meta name="assert" content="hsl() with angle and numeric alpha, also no comma">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test { background-color: hsl(120deg 100% 25% / 1)}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-005.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-005.html
@@ -0,0 +1,18 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: HSL functions hsl() and hsla()</title>
			
 
				+<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
			
 
				+<meta name="assert" content="hsl() with number and percent alpha, also no comma">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test { background-color: hsl(120 100% 25% / 100%)}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-006.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-006.html
@@ -0,0 +1,18 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: HSL functions hsl() and hsla()</title>
			
 
				+<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
			
 
				+<meta name="assert" content="hsl() with angle and percent alpha, also no comma">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test { background-color: hsl(120deg 100% 25% / 100%)}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-007.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-007.html
@@ -0,0 +1,18 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: HSL functions hsl() and hsla()</title>
			
 
				+<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
			
 
				+<meta name="assert" content="legacy hsl() with number and percent alpha, and commas">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test { background-color: hsl(120, 100%, 25%, 100%)}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-008.html
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-008.html
@@ -0,0 +1,18 @@
 
				+<!DOCTYPE html>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color 4: HSL functions hsl() and hsla()</title>
			
 
				+<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
			
 
				+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation">
			
 
				+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
			
 
				+<meta name="assert" content="legacy hsl() with angle and percent alpha, with commas">
			
 
				+<style>
			
 
				+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
			
 
				+    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
			
 
				+    .test { background-color: hsl(120deg, 100%, 25%, 100%)}
			
 
				+</style>
			
 
				+<body>
			
 
				+    <p>Test passes if you see a green square, and no red.</p>
			
 
				+    <p class="ref"> </p>
			
 
				+    <p class="test"> </p>
			
 
				+</body>
			
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-hex-color.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-hex-color.txt
@@ -0,0 +1,11 @@
 
				+Harness status: OK
			
 
				+
			
 
				+Found 6 tests
			
 
				+
			
 
				+6 Pass
			
 
				+Pass	Property color value '#fff' [Valid 3-digit hex]
			
 
				+Pass	Property color value '#ffff' [Valid 4-digit hex]
			
 
				+Pass	Property color value '#ffffff' [Valid 6-digit hex]
			
 
				+Pass	Property color value '#ffffffff' [Valid 8-digit hex]
			
 
				+Pass	Property color value '#FFCc99' [Valid 6-digit hex]
			
 
				+Pass	Property color value '#369' [Valid 3-digit hex]
			
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-computed-hex-color.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-computed-hex-color.html
@@ -0,0 +1,38 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>CSS Color Level 4: Computation of colors using hex color notation</title>
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values">
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values">
			
 
				+<link rel="author" title="Chris Nardi" href="mailto:cnardi@chromium.org">
			
 
				+<script src="../../../resources/testharness.js"></script>
			
 
				+<script src="../../../resources/testharnessreport.js"></script>
			
 
				+<script src="../../../css/support/computed-testcommon.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="container">
			
 
				+  <div id="target"></div>
			
 
				+</div>
			
 
				+<style>
			
 
				+  #container {
			
 
				+    color: rgb(255, 0, 0);
			
 
				+  }
			
 
				+</style>
			
 
				+<script>
			
 
				+tests = [
			
 
				+    ["#fff", "rgb(255, 255, 255)", "Valid 3-digit hex"],
			
 
				+    ["#ffff", "rgb(255, 255, 255)", "Valid 4-digit hex"],
			
 
				+    ["#ffffff", "rgb(255, 255, 255)", "Valid 6-digit hex"],
			
 
				+    ["#ffffffff", "rgb(255, 255, 255)", "Valid 8-digit hex"],
			
 
				+    ["#FFCc99", "rgb(255, 204, 153)", "Valid 6-digit hex"],
			
 
				+    ["#369", "rgb(51, 102, 153)", "Valid 3-digit hex"],
			
 
				+];
			
 
				+
			
 
				+for (const test of tests) {
			
 
				+    test_computed_value("color", test[0], test[1], test[2] ? `[${test[2]}]` : undefined);
			
 
				+}
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>