Skip to content

Commit

Permalink
CSS: list-style shorthand matches updated spec
Browse files Browse the repository at this point in the history 
Update the list-style shorthand
https://drafts.csswg.org/css-lists-3/#list-style-property
to match spec change
w3c/csswg-drafts#2624
w3c/csswg-drafts@8ac1376

The list-style shorthand is now
<list-style-position> || <list-style-image> || <list-style-type>
instead of
<list-style-type> || <list-style-position> || <list-style-image>

Firefox already supports the updated spec.

Bug: 978433
Change-Id: I579c2272390487b429d5fe986c51cdd2041653d8
  • Loading branch information
@ericwilligers @chromium-wpt-export-bot
ericwilligers authored and chromium-wpt-export-bot committed Jun 25, 2019
1 parent 66dc9c9 commit efa7891
Show file tree
Hide file tree
Showing 12 changed files with 290 additions and 1 deletion.
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 none');

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>
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>
2 changes: 1 addition & 1 deletion css/cssom/shorthand-values.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
'overflow-x: scroll; overflow-y: scroll;': 'overflow: scroll;',
'outline-width: 2px; outline-style: dotted; outline-color: blue;': 'outline: blue dotted 2px;',
'margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;': 'margin: 1px 2px 3px 4px;',
'list-style-type: circle; list-style-position: inside; list-style-image: initial;': 'list-style: circle inside;',
'list-style-type: circle; list-style-position: inside; list-style-image: initial;': 'list-style: inside circle;',
'list-style-type: lower-alpha;': 'list-style-type: lower-alpha;',
'font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;': 'font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;',
'padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;': 'padding: 1px 2px 3px 4px;'
Expand Down

0 comments on commit efa7891

Please sign in to comment.