forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
1 parent
ec977de
commit efdef41
Showing
12 changed files
with
321 additions
and
0 deletions.
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 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> |
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,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> |
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> |