Skip to content

Commit efdef41

Browse files
ericwilligersericwilligers
committed
[css-lists] Parsing list-style
Test parsing, serialization and computed value for list-style and associated longhand properties. https://drafts.csswg.org/css-lists-3/#list-style-property list-style-image supports image, including gradients https://drafts.csswg.org/css-lists-3/#propdef-list-style-image Colors and lengths in gradients are computed in computed style results. w3c/csswg-drafts#4042 calcs giving negative radii are clamped to 0. list-style uses the new serialization order: list-style-position list-style-image list-style-type w3c/csswg-drafts#2624 w3c/csswg-drafts@8ac1376 symbolic is omitted in shortest serialization https://bugzilla.mozilla.org/show_bug.cgi?id=1560494
1 parent ec977de commit efdef41

12 files changed

+321
-0
lines changed

‎css/css-lists/parsing/list-style-computed.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: getComputedValue().listStyletitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style">
7+
<meta name="assert" content="list-style computed value is as specified.">
8+
<script src="/resources/testharness.js">script>
9+
<script src="/resources/testharnessreport.js">script>
10+
<script src="/css/support/computed-testcommon.js">script>
11+
head>
12+
<body>
13+
<div id="target">div>
14+
<script>
15+
test_computed_value('list-style', 'none', 'outside none disc');
16+
17+
test_computed_value('list-style', 'inside', 'inside none disc');
18+
test_computed_value('list-style', 'url("https://example.com/")', 'outside url("https://example.com/") disc');
19+
test_computed_value('list-style', 'square', 'outside none square');
20+
21+
test_computed_value('list-style', 'inside url("https://example.com/") square');
22+
script>
23+
body>
24+
html>

‎css/css-lists/parsing/list-style-image-computed.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: getComputedValue().listStyleImagetitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image">
7+
<meta name="assert" content="list-style-image computed value is as specified.">
8+
<script src="/resources/testharness.js">script>
9+
<script src="/resources/testharnessreport.js">script>
10+
<script src="/css/support/computed-testcommon.js">script>
11+
<style>
12+
#target {
13+
font-size: 40px;
14+
}
15+
style>
16+
head>
17+
<body>
18+
<div id="target">div>
19+
<script>
20+
test_computed_value('list-style-image', 'none');
21+
22+
test_computed_value('list-style-image', 'url("https://example.com/")');
23+
24+
test_computed_value('list-style-image', 'linear-gradient(to left bottom, red , blue )', 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255))');
25+
26+
test_computed_value('list-style-image', 'radial-gradient(10px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))');
27+
test_computed_value('list-style-image', 'radial-gradient(circle calc(-0.5em + 10px) at calc(-1em + 10px) calc(-2em + 10px), rgb(255, 0, 0), rgb(0, 0, 255))', 'radial-gradient(0px at -30px -70px, rgb(255, 0, 0), rgb(0, 0, 255))');
28+
test_computed_value('list-style-image', 'radial-gradient(ellipse calc(-0.5em + 10px) calc(0.5em + 10px) at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))', 'radial-gradient(0px 30px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))');
29+
test_computed_value('list-style-image', 'radial-gradient(ellipse calc(0.5em + 10px) calc(-0.5em + 10px) at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))', 'radial-gradient(30px 0px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))');
30+
script>
31+
body>
32+
html>

‎css/css-lists/parsing/list-style-image-invalid.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: parsing list-style-image with invalid valuestitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image">
7+
<meta name="assert" content="list-style-image supports only the grammar ' | none'.">
8+
<script src="/resources/testharness.js">script>
9+
<script src="/resources/testharnessreport.js">script>
10+
<script src="/css/support/parsing-testcommon.js">script>
11+
head>
12+
<body>
13+
<script>
14+
test_invalid_value('list-style-image', 'auto');
15+
test_invalid_value('list-style-image', 'url("https://example.com/") none');
16+
script>
17+
body>
18+
html>

‎css/css-lists/parsing/list-style-image-valid.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: parsing list-style-image with valid valuestitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image">
7+
<meta name="assert" content="list-style-image supports the full grammar ' | none'.">
8+
<script src="/resources/testharness.js">script>
9+
<script src="/resources/testharnessreport.js">script>
10+
<script src="/css/support/parsing-testcommon.js">script>
11+
head>
12+
<body>
13+
<script>
14+
test_valid_value('list-style-image', 'none');
15+
16+
test_valid_value('list-style-image', 'url("https://example.com/")');
17+
18+
test_valid_value('list-style-image', 'linear-gradient(to left bottom, red, blue)');
19+
20+
// TODO: Add cross-fade tests when browsers add support.
21+
script>
22+
body>
23+
html>

‎css/css-lists/parsing/list-style-invalid.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: parsing list-style with invalid valuestitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style">
7+
<meta name="assert" content="list-style supports only the grammar '<'list-style-position'> || <'list-style-image'> || <'list-style-type'>'.">
8+
<script src="/resources/testharness.js">script>
9+
<script src="/resources/testharnessreport.js">script>
10+
<script src="/css/support/parsing-testcommon.js">script>
11+
head>
12+
<body>
13+
<script>
14+
test_invalid_value('list-style', 'inside disc outside');
15+
test_invalid_value('list-style', 'square circle');
16+
script>
17+
body>
18+
html>

‎css/css-lists/parsing/list-style-position-computed.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: getComputedValue().listStylePositiontitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position">
7+
<meta name="assert" content="list-style-position computed value is as specified.">
8+
<script src="/resources/testharness.js">script>
9+
<script src="/resources/testharnessreport.js">script>
10+
<script src="/css/support/computed-testcommon.js">script>
11+
head>
12+
<body>
13+
<div id="target">div>
14+
<script>
15+
test_computed_value('list-style-position', 'inside');
16+
test_computed_value('list-style-position', 'outside');
17+
script>
18+
body>
19+
html>

‎css/css-lists/parsing/list-style-position-invalid.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: parsing list-style-position with invalid valuestitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position">
7+
<meta name="assert" content="list-style-position supports only the grammar 'inside | outside'.">
8+
<script src="/resources/testharness.js">script>
9+
<script src="/resources/testharnessreport.js">script>
10+
<script src="/css/support/parsing-testcommon.js">script>
11+
head>
12+
<body>
13+
<script>
14+
test_invalid_value('list-style-position', 'auto');
15+
test_invalid_value('list-style-position', 'inside outside');
16+
script>
17+
body>
18+
html>

‎css/css-lists/parsing/list-style-position-valid.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: parsing list-style-position with valid valuestitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position">
7+
<meta name="assert" content="list-style-position supports the full grammar 'inside | outside'.">
8+
<script src="/resources/testharness.js">script>
9+
<script src="/resources/testharnessreport.js">script>
10+
<script src="/css/support/parsing-testcommon.js">script>
11+
head>
12+
<body>
13+
<script>
14+
test_valid_value('list-style-position', 'inside');
15+
test_valid_value('list-style-position', 'outside');
16+
script>
17+
body>
18+
html>

‎css/css-lists/parsing/list-style-type-computed.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: getComputedValue().listStyleTypetitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-type">
7+
<meta name="assert" content="list-style-type computed value is as specified.">
8+
<script src="/resources/testharness.js">script>
9+
<script src="/resources/testharnessreport.js">script>
10+
<script src="/css/support/computed-testcommon.js">script>
11+
head>
12+
<body>
13+
<div id="target">div>
14+
<script>
15+
test_computed_value('list-style-type', 'none');
16+
17+
test_computed_value('list-style-type', 'disc');
18+
test_computed_value('list-style-type', 'circle');
19+
test_computed_value('list-style-type', 'square');
20+
test_computed_value('list-style-type', 'decimal');
21+
test_computed_value('list-style-type', 'decimal-leading-zero');
22+
test_computed_value('list-style-type', 'lower-roman');
23+
test_computed_value('list-style-type', 'upper-roman');
24+
test_computed_value('list-style-type', 'lower-greek');
25+
test_computed_value('list-style-type', 'lower-latin');
26+
test_computed_value('list-style-type', 'upper-latin');
27+
test_computed_value('list-style-type', 'armenian');
28+
test_computed_value('list-style-type', 'georgian');
29+
test_computed_value('list-style-type', 'lower-alpha');
30+
test_computed_value('list-style-type', 'upper-alpha');
31+
32+
//
33+
test_computed_value('list-style-type', '"marker string"');
34+
test_computed_value('list-style-type', '"Note: "');
35+
36+
// = | symbols();
37+
test_computed_value('list-style-type', 'counter-Style-Name');
38+
test_computed_value('list-style-type', 'CounterStyleName');
39+
40+
// symbols() = symbols( ? [ | ]+ );
41+
// = cyclic | numeric | alphabetic | symbolic | fixed;
42+
test_computed_value('list-style-type', 'symbols(cyclic "string")');
43+
test_computed_value('list-style-type', 'symbols(cyclic "○" "●")');
44+
test_computed_value('list-style-type', 'symbols(fixed "1")');
45+
test_computed_value('list-style-type', 'symbols("string")');
46+
test_computed_value('list-style-type', 'symbols(alphabetic "first" "second")');
47+
test_computed_value('list-style-type', 'symbols(numeric "first" "second")');
48+
script>
49+
body>
50+
html>

‎css/css-lists/parsing/list-style-type-invalid.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: parsing list-style-type with invalid valuestitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-type">
7+
<meta name="assert" content="list-style-type supports only the grammar ' | | none'.">
8+
<meta name="assert" content="If the system is alphabetic or numeric, there must be at least two s or s, or else the function is invalid.">
9+
<script src="/resources/testharness.js">script>
10+
<script src="/resources/testharnessreport.js">script>
11+
<script src="/css/support/parsing-testcommon.js">script>
12+
head>
13+
<body>
14+
<script>
15+
test_invalid_value('list-style-type', '"marker string" none');
16+
test_invalid_value('list-style-type', 'counter-Style-Name "marker string"');
17+
test_invalid_value('list-style-type', 'symbols(cyclic)');
18+
test_invalid_value('list-style-type', 'symbols(numeric "n")');
19+
test_invalid_value('list-style-type', 'symbols(alphabetic "a")');
20+
test_invalid_value('list-style-type', 'symbols("s" symbolic)');
21+
test_invalid_value('list-style-type', 'symbols(fixed url("https://example.com"))');
22+
23+
// Example in an early spec.
24+
test_invalid_value('list-style-type', "symbols(repeating '○' '●')");
25+
26+
script>
27+
body>
28+
html>

‎css/css-lists/parsing/list-style-type-valid.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: parsing list-style-type with valid valuestitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-type">
7+
<link rel="help" href="https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-type">
8+
<meta name="assert" content="list-style-type supports the full grammar ' | | none'.">
9+
<script src="/resources/testharness.js">script>
10+
<script src="/resources/testharnessreport.js">script>
11+
<script src="/css/support/parsing-testcommon.js">script>
12+
head>
13+
<body>
14+
<script>
15+
test_valid_value('list-style-type', 'none');
16+
17+
test_valid_value('list-style-type', 'disc');
18+
test_valid_value('list-style-type', 'circle');
19+
test_valid_value('list-style-type', 'square');
20+
test_valid_value('list-style-type', 'decimal');
21+
test_valid_value('list-style-type', 'decimal-leading-zero');
22+
test_valid_value('list-style-type', 'lower-roman');
23+
test_valid_value('list-style-type', 'upper-roman');
24+
test_valid_value('list-style-type', 'lower-greek');
25+
test_valid_value('list-style-type', 'lower-latin');
26+
test_valid_value('list-style-type', 'upper-latin');
27+
test_valid_value('list-style-type', 'armenian');
28+
test_valid_value('list-style-type', 'georgian');
29+
test_valid_value('list-style-type', 'lower-alpha');
30+
test_valid_value('list-style-type', 'upper-alpha');
31+
32+
//
33+
test_valid_value('list-style-type', '"marker string"');
34+
test_valid_value('list-style-type', '"Note: "');
35+
36+
// = | symbols();
37+
test_valid_value('list-style-type', 'counter-Style-Name');
38+
test_valid_value('list-style-type', 'CounterStyleName');
39+
40+
// symbols() = symbols( ? [ | ]+ );
41+
// = cyclic | numeric | alphabetic | symbolic | fixed;
42+
test_valid_value('list-style-type', 'symbols(cyclic "string")');
43+
test_valid_value('list-style-type', 'symbols(cyclic "○" "●")');
44+
test_valid_value('list-style-type', 'symbols(fixed "1")');
45+
test_valid_value('list-style-type', 'symbols(symbolic "string")', 'symbols("string")');
46+
test_valid_value('list-style-type', 'symbols(alphabetic "first" "second")');
47+
test_valid_value('list-style-type', 'symbols(numeric "first" "second")');
48+
script>
49+
body>
50+
html>

‎css/css-lists/parsing/list-style-valid.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Lists: parsing list-style with valid valuestitle>
6+
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style">
7+
<meta name="assert" content="list-style supports the full grammar '<'list-style-position'> || <'list-style-image'> || <'list-style-type'>'.">
8+
<script src="/resources/testharness.js">script>
9+
<script src="/resources/testharnessreport.js">script>
10+
<script src="/css/support/parsing-testcommon.js">script>
11+
head>
12+
<body>
13+
<script>
14+
test_valid_value('list-style', 'none');
15+
16+
test_valid_value('list-style', 'inside');
17+
test_valid_value('list-style', 'url("https://example.com/")');
18+
test_valid_value('list-style', 'square');
19+
20+
test_valid_value('list-style', 'square url("https://example.com/") inside', 'inside url("https://example.com/") square');
21+
script>
22+
body>
23+
html>

0 commit comments

Comments
 (0)