0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Tests: Import a bunch of css-color tests from WPT

Browse source
This commit is contained in:
Lucas CHOLLET 2024-12-15 16:04:32 -05:00 • committed by Tim Ledbetter
parent 9261688488
commit 61755b29c9
Notes: github-actions[bot] 2024-12-19 09:55:15 +00:00
20 changed files with 328 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Ref/expected/wpt-import/css/css-color/blacktext-ref.html Normal file
View file

@ -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>

9
Tests/LibWeb/Ref/expected/wpt-import/css/css-color/greentext-ref.html Normal file
View file

@ -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>

10
Tests/LibWeb/Ref/expected/wpt-import/css/css-color/hex-003-ref.html Normal file
View file

@ -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>

13
Tests/LibWeb/Ref/input/wpt-import/css/css-color/color-001.html Normal file
View file

@ -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>

13
Tests/LibWeb/Ref/input/wpt-import/css/css-color/color-002.html Normal file
View file

@ -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>

14
Tests/LibWeb/Ref/input/wpt-import/css/css-color/color-003.html Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-001.html Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-002.html Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-003.html Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hex-004.html Normal file
View file

@ -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>

18
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-001.html Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-002.html Normal file
View file

@ -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>

18
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-003.html Normal file
View file

@ -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>

18
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-004.html Normal file
View file

@ -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>

18
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-005.html Normal file
View file

@ -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>

18
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-006.html Normal file
View file

@ -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>

18
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-007.html Normal file
View file

@ -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>

18
Tests/LibWeb/Ref/input/wpt-import/css/css-color/hsl-008.html Normal file
View file

@ -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>

11
Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-hex-color.txt Normal file
View file

@ -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]

38
Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-computed-hex-color.html Normal file
View file

@ -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>