Skip to content

Commit

Permalink
[css-lists] Parsing list-style
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@ericwilligers
ericwilligers committed Jun 24, 2019
1 parent ec977de commit efdef41
Show file tree
Hide file tree
Showing 12 changed files with 321 additions and 0 deletions.
24 changes: 24 additions & 0 deletions css/css-lists/parsing/list-style-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: getComputedValue().listStyle</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style">
<meta name="assert" content="list-style computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value('list-style', 'none', 'outside none disc');

test_computed_value('list-style', 'inside', 'inside none disc');
test_computed_value('list-style', 'url("https://example.com/")', 'outside url("https://example.com/") disc');
test_computed_value('list-style', 'square', 'outside none square');

test_computed_value('list-style', 'inside url("https://example.com/") square');
</script>
</body>
</html>
32 changes: 32 additions & 0 deletions css/css-lists/parsing/list-style-image-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: getComputedValue().listStyleImage</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image">
<meta name="assert" content="list-style-image computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<style>
#target {
font-size: 40px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value('list-style-image', 'none');

test_computed_value('list-style-image', 'url("https://example.com/")');

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))');

test_computed_value('list-style-image', 'radial-gradient(10px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))');
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))');
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))');
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))');
</script>
</body>
</html>
18 changes: 18 additions & 0 deletions css/css-lists/parsing/list-style-image-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: parsing list-style-image with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image">
<meta name="assert" content="list-style-image supports only the grammar '<image> | none'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value('list-style-image', 'auto');
test_invalid_value('list-style-image', 'url("https://example.com/") none');
</script>
</body>
</html>
23 changes: 23 additions & 0 deletions css/css-lists/parsing/list-style-image-valid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: parsing list-style-image with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image">
<meta name="assert" content="list-style-image supports the full grammar '<image> | none'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value('list-style-image', 'none');

test_valid_value('list-style-image', 'url("https://example.com/")');

test_valid_value('list-style-image', 'linear-gradient(to left bottom, red, blue)');

// TODO: Add cross-fade tests when browsers add support.
</script>
</body>
</html>
18 changes: 18 additions & 0 deletions css/css-lists/parsing/list-style-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: parsing list-style with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style">
<meta name="assert" content="list-style supports only the grammar '<'list-style-position'> || <'list-style-image'> || <'list-style-type'>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value('list-style', 'inside disc outside');
test_invalid_value('list-style', 'square circle');
</script>
</body>
</html>
19 changes: 19 additions & 0 deletions css/css-lists/parsing/list-style-position-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: getComputedValue().listStylePosition</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position">
<meta name="assert" content="list-style-position computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value('list-style-position', 'inside');
test_computed_value('list-style-position', 'outside');
</script>
</body>
</html>
18 changes: 18 additions & 0 deletions css/css-lists/parsing/list-style-position-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: parsing list-style-position with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position">
<meta name="assert" content="list-style-position supports only the grammar 'inside | outside'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value('list-style-position', 'auto');
test_invalid_value('list-style-position', 'inside outside');
</script>
</body>
</html>
18 changes: 18 additions & 0 deletions css/css-lists/parsing/list-style-position-valid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: parsing list-style-position with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position">
<meta name="assert" content="list-style-position supports the full grammar 'inside | outside'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value('list-style-position', 'inside');
test_valid_value('list-style-position', 'outside');
</script>
</body>
</html>
50 changes: 50 additions & 0 deletions css/css-lists/parsing/list-style-type-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: getComputedValue().listStyleType</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-type">
<meta name="assert" content="list-style-type computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value('list-style-type', 'none');

test_computed_value('list-style-type', 'disc');
test_computed_value('list-style-type', 'circle');
test_computed_value('list-style-type', 'square');
test_computed_value('list-style-type', 'decimal');
test_computed_value('list-style-type', 'decimal-leading-zero');
test_computed_value('list-style-type', 'lower-roman');
test_computed_value('list-style-type', 'upper-roman');
test_computed_value('list-style-type', 'lower-greek');
test_computed_value('list-style-type', 'lower-latin');
test_computed_value('list-style-type', 'upper-latin');
test_computed_value('list-style-type', 'armenian');
test_computed_value('list-style-type', 'georgian');
test_computed_value('list-style-type', 'lower-alpha');
test_computed_value('list-style-type', 'upper-alpha');

// <string>
test_computed_value('list-style-type', '"marker string"');
test_computed_value('list-style-type', '"Note: "');

// <counter-style> = <counter-style-name> | symbols();
test_computed_value('list-style-type', 'counter-Style-Name');
test_computed_value('list-style-type', 'CounterStyleName');

// symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
// <symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed;
test_computed_value('list-style-type', 'symbols(cyclic "string")');
test_computed_value('list-style-type', 'symbols(cyclic "○" "●")');
test_computed_value('list-style-type', 'symbols(fixed "1")');
test_computed_value('list-style-type', 'symbols("string")');
test_computed_value('list-style-type', 'symbols(alphabetic "first" "second")');
test_computed_value('list-style-type', 'symbols(numeric "first" "second")');
</script>
</body>
</html>
28 changes: 28 additions & 0 deletions css/css-lists/parsing/list-style-type-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: parsing list-style-type with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-type">
<meta name="assert" content="list-style-type supports only the grammar '<counter-style> | <string> | none'.">
<meta name="assert" content="If the system is alphabetic or numeric, there must be at least two <string>s or <image>s, or else the function is invalid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value('list-style-type', '"marker string" none');
test_invalid_value('list-style-type', 'counter-Style-Name "marker string"');
test_invalid_value('list-style-type', 'symbols(cyclic)');
test_invalid_value('list-style-type', 'symbols(numeric "n")');
test_invalid_value('list-style-type', 'symbols(alphabetic "a")');
test_invalid_value('list-style-type', 'symbols("s" symbolic)');
test_invalid_value('list-style-type', 'symbols(fixed url("https://example.com"))');

// Example in an early spec.
test_invalid_value('list-style-type', "symbols(repeating '○' '●')");

</script>
</body>
</html>
50 changes: 50 additions & 0 deletions css/css-lists/parsing/list-style-type-valid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: parsing list-style-type with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-type">
<link rel="help" href="https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-type">
<meta name="assert" content="list-style-type supports the full grammar '<counter-style> | <string> | none'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value('list-style-type', 'none');

test_valid_value('list-style-type', 'disc');
test_valid_value('list-style-type', 'circle');
test_valid_value('list-style-type', 'square');
test_valid_value('list-style-type', 'decimal');
test_valid_value('list-style-type', 'decimal-leading-zero');
test_valid_value('list-style-type', 'lower-roman');
test_valid_value('list-style-type', 'upper-roman');
test_valid_value('list-style-type', 'lower-greek');
test_valid_value('list-style-type', 'lower-latin');
test_valid_value('list-style-type', 'upper-latin');
test_valid_value('list-style-type', 'armenian');
test_valid_value('list-style-type', 'georgian');
test_valid_value('list-style-type', 'lower-alpha');
test_valid_value('list-style-type', 'upper-alpha');

// <string>
test_valid_value('list-style-type', '"marker string"');
test_valid_value('list-style-type', '"Note: "');

// <counter-style> = <counter-style-name> | symbols();
test_valid_value('list-style-type', 'counter-Style-Name');
test_valid_value('list-style-type', 'CounterStyleName');

// symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
// <symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed;
test_valid_value('list-style-type', 'symbols(cyclic "string")');
test_valid_value('list-style-type', 'symbols(cyclic "○" "●")');
test_valid_value('list-style-type', 'symbols(fixed "1")');
test_valid_value('list-style-type', 'symbols(symbolic "string")', 'symbols("string")');
test_valid_value('list-style-type', 'symbols(alphabetic "first" "second")');
test_valid_value('list-style-type', 'symbols(numeric "first" "second")');
</script>
</body>
</html>
23 changes: 23 additions & 0 deletions css/css-lists/parsing/list-style-valid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Lists: parsing list-style with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style">
<meta name="assert" content="list-style supports the full grammar '<'list-style-position'> || <'list-style-image'> || <'list-style-type'>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value('list-style', 'none');

test_valid_value('list-style', 'inside');
test_valid_value('list-style', 'url("https://example.com/")');
test_valid_value('list-style', 'square');

test_valid_value('list-style', 'square url("https://example.com/") inside', 'inside url("https://example.com/") square');
</script>
</body>
</html>

0 comments on commit efdef41

Please sign in to comment.