-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
CSS: list-style shorthand matches updated spec
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
1 parent
66dc9c9
commit efa7891
Showing
12 changed files
with
290 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters