diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-lists | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-lists')
254 files changed, 8487 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-lists/META.yml b/testing/web-platform/tests/css/css-lists/META.yml new file mode 100644 index 0000000000..05e60af1d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/META.yml @@ -0,0 +1,3 @@ +spec: https://drafts.csswg.org/css-lists/ +suggested_reviewers: + - tabatkins diff --git a/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-001-ref.html b/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-001-ref.html new file mode 100644 index 0000000000..0c1d2397d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: Add inline child after marker</title> + +<p>The test passes if you see the list marker followed by the text "inline" and "axxx" in a line below.</p> + +<ul> + <li> + <span>inline</span> + <div style="overflow:hidden;"> + <span>a</span>xxx + </div> + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-001.html b/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-001.html new file mode 100644 index 0000000000..228604ee35 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: Add inline child after marker</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=match href="add-inline-child-after-marker-001-ref.html"> +<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=344941 --> + +<p>The test passes if you see the list marker followed by the text "inline" and "axxx" in a line below.</p> + +<ul> + <li id="liTarget"> + <div id="divTarget" style="overflow:hidden;"> + <span>a</span>xxx + </div> + </li> +</ul> +<script> + document.body.offsetHeight; + var new_span=document.createElement("span"); + var text_node=document.createTextNode("inline"); + new_span.appendChild(text_node); + + var div_target=document.getElementById("divTarget"); + var li_target=document.getElementById("liTarget"); + li_target.insertBefore(new_span,div_target); +</script> diff --git a/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-002-ref.html b/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-002-ref.html new file mode 100644 index 0000000000..f7d113d378 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-002-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: Add inline child after marker</title> + +<p>The test passes if you see the list marker followed by the text "axxx" in the same line.</p> + +<ul> + <li> + <span> </span> + <div style="overflow:hidden;"> + <span>a</span>xxx + </div> + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-002.html b/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-002.html new file mode 100644 index 0000000000..66633ac955 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: Add inline child after marker</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=match href="add-inline-child-after-marker-002-ref.html"> +<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=1049633 --> + +<p>The test passes if you see the list marker followed by the text "axxx" in the same line.</p> + +<ul> + <li id="liTarget"> + <div id="divTarget" style="overflow:hidden;"> + <span>a</span>xxx + </div> + </li> +</ul> +<script> + document.body.offsetHeight; + var new_span=document.createElement("span"); + var text_node=document.createTextNode(" "); + new_span.appendChild(text_node); + + var div_target=document.getElementById("divTarget"); + var li_target=document.getElementById("liTarget"); + li_target.insertBefore(new_span,div_target); +</script> diff --git a/testing/web-platform/tests/css/css-lists/animations/list-style-image-interpolation.html b/testing/web-platform/tests/css/css-lists/animations/list-style-image-interpolation.html new file mode 100644 index 0000000000..b953d8c221 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/animations/list-style-image-interpolation.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>list-style-image interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image"> +<meta name="assert" content="list-style-image supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + list-style-image: url(../resources/blue-20.png); +} +.target { + background-color: black; + width: 100px; + list-style-image: url(../resources/green-20.png); +} +.expected { + background-color: green; +} +</style> + +<body> +<template id="target-template"> + <ul> + <li class="target"></li> + </ul> +</template> +<script> +test_interpolation({ + property: 'list-style-image', + from: neutralKeyframe, + to: 'url(../resources/stripes-20.png)', +}, [ + {at: -0.3, expect: 'url(../resources/green-20.png)'}, + {at: 0, expect: 'url(../resources/green-20.png)'}, + {at: 0.3, expect: 'url(../resources/green-20.png)'}, + {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, + {at: 1, expect: 'url(../resources/stripes-20.png)'}, + {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, +]); + +test_interpolation({ + property: 'list-style-image', + from: 'initial', + to: 'url(../resources/stripes-20.png)', +}, [ + {at: -0.3, expect: 'none'}, + {at: 0, expect: 'none'}, + {at: 0.3, expect: 'none'}, + {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, + {at: 1, expect: 'url(../resources/stripes-20.png)'}, + {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, +]); + +test_interpolation({ + property: 'list-style-image', + from: 'inherit', + to: 'url(../resources/stripes-20.png)', +}, [ + {at: -0.3, expect: 'url(../resources/blue-20.png)'}, + {at: 0, expect: 'url(../resources/blue-20.png)'}, + {at: 0.3, expect: 'url(../resources/blue-20.png)'}, + {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, + {at: 1, expect: 'url(../resources/stripes-20.png)'}, + {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, +]); + +test_interpolation({ + property: 'list-style-image', + from: 'unset', + to: 'url(../resources/stripes-20.png)', +}, [ + {at: -0.3, expect: 'url(../resources/blue-20.png)'}, + {at: 0, expect: 'url(../resources/blue-20.png)'}, + {at: 0.3, expect: 'url(../resources/blue-20.png)'}, + {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, + {at: 1, expect: 'url(../resources/stripes-20.png)'}, + {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, +]); + +// Constant image +test_no_interpolation({ + property: 'list-style-image', + from: 'url(../resources/stripes-20.png)', + to: 'url(../resources/stripes-20.png)', +}); + +// None to image +test_interpolation({ + property: 'list-style-image', + from: 'none', + to: 'url(../resources/stripes-20.png)', +}, [ + {at: -0.3, expect: 'none'}, + {at: 0, expect: 'none'}, + {at: 0.3, expect: 'none'}, + {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, + {at: 1, expect: 'url(../resources/stripes-20.png)'}, + {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, +]); + +// Image to image +test_interpolation({ + property: 'list-style-image', + from: 'url(../resources/green-20.png)', + to: 'url(../resources/stripes-20.png)', +}, [ + {at: -0.3, expect: 'url(../resources/green-20.png)'}, + {at: 0, expect: 'url(../resources/green-20.png)'}, + {at: 0.3, expect: 'url(../resources/green-20.png)'}, + {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, + {at: 1, expect: 'url(../resources/stripes-20.png)'}, + {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, +]); + +// Image to gradient +test_interpolation({ + property: 'list-style-image', + from: 'url(../resources/green-20.png)', + to: 'linear-gradient(45deg, blue, orange)', +}, [ + {at: -0.3, expect: 'url(../resources/green-20.png)'}, + {at: 0, expect: 'url(../resources/green-20.png)'}, + {at: 0.3, expect: 'url(../resources/green-20.png)'}, + {at: 0.6, expect: 'linear-gradient(45deg, blue, orange)'}, + {at: 1, expect: 'linear-gradient(45deg, blue, orange)'}, + {at: 1.5, expect: 'linear-gradient(45deg, blue, orange)'}, +]); + +// Gradient to gradient +test_interpolation({ + property: 'list-style-image', + from: 'linear-gradient(-45deg, red, yellow)', + to: 'linear-gradient(45deg, blue, orange)', +}, [ + {at: -0.3, expect: 'linear-gradient(-45deg, red, yellow)'}, + {at: 0, expect: 'linear-gradient(-45deg, red, yellow)'}, + {at: 0.3, expect: 'linear-gradient(-45deg, red, yellow)'}, + {at: 0.6, expect: 'linear-gradient(45deg, blue, orange)'}, + {at: 1, expect: 'linear-gradient(45deg, blue, orange)'}, + {at: 1.5, expect: 'linear-gradient(45deg, blue, orange)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-lists/before-after-selectors-on-code-element-crash.html b/testing/web-platform/tests/css/css-lists/before-after-selectors-on-code-element-crash.html new file mode 100644 index 0000000000..cc0e16e766 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/before-after-selectors-on-code-element-crash.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="http://bugs.webkit.org/show_bug.cgi?id=11197"> +<html +<head> +<style> + code:before { + content: counter(dummy,circle); + } + code:after { + content: counter(dummy,square); + } +</style> +</head> +<body> +<code>PASSED</code> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/change-list-descendant-display-ref.html b/testing/web-platform/tests/css/css-lists/change-list-descendant-display-ref.html new file mode 100644 index 0000000000..1a69ab6ea5 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-descendant-display-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of descendant's display</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +.inline { + display: inline; +} +</style> +<ol> + <li><div class="target inline">text</div></li> + <li><div class="target">text</div></li> + <li><div><div class="target inline">text</div></div></li> + <li><div><div class="target">text</div></div></li> + <li><div><div><div class="target inline">text</div></div></div></li> + <li><div><div><div class="target">text</div></div></div></li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/change-list-descendant-display.html b/testing/web-platform/tests/css/css-lists/change-list-descendant-display.html new file mode 100644 index 0000000000..18296f8862 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-descendant-display.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Lists: test the change of descendant's display</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="change-list-descendant-display-ref.html"> +<link rel="help" href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<meta name="assert" content="Check that an outside marker looks good when + the descendant of the list item that contains the 1st line box changes + from 'display: block' to 'display: inline' or vice versa."> +<style> +.inline { + display: inline; +} +</style> +<ol> + <li><div class="target">text</div></li> + <li><div class="target inline">text</div></li> + <li><div><div class="target">text</div></div></li> + <li><div><div class="target inline">text</div></div></li> + <li><div><div><div class="target">text</div></div></div></li> + <li><div><div><div class="target inline">text</div></div></div></li> +</ol> +<script src="/common/reftest-wait.js"></script> +<script> +addEventListener("load", async () => { + for (let target of document.querySelectorAll(".target")) { + await new Promise(resolve => requestAnimationFrame(resolve)); + target.classList.toggle("inline"); + } + takeScreenshot(); +}, {once: true}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-lists/change-list-style-position-001-ref.html b/testing/web-platform/tests/css/css-lists/change-list-style-position-001-ref.html new file mode 100644 index 0000000000..e87702a67b --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-style-position-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of list-style-position</title> + +<p>The test passes if you see the list marker followed by the text "inline" and "axxx" in a line below.</p> + +<ul> + <li style="list-style-position:inside;"> + <span>inline</span> + <div style="overflow:hidden;"> + <span>a</span>xxx + </div> + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/change-list-style-position-001.html b/testing/web-platform/tests/css/css-lists/change-list-style-position-001.html new file mode 100644 index 0000000000..5f56ee76ff --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-style-position-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of list-style-position</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=match href="change-list-style-position-001-ref.html"> + +<p>The test passes if you see the list marker followed by the text "inline" and "axxx" in a line below.</p> + +<ul> + <li> + <span>inline</span> + <div style="overflow:hidden;"> + <span>a</span>xxx + </div> + </li> +</ul> +<script> + document.body.offsetHeight; + document.querySelector("li").style.listStylePosition = "inside"; +</script> diff --git a/testing/web-platform/tests/css/css-lists/change-list-style-position-002-ref.html b/testing/web-platform/tests/css/css-lists/change-list-style-position-002-ref.html new file mode 100644 index 0000000000..0f724434d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-style-position-002-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of list-style-position</title> +<style> +div { + display: list-item; + margin-left: 40px; + border: 5px solid; +} +div > div { list-style-type: decimal } +div > div > div { list-style-type: lower-roman } +.inside { list-style-position: inside } +</style> +<div><div><div class="inside">text</div></div></div> diff --git a/testing/web-platform/tests/css/css-lists/change-list-style-position-002.html b/testing/web-platform/tests/css/css-lists/change-list-style-position-002.html new file mode 100644 index 0000000000..66328ef8bb --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-style-position-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of list-style-position</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="change-list-style-position-002-ref.html"> +<link rel="help" href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<style> +div { + display: list-item; + margin-left: 40px; + border: 5px solid; +} +div > div { list-style-type: decimal } +div > div > div { list-style-type: lower-roman } +.inside { list-style-position: inside } +</style> +<div><div id="bar"><div id="baz">text</div></div></div> +<script> +document.getElementById("bar").className = "inside"; +document.body.offsetHeight; +document.getElementById("bar").className = ""; +document.body.offsetHeight; +document.getElementById("baz").className = "inside"; +</script> diff --git a/testing/web-platform/tests/css/css-lists/change-list-style-position-003-ref.html b/testing/web-platform/tests/css/css-lists/change-list-style-position-003-ref.html new file mode 100644 index 0000000000..01494b4dd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-style-position-003-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of list-style-position</title> +<style> +div { + border: 5px solid orange; + display: list-item; + list-style-position: inside; + margin-left: 40px; +} +div > div { + list-style-type: decimal; +} +</style> +<div><div>text</div></div> diff --git a/testing/web-platform/tests/css/css-lists/change-list-style-position-003.html b/testing/web-platform/tests/css/css-lists/change-list-style-position-003.html new file mode 100644 index 0000000000..8af360f0b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-style-position-003.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of list-style-position</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="change-list-style-position-003-ref.html"> +<link rel="help" href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<style> +div { + border: 5px solid orange; + display: list-item; + margin-left: 40px; +} +div > div { + list-style-type: decimal; +} +</style> +<div><div>text</div></div> +<script> +document.body.offsetHeight; +document.body.style.listStylePosition = "inside"; +</script> diff --git a/testing/web-platform/tests/css/css-lists/change-list-style-type-001-ref.html b/testing/web-platform/tests/css/css-lists/change-list-style-type-001-ref.html new file mode 100644 index 0000000000..033af13331 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-style-type-001-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of list-style-type</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=966750"> +<style type="text/css"> +.inside { + list-style-position: inside; +} + +.none2symbol { + list-style-type: square; +} + +.symbol2none { + list-style-type: none; +} + +.symbol2symbol { + list-style-type: square; +} + +.symbol2ordinal { + list-style-type: upper-roman; +} + +.ordinal2ordinal { + list-style-type: decimal; +} +</style> + +<ul class="inside"><li class="none2symbol">inside: none to square</li></ul> +<ul><li class="none2symbol">outside: none to square</li></ul> + +<ul class="inside"><li class="symbol2none">inside: square to none</li></ul> +<ul><li class="symbol2none">outside: square to none</li></ul> + +<ul class="inside"><li class="symbol2symbol">inside: disc to square</li></ul> +<ul><li class="symbol2symbol">outside: disc to square</li></ul> + +<ul class="inside"><li class="symbol2ordinal">inside: disc to upper-roman</li></ul> +<ul><li class="symbol2ordinal">outside: disc to upper-roman</li></ul> + +<ul class="inside"><li class="ordinal2ordinal">inside: upper-roman to decimal</li></ul> +<ul><li class="ordinal2ordinal">outside: upper-roman to decimal</li></ul> diff --git a/testing/web-platform/tests/css/css-lists/change-list-style-type-001.html b/testing/web-platform/tests/css/css-lists/change-list-style-type-001.html new file mode 100644 index 0000000000..9eacdd7092 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-style-type-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of list-style-type</title> +<link rel="match" href="change-list-style-type-001-ref.html"> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=966750"> +<style type="text/css"> +.inside { + list-style-position: inside; +} + +.none2symbol { + list-style-type: none; +} + +.symbol2none { + list-style-type: square; +} + +.symbol2symbol { + list-style-type: disc; +} + +.symbol2ordinal { + list-style-type: disc; +} + +.ordinal2ordinal { + list-style-type: upper-roman; +} +</style> + +<ul class="inside"><li class="none2symbol">inside: none to square</li></ul> +<ul><li class="none2symbol">outside: none to square</li></ul> + +<ul class="inside"><li class="symbol2none">inside: square to none</li></ul> +<ul><li class="symbol2none">outside: square to none</li></ul> + +<ul class="inside"><li class="symbol2symbol">inside: disc to square</li></ul> +<ul><li class="symbol2symbol">outside: disc to square</li></ul> + +<ul class="inside"><li class="symbol2ordinal">inside: disc to upper-roman</li></ul> +<ul><li class="symbol2ordinal">outside: disc to upper-roman</li></ul> + +<ul class="inside"><li class="ordinal2ordinal">inside: upper-roman to decimal</li></ul> +<ul><li class="ordinal2ordinal">outside: upper-roman to decimal</li></ul> + +<script> +document.body.offsetLeft; +</script> + +<style type="text/css"> +.none2symbol { + list-style-type: square; +} + +.symbol2none { + list-style-type: none; +} + +.symbol2symbol { + list-style-type: square; +} + +.symbol2ordinal { + list-style-type: upper-roman; +} + +.ordinal2ordinal { + list-style-type: decimal; +} +</style> diff --git a/testing/web-platform/tests/css/css-lists/change-list-style-type-002-ref.html b/testing/web-platform/tests/css/css-lists/change-list-style-type-002-ref.html new file mode 100644 index 0000000000..8a9c9df59d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-style-type-002-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of list-style-type</title> +<ol> + <li>text</li> + <li><p>text</p></li> + <li> + <p>text</p> + </li> + <li> + <p></p> + <p>text</p> + </li> + <li> + <div> + <p>text</p> + </div> + </li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/change-list-style-type-002.html b/testing/web-platform/tests/css/css-lists/change-list-style-type-002.html new file mode 100644 index 0000000000..b76e4e9c31 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/change-list-style-type-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the change of list-style-type</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="change-list-style-type-002-ref.html"> +<link rel="help" href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<style> +.no-marker li { + list-style-type: none; +} +</style> +<ol> + <li>text</li> + <li><p>text</p></li> + <li> + <p>text</p> + </li> + <li> + <p></p> + <p>text</p> + </li> + <li> + <div> + <p>text</p> + </div> + </li> +</ol> +<script> +// Force layout +document.body.offsetHeight; + +// Remove list markers +document.body.className = "no-marker"; + +// Force layout +document.body.offsetHeight; + +// Recover list markers +document.body.className = ""; +</script> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-armenian-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-armenian-ref.html new file mode 100644 index 0000000000..de55b7381a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-armenian-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset=utf8> +<title>Reference: Inside list marker and normal text render identically: armenian</title> +<style> +* { + margin: 0; + padding: 0; +} +</style> +<p>Ա. Filler Text<span style="display: inline-block; width: 1px; height: 50px;"></span> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-armenian.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-armenian.html new file mode 100644 index 0000000000..58f570cd11 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-armenian.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: armenian</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-armenian-ref.html"> +<style> +* { + padding: 0; + margin: 0; +} +ol { + list-style: armenian inside; +} +</style> + +<ol> + <li>Filler Text<span style="display: inline-block; width: 1px; height: 50px;"></span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-circle-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-circle-ref.html new file mode 100644 index 0000000000..60a342f1a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-circle-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>Reference: Inside list marker and normal text render identically: circle</title> +<style> +* { + margin: 0; + padding: 0; +} +p::before { + content: counter(test, circle); +} +</style> +<p> Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-circle.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-circle.html new file mode 100644 index 0000000000..9ad6e7a01a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-circle.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: circle</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-circle-ref.html"> +<style> +/* + Avoid using list-style:circle directly, because the spec allows the + rendering to deviate from the element's font. + https://drafts.csswg.org/css-counter-styles-3/#simple-symbolic +*/ +@counter-style my-circle { + system: extends circle; +} +* { + padding: 0; + margin: 0; +} +ol { + list-style: my-circle inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal-leading-zero-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal-leading-zero-ref.html new file mode 100644 index 0000000000..997801d569 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal-leading-zero-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>Reference: Inside list marker and normal text render identically: decimal-leading-zero</title> +<style> +* { + margin: 0; + padding: 0; +} +</style> +<p>01. Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal-leading-zero.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal-leading-zero.html new file mode 100644 index 0000000000..5044d4e68d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal-leading-zero.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: decimal-leading-zero</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-decimal-leading-zero-ref.html"> +<style> +* { + padding: 0; + margin: 0; +} +ol { + list-style: decimal-leading-zero inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal-ref.html new file mode 100644 index 0000000000..8f97cc36a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>Reference: Inside list marker and normal text render identically: decimal</title> +<style> +* { + margin: 0; + padding: 0; +} +</style> +<p>1. Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal.html new file mode 100644 index 0000000000..8c991bc3d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-decimal.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: decimal</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-decimal-ref.html"> +<style> +* { + padding: 0; + margin: 0; +} +ol { + list-style: decimal inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-disc-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-disc-ref.html new file mode 100644 index 0000000000..e34a900998 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-disc-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>Reference: Inside list marker and normal text render identically: disc</title> +<style> +* { + margin: 0; + padding: 0; +} +p::before { + content: counter(test, disc); +} +</style> +<p> Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-disc.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-disc.html new file mode 100644 index 0000000000..300a823748 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-disc.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: disc</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-disc-ref.html"> +<style> +/* + Avoid using list-style:disc directly, because the spec allows the + rendering to deviate from the element's font. + https://drafts.csswg.org/css-counter-styles-3/#simple-symbolic +*/ +@counter-style my-disc { + system: extends disc; +} +* { + padding: 0; + margin: 0; +} +ol { + list-style: my-disc inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-georgian-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-georgian-ref.html new file mode 100644 index 0000000000..c400acae52 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-georgian-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset=utf8> +<title>Reference: Inside list marker and normal text render identically: georgian</title> +<style> +* { + margin: 0; + padding: 0; +} +</style> +<p>ა. Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-georgian.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-georgian.html new file mode 100644 index 0000000000..ef7615f6f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-georgian.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: georgian</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-georgian-ref.html"> +<style> +* { + padding: 0; + margin: 0; +} +ol { + list-style: georgian inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-greek-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-greek-ref.html new file mode 100644 index 0000000000..f28db82b98 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-greek-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset=utf8> +<title>Reference: Inside list marker and normal text render identically: lower-greek</title> +<style> +* { + margin: 0; + padding: 0; +} +</style> +<p>α. Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-greek.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-greek.html new file mode 100644 index 0000000000..96b5d811c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-greek.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: lower-greek</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-lower-greek-ref.html"> +<style> +* { + padding: 0; + margin: 0; +} +ol { + list-style: lower-greek inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-latin-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-latin-ref.html new file mode 100644 index 0000000000..b86fe8ecf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-latin-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>Reference: Inside list marker and normal text render identically: lower-latin</title> +<style> +* { + margin: 0; + padding: 0; +} +</style> +<p>a. Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-latin.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-latin.html new file mode 100644 index 0000000000..0f6f24238b --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-latin.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: lower-latin</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-lower-latin-ref.html"> +<style> +* { + padding: 0; + margin: 0; +} +ol { + list-style: lower-latin inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-roman-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-roman-ref.html new file mode 100644 index 0000000000..92dfa3d752 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-roman-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>Reference: Inside list marker and normal text render identically: lower-roman</title> +<style> +* { + margin: 0; + padding: 0; +} +</style> +<p>i. Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-roman.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-roman.html new file mode 100644 index 0000000000..db7301b320 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-lower-roman.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: lower-roman</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-lower-roman-ref.html"> +<style> +* { + padding: 0; + margin: 0; +} +ol { + list-style: lower-roman inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-square-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-square-ref.html new file mode 100644 index 0000000000..99b64a5424 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-square-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>Reference: Inside list marker and normal text render identically: square</title> +<style> +* { + margin: 0; + padding: 0; +} +p::before { + content: counter(test, square); +} +</style> +<p> Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-square.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-square.html new file mode 100644 index 0000000000..020c4a6c43 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-square.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: square</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-square-ref.html"> +<style> +/* + Avoid using list-style:square directly, because the spec allows the + rendering to deviate from the element's font. + https://drafts.csswg.org/css-counter-styles-3/#simple-symbolic +*/ +@counter-style my-square { + system: extends square; +} +* { + padding: 0; + margin: 0; +} +ol { + list-style: my-square inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-latin-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-latin-ref.html new file mode 100644 index 0000000000..6cbb712e76 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-latin-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>Reference: Inside list marker and normal text render identically: upper-latin</title> +<style> +* { + margin: 0; + padding: 0; +} +</style> +<p>A. Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-latin.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-latin.html new file mode 100644 index 0000000000..903ef8f57d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-latin.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: upper-latin</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-upper-latin-ref.html"> +<style> +* { + padding: 0; + margin: 0; +} +ol { + list-style: upper-latin inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-roman-ref.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-roman-ref.html new file mode 100644 index 0000000000..6fca49f27c --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-roman-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>Reference: Inside list marker and normal text render identically: upper-roman</title> +<style> +* { + margin: 0; + padding: 0; +} +</style> +<p>I. Filler Text diff --git a/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-roman.html b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-roman.html new file mode 100644 index 0000000000..69f34d7408 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/content-property/marker-text-matches-upper-roman.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>Inside list marker and normal text render identically: upper-roman</title> +<link rel=help href="https://drafts.csswg.org/css-lists-3/#content-property"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=787382"> +<link rel=match href="marker-text-matches-upper-roman-ref.html"> +<style> +* { + padding: 0; + margin: 0; +} +ol { + list-style: upper-roman inside; +} +</style> + +<ol> + <li>Filler Text</li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/counter-001-ref.html b/testing/web-platform/tests/css/css-lists/counter-001-ref.html new file mode 100644 index 0000000000..2dd80aa3a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-001-ref.html @@ -0,0 +1,37 @@ +<!doctype html> +<title>CSS Lists and Counters test reference: counter(c, ".", decimal-leading-zero)</title> +<p>The following two lines should look the same:</p> +<div> + 01 + 02 + 03 + 04 + 05 + 06 + 07 + 08 + 09 + 10 + 11 + 12 + 99 + 13 + 14 +</div> +<div> + 01 + 02 + 03 + 04 + 05 + 06 + 07 + 08 + 09 + 10 + 11 + 12 + 99 + 13 + 14 +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-001.html b/testing/web-platform/tests/css/css-lists/counter-001.html new file mode 100644 index 0000000000..46d7eb81df --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-001.html @@ -0,0 +1,45 @@ +<!doctype html> +<title>CSS Lists and Counters: counter(c, ".", decimal-leading-zero)</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counter-001-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +#test { counter-reset: c; } +#test span { counter-increment: c; } +#test span::before { content: counter(c, decimal-leading-zero); } +</style> +<p>The following two lines should look the same:</p> +<div id="test"> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span style="counter-reset: c 98"></span> + <span></span> + <span></span> +</div> +<div> + 01 + 02 + 03 + 04 + 05 + 06 + 07 + 08 + 09 + 10 + 11 + 12 + 99 + 13 + 14 +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-002-ref.html b/testing/web-platform/tests/css/css-lists/counter-002-ref.html new file mode 100644 index 0000000000..621e42e26e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-002-ref.html @@ -0,0 +1,45 @@ +<!doctype html> +<title>CSS Lists and Counters test reference: counter(c, ".", lower-roman)</title> +<p>The following two lines should look the same:</p> +<div> + i + ii + iii + iv + v + vi + vii + viii + ix + x + xi + xii + xlix + xiii + ccclxxxix + xiv + mmmcdlxxxix + xv + xvi +</div> +<div> + i + ii + iii + iv + v + vi + vii + viii + ix + x + xi + xii + xlix + xiii + ccclxxxix + xiv + mmmcdlxxxix + xv + xvi +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-002.html b/testing/web-platform/tests/css/css-lists/counter-002.html new file mode 100644 index 0000000000..5994802c45 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-002.html @@ -0,0 +1,53 @@ +<!doctype html> +<title>CSS Lists and Counters: counter(c, ".", lower-roman)</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counter-002-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +#test { counter-reset: c; } +#test span { counter-increment: c; } +#test span::before { content: counter(c, lower-roman); } +</style> +<p>The following two lines should look the same:</p> +<div id="test"> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span style="counter-reset: c 48"></span> + <span></span> + <span style="counter-reset: c 388"></span> + <span></span> + <span style="counter-reset: c 3488"></span> + <span></span> + <span></span> +</div> +<div> + i + ii + iii + iv + v + vi + vii + viii + ix + x + xi + xii + xlix + xiii + ccclxxxix + xiv + mmmcdlxxxix + xv + xvi +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-003-ref.html b/testing/web-platform/tests/css/css-lists/counter-003-ref.html new file mode 100644 index 0000000000..39d0bb3d14 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-003-ref.html @@ -0,0 +1,45 @@ +<!doctype html> +<title>CSS Lists and Counters test reference: counter(c, ".", upper-roman)</title> +<p>The following two lines should look the same:</p> +<div> + <span>I</span> + <span>II</span> + <span>III</span> + <span>IV</span> + <span>V</span> + <span>VI</span> + <span>VII</span> + <span>VIII</span> + <span>IX</span> + <span>X</span> + <span>XI</span> + <span>XII</span> + <span>XLIX</span> + <span>XIII</span> + <span>CCCLXXXIX</span> + <span>XIV</span> + <span>MMMCDLXXXIX</span> + <span>XV</span> + <span>XVI</span> +</div> +<div> + <span>I</span> + <span>II</span> + <span>III</span> + <span>IV</span> + <span>V</span> + <span>VI</span> + <span>VII</span> + <span>VIII</span> + <span>IX</span> + <span>X</span> + <span>XI</span> + <span>XII</span> + <span>XLIX</span> + <span>XIII</span> + <span>CCCLXXXIX</span> + <span>XIV</span> + <span>MMMCDLXXXIX</span> + <span>XV</span> + <span>XVI</span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-003.html b/testing/web-platform/tests/css/css-lists/counter-003.html new file mode 100644 index 0000000000..60164c1c7e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-003.html @@ -0,0 +1,53 @@ +<!doctype html> +<title>CSS Lists and Counters: counter(c, ".", upper-roman)</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counter-003-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +#test { counter-reset: c; } +#test span { counter-increment: c; } +#test span::before { content: counter(c, upper-roman); } +</style> +<p>The following two lines should look the same:</p> +<div id="test"> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span style="counter-reset: c 48"></span> + <span></span> + <span style="counter-reset: c 388"></span> + <span></span> + <span style="counter-reset: c 3488"></span> + <span></span> + <span></span> +</div> +<div> + <span>I</span> + <span>II</span> + <span>III</span> + <span>IV</span> + <span>V</span> + <span>VI</span> + <span>VII</span> + <span>VIII</span> + <span>IX</span> + <span>X</span> + <span>XI</span> + <span>XII</span> + <span>XLIX</span> + <span>XIII</span> + <span>CCCLXXXIX</span> + <span>XIV</span> + <span>MMMCDLXXXIX</span> + <span>XV</span> + <span>XVI</span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-004-ref.html b/testing/web-platform/tests/css/css-lists/counter-004-ref.html new file mode 100644 index 0000000000..a0e65d480c --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-004-ref.html @@ -0,0 +1,89 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Lists and Counters test reference: counter(c, ".", georgian)</title> +<p>The following two lines should look the same:</p> +<div id="test"> + <span>ა</span> + <span>ბ</span> + <span>გ</span> + <span>დ</span> + <span>ე</span> + <span>ვ</span> + <span>ზ</span> + <span>ჱ</span> + <span>თ</span> + <span>ი</span> + <span>ია</span> + <span>იბ</span> + <span>კ</span> + <span>ლ</span> + <span>მ</span> + <span>ნ</span> + <span>ჲ</span> + <span>ო</span> + <span>პ</span> + <span>ჟ</span> + <span>რ</span> + <span>ს</span> + <span>ტ</span> + <span>ჳ</span> + <span>ფ</span> + <span>ქ</span> + <span>ღ</span> + <span>ყ</span> + <span>შ</span> + <span>ჩ</span> + <span>ც</span> + <span>ძ</span> + <span>წ</span> + <span>ჭ</span> + <span>ხ</span> + <span>ჴ</span> + <span>ჯ</span> + <span>ჰ</span> + <span>ჵ</span> + <span>ჵჰშჟთ</span> +</div> + +<div> + <span>ა</span> + <span>ბ</span> + <span>გ</span> + <span>დ</span> + <span>ე</span> + <span>ვ</span> + <span>ზ</span> + <span>ჱ</span> + <span>თ</span> + <span>ი</span> + <span>ია</span> + <span>იბ</span> + <span>კ</span> + <span>ლ</span> + <span>მ</span> + <span>ნ</span> + <span>ჲ</span> + <span>ო</span> + <span>პ</span> + <span>ჟ</span> + <span>რ</span> + <span>ს</span> + <span>ტ</span> + <span>ჳ</span> + <span>ფ</span> + <span>ქ</span> + <span>ღ</span> + <span>ყ</span> + <span>შ</span> + <span>ჩ</span> + <span>ც</span> + <span>ძ</span> + <span>წ</span> + <span>ჭ</span> + <span>ხ</span> + <span>ჴ</span> + <span>ჯ</span> + <span>ჰ</span> + <span>ჵ</span> + <span>ჵჰშჟთ</span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-004.html b/testing/web-platform/tests/css/css-lists/counter-004.html new file mode 100644 index 0000000000..4ef2ced3ae --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-004.html @@ -0,0 +1,96 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Lists and Counters: counter(c, ".", georgian)</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counter-004-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +#test { counter-reset: c; } +#test span { counter-increment: c; } +#test span::before { content: counter(c, georgian); } +</style> +<p>The following two lines should look the same:</p> +<div id="test"> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span style="counter-reset: c 19"></span> + <span style="counter-reset: c 29"></span> + <span style="counter-reset: c 39"></span> + <span style="counter-reset: c 49"></span> + <span style="counter-reset: c 59"></span> + <span style="counter-reset: c 69"></span> + <span style="counter-reset: c 79"></span> + <span style="counter-reset: c 89"></span> + <span style="counter-reset: c 99"></span> + <span style="counter-reset: c 199"></span> + <span style="counter-reset: c 299"></span> + <span style="counter-reset: c 399"></span> + <span style="counter-reset: c 499"></span> + <span style="counter-reset: c 599"></span> + <span style="counter-reset: c 699"></span> + <span style="counter-reset: c 799"></span> + <span style="counter-reset: c 899"></span> + <span style="counter-reset: c 999"></span> + <span style="counter-reset: c 1999"></span> + <span style="counter-reset: c 2999"></span> + <span style="counter-reset: c 3999"></span> + <span style="counter-reset: c 4999"></span> + <span style="counter-reset: c 5999"></span> + <span style="counter-reset: c 6999"></span> + <span style="counter-reset: c 7999"></span> + <span style="counter-reset: c 8999"></span> + <span style="counter-reset: c 9999"></span> + <span style="counter-reset: c 19998"></span> +</div> +<div> + <span>ა</span> + <span>ბ</span> + <span>გ</span> + <span>დ</span> + <span>ე</span> + <span>ვ</span> + <span>ზ</span> + <span>ჱ</span> + <span>თ</span> + <span>ი</span> + <span>ია</span> + <span>იბ</span> + <span>კ</span> + <span>ლ</span> + <span>მ</span> + <span>ნ</span> + <span>ჲ</span> + <span>ო</span> + <span>პ</span> + <span>ჟ</span> + <span>რ</span> + <span>ს</span> + <span>ტ</span> + <span>ჳ</span> + <span>ფ</span> + <span>ქ</span> + <span>ღ</span> + <span>ყ</span> + <span>შ</span> + <span>ჩ</span> + <span>ც</span> + <span>ძ</span> + <span>წ</span> + <span>ჭ</span> + <span>ხ</span> + <span>ჴ</span> + <span>ჯ</span> + <span>ჰ</span> + <span>ჵ</span> + <span>ჵჰშჟთ</span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-10-ref.html b/testing/web-platform/tests/css/css-lists/counter-10-ref.html new file mode 100644 index 0000000000..b5d15ffa99 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-10-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<p>You should see the number 10 below.</p> +<div>10</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-7-ref.html b/testing/web-platform/tests/css/css-lists/counter-7-ref.html new file mode 100644 index 0000000000..3d1b67228f --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-7-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<p>You should see the number 7 below.</p> +<div>7</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-increment-inside-display-contents.html b/testing/web-platform/tests/css/css-lists/counter-increment-inside-display-contents.html new file mode 100644 index 0000000000..ebfe1774da --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-increment-inside-display-contents.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: counter-increment on child of display:contents</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#counters-without-boxes"> +<link rel="match" href="counter-7-ref.html"> +<style> + .inc { counter-increment: x } + .reset-6 { counter-reset: x 6 } + .contents { display: contents } + .result::before { content: counter(x) } +</style> +<p>You should see the number 7 below.</p> +<div> + <span class="reset-6"></span> + <span class="contents"> + <span class="inc"></span> + </span> + <span class="result"></span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-invalid.htm b/testing/web-platform/tests/css/css-lists/counter-invalid.htm new file mode 100644 index 0000000000..9380159370 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-invalid.htm @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: </title> +<link rel="author" title="Anthony Ramine" href="mailto:n.oxyde@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#counter-functions"> +<link rel="match" href="counter-7-ref.html"> +<style> + div::after { content: " is not " counter(inherit) } +</style> +<p>You should see the number 7 below.</p> +<div>7</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-list-item-2-ref.html b/testing/web-platform/tests/css/css-lists/counter-list-item-2-ref.html new file mode 100644 index 0000000000..9405c845ce --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-list-item-2-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>HTML LI element: explicit scope</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <style> + #a::before { content: "1"; } + #b::before { content: "2"; } + #c::before { content: "2.1"; } + #d::before { content: "2.2"; } + </style> +</head> +<body> +<ol> +<li value="1" id="a"></li> +<li value="2" id="b"></li> +<ol><li value="1" id="c"></li></ol> +<li value="2" id="d"></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-list-item-2.html b/testing/web-platform/tests/css/css-lists/counter-list-item-2.html new file mode 100644 index 0000000000..959ff6660c --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-list-item-2.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>HTML LI element: explicit scope</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element"> + <link rel="help" href="https://drafts.csswg.org/css-lists/#list-item-counter"> + <link rel="match" href="counter-list-item-2-ref.html"> + <style> + li::before { content: counters(list-item,'.'); } + </style> +</head> +<body> +<ol> +<li></li> +<li></li> +<ol><li></li></ol> +<li></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-list-item-3-ref.html b/testing/web-platform/tests/css/css-lists/counter-list-item-3-ref.html new file mode 100644 index 0000000000..926d8df504 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-list-item-3-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>HTML LI element: explicit scope</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <style> + #a::before { content: "1"; } + #b::before { content: "2"; } + #c::before { content: "2.1"; } + #d::before { content: "3"; } + </style> +</head> +<body> +<ol> +<li value="1" id="a"></li> +<li value="2" id="b"></li> +<ol><li value="1" id="c"></li></ol> +<li value="3" id="d"></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-list-item-3.html b/testing/web-platform/tests/css/css-lists/counter-list-item-3.html new file mode 100644 index 0000000000..096fdfbc28 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-list-item-3.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>HTML LI element: explicit scope</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element"> + <link rel="help" href="https://drafts.csswg.org/css-lists/#list-item-counter"> + <link rel="match" href="counter-list-item-3-ref.html"> + <style> + li::before { content: counters(list-item,'.'); } + </style> +</head> +<body> +<ol> +<li></li> +<li></li> +<div><ol><li></li></ol></div> +<li></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-list-item-ref.html b/testing/web-platform/tests/css/css-lists/counter-list-item-ref.html new file mode 100644 index 0000000000..70d2febaae --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-list-item-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE HTML> + +<h2>Test counter(list-item), using generated content</h2> + +<div style="float: left; width: 200px"> + +Ordered lists + +<ol> + <li>1 a 1</li> + <li>2 b 2</li> + <li>3 c 3</li> +</ol> + +<ol> + <li value="30">30 a 30</li> + <li value="31">31 b 31</li> + <li value="32">32 c 32</li> +</ol> + +<ol> + <li>1 a 1</li> + <li>2 b 2</li> + <li value="30">30 c 30</li> + <li value="31">31 d 31</li> + <li value="35">35 e 35</li> + <li value="36">36 f 36</li> +</ol> + +</div> + +<div style="float: left; width: 200px"> + +Reversed ordered lists + +<ol> + <li value="3">3 a 3</li> + <li value="2">2 b 2</li> + <li value="1">1 c 1</li> +</ol> + +<ol> + <li value="30">30 a 30</li> + <li value="29">29 b 29</li> + <li value="28">28 c 28</li> +</ol> + +<ol> + <li value="32">32 a 32</li> + <li value="31">31 b 31</li> + <li value="30">30 c 30</li> + <li value="29">29 d 29</li> + <li value="35">35 e 35</li> + <li value="34">34 f 34</li> +</ol> + +</div> + +<div style="float: left; width: 200px"> + +Unordered lists + +<ul> + <li>1 a 1</li> + <li>2 b 2</li> + <li>3 c 3</li> +</ul> + +<ul> + <li>1 a 1</li> + <li>2 b 2</li> + <li>30 c 30</li> + <li>31 d 31</li> + <li>35 e 35</li> + <li>36 f 36</li> +</ul> + +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-list-item-slot-order-ref.html b/testing/web-platform/tests/css/css-lists/counter-list-item-slot-order-ref.html new file mode 100644 index 0000000000..3d045965de --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-list-item-slot-order-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>HTML LI element: counter order with Shadow DOM and SLOT</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters"> + <style> + li::before { content: counters(list-item,'.') ' '; } + </style> + </head> + <body> + + <ol> + <li>One</li> + <li>Two</li> + <ol> + <li>Two Point One</li> + </ol> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-list-item-slot-order.html b/testing/web-platform/tests/css/css-lists/counter-list-item-slot-order.html new file mode 100644 index 0000000000..09bdb25e0f --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-list-item-slot-order.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>HTML LI element: counter order with Shadow DOM and SLOT</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters"> + <link rel="match" href="counter-list-item-slot-order-ref.html"> + <style> + li::before { content: counters(list-item,'.') ' '; } + </style> + </head> + + <body> + <div id="host"> + <li slot="list3">Two Point One</li> + <li slot="list2">Two</li> + <li slot="list1">One</li> + </div> + + <script> + const shadowRoot = document + .getElementById('host') + .attachShadow({mode: 'open'}); + shadowRoot.innerHTML = ` + <ol> + <slot name="list1"></slot> + <slot name="list2"></slot> + <ol> + <slot name="list3"></slot> + </ol> + </ol> + `; + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-list-item.html b/testing/web-platform/tests/css/css-lists/counter-list-item.html new file mode 100644 index 0000000000..c0b89d49fd --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-list-item.html @@ -0,0 +1,89 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-lists/#list-item-counter"> +<link rel="match" href="counter-list-item-ref.html"> + +<style> +li:before { + content: counter(list-item) " "; +} +li:after { + content: " " counter(list-item); +} +</style> + +<h2>Test counter(list-item), using generated content</h2> + +<div style="float: left; width: 200px"> + +Ordered lists + +<ol> + <li>a</li> + <li>b</li> + <li>c</li> +</ol> + +<ol start="30"> + <li>a</li> + <li>b</li> + <li>c</li> +</ol> + +<ol> + <li>a</li> + <li>b</li> + <li value="30">c</li> + <li>d</li> + <li value="35">e</li> + <li>f</li> +</ol> + +</div> + +<div style="float: left; width: 200px"> + +Reversed ordered lists + +<ol reversed> + <li>a</li> + <li>b</li> + <li>c</li> +</ol> + +<ol start="30" reversed> + <li>a</li> + <li>b</li> + <li>c</li> +</ol> + +<ol reversed> + <li>a</li> + <li>b</li> + <li value="30">c</li> + <li>d</li> + <li value="35">e</li> + <li>f</li> +</ol> + +</div> + +<div style="float: left; width: 200px"> + +Unordered lists + +<ul> + <li>a</li> + <li>b</li> + <li>c</li> +</ul> + +<ul> + <li>a</li> + <li>b</li> + <li value="30">c</li> + <li>d</li> + <li value="35">e</li> + <li>f</li> +</ul> + +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-order-display-contents-ref.html b/testing/web-platform/tests/css/css-lists/counter-order-display-contents-ref.html new file mode 100644 index 0000000000..a876204f66 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-order-display-contents-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS counter order with Shadow DOM and SLOT</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters"> + <style> + .counted { + counter-increment: section; + } + + .counted::before { + content: "C=" counter(section) " "; + } + </style> + </head> + + <body> + + <div> + <div class="counted">One</div> + <div class="counted">Two</div> + <div class="counted">Three</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-order-display-contents.html b/testing/web-platform/tests/css/css-lists/counter-order-display-contents.html new file mode 100644 index 0000000000..70dbc5de8e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-order-display-contents.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS counter order with "display: contents"</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters"> + <link rel="match" href="counter-order-display-contents-ref.html"> + </head> + + <body> + <style> + .counted { + counter-increment: section; + } + + .counted::before { + content: "C=" counter(section) " "; + } + </style> + <div style="display: contents;"> + <div class="counted">One</div> + </div> + <div style="display: contents;"> + <div class="counted">Two</div> + </div> + <div style="display: contents;"> + <div class="counted">Three</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-reset-increment-overflow-underflow-ref.html b/testing/web-platform/tests/css/css-lists/counter-reset-increment-overflow-underflow-ref.html new file mode 100644 index 0000000000..cb86d5713a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-reset-increment-overflow-underflow-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<link rel="author" title="Vitor Roriz" href="https://github.com/vitorroriz"> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#auto-numbering"> +<div> +<h3>2050000000</h3> +<h3>2100000000</h3> +<h3>2100000000</h3> +</div> +<div> +<h3>-2050000000</h3> +<h3>-2100000000</h3> +<h3>-2100000000</h3> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-reset-increment-overflow-underflow.html b/testing/web-platform/tests/css/css-lists/counter-reset-increment-overflow-underflow.html new file mode 100644 index 0000000000..6dc16e25ee --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-reset-increment-overflow-underflow.html @@ -0,0 +1,35 @@ +<!DOCTYPE HTML> +<link rel="author" title="Vitor Roriz" href="https://github.com/vitorroriz"> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#auto-numbering"> +<link rel="match" href="counter-reset-increment-overflow-underflow-ref.html"> +<style> +.overflow { + counter-reset: over-counter 2000000000; +} +.overflow h3:before { + counter-increment: over-counter 50000000; +} +.overflow h3::before { + content: counter(over-counter); +} + +.underflow { + counter-reset: under-counter -2000000000; +} +.underflow h3:before { + counter-increment: under-counter -50000000; +} +.underflow h3::before { + content: counter(under-counter); +} +</style> +<div class="overflow"> +<h3></h3> +<h3></h3> +<h3></h3> +</div> +<div class="underflow"> +<h3></h3> +<h3></h3> +<h3></h3> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-reset-increment-set-display-contents.html b/testing/web-platform/tests/css/css-lists/counter-reset-increment-set-display-contents.html new file mode 100644 index 0000000000..6508df0da1 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-reset-increment-set-display-contents.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: counter-reset, counter-set and counter-increment on display:contents</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#counters-without-boxes"> +<link rel="match" href="counter-7-ref.html"> +<style> + .inc { counter-increment: x } + .reset-6 { counter-reset: x 6 } + .reset-666 { counter-reset: x 666 } + .set-666 { counter-set: x 666 } + .contents { display: contents } + .result::before { content: counter(x) } +</style> +<p>You should see the number 7 below.</p> +<div> + <span class="reset-6"></span> + <span class="contents reset-666 inc"></span> + <span class="contents set-666"></span> + <span class="inc result"></span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-reset-increment-set-display-none.html b/testing/web-platform/tests/css/css-lists/counter-reset-increment-set-display-none.html new file mode 100644 index 0000000000..510fd8b648 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-reset-increment-set-display-none.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: counter-reset, counter-set and counter-increment on display:none</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#counters-without-boxes"> +<link rel="match" href="counter-7-ref.html"> +<style> + .inc { counter-increment: x } + .reset-6 { counter-reset: x 6 } + .reset-666 { counter-reset: x 666 } + .set-666 { counter-set: x 666 } + .none { display: none } + .result::before { content: counter(x) } +</style> +<p>You should see the number 7 below.</p> +<div> + <span class="reset-6"></span> + <span class="none reset-666 inc"></span> + <span class="none set-666"></span> + <span class="inc result"></span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-reset-inside-display-contents.html b/testing/web-platform/tests/css/css-lists/counter-reset-inside-display-contents.html new file mode 100644 index 0000000000..85c137e675 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-reset-inside-display-contents.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: counter-reset on child of display:contents</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#counters-without-boxes"> +<link rel="match" href="counter-7-ref.html"> +<style> + .inc { counter-increment: x } + .reset-6 { counter-reset: x 6 } + .reset-666 { counter-reset: x 6 } + .contents { display: contents } + .result::before { content: counter(x) } +</style> +<p>You should see the number 7 below.</p> +<div> + <span class="reset-6"></span> + <span class="contents"> + <span class="reset-666"></span> + </span> + <span class="inc result"></span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-reset-reversed-list-item-start.html b/testing/web-platform/tests/css/css-lists/counter-reset-reversed-list-item-start.html new file mode 100644 index 0000000000..4c8039b25d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-reset-reversed-list-item-start.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: counter-reset reversed(list-item) with start value</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#counter-reset"> +<link rel="match" href="counter-7-ref.html"> +<style> + .li { display: list-item; } + .reset-reversed { counter-reset: reversed(list-item) 10 } + .result::before { content: counter(list-item) } + ::marker { content: none; } + .li:not(.result) { height: 0 } +</style> +<p>You should see the number 7 below.</p> +<div> + <span class="li reset-reversed"></span> + <span class="li"></span> + <span class="li result"></span> + <span class="li"></span> + <span class="li"></span> + <span class="li"></span> + <span class="li"></span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-reset-reversed-list-item.html b/testing/web-platform/tests/css/css-lists/counter-reset-reversed-list-item.html new file mode 100644 index 0000000000..40706fdf97 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-reset-reversed-list-item.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: counter-reset reversed(list-item)</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#counter-reset"> +<link rel="match" href="counter-7-ref.html"> +<style> + .li { display: list-item; } + .reset-reversed { counter-reset: reversed(list-item) } + .result::before { content: counter(list-item) } + ::marker { content: none; } +</style> +<p>You should see the number 7 below.</p> +<div> + <span class="li result reset-reversed"></span> + <span class="li"></span> + <span class="li"></span> + <span class="li"></span> + <span class="li"></span> + <span class="li"></span> + <span class="li"></span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-reset-reversed-not-list-item-start.html b/testing/web-platform/tests/css/css-lists/counter-reset-reversed-not-list-item-start.html new file mode 100644 index 0000000000..368ed81ee7 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-reset-reversed-not-list-item-start.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: counter-reset reversed(not-list-item) with start value</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#counter-reset"> +<link rel="match" href="counter-7-ref.html"> +<style> + .reset-reversed { counter-reset: reversed(not-list-item) 7 } + .result::before { content: counter(not-list-item) } +</style> +<p>You should see the number 7 below.</p> +<div> + <span class="reset-reversed"></span> + <span></span> + <span class="result"></span> + <span></span> + <span></span> + <span></span> + <span></span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-reset-reversed-not-list-item.html b/testing/web-platform/tests/css/css-lists/counter-reset-reversed-not-list-item.html new file mode 100644 index 0000000000..c492067590 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-reset-reversed-not-list-item.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: counter-reset reversed(not-list-item)</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#counter-reset"> +<link rel="match" href="counter-10-ref.html"> +<style> + span { counter-increment: not-list-item -2; } + .reset-reversed { counter-reset: reversed(not-list-item) } + .result::before { content: counter(not-list-item) } +</style> +<p>You should see the number 10 below.</p> +<div> + <span class="reset-reversed"></span> + <span></span> + <span class="result"></span> + <span></span> + <span></span> + <span></span> + <span></span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counter-set-001-ref.html b/testing/web-platform/tests/css/css-lists/counter-set-001-ref.html new file mode 100644 index 0000000000..301197904a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-set-001-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Lists: basic tests for 'counter-set'</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + </style> +</head> +<body> + +<span>7</span><!-- "7" --> +<span>0</span><!-- "0" --> +<span>7</span><!-- "7" --> +<span>6</span><!-- "6" --> +<span>0</span><!-- "0" --> +<x> + <span>2</span><!-- "2" --> +</x> +<span>3</span><!-- "3" --> +<x> + <span>0</span><!-- "0" --> + <span>2</span><!-- "2" --> + <x> + <span>2.5</span><!-- "2.5" --> + </x> +</x> +<span>3</span><!-- "3" --> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-set-001.html b/testing/web-platform/tests/css/css-lists/counter-set-001.html new file mode 100644 index 0000000000..4e28367798 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-set-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Lists: basic tests for 'counter-set'</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-lists/#propdef-counter-set"> + <link rel="match" href="counter-set-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +span::before { content: counters(n, '.'); } + </style> +</head> +<body> + +<span style="counter-set: n 7"></span><!-- "7" --> +<span style="counter-set: n"></span><!-- "0" --> +<span style="counter-set: n 8 n 7"></span><!-- "7" --> +<span style="counter-set: n 6; counter-increment: n 2"></span><!-- "6" --> +<span style="counter-set: n; counter-increment: n 2"></span><!-- "0" --> +<x style="counter-reset: n 9"> + <span style="counter-set: n 2"></span><!-- "2" --> +</x> +<span style="counter-increment: n"></span><!-- "3" --> +<x style="counter-reset: n 9"> + <span style="counter-set: n"></span><!-- "0" --> + <span style="counter-set: n 2"></span><!-- "2" --> + <x style="counter-reset: n 1"> + <span style="counter-set: n 5"></span><!-- "2.5" --> + </x> +</x> +<span style="counter-increment: n"></span><!-- "3" --> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-set-002-ref.html b/testing/web-platform/tests/css/css-lists/counter-set-002-ref.html new file mode 100644 index 0000000000..26d11b32f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-set-002-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Lists: dynamic update test for 'counter-set'</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> +</head> +<body> +<ol> +<li></li> +<li></li> +<li></li> +<fieldset style="display:list-item"></fieldset> +<li></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-set-002.html b/testing/web-platform/tests/css/css-lists/counter-set-002.html new file mode 100644 index 0000000000..6978a63efa --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-set-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Lists: dynamic update test for 'counter-set'</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-lists/#propdef-counter-set"> + <link rel="match" href="counter-set-002-ref.html"> +</head> +<body> +<noscript>Test not run - javascript required.</noscript> +<ol> +<li></li> +<li id="item" style="counter-increment: list-item 3"></li> +<li></li> +<style> +.f { + display: list-item; +} +</style> +<fieldset id="item4" class="f" style="counter-set: list-item 42"></fieldset> +<li></li> +</ol> + +<script> +document.body.offsetTop; +document.getElementById('item').style= ''; +document.getElementById('item4').style= ''; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-slot-order-ref.html b/testing/web-platform/tests/css/css-lists/counter-slot-order-ref.html new file mode 100644 index 0000000000..a876204f66 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-slot-order-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS counter order with Shadow DOM and SLOT</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters"> + <style> + .counted { + counter-increment: section; + } + + .counted::before { + content: "C=" counter(section) " "; + } + </style> + </head> + + <body> + + <div> + <div class="counted">One</div> + <div class="counted">Two</div> + <div class="counted">Three</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-slot-order-scoping-ref.html b/testing/web-platform/tests/css/css-lists/counter-slot-order-scoping-ref.html new file mode 100644 index 0000000000..c78bb263a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-slot-order-scoping-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS counter order and scope with Shadow DOM and SLOT</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters"> + <style> + .counted { + counter-increment: section; + } + + .reset { + counter-reset: section; + } + + .counted::before { + content: "C=" counter(section) " "; + } + </style> + </head> + + <body> + + <div> + <div class="counted">One</div> + <div class="counted">Two</div> + <div class="counted">Three</div> + <div class="reset">Reset1</div> + <div class="counted">Four</div> + <div class="counted">Five</div> + <div class="counted">Six</div> + <div class="reset">Reset2</div> + <div class="counted">Seven</div> + <div class="counted">Eight</div> + <div class="counted">Nine</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-slot-order-scoping.html b/testing/web-platform/tests/css/css-lists/counter-slot-order-scoping.html new file mode 100644 index 0000000000..ca87761901 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-slot-order-scoping.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS counter order and scope with Shadow DOM and SLOT</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters"> + <link rel="match" href="counter-slot-order-scoping-ref.html"> + </head> + + <body> + <div id="host"> + <div class="counted" slot="content3">Three</div> + <div class="counted" slot="content1">One</div> + + <div class="counted" slot="content6">Six</div> + <div class="counted" slot="content4">Four</div> + + <div style="counter-reset: section;" slot="reset">Reset2</div> + + <div class="counted" slot="content9">Nine</div> + <div class="counted" slot="content7">Seven</div> + </div> + + <script> + function makeStyle() { + let style = document.createElement('style'); + style.textContent = ` + .counted { + counter-increment: section; + } + + .counted::before { + content: "C=" counter(section) " "; + } + `; + return style; + } + document.body.appendChild(makeStyle()); + + const shadowRoot = document + .getElementById('host') + .attachShadow({mode: 'open'}); + shadowRoot.innerHTML = ` + <div> + <slot name="content1"></slot> + <div class="counted" slot="content2">Two</div> + <slot name="content3"></slot> + + <div style="counter-reset: section;">Reset1</div> + + <slot name="content4"></slot> + <div class="counted" slot="content5">Five</div> + <slot name="content6"></slot> + + <slot name="reset"></slot> + + <slot name="content7"></slot> + <div class="counted" slot="content8">Eight</div> + <slot name="content9"></slot> + + </div> + `; + shadowRoot.appendChild(makeStyle()); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counter-slot-order.html b/testing/web-platform/tests/css/css-lists/counter-slot-order.html new file mode 100644 index 0000000000..e481402911 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counter-slot-order.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS counter order and scope with Shadow DOM and SLOT</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters"> + <link rel="match" href="counter-slot-order-ref.html"> + <style> + .counted { + counter-increment: section; + } + + .counted::before { + content: "C=" counter(section) " "; + } + </style> + </head> + + <body> + <div id="host"> + <div class="counted" slot="content3">Three</div> + <div class="counted" slot="content2">Two</div> + <div class="counted" slot="content1">One</div> + </div> + + <script> + const shadowRoot = document + .getElementById('host') + .attachShadow({mode: 'open'}); + shadowRoot.innerHTML = ` + <div> + <slot name="content1"></slot> + <slot name="content2"></slot> + <slot name="content3"></slot> + </div> + `; + </script> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/counters-001-ref.html b/testing/web-platform/tests/css/css-lists/counters-001-ref.html new file mode 100644 index 0000000000..7084485013 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-001-ref.html @@ -0,0 +1,37 @@ +<!doctype html> +<title>CSS Lists and Counters test reference: counters(c, ".", decimal-leading-zero)</title> +<p>The following two lines should look the same:</p> +<div> + 01.01 + 02 + 03 + 04 + 05 + 06 + 07 + 08 + 09 + 10 + 11 + 12 + 12.99 + 13 + 14 +</div> +<div> + 01.01 + 02 + 03 + 04 + 05 + 06 + 07 + 08 + 09 + 10 + 11 + 12 + 12.99 + 13 + 14 +</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-001.html b/testing/web-platform/tests/css/css-lists/counters-001.html new file mode 100644 index 0000000000..a6d85fe4d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-001.html @@ -0,0 +1,46 @@ +<!doctype html> +<title>CSS Lists and Counters: counters(c, ".", decimal-leading-zero)</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counters-001-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +body, #test span:first-child { counter-reset: c; } +p, #test span { counter-increment: c; } +#test span::before { content: counters(c, ".", decimal-leading-zero); } +</style> +<p>The following two lines should look the same:</p> +<div id="test"> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span style="counter-reset: c 98"></span> + <span></span> + <span></span> +</div> +<div> + 01.01 + 02 + 03 + 04 + 05 + 06 + 07 + 08 + 09 + 10 + 11 + 12 + 12.99 + 13 + 14 +</div> + diff --git a/testing/web-platform/tests/css/css-lists/counters-002-ref.html b/testing/web-platform/tests/css/css-lists/counters-002-ref.html new file mode 100644 index 0000000000..25b542f3e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-002-ref.html @@ -0,0 +1,45 @@ +<!doctype html> +<title>CSS Lists and Counters test reference: counters(c, ".", lower-roman)</title> +<p>The following two lines should look the same:</p> +<div> + <span>i.i</span> + <span>ii</span> + <span>iii</span> + <span>iv</span> + <span>v</span> + <span>vi</span> + <span>vii</span> + <span>viii</span> + <span>ix</span> + <span>x</span> + <span>xi</span> + <span>xii</span> + <span>xii.xlix</span> + <span>xiii</span> + <span>xiii.ccclxxxix</span> + <span>xiv</span> + <span>xiv.mmmcdlxxxix</span> + <span>xv</span> + <span>xvi</span> +</div> +<div> + <span>i.i</span> + <span>ii</span> + <span>iii</span> + <span>iv</span> + <span>v</span> + <span>vi</span> + <span>vii</span> + <span>viii</span> + <span>ix</span> + <span>x</span> + <span>xi</span> + <span>xii</span> + <span>xii.xlix</span> + <span>xiii</span> + <span>xiii.ccclxxxix</span> + <span>xiv</span> + <span>xiv.mmmcdlxxxix</span> + <span>xv</span> + <span>xvi</span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-002.html b/testing/web-platform/tests/css/css-lists/counters-002.html new file mode 100644 index 0000000000..9b3618d3bf --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-002.html @@ -0,0 +1,52 @@ +<!doctype html> +<title>CSS Lists and Counters: counters(c, ".", lower-roman)</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counters-002-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +body, #test span:first-child { counter-reset: c; } +p, #test span { counter-increment: c; } +#test span::before { content: counters(c, ".", lower-roman); } +</style> +<p>The following two lines should look the same:</p> +<div id="test"> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span style="counter-reset: c 48"></span> + <span></span> + <span style="counter-reset: c 388"></span> + <span></span> + <span style="counter-reset: c 3488"></span> + <span></span> + <span></span></div> +<div> + <span>i.i</span> + <span>ii</span> + <span>iii</span> + <span>iv</span> + <span>v</span> + <span>vi</span> + <span>vii</span> + <span>viii</span> + <span>ix</span> + <span>x</span> + <span>xi</span> + <span>xii</span> + <span>xii.xlix</span> + <span>xiii</span> + <span>xiii.ccclxxxix</span> + <span>xiv</span> + <span>xiv.mmmcdlxxxix</span> + <span>xv</span> + <span>xvi</span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-003-ref.html b/testing/web-platform/tests/css/css-lists/counters-003-ref.html new file mode 100644 index 0000000000..75655e2dfb --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-003-ref.html @@ -0,0 +1,45 @@ +<!doctype html> +<title>CSS Lists and Counters test reference: counters(c, ".", upper-roman)</title> +<p>The following two lines should look the same:</p> +<div> + <span>I.I</span> + <span>II</span> + <span>III</span> + <span>IV</span> + <span>V</span> + <span>VI</span> + <span>VII</span> + <span>VIII</span> + <span>IX</span> + <span>X</span> + <span>XI</span> + <span>XII</span> + <span>XII.XLIX</span> + <span>XIII</span> + <span>XIII.CCCLXXXIX</span> + <span>XIV</span> + <span>XIV.MMMCDLXXXIX</span> + <span>XV</span> + <span>XVI</span> +</div> +<div> + <span>I.I</span> + <span>II</span> + <span>III</span> + <span>IV</span> + <span>V</span> + <span>VI</span> + <span>VII</span> + <span>VIII</span> + <span>IX</span> + <span>X</span> + <span>XI</span> + <span>XII</span> + <span>XII.XLIX</span> + <span>XIII</span> + <span>XIII.CCCLXXXIX</span> + <span>XIV</span> + <span>XIV.MMMCDLXXXIX</span> + <span>XV</span> + <span>XVI</span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-003.html b/testing/web-platform/tests/css/css-lists/counters-003.html new file mode 100644 index 0000000000..1648081a4d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-003.html @@ -0,0 +1,54 @@ +<!doctype html> +<title>CSS Lists and Counters: counters(c, ".", upper-roman)</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counters-003-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +body, #test span:first-child { counter-reset: c; } +p, #test span { counter-increment: c; } +#test span::before { content: counters(c, ".", upper-roman); } +</style> +<p>The following two lines should look the same:</p> +<div id="test"> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span style="counter-reset: c 48"></span> + <span></span> + <span style="counter-reset: c 388"></span> + <span></span> + <span style="counter-reset: c 3488"></span> + <span></span> + <span></span> +</div> +<div> + <span>I.I</span> + <span>II</span> + <span>III</span> + <span>IV</span> + <span>V</span> + <span>VI</span> + <span>VII</span> + <span>VIII</span> + <span>IX</span> + <span>X</span> + <span>XI</span> + <span>XII</span> + <span>XII.XLIX</span> + <span>XIII</span> + <span>XIII.CCCLXXXIX</span> + <span>XIV</span> + <span>XIV.MMMCDLXXXIX</span> + <span>XV</span> + <span>XVI</span> +</div> + diff --git a/testing/web-platform/tests/css/css-lists/counters-004-ref.html b/testing/web-platform/tests/css/css-lists/counters-004-ref.html new file mode 100644 index 0000000000..070c704738 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-004-ref.html @@ -0,0 +1,88 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Lists and Counters test reference: counters(c, ".", georgian)</title> +<p>The following two lines should look the same:</p> +<div> + <span>ა.ა</span> + <span>ბ</span> + <span>გ</span> + <span>დ</span> + <span>ე</span> + <span>ვ</span> + <span>ზ</span> + <span>ჱ</span> + <span>თ</span> + <span>ი</span> + <span>ია</span> + <span>იბ</span> + <span>იბ.კ</span> + <span>იბ.ლ</span> + <span>იბ.მ</span> + <span>იბ.ნ</span> + <span>იბ.ჲ</span> + <span>იბ.ო</span> + <span>იბ.პ</span> + <span>იბ.ჟ</span> + <span>იბ.რ</span> + <span>იბ.ს</span> + <span>იბ.ტ</span> + <span>იბ.ჳ</span> + <span>იბ.ფ</span> + <span>იბ.ქ</span> + <span>იბ.ღ</span> + <span>იბ.ყ</span> + <span>იბ.შ</span> + <span>იბ.ჩ</span> + <span>იბ.ც</span> + <span>იბ.ძ</span> + <span>იბ.წ</span> + <span>იბ.ჭ</span> + <span>იბ.ხ</span> + <span>იბ.ჴ</span> + <span>იბ.ჯ</span> + <span>იბ.ჰ</span> + <span>იბ.ჵ</span> + <span>იბ.ჵჰშჟთ</span> +</div> +<div> + <span>ა.ა</span> + <span>ბ</span> + <span>გ</span> + <span>დ</span> + <span>ე</span> + <span>ვ</span> + <span>ზ</span> + <span>ჱ</span> + <span>თ</span> + <span>ი</span> + <span>ია</span> + <span>იბ</span> + <span>იბ.კ</span> + <span>იბ.ლ</span> + <span>იბ.მ</span> + <span>იბ.ნ</span> + <span>იბ.ჲ</span> + <span>იბ.ო</span> + <span>იბ.პ</span> + <span>იბ.ჟ</span> + <span>იბ.რ</span> + <span>იბ.ს</span> + <span>იბ.ტ</span> + <span>იბ.ჳ</span> + <span>იბ.ფ</span> + <span>იბ.ქ</span> + <span>იბ.ღ</span> + <span>იბ.ყ</span> + <span>იბ.შ</span> + <span>იბ.ჩ</span> + <span>იბ.ც</span> + <span>იბ.ძ</span> + <span>იბ.წ</span> + <span>იბ.ჭ</span> + <span>იბ.ხ</span> + <span>იბ.ჴ</span> + <span>იბ.ჯ</span> + <span>იბ.ჰ</span> + <span>იბ.ჵ</span> + <span>იბ.ჵჰშჟთ</span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-004.html b/testing/web-platform/tests/css/css-lists/counters-004.html new file mode 100644 index 0000000000..6b1b1c850d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-004.html @@ -0,0 +1,95 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Lists and Counters: counters(c, ".", georgian)</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counters-004-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +body, #test span:first-child { counter-reset: c; } +p, #test span { counter-increment: c; } +#test span::before { content: counters(c, ".", georgian); }</style> +<p>The following two lines should look the same:</p> +<div id="test"> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span style="counter-reset: c 19"></span> + <span style="counter-reset: c 29"></span> + <span style="counter-reset: c 39"></span> + <span style="counter-reset: c 49"></span> + <span style="counter-reset: c 59"></span> + <span style="counter-reset: c 69"></span> + <span style="counter-reset: c 79"></span> + <span style="counter-reset: c 89"></span> + <span style="counter-reset: c 99"></span> + <span style="counter-reset: c 199"></span> + <span style="counter-reset: c 299"></span> + <span style="counter-reset: c 399"></span> + <span style="counter-reset: c 499"></span> + <span style="counter-reset: c 599"></span> + <span style="counter-reset: c 699"></span> + <span style="counter-reset: c 799"></span> + <span style="counter-reset: c 899"></span> + <span style="counter-reset: c 999"></span> + <span style="counter-reset: c 1999"></span> + <span style="counter-reset: c 2999"></span> + <span style="counter-reset: c 3999"></span> + <span style="counter-reset: c 4999"></span> + <span style="counter-reset: c 5999"></span> + <span style="counter-reset: c 6999"></span> + <span style="counter-reset: c 7999"></span> + <span style="counter-reset: c 8999"></span> + <span style="counter-reset: c 9999"></span> + <span style="counter-reset: c 19998"></span> +</div> +<div> + <span>ა.ა</span> + <span>ბ</span> + <span>გ</span> + <span>დ</span> + <span>ე</span> + <span>ვ</span> + <span>ზ</span> + <span>ჱ</span> + <span>თ</span> + <span>ი</span> + <span>ია</span> + <span>იბ</span> + <span>იბ.კ</span> + <span>იბ.ლ</span> + <span>იბ.მ</span> + <span>იბ.ნ</span> + <span>იბ.ჲ</span> + <span>იბ.ო</span> + <span>იბ.პ</span> + <span>იბ.ჟ</span> + <span>იბ.რ</span> + <span>იბ.ს</span> + <span>იბ.ტ</span> + <span>იბ.ჳ</span> + <span>იბ.ფ</span> + <span>იბ.ქ</span> + <span>იბ.ღ</span> + <span>იბ.ყ</span> + <span>იბ.შ</span> + <span>იბ.ჩ</span> + <span>იბ.ც</span> + <span>იბ.ძ</span> + <span>იბ.წ</span> + <span>იბ.ჭ</span> + <span>იბ.ხ</span> + <span>იბ.ჴ</span> + <span>იბ.ჯ</span> + <span>იბ.ჰ</span> + <span>იბ.ჵ</span> + <span>იბ.ჵჰშჟთ</span> +</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-container-crash.html b/testing/web-platform/tests/css/css-lists/counters-container-crash.html new file mode 100644 index 0000000000..d195db937c --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-container-crash.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Crash in line layout in Chrome with quotes and container queries</title> +<link rel="help" href="http://crbug.com/1505164"> +<style> +#quote { + container-type: size; + display: inline-block; +} +div { + appearance: auto; + container-type: size; +} +</style> +<q></q> +<div> + <q id="quote"></q> + <q></q> +</div> + diff --git a/testing/web-platform/tests/css/css-lists/counters-scope-001-ref.html b/testing/web-platform/tests/css/css-lists/counters-scope-001-ref.html new file mode 100644 index 0000000000..e7c3abf510 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-scope-001-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>CSS Lists and Counters test reference: counters scope</title> +<p>The following two lines should be the same:</p> +<div> + 1 2 1 1 1 1 + 1 3 3 1 1 1 +</div> +<div> + 1 2 1 1 1 1 + 1 3 3 1 1 1 +</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-scope-001.html b/testing/web-platform/tests/css/css-lists/counters-scope-001.html new file mode 100644 index 0000000000..2ea72753bd --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-scope-001.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>CSS Lists and Counters: counters scope</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counters-scope-001-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +.scope { counter-reset: c 1; } +.scope::before, .scope::after { content: counter(c); } +.c::before { content: counter(c); } +.one::before { counter-reset: c 2; } +.two { counter-reset: c 3; } +</style> +<p>The following two lines should be the same:</p> +<!-- counter on the first span with class "c" is 1, as it inherits the counter from class="scope", as a direct ancestor --> +<div> + <span class="scope"> + <span class="one c"> + <span class="c"></span> + </span> + <span class="c"></span> + </span> + <span class="c"></span> + <span class="scope"> + <span class="two c"> + <span class="c"></span> + </span> + <span class="c"></span> + </span> + <span class="c"></span> +</div> +<div> + 1 2 1 1 1 1 + 1 3 3 1 1 1 +</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-scope-002-ref.html b/testing/web-platform/tests/css/css-lists/counters-scope-002-ref.html new file mode 100644 index 0000000000..5d3b3bdefd --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-scope-002-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Lists and Counters test reference: counters scope</title> +<p>The following two lines should be the same:</p> +<div>B1- B2- B2.1- B2.2-A2.3- B2.4-A2.5- A2.6- B3- B4-A5- A6- A7- A8-</div> +<div>B1- B2- B2.1- B2.2-A2.3- B2.4-A2.5- A2.6- B3- B4-A5- A6- A7- A8-</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-scope-002.html b/testing/web-platform/tests/css/css-lists/counters-scope-002.html new file mode 100644 index 0000000000..8261d55971 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-scope-002.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>CSS Lists and Counters: counters scope</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counters-scope-002-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +#scope, span#reset { counter-reset: c 0; } +span::before { counter-increment: c 1; content: "B" counters(c,".") "-" } +span::after { counter-increment: c 1; content: "A" counters(c,".") "-" } +</style> +<p>The following two lines should be the same:</p> +<div id="scope"> + <span> + <span> + <span id="reset"> + <span></span> + <span></span> + </span> + <span> + <span></span> + </span> + </span> + </span> +</div> +<div>B1- B2- B2.1- B2.2-A2.3- B2.4-A2.5- A2.6- B3- B4-A5- A6- A7- A8-</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-scope-003-ref.html b/testing/web-platform/tests/css/css-lists/counters-scope-003-ref.html new file mode 100644 index 0000000000..d391da8c72 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-scope-003-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Lists and Counters test reference: counters scope</title> +<p>The following two lines should be the same:</p> +<div>B1- B1.1- B2-A3- A4- A5-</div> +<div>B1- B1.1- B2-A3- A4- A5-</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-scope-003.html b/testing/web-platform/tests/css/css-lists/counters-scope-003.html new file mode 100644 index 0000000000..f7b94e2863 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-scope-003.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>CSS Lists and Counters: counters scope</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counters-scope-003-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +body, span#reset:before { counter-reset: c 0; } +span::before { counter-increment: c 1; content: "B" counters(c,".") "-" } +span::after { counter-increment: c 1; content: "A" counters(c,".") "-" } +</style> +<p>The following two lines should be the same:</p> +<div> + <span> + <span id="reset"> + <span></span> + </span> + </span> +</div> +<div>B1- B1.1- B2-A3- A4- A5-</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-scope-004-ref.html b/testing/web-platform/tests/css/css-lists/counters-scope-004-ref.html new file mode 100644 index 0000000000..468739cfcb --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-scope-004-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Lists and Counters test reference: counters scope</title> +<p>The following two lines should be the same:</p> +<div>1 1 R 2 3</div> +<div>1 1 R 2 3</div> diff --git a/testing/web-platform/tests/css/css-lists/counters-scope-004.html b/testing/web-platform/tests/css/css-lists/counters-scope-004.html new file mode 100644 index 0000000000..4a60c4ca0b --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/counters-scope-004.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>CSS Lists and Counters: counters scope</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> +<link rel="match" href="counters-scope-004-ref.html"> +<meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> +<style type="text/css"> +.reset { counter-reset: c; } +.rb::before { counter-reset: c; content: "R"; } +.use { counter-increment: c; } +.use::before { content: counters(c, ".") " "; } +</style> +<p>The following two lines should be the same:</p> +<!-- As rb creates counter only on ::before, the first span with class "use" --> +<!-- inside the "rb" will inherit its counter from second "reset" as span "rb" --> +<!-- will inherit it from previous sibling which is second "reset" --> +<div> + <span class="reset"></span> + <span class="use"></span> + <span class="reset"></span> + <span class="use"></span> + <span class="rb"> + <span class="use"></span> + <span class="reset"></span> + <span class="use"></span> + </span> +</div> +<div>1 1 R 2 3</div> diff --git a/testing/web-platform/tests/css/css-lists/crashtests/chrome-bug-1377573.html b/testing/web-platform/tests/css/css-lists/crashtests/chrome-bug-1377573.html new file mode 100644 index 0000000000..3419a23ee4 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/crashtests/chrome-bug-1377573.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Chrome crash with nested ::after::marker with failing list-style-image</title> +<link rel="help" href="https://crbug.com/1377573"> +<style> + :is(body, html)::after { + display: list-item; + content: " "; + } + :root { list-style-image:url('.'); } +</style> +<body> + diff --git a/testing/web-platform/tests/css/css-lists/crashtests/chrome-counter-in-multicol-details-crash.html b/testing/web-platform/tests/css/css-lists/crashtests/chrome-counter-in-multicol-details-crash.html new file mode 100644 index 0000000000..d992f0a1d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/crashtests/chrome-counter-in-multicol-details-crash.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>Crash removing element before counter inside multicol details element</title> +<link rel="help" href="https://crbug.com/1310295"> +<style> + #counter { counter-reset:counter; } + #counter::after { content: counter(foo); } +</style> +<details style="columns:2;" open> + <span></span> + <div id="removeme"></div> + <span id="counter"></span> +</details> +<script> + document.body.offsetTop; + removeme.parentNode.removeChild(removeme); +</script> diff --git a/testing/web-platform/tests/css/css-lists/crashtests/chrome-legacy-propagation-crash.html b/testing/web-platform/tests/css/css-lists/crashtests/chrome-legacy-propagation-crash.html new file mode 100644 index 0000000000..8ec14ce090 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/crashtests/chrome-legacy-propagation-crash.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>HTML root list-item crash during direction-propagation from body</title> +<link rel="help" href="https://crbug.com/1294531"> +<style> + html { + display: list-item; + direction: rtl; + } + body { + direction: ltr; + } + div { + display:table-column-group; + column-count: 1; + } +</style> +<p>Pass if no crash.</p> +<div></div> diff --git a/testing/web-platform/tests/css/css-lists/crashtests/chrome-legacy-propagation-remove-body-crash.html b/testing/web-platform/tests/css/css-lists/crashtests/chrome-legacy-propagation-remove-body-crash.html new file mode 100644 index 0000000000..94b57285e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/crashtests/chrome-legacy-propagation-remove-body-crash.html @@ -0,0 +1,21 @@ +<!doctype html> +<title>BODY list-item crash inserting extra BODY</title> +<link rel="help" href="https://crbug.com/1298917"> +<style> + body { + display: list-item; + } + div { + /* Multicol and table display to trigger legacy layout */ + display: table-row-group; + column-count: 1; + } +</style> +<body> + <p>Pass if no crash.</p> + <div></div> +</body> +<script> + document.documentElement.offsetTop; + document.documentElement.insertBefore(document.createElement("body"), document.body); +</script> diff --git a/testing/web-platform/tests/css/css-lists/crashtests/firefox-bug-1715631.html b/testing/web-platform/tests/css/css-lists/crashtests/firefox-bug-1715631.html new file mode 100644 index 0000000000..d7dedd929e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/crashtests/firefox-bug-1715631.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1715631"> + <style> + * { + font-size: smaller; + padding-top: 187645318.1652209ch; + shape-outside: border-box polygon(evenodd, 1% 65395.491970784125pt); + list-style-position: inside + } + + UL { + float: left; + } + + LI { + margin-right: 574978474vmin; + padding: 4241930411% 790762950% 2269921908.8844213ch; + line-height: 4017103816.5532737; + } + </style> + <script> + document.addEventListener("DOMContentLoaded", () => { + const ul_0 = document.createElement("ul") + const ul_1 = document.createElement("ul") + const li_0 = document.createElement("li") + const li_1 = document.createElement("li") + const form_0 = document.createElement("form") + const big_0 = document.createElement("big") + const var_0 = document.createElement("var") + form_0.appendChild(ul_1) + var_0.innerText = "â…9ó ’¾\r&f酀𑞚ﷺ0ó ©žÌŸð›Ÿ’ó Žƒð…Ûš-â€Œó Ÿœ]Û°4áðŸ ó ™¸Ùªð©‘ó œê9\bVó ³¥X>>=ó ¾µ9ð¡½¥ó ™´ê›¡Ù ó ›™â€Ž\n\r\0Ùªæ“꣦҄â¡ó ¯ð›¬³Yó €§ã¨¢/*ó «—*Ⱥ\r\nð¯™ð›™”𠰖🉌\0&=゙𯶫᩿ð£‚á岇ëŸç—€g2*Ù á¿3L𖨡j㼚𯄲" + var_0.setAttribute("lang", "ko") + big_0.appendChild(var_0) + li_1.appendChild(form_0) + li_1.appendChild(big_0) + ul_0.appendChild(li_0) + ul_0.appendChild(li_1) + document.documentElement.appendChild(ul_0) + }) + </script> +</head> +</html> diff --git a/testing/web-platform/tests/css/css-lists/css-lists-no-interpolation.html b/testing/web-platform/tests/css/css-lists/css-lists-no-interpolation.html new file mode 100644 index 0000000000..a0e1005ef0 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/css-lists-no-interpolation.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'counter-increment', + from: 'initial', + to: 'add 123' +}); + +test_no_interpolation({ + property: 'counter-increment', + from: 'add 5', + to: 'add 123' +}); + +test_no_interpolation({ + property: 'counter-reset', + from: 'initial', + to: 'add 123' +}); + +test_no_interpolation({ + property: 'counter-set', + from: 'initial', + to: 'add 123' +}); + +test_no_interpolation({ + property: 'list-style-position', + from: 'initial', + to: 'inside' +}); + +test_no_interpolation({ + property: 'list-style-type', + from: 'initial', + to: 'square' +}); +</script> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006a.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006a.html new file mode 100644 index 0000000000..028f1fe199 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006a.html @@ -0,0 +1,45 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-006-ref.html"> +<meta name="assert" content="The last counter-increment value determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +ol[reversed] { + counter-reset: reversed(foo); +} +li { + counter-increment: foo -1; +} +</style> +<ol reversed> + <li style="counter-increment: foo -2"> + <li style="counter-increment: foo -2"> + <li style="counter-increment: foo -2"> +</ol> +<ol reversed> + <li style="counter-increment: foo -3"> + <li style="counter-increment: foo -1"> + <li style="counter-increment: foo -8"> +</ol> +<ol reversed> + <li style="counter-increment: foo 2"> + <li style="counter-increment: foo 2"> + <li style="counter-increment: foo 2"> +</ol> +<ol reversed> + <li style="counter-increment: foo 3"> + <li style="counter-increment: foo 1"> + <li style="counter-increment: foo 8"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006b.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006b.html new file mode 100644 index 0000000000..21d5067109 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006b.html @@ -0,0 +1,45 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-006-ref.html"> +<meta name="assert" content="The last counter-increment value determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol { + counter-reset: reversed(foo); +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +li { + counter-increment: foo -1; +} +</style> +<ol> + <li style="counter-increment: foo -2"> + <li style="counter-increment: foo -2"> + <li style="counter-increment: foo -2"> +</ol> +<ol> + <li style="counter-increment: foo -3"> + <li style="counter-increment: foo -1"> + <li style="counter-increment: foo -8"> +</ol> +<ol> + <li style="counter-increment: foo 2"> + <li style="counter-increment: foo 2"> + <li style="counter-increment: foo 2"> +</ol> +<ol> + <li style="counter-increment: foo 3"> + <li style="counter-increment: foo 1"> + <li style="counter-increment: foo 8"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006c.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006c.html new file mode 100644 index 0000000000..c684e73181 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006c.html @@ -0,0 +1,57 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-006-ref.html"> +<meta name="assert" content="A zero-valued counter-increment does not affect the counter start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +div, span { + counter-increment: foo 0; +} +ol[reversed] { + counter-reset: reversed(foo) reversed(list-item); +} +li { + counter-increment: foo -1 list-item -1; +} +</style> +<ol reversed> + <div></div> + <li style="counter-increment: foo -2"><span></span><span></span></li> + <li style="counter-increment: foo -2"><span></span></li> + <li style="counter-increment: foo -2"><span></span></li> + <div></div> + <div></div> + <div></div> +</ol> +<ol reversed> + <div></div> + <li style="counter-increment: foo -3"></li> + <div></div> + <li style="counter-increment: foo -1"><span></span></li> + <li style="counter-increment: foo -8"></li> + <div></div> +</ol> +<ol reversed> + <div></div> + <li style="counter-increment: foo 2"></li> + <li style="counter-increment: foo 2"></li> + <li style="counter-increment: foo 2"></li> +</ol> +<ol reversed> + <li style="counter-increment: foo 3"></li> + <li style="counter-increment: foo 1"></li> + <li style="counter-increment: foo 8"></li> + <div></div> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006d.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006d.html new file mode 100644 index 0000000000..0e9f53272b --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006d.html @@ -0,0 +1,71 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-006-ref.html"> +<meta name="assert" content="Reversed value initialization works also for sibling scopes."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +ol[reversed] { + counter-reset: reversed(foo); +} +li { + counter-increment: foo -1; +} +ol[reversed] { + margin-bottom: 0; +} +ol.no-counter { + counter-reset: blah; + margin-top: 0; +} +ol.no-counter::before { + content: none; +} +div, span { + counter-increment: foo 0; +} +</style> +<ol reversed></ol> +<ol class="no-counter"> + <div></div> + <li style="counter-increment: foo -2"><span></span><span></span></li> + <li style="counter-increment: foo -2"><span></span></li> + <li style="counter-increment: foo -2"><span></span></li> + <div></div> + <div></div> + <div></div> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <div></div> + <li style="counter-increment: foo -3"></li> + <div></div> + <li style="counter-increment: foo -1"><span></span></li> + <li style="counter-increment: foo -8"></li> + <div></div> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <div></div> + <li style="counter-increment: foo 2"></li> + <li style="counter-increment: foo 2"></li> + <li style="counter-increment: foo 2"></li> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <li style="counter-increment: foo 3"></li> + <li style="counter-increment: foo 1"></li> + <li style="counter-increment: foo 8"></li> + <div></div> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006e.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006e.html new file mode 100644 index 0000000000..58ff2b83e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-006e.html @@ -0,0 +1,59 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-006-ref.html"> +<meta name="assert" content="Reversed value initialization works also for sibling scopes."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +ol[reversed] { + counter-reset: reversed(foo); +} +li { + counter-increment: foo -1; +} +ol[reversed] { + margin-bottom: 0; +} +ol.no-counter { + counter-reset: blah; + margin-top: 0; +} +ol.no-counter::before { + content: none; +} +</style> +<ol reversed></ol> +<ol class="no-counter"> + <li style="counter-increment: foo -2"></li> + <li style="counter-increment: foo -2"></li> + <li style="counter-increment: foo -2"></li> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <li style="counter-increment: foo -3"></li> + <li style="counter-increment: foo -1"></li> + <li style="counter-increment: foo -8"></li> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <li style="counter-increment: foo 2"></li> + <li style="counter-increment: foo 2"></li> + <li style="counter-increment: foo 2"></li> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <li style="counter-increment: foo 3"></li> + <li style="counter-increment: foo 1"></li> + <li style="counter-increment: foo 8"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-007a.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-007a.html new file mode 100644 index 0000000000..a8390abcb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-007a.html @@ -0,0 +1,68 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-007-ref.html"> +<meta name="assert" content="The last counter-increment value determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +ol[reversed] { + counter-reset: reversed(foo); +} +li { + counter-increment: foo -1; +} +</style> +<ol reversed> + <li style="counter-increment: foo -2"> + <li style="counter-increment: foo -2"> + <ol reversed> + <li style="counter-increment: foo -3"> + <li style="counter-increment: foo -1"> + <li style="counter-increment: foo -8"> + </ol> + </li> + <li style="counter-increment: foo -2"> +</ol> +<ol reversed> + <li style="counter-increment: foo -3"> + <li style="counter-increment: foo -1"> + <ol reversed> + <li style="counter-increment: foo -2"> + <li style="counter-increment: foo -2"> + <li style="counter-increment: foo -2"> + </ol> + </li> + <li style="counter-increment: foo -8"> +</ol> +<ol reversed> + <li style="counter-increment: foo 2"> + <li style="counter-increment: foo 2"> + <li style="counter-increment: foo 2"> + <ol reversed> + <li style="counter-increment: foo 3"> + <li style="counter-increment: foo 1"> + <li style="counter-increment: foo 8"> + </ol> + </li> +</ol> +<ol reversed> + <ol reversed> + <li style="counter-increment: foo 3"> + <li style="counter-increment: foo 1"> + <li style="counter-increment: foo 8"> + </ol> + <li style="counter-increment: foo 3"> + <li style="counter-increment: foo 1"> + <li style="counter-increment: foo 8"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-007b.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-007b.html new file mode 100644 index 0000000000..defbc0e26f --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-007b.html @@ -0,0 +1,86 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-007-ref.html"> +<meta name="assert" content="A zero-valued counter-increment does not affect the counter start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +div, span { + counter-increment: foo 0; +} +ol[reversed] { + counter-reset: reversed(foo); +} +li { + counter-increment: foo -1; +} +</style> +<ol reversed> + <div></div> + <li style="counter-increment: foo -2"></li> + <div></div> + <li style="counter-increment: foo -2"> + <ol reversed> + <div><span></span></div> + <li style="counter-increment: foo -3"><span></span></li> + <div></div> + <li style="counter-increment: foo -1"></li> + <li style="counter-increment: foo -8"><span></span></li> + <div><span></span></div> + </ol> + <div></div> + </li> + <li style="counter-increment: foo -2"></li> + <div></div> +</ol> +<ol reversed> + <li style="counter-increment: foo -3"></li> + <div></div> + <li style="counter-increment: foo -1"> + <ol reversed> + <li style="counter-increment: foo -2"><span><span></span></span></li> + <li style="counter-increment: foo -2"><span></span></li> + <li style="counter-increment: foo -2"></li> + </ol> + </li> + <div></div> + <li style="counter-increment: foo -8"></li> +</ol> +<ol reversed> + <li style="counter-increment: foo 2"></li> + <li style="counter-increment: foo 2"></li> + <li style="counter-increment: foo 2"> + <div></div> + <ol reversed> + <li style="counter-increment: foo 3"><span></span></li> + <li style="counter-increment: foo 1"><span></span></li> + <li style="counter-increment: foo 8"><span></span></li> + </ol> + </li> + <div></div> + <div></div> + <div></div> +</ol> +<ol reversed> + <ol reversed> + <li style="counter-increment: foo 3"></li> + <li style="counter-increment: foo 1"></li> + <li style="counter-increment: foo 8"></li> + <div></div> + <div></div> + </ol> + <li style="counter-increment: foo 3"><span><span></span></span></li> + <li style="counter-increment: foo 1"><span><span></span></span></li> + <li style="counter-increment: foo 8"><span><span></span></span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-008a.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-008a.html new file mode 100644 index 0000000000..9a597139a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-008a.html @@ -0,0 +1,47 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-008-ref.html"> +<meta name="assert" content="The last (non-zero) counter-increment value before the first counter-set determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +ol[reversed] { + counter-reset: reversed(foo); +} +li { + counter-increment: foo -1; +} +</style> +<ol reversed> + <li style="counter-increment: foo -2"> + <li style="counter-increment: foo -2"> + <li style="counter-set: foo 5"><!-- note: there's an implicit -1 increment here --> + <li style="counter-increment: foo -2"> +</ol> +<ol reversed> + <li style="counter-increment: foo -3"> + <li style="counter-increment: foo -2; counter-set: foo 5"> + <li style="counter-increment: foo -1"> + <li style="counter-increment: foo -8"> +</ol> +<ol reversed> + <li style="counter-increment: foo 2; counter-set: foo 5"> + <li style="counter-increment: foo 2"> + <li style="counter-increment: foo 2"> +</ol> +<ol reversed> + <li style="counter-increment: foo 3"> + <li style="counter-increment: foo 1"> + <li style="counter-increment: foo 8; counter-set: foo 5"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-008b.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-008b.html new file mode 100644 index 0000000000..b7d4d569aa --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-008b.html @@ -0,0 +1,65 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-008-ref.html"> +<meta name="assert" content="The last (non-zero) counter-increment value before the first counter-set determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +div, span { + counter-increment: foo 0; +} +ol[reversed] { + counter-reset: reversed(list-item) 999 reversed(foo); +} +li { + counter-increment: list-item 999 foo -1; +} +</style> +<ol reversed> + <li style="counter-increment: foo -2"></li> + <div style="counter-increment: foo -1"></div> + <li style="counter-increment: foo -1"></li> + <li style="counter-increment: foo 0; counter-set: foo 5"></li> + <li style="counter-increment: foo -2"></li> +</ol> +<ol reversed> + <div></div> + <div style="counter-increment: foo -1"></div> + <div></div> + <li style="counter-increment: foo -2"><span></span></li> + <div></div> + <li style="counter-increment: foo 0; counter-set: foo 5"><span></span></li> + <li style="counter-increment: foo -1"><span></span></li> + <li style="counter-increment: foo -8"><span></span></li> + <div style="counter-increment: foo 11; counter-set: foo 99"></div> +</ol> +<ol reversed> + <div></div> + <li style="counter-increment: foo 2; counter-set: foo 5"></li> + <div></div> + <li style="counter-increment: foo 2"></li> + <div></div> + <li style="counter-increment: foo 2"></li> + <div></div> +</ol> +<ol reversed> + <li style="counter-increment: foo 3"></li> + <li style="counter-increment: foo 1"></li> + <div></div> + <div style="counter-increment: foo 4"></div> + <div></div> + <div></div> + <li style="counter-increment: foo 0; counter-set: foo 5"><span></span></li> + <div style="counter-increment: foo 11; counter-set: foo 99"></div> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-009a.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-009a.html new file mode 100644 index 0000000000..742d8bf0f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-009a.html @@ -0,0 +1,68 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-009-ref.html"> +<meta name="assert" content="The last (non-zero) counter-increment value before the first counter-set determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +ol[reversed] { + counter-reset: reversed(foo); +} +li { + counter-increment: foo -1; +} +</style> +<ol reversed> + <li style="counter-increment: foo -2"> + <li style="counter-increment: foo -2; counter-set: foo 5"> + <ol reversed> + <li style="counter-increment: foo -3"> + <li style="counter-increment: foo -1; counter-set: foo 5"> + <li style="counter-increment: foo -8"> + </ol> + </li> + <li style="counter-increment: foo -2"> +</ol> +<ol reversed> + <li style="counter-increment: foo -3; counter-set: foo 5"> + <li style="counter-increment: foo -1"> + <ol reversed> + <li style="counter-increment: foo -2; counter-set: foo 5"> + <li style="counter-increment: foo -2"> + <li style="counter-increment: foo -2"> + </ol> + </li> + <li style="counter-increment: foo -8"> +</ol> +<ol reversed> + <li style="counter-increment: foo 2"> + <li style="counter-increment: foo 2; counter-set: foo 5"> + <li style="counter-increment: foo 2"> + <ol reversed> + <li style="counter-increment: foo 3"> + <li style="counter-increment: foo 1"> + <li style="counter-increment: foo 8; counter-set: foo 5"> + </ol> + </li> +</ol> +<ol reversed> + <ol reversed> + <li style="counter-increment: foo 3; counter-set: foo 5"> + <li style="counter-increment: foo 1"> + <li style="counter-increment: foo 8"> + </ol> + <li style="counter-increment: foo 3"> + <li style="counter-increment: foo 1"> + <li style="counter-increment: foo 8; counter-set: foo 5"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/foo-counter-reversed-009b.html b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-009b.html new file mode 100644 index 0000000000..852297c898 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/foo-counter-reversed-009b.html @@ -0,0 +1,95 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-009-ref.html"> +<meta name="assert" content="The last (non-zero) counter-increment value before the first counter-set determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +::marker { + content: counter(foo) ". "; +} +ol::before, li::before { + content: counters(foo,"."); +} +div, span { + counter-increment: foo 0; +} +.pure-set { + counter-increment: foo 0; + counter-set: foo 5; +} +ol[reversed] { + counter-reset: reversed(foo); +} +li { + counter-increment: foo -1 list-item 0; +} +</style> +<ol reversed> + <li style="counter-increment: foo -2"></li> + <div></div> + <li class="pure-set"> + <ol reversed> + <li style="counter-increment: foo -3"></li> + <div style="counter-increment: foo -3"></div> + <div style="counter-increment: foo 1"></div> + <div></div> + <li class="pure-set"></li> + <li style="counter-increment: foo -8"></li> + </ol> + </li> + <div></div> + <li style="counter-increment: foo -2"></li> +</ol> +<ol reversed> + <div style="counter-increment: foo 1"></div> + <div style="counter-increment: foo -2"></div> + <li class="pure-set"></li> + <li style="counter-increment: foo -1"></li> + <ol reversed> + <div><span></span></div> + <div style="counter-increment: foo -1"></div> + <li class="pure-set"><span></span></li> + <div></div> + <li style="counter-increment: foo -2"><span></span></li> + <div></div> + <li style="counter-increment: foo -2"><span></span></li> + <div><span></span></div> + </ol> + </li> + <li style="counter-increment: foo -8"></li> +</ol> +<ol reversed> + <div><span></span></div> + <li style="counter-increment: foo 2"></li> + <li class="pure-set"></li> + <div><span></span></div> + <li style="counter-increment: foo 2"></li> + <ol reversed> + <li style="counter-increment: foo 3"></li> + <li style="counter-increment: foo 1"></li> + <div style="counter-increment: foo 4"></div> + <div><span></span></div> + <li class="pure-set"></li> + <div><span></span></div> + </ol> + </li> +</ol> +<ol reversed> + <ol reversed> + <div style="counter-increment: foo -1"></div> + <div style="counter-increment: foo 2"></div> + <li class="pure-set"></li> + <li style="counter-increment: foo 1"></li> + <li style="counter-increment: foo 8"></li> + </ol> + <li style="counter-increment: foo 3"></li> + <li style="counter-increment: foo 1"></li> + <div style="counter-increment: foo 4"></div> + <li class="pure-set"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/inherit-overwrites.html b/testing/web-platform/tests/css/css-lists/inherit-overwrites.html new file mode 100644 index 0000000000..d1f8072993 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inherit-overwrites.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance replaces existing value of counter properties</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#property-index"> +<meta name="assert" content="Inheritance replaces existing value of counter properties."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #container { + counter-reset: first 1; + counter-increment: second 2; + counter-set: third 3; + } + .target { + counter-reset: fourth 4; + counter-increment: fifth 5; + counter-set: sixth 6; + } +</style> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +'use strict'; +const container = document.getElementById('container'); + +// 'counter-set' can be added. +for (let property of ['counter-reset', 'counter-increment']) { + test(() => { + const target = document.createElement('div'); + target.classList += 'target'; + container.appendChild(target); + target.style[property] = 'inherit'; + assert_equals(getComputedStyle(target)[property], getComputedStyle(container)[property]); + }, 'Inheritance of ' + property + ' replaces existing value'); +} + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/inheritance.html b/testing/web-platform/tests/css/css-lists/inheritance.html new file mode 100644 index 0000000000..590319d63f --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inheritance.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Lists properties</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +assert_not_inherited('counter-increment', 'none', 'foo 123'); +assert_not_inherited('counter-reset', 'none', 'foo 123'); +assert_inherited('list-style-image', 'none', 'url("data:,a")'); +assert_inherited('list-style-position', 'outside', 'inside'); +assert_inherited('list-style-type', 'disc', 'square'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/inline-block-list-marker-ref.html b/testing/web-platform/tests/css/css-lists/inline-block-list-marker-ref.html new file mode 100644 index 0000000000..6deadbfc9b --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inline-block-list-marker-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<head> + <meta charset="utf-8"> + <title>CSS Reference: inline flow-root list-item with ::marker</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; +} +ol,ul,li { margin:0; padding:0; } +body { margin-left: 40px; } + +li { border: 1px solid; display: list-item; } +li::marker { content: counters(list-item, ".") " "; } + +.wrap { width: 22ch; } +.m { width: fit-content; } +ib { display:inline-block; } +</style> +</head> +<body> + +<div class="wrap"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li class=m>B</li> + +<ol> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<ib><li class=m>B</li></ib> +<ib><li class=m>C</li></ib> +</ol> + +<ol style="display:inline"> +<ib><li>A A A A A A A A A A A A A A A A A A A A </li></ib> +<ib><li class=m>B</li></ib> +<ib><li class=m>C</li></ib> +</ol> + +<ol style="display:inline"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li class=m>b</li> +</ol></li> +<li class=m>C</li> +</ol> + +<ul> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol style="display:inline"> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li class=m>b</li> +</ol></li> +<li class=m>C</li> +</ul> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-lists/inline-block-list-marker.html b/testing/web-platform/tests/css/css-lists/inline-block-list-marker.html new file mode 100644 index 0000000000..73a163fa9d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inline-block-list-marker.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<head> + <meta charset="utf-8"> + <title>CSS Test: inline flow-root list-item with ::marker</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-pseudo"> + <link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868"> + <link rel="match" href="inline-block-list-marker-ref.html"> +<style> +html,body { + color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; +} +ol,ul,li { margin:0; padding:0; } +body { margin-left: 40px; } + +li { display: inline flow-root list-item; border: 1px solid; } +li::marker { content: counters(list-item, ".") " "; } +.wrap { width: 22ch; } +</style> +</head> +<body> + +<div class="wrap"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> + +<ol> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> +<li>C</li> +</ol> + +<ol style="display:inline"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> +<li>C</li> +</ol> + +<ol style="display:inline"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li>b</li> +</ol></li> +<li>C</li> +</ol> + +<ul> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol style="display:inline"> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li>b</li> +</ol></li> +<li>C</li> +</ul> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-lists/inline-block-list-ref.html b/testing/web-platform/tests/css/css-lists/inline-block-list-ref.html new file mode 100644 index 0000000000..fc5b92c907 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inline-block-list-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<head> + <meta charset="utf-8"> + <title>CSS Reference: inline flow-root list-item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; +} +ol,ul,li { margin:0; padding:0; } +body { margin-left: 40px; } + +li { border: 1px solid; display: list-item; } + +.wrap { width: 22ch; } +.m { width: fit-content; } +ib { display:inline-block; } +</style> +</head> +<body> + +<div class="wrap"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li class=m>B</li> + +<ol> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<ib><li class=m>B</li></ib> +<ib><li class=m>C</li></ib> +</ol> + +<ol style="display:inline"> +<ib><li>A A A A A A A A A A A A A A A A A A A A </li></ib> +<ib><li class=m>B</li></ib> +<ib><li class=m>C</li></ib> +</ol> + +<ol style="display:inline"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li class=m>b</li> +</ol></li> +<li class=m>C</li> +</ol> + +<ul> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol style="display:inline"> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li class=m>b</li> +</ol></li> +<li class=m>C</li> +</ul> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-lists/inline-block-list.html b/testing/web-platform/tests/css/css-lists/inline-block-list.html new file mode 100644 index 0000000000..52220ae424 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inline-block-list.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<head> + <meta charset="utf-8"> + <title>CSS Test: inline flow-root list-item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#declaring-a-list-item"> + <link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868"> + <link rel="match" href="inline-block-list-ref.html"> +<style> +html,body { + color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; +} +ol,ul,li { margin:0; padding:0; } +body { margin-left: 40px; } + +li { border: 1px solid; display: inline flow-root list-item; } +.wrap { width: 22ch; } +</style> +</head> +<body> + +<div class="wrap"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> + +<ol> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> +<li>C</li> +</ol> + +<ol style="display:inline"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> +<li>C</li> +</ol> + +<ol style="display:inline"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li>b</li> +</ol></li> +<li>C</li> +</ol> + +<ul> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol style="display:inline"> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li>b</li> +</ol></li> +<li>C</li> +</ul> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-lists/inline-list-marker-ref.html b/testing/web-platform/tests/css/css-lists/inline-list-marker-ref.html new file mode 100644 index 0000000000..f1dbbdea3d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inline-list-marker-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<head> + <meta charset="utf-8"> + <title>CSS Reference: inline list-item with ::marker</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1696712"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +ol,ul,li { margin:0; padding:0; } +body { margin-left: 40px; } + +span { border: 1px solid; } +.wrap { width: 22ch; } +ib { display:inline-block; } +</style> +</head> +<body> + +<div class="wrap"> +<span>1 A A A A A A A A A A A A A A A A A A A A </span><span>2 B</span> + +<ol> +<span>1 A A A A A A A A A A A A A A A A A A A A </span><span>2 B</span> +<span>3 C</span> +</ol> + +<ol style="display:inline"> +<span>1 A A A A A A A A A A A A A A A A A A A A </span><span>2 B</span> +<span>3 C</span> +</ol> + +<ol style="display:inline"> +<span>1 A A A A A A A A A A A A A A A A A A A A </span><span>2 B<ol> +<span>2.1 a a a a a a a a a a a a a a a a a a a a </span><span>2.2 b</span> +</ol></span> +<span>3 C</span> +</ol> + +<ul> +<span>1 A A A A A A A A A A A A A A A A A A A A </span><span>2 B +<ol style="display:inline"><span>2.1 a a a a a a a a a a a a a a a a a a a a </span><span>2.2 b</span> +</ol></span><span>3 C</span> +</ul> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-lists/inline-list-marker.html b/testing/web-platform/tests/css/css-lists/inline-list-marker.html new file mode 100644 index 0000000000..3535f22ce2 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inline-list-marker.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<head> + <meta charset="utf-8"> + <title>CSS Test: inline list-item with ::marker</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-pseudo"> + <link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868"> + <link rel="match" href="inline-list-marker-ref.html"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +ol,ul,li { margin:0; padding:0; } +body { margin-left: 40px; } + +li { display: inline list-item; border: 1px solid; } +li::marker { content: counters(list-item, ".") " "; } +.wrap { width: 22ch; } +</style> +</head> +<body> + +<div class="wrap"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> + +<ol> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> +<li>C</li> +</ol> + +<ol style="display:inline"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> +<li>C</li> +</ol> + +<ol style="display:inline"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li>b</li> +</ol></li> +<li>C</li> +</ol> + +<ul> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol style="display:inline"> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li>b</li> +</ol></li> +<li>C</li> +</ul> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-lists/inline-list-ref.html b/testing/web-platform/tests/css/css-lists/inline-list-ref.html new file mode 100644 index 0000000000..244aedac88 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inline-list-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<head> + <meta charset="utf-8"> + <title>CSS Reference: inline list-item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; +} +ol,ul,li { margin:0; padding:0; } +body { margin-left: 40px; } + +span { border: 1px solid; } +li { display: list-item; list-style-position: inside; } + +.wrap { width: 22ch; } +ib { display:inline-block; } +</style> +</head> +<body> + +<div class="wrap"> +<span><ib><li>A</li></ib> A A A A A A A A A A A A A A A A A A A </span><span style="white-space:pre"><ib><li value=2></li></ib>B</span> + +<ol> +<span><ib><li>A</li></ib> A A A A A A A A A A A A A A A A A A A </span><span><ib><li>B</li></ib></span> +<span><ib><li>C</li></ib></span> +</ol> + +<ol style="display:inline"> +<span><ib><li>A</li></ib> A A A A A A A A A A A A A A A A A A A </span><span><ib><li>B</li></ib></span> +<span><ib><li>C</li></ib></span></ol><ol style="display:inline"> +<span><ib><li>A</li></ib> A A A A A A A A A A A A A A A A A A A </span><span><ib><li></li></ib>B<ol> +<span><ib><li>a</li></ib> a a a a a a a a a a a a a a a a a a a </span><span><ib><li>b</li></ib></span> +</ol></li></ib></span> +<span><ib><li>C</li></ib></span> +</ol> + +<ul> +<span><ib><li>A</li></ib> A A A A A A A A A A A A A A A A A A A </span><span><x style="white-space:pre"><ib><li></li></ib>B</x> <ol style="display:inline"><span><ib><li>a</li></ib> a a a a a a a a a a a a a a a a a a a </span><span><ib><li>b</li></ib></span> +</ol></span><span><ib><li>C</li></ib></span> +</ul> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-lists/inline-list-with-table-child-ref.html b/testing/web-platform/tests/css/css-lists/inline-list-with-table-child-ref.html new file mode 100644 index 0000000000..c35f640b22 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inline-list-with-table-child-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Reference: table boxes inside inline list-items</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +.l1 { display: inline list-item; } +.l2 { display: inline flow-root list-item; } + +span { + border: 1px solid; +} + +div { background: blue; } + </style> +</head> +<body> + +A<span class="l1">B<div style="display:inline-table">T</div>C</span> +A<span class="l1">B<div style="display:inline-table">T</div>C</span> +A<span class="l1">B<div style="display:inline-table">T</div>C</span> +A<span class="l1">B<x><div style="display:inline-table">T</div></x>C</span> +A<span class="l1">B<x style="display:block"><div style="display:inline-table">T</div></x>C</span> + +A<span class="l2">B<div style="display:table">T</div>C</span> +A<span class="l2">B<div style="display:table">T</div>C</span> +A<span class="l2">B<div style="display:table">T</div>C</span> +A<span class="l2">B<x><div style="display:inline-table">T</div></x>C</span> +A<span class="l2">B<x style="display:block"><div style="display:table">T</div></x>C</span> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/inline-list-with-table-child.html b/testing/web-platform/tests/css/css-lists/inline-list-with-table-child.html new file mode 100644 index 0000000000..0b897ec1da --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inline-list-with-table-child.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Test: table boxes inside inline list-items</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-tables-3/#ref-for-inline-table②"> + <link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868"> + <link rel="match" href="inline-list-with-table-child-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +.l1 { display: inline list-item; } +.l2 { display: inline flow-root list-item; } + +span { + border: 1px solid; +} + +div { background: blue; } + </style> +</head> +<body> + +A<span class="l1">B<div style="display:table-cell">T</div>C</span> +A<span class="l1">B<div style="display:table-row">T</div>C</span> +A<span class="l1">B<div style="display:table-row-group">T</div>C</span> +A<span class="l1">B<div style="display:inline-table">T</div>C</span> +A<span class="l1">B<div style="display:table">T</div>C</span> + +A<span class="l2">B<div style="display:table-cell">T</div>C</span> +A<span class="l2">B<div style="display:table-row">T</div>C</span> +A<span class="l2">B<div style="display:table-row-group">T</div>C</span> +A<span class="l2">B<div style="display:inline-table">T</div>C</span> +A<span class="l2">B<div style="display:table">T</div>C</span> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/inline-list.html b/testing/web-platform/tests/css/css-lists/inline-list.html new file mode 100644 index 0000000000..f4b48230e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/inline-list.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<head> + <meta charset="utf-8"> + <title>CSS Test: inline list-item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#declaring-a-list-item"> + <link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868"> + <link rel="match" href="inline-list-ref.html"> +<style> +html,body { + color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; +} +ol,ul,li { margin:0; padding:0; } +body { margin-left: 40px; } + +li { border: 1px solid; display: inline list-item; } +.wrap { width: 22ch; } +</style> +</head> +<body> + +<div class="wrap"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> + +<ol> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> +<li>C</li> +</ol> + +<ol style="display:inline"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B</li> +<li>C</li> +</ol> + +<ol style="display:inline"> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li>b</li> +</ol></li> +<li>C</li> +</ol> + +<ul> +<li>A A A A A A A A A A A A A A A A A A A A </li> +<li>B<ol style="display:inline"> +<li>a a a a a a a a a a a a a a a a a a a a </li> +<li>b</li> +</ol></li> +<li>C</li> +</ul> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-lists/li-counter-increment-computed-style.html b/testing/web-platform/tests/css/css-lists/li-counter-increment-computed-style.html new file mode 100644 index 0000000000..0fae6e3f60 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-counter-increment-computed-style.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>Magic list-item counter-increment shouldn't be visible from computed style</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#declaring-a-list-item"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#list-item-counter"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<li data-expected="none">No explicit counter. +<li><span style="counter-increment:inherit" data-expected="none">Inherited +<li value="10" data-expected="none">Value attribute. +<li style="counter-increment: list-item 10" data-expected="list-item 10">Explicit list-item counter. +<li style="counter-increment: list-item 1" data-expected="list-item 1">Explicit and redundant list-item counter. +<li style="counter-increment: foo 10" data-expected="foo 10">Other counter. +<script> +test(function() { + for (const element of document.querySelectorAll("[data-expected]")) + assert_equals(getComputedStyle(element).counterIncrement, element.getAttribute("data-expected"), element.innerText); +}, "list-item counter-increment shouldn't be visible from computed style"); +</script> diff --git a/testing/web-platform/tests/css/css-lists/li-insert-child-ref.html b/testing/web-platform/tests/css/css-lists/li-insert-child-ref.html new file mode 100644 index 0000000000..bbf2e66a0d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-insert-child-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Insert text node as first child in LI</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <style> + ul.inside { list-style-position: inside; } + .before::before { content: "before"; } + .after::after { content: "after"; } + </style> +</head> +<body> + +<ul class="inside"> + <li>AB</li> +</ul> + +<ul class="inside"> + <li class="before">AB</li> +</ul> + +<ul class="inside"> + <li class="after">AB</li> +</ul> + +<ul class="inside"> + <li class="before after">AB</li> +</ul> + +<ul> + <li>AB</li> +</ul> + +<ul> + <li class="before">AB</li> +</ul> + +<ul> + <li class="after">AB</li> +</ul> + +<ul> + <li class="before after">AB</li> +</ul> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/li-insert-child.html b/testing/web-platform/tests/css/css-lists/li-insert-child.html new file mode 100644 index 0000000000..d82bf1374a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-insert-child.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Test: Insert text node as first child in LI</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1567773"> + <link rel="match" href="li-insert-child-ref.html"> + <style> + ul.inside { list-style-position: inside; } + .before::before { content: "before"; } + .after::after { content: "after"; } + </style> +</head> +<body> + +<ul class="inside"> + <li>B</li> +</ul> + +<ul class="inside"> + <li class="before">B</li> +</ul> + +<ul class="inside"> + <li class="after">B</li> +</ul> + +<ul class="inside"> + <li class="before after">B</li> +</ul> + +<ul> + <li>B</li> +</ul> + +<ul> + <li class="before">B</li> +</ul> + +<ul> + <li class="after">B</li> +</ul> + +<ul> + <li class="before after">B</li> +</ul> + +<script> +document.body.offsetHeight; +let items = Array.prototype.slice.call(document.querySelectorAll('li')); +items.map(li => li.insertBefore(document.createTextNode('A'), li.firstChild)); +document.documentElement.className = ''; +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/li-list-item-counter-ref.html b/testing/web-platform/tests/css/css-lists/li-list-item-counter-ref.html new file mode 100644 index 0000000000..96ca6c1122 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-list-item-counter-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference:_CSS Lists: 'counter-increment:list-item' on LI</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 10em; } + </style> +</head> +<body> + +<ol><li value=0>a<li value=4>b<li value=4>c</ol> +<ol><li value=0>a<li value=4>b<li value=4>c</ol> +<ol><li value=-1>a<li value=4>b<li value=3>c</ol> +<ol><li value=0>a<li value=4>b<li value=4>c</ol> +<ol><li value=2>a<li value=4>b<li value=6>c</ol> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/li-list-item-counter.html b/testing/web-platform/tests/css/css-lists/li-list-item-counter.html new file mode 100644 index 0000000000..b9a1196cab --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-list-item-counter.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Lists: 'counter-increment:list-item' on LI</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-lists/#propdef-counter-increment"> + <link rel="match" href="li-list-item-counter-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 10em; } +li { counter-increment: list-item 0; } +.dec { counter-increment:list-item -1; } +.zero { counter-increment:list-item 1 list-item -1; } +.two { counter-increment:list-item 3 list-item -1; } + </style> +</head> +<body> + +<ol><li>a<li value=4>b<li>c</ol> +<ol><li>a<li value=4 style="counter-increment:list-item 5">b<li>c</ol> +<ol><li class=dec>a<li value=4 class=dec>b<li class=dec>c</ol> +<ol><li class=zero>a<li value=4 class=zero>b<li class=zero>c</ol> +<ol><li class=two>a<li value=4 class=two>b<li class=two>c</ol> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/li-value-counter-reset-001-ref.html b/testing/web-platform/tests/css/css-lists/li-value-counter-reset-001-ref.html new file mode 100644 index 0000000000..6c6350c10f --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-counter-reset-001-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference:_CSS Lists: 'counter-set:list-item' trumps LI @value</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 10em; } + </style> +</head> +<body> + +<ol><li>a<li value=99>b</ol> +<ol><li>a<li value=99>b</ol> +<ol><li>a<li value=4>b</ol> +<ol><li>a<li value=99>b</ol> +<ol><li>a<li value=51>b</ol> +<ol><li>a<li value=88>b</ol> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/li-value-counter-reset-001.html b/testing/web-platform/tests/css/css-lists/li-value-counter-reset-001.html new file mode 100644 index 0000000000..0e91c3a03d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-counter-reset-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Lists: 'counter-set:list-item' trumps LI @value</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-lists/#propdef-counter-set"> + <link rel="match" href="li-value-counter-reset-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 10em; } +li.set { counter-set: list-item 99; } + </style> +</head> +<body> + +<ol><li>a<li value=4 class=set>b</ol> +<ol><li>a<li value=4 class=set style="counter-increment:list-item 50">b</ol> +<ol><li>a<li value=4 style="counter-increment:list-item 50">b</ol> +<ol><li>a<li class=set style="counter-increment:list-item 50">b</ol> +<ol><li>a<li style="counter-increment:list-item 50">b</ol> +<ol><li>a<li value=4 class=set style="counter-set:list-item 88">b</ol> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-001-ref.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-001-ref.html new file mode 100644 index 0000000000..c93f5cba0a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-001-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>CSS Test Reference</title> +<ol> + <li value=7>seven + <li value=6>six + <li value=5>five +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-001.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-001.html new file mode 100644 index 0000000000..94c3ebc248 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-001.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>Interaction of ol reversed and list-item value</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1573907"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://html.spec.whatwg.org/#ordinal-value"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="li-value-reversed-001-ref.html"> +<ol reversed> + <li>seven + <li value=6>six + <li>five +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-002-ref.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-002-ref.html new file mode 100644 index 0000000000..c73c01d072 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-002-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>CSS Test Reference</title> +<ol> + <li value=9>nine + <li value=8>eight + <li value=7>seven + <li value=6>six + <li value=10>ten + <li value=9>nine +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-002.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-002.html new file mode 100644 index 0000000000..41454611ea --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-002.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>Interaction of ol reversed and list-item value</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1573907"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://html.spec.whatwg.org/#ordinal-value"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="li-value-reversed-002-ref.html"> +<ol reversed> + <li>nine + <li>eight + <li value=7>seven + <li>six + <li value=10>ten + <li>nine +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-003.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-003.html new file mode 100644 index 0000000000..af40da87a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-003.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>Interaction of ol reversed and list-item value</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1573907"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://html.spec.whatwg.org/#ordinal-value"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="li-value-reversed-002-ref.html"> +<ol reversed> + <li>nine + <li>eight + <li style="counter-set: list-item 7">seven + <li style="counter-increment: list-item -1">six + <li style="counter-set: list-item 10; counter-increment: list-item 1">ten + <li>nine +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-004-ref.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-004-ref.html new file mode 100644 index 0000000000..c5a957bf39 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-004-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>CSS Test Reference</title> +<ol> + <li value=3>three + <div></div> + <li value=1>one +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-004.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-004.html new file mode 100644 index 0000000000..bb04fb4c70 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-004.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Non-list items with explicit list-item counter increments don't increment the ol reversed start value</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1573907"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://html.spec.whatwg.org/#ordinal-value"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="li-value-reversed-004-ref.html"> +<ol reversed> + <li>three + <div style="counter-increment: list-item -1"></div> + <li>one +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-005-ref.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-005-ref.html new file mode 100644 index 0000000000..b88e510316 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-005-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>CSS Test Reference</title> +<ol> + <li value=0>zero + <div></div> + <li value=0>zero +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-005.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-005.html new file mode 100644 index 0000000000..cbdf38da40 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-005.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Non-list items with explicit list-item counter increments don't increment the ol reversed start value</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1573907"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://html.spec.whatwg.org/#ordinal-value"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="li-value-reversed-005-ref.html"> +<ol reversed> + <li>zero + <div style="counter-increment: list-item 1; counter-set: list-item 1"></div> + <li>zero +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-006-ref.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-006-ref.html new file mode 100644 index 0000000000..27fcfc5114 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-006-ref.html @@ -0,0 +1,32 @@ +<!doctype html> +<title></title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<meta name="assert" content="The last counter-increment value determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before { + content: counters(list-item,"."); +} +</style> +<ol reversed start="7"> + <li style="counter-increment: list-item -2">6 + <li style="counter-increment: list-item -2">4 + <li style="counter-increment: list-item -2">2 +</ol> +<ol reversed start="19"> + <li style="counter-increment: list-item -3">17 + <li style="counter-increment: list-item -1">16 + <li style="counter-increment: list-item -8">8 +</ol> +<ol reversed start="-9"> + <li style="counter-increment: list-item 2">-6 + <li style="counter-increment: list-item 2">-4 + <li style="counter-increment: list-item 2">-2 +</ol> +<ol reversed start="-21"> + <li style="counter-increment: list-item 3">-17 + <li style="counter-increment: list-item 1">-16 + <li style="counter-increment: list-item 8">-8 +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-006a.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-006a.html new file mode 100644 index 0000000000..3491c863a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-006a.html @@ -0,0 +1,37 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-006-ref.html"> +<meta name="assert" content="The last counter-increment value determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +</style> +<ol reversed> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> +</ol> +<ol reversed> + <li style="counter-increment: list-item -3"> + <li style="counter-increment: list-item -1"> + <li style="counter-increment: list-item -8"> +</ol> +<ol reversed> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> +</ol> +<ol reversed> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-006b.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-006b.html new file mode 100644 index 0000000000..b124e9ba2d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-006b.html @@ -0,0 +1,40 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-006-ref.html"> +<meta name="assert" content="The last counter-increment value determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol { + counter-reset: reversed(list-item); +} +ol::before, li::before { + content: counters(list-item,"."); +} +</style> +<ol> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> +</ol> +<ol> + <li style="counter-increment: list-item -3"> + <li style="counter-increment: list-item -1"> + <li style="counter-increment: list-item -8"> +</ol> +<ol> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> +</ol> +<ol> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-006c.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-006c.html new file mode 100644 index 0000000000..7d1d419cc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-006c.html @@ -0,0 +1,49 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-006-ref.html"> +<meta name="assert" content="A zero-valued counter-increment does not affect the counter start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +div, span { + counter-increment: list-item 0; +} +</style> +<ol reversed> + <div></div> + <li style="counter-increment: list-item -2"><span></span><span></span></li> + <li style="counter-increment: list-item -2"><span></span></li> + <li style="counter-increment: list-item -2"><span></span></li> + <div></div> + <div></div> + <div></div> +</ol> +<ol reversed> + <div></div> + <li style="counter-increment: list-item -3"></li> + <div></div> + <li style="counter-increment: list-item -1"><span></span></li> + <li style="counter-increment: list-item -8"></li> + <div></div> +</ol> +<ol reversed> + <div></div> + <li style="counter-increment: list-item 2"></li> + <li style="counter-increment: list-item 2"></li> + <li style="counter-increment: list-item 2"></li> +</ol> +<ol reversed> + <li style="counter-increment: list-item 3"></li> + <li style="counter-increment: list-item 1"></li> + <li style="counter-increment: list-item 8"></li> + <div></div> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-006d.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-006d.html new file mode 100644 index 0000000000..4d14d10cc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-006d.html @@ -0,0 +1,63 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-006-ref.html"> +<meta name="assert" content="Reversed value initialization works also for sibling scopes."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +ol[reversed] { + margin-bottom: 0; +} +ol.no-counter { + counter-reset: blah; + margin-top: 0; +} +ol.no-counter::before { + content: none; +} +div, span { + counter-increment: list-item 0; +} +</style> +<ol reversed></ol> +<ol class="no-counter"> + <div></div> + <li style="counter-increment: list-item -2"><span></span><span></span></li> + <li style="counter-increment: list-item -2"><span></span></li> + <li style="counter-increment: list-item -2"><span></span></li> + <div></div> + <div></div> + <div></div> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <div></div> + <li style="counter-increment: list-item -3"></li> + <div></div> + <li style="counter-increment: list-item -1"><span></span></li> + <li style="counter-increment: list-item -8"></li> + <div></div> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <div></div> + <li style="counter-increment: list-item 2"></li> + <li style="counter-increment: list-item 2"></li> + <li style="counter-increment: list-item 2"></li> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <li style="counter-increment: list-item 3"></li> + <li style="counter-increment: list-item 1"></li> + <li style="counter-increment: list-item 8"></li> + <div></div> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-006e.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-006e.html new file mode 100644 index 0000000000..e20a32051a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-006e.html @@ -0,0 +1,51 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-006-ref.html"> +<meta name="assert" content="Reversed value initialization works also for sibling scopes."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +ol[reversed] { + margin-bottom: 0; +} +ol.no-counter { + counter-reset: blah; + margin-top: 0; +} +ol.no-counter::before { + content: none; +} +</style> +<ol reversed></ol> +<ol class="no-counter"> + <li style="counter-increment: list-item -2"></li> + <li style="counter-increment: list-item -2"></li> + <li style="counter-increment: list-item -2"></li> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <li style="counter-increment: list-item -3"></li> + <li style="counter-increment: list-item -1"></li> + <li style="counter-increment: list-item -8"></li> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <li style="counter-increment: list-item 2"></li> + <li style="counter-increment: list-item 2"></li> + <li style="counter-increment: list-item 2"></li> +</ol> +<ol reversed></ol> +<ol class="no-counter"> + <li style="counter-increment: list-item 3"></li> + <li style="counter-increment: list-item 1"></li> + <li style="counter-increment: list-item 8"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-007-ref.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-007-ref.html new file mode 100644 index 0000000000..3bd9c90fc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-007-ref.html @@ -0,0 +1,54 @@ +<!doctype html> +<title></title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +</style> +<ol start="9"> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + <ol start="21"> + <li style="counter-increment: list-item -3"> + <li style="counter-increment: list-item -1"> + <li style="counter-increment: list-item -8"> + </ol> + </li> + <li style="counter-increment: list-item -2"> +</ol> +<ol start="21"> + <li style="counter-increment: list-item -3"> + <li style="counter-increment: list-item -1"> + <ol start="9"> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + </ol> + </li> + <li style="counter-increment: list-item -8"> +</ol> +<ol start="-7"> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> + <ol start="-19"> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> + </ol> + </li> +</ol> +<ol start="-19"> + <ol start="-19"> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> + </ol> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-007a.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-007a.html new file mode 100644 index 0000000000..088ad35672 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-007a.html @@ -0,0 +1,60 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-007-ref.html"> +<meta name="assert" content="The last counter-increment value determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +</style> +<ol reversed> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + <ol reversed> + <li style="counter-increment: list-item -3"> + <li style="counter-increment: list-item -1"> + <li style="counter-increment: list-item -8"> + </ol> + </li> + <li style="counter-increment: list-item -2"> +</ol> +<ol reversed> + <li style="counter-increment: list-item -3"> + <li style="counter-increment: list-item -1"> + <ol reversed> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + </ol> + </li> + <li style="counter-increment: list-item -8"> +</ol> +<ol reversed> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> + <ol reversed> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> + </ol> + </li> +</ol> +<ol reversed> + <ol reversed> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> + </ol> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-007b.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-007b.html new file mode 100644 index 0000000000..438316eca7 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-007b.html @@ -0,0 +1,78 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-007-ref.html"> +<meta name="assert" content="A zero-valued counter-increment does not affect the counter start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +div, span { + counter-increment: list-item 0; +} +</style> +<ol reversed> + <div></div> + <li style="counter-increment: list-item -2"></li> + <div></div> + <li style="counter-increment: list-item -2"> + <ol reversed> + <div><span></span></div> + <li style="counter-increment: list-item -3"><span></span></li> + <div></div> + <li style="counter-increment: list-item -1"></li> + <li style="counter-increment: list-item -8"><span></span></li> + <div><span></span></div> + </ol> + <div></div> + </li> + <li style="counter-increment: list-item -2"></li> + <div></div> +</ol> +<ol reversed> + <li style="counter-increment: list-item -3"></li> + <div></div> + <li style="counter-increment: list-item -1"> + <ol reversed> + <li style="counter-increment: list-item -2"><span><span></span></span></li> + <li style="counter-increment: list-item -2"><span></span></li> + <li style="counter-increment: list-item -2"></li> + </ol> + </li> + <div></div> + <li style="counter-increment: list-item -8"></li> +</ol> +<ol reversed> + <li style="counter-increment: list-item 2"></li> + <li style="counter-increment: list-item 2"></li> + <li style="counter-increment: list-item 2"> + <div></div> + <ol reversed> + <li style="counter-increment: list-item 3"><span></span></li> + <li style="counter-increment: list-item 1"><span></span></li> + <li style="counter-increment: list-item 8"><span></span></li> + </ol> + </li> + <div></div> + <div></div> + <div></div> +</ol> +<ol reversed> + <ol reversed> + <li style="counter-increment: list-item 3"></li> + <li style="counter-increment: list-item 1"></li> + <li style="counter-increment: list-item 8"></li> + <div></div> + <div></div> + </ol> + <li style="counter-increment: list-item 3"><span><span></span></span></li> + <li style="counter-increment: list-item 1"><span><span></span></span></li> + <li style="counter-increment: list-item 8"><span><span></span></span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-008-ref.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-008-ref.html new file mode 100644 index 0000000000..28cfde9248 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-008-ref.html @@ -0,0 +1,33 @@ +<!doctype html> +<title></title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before { + content: counters(list-item,"."); +} +</style> +<ol start="11"> + <li style="counter-set: list-item 8">8 + <li style="counter-set: list-item 6">6 + <li style="counter-set: list-item 5">5 + <li style="counter-set: list-item 3">3 +</ol> +<ol start="11"> + <li style="counter-set: list-item 7">7 + <li style="counter-set: list-item 5">5 + <li style="counter-set: list-item 4">4 + <li style="counter-set: list-item -4">-4 +</ol> +<ol start="4"> + <li style="counter-set: list-item 5">5 + <li style="counter-set: list-item 7">7 + <li style="counter-set: list-item 9">9 +</ol> +<ol start="-6"> + <li style="counter-set: list-item -4">-4 + <li style="counter-set: list-item -3">-3 + <li style="counter-set: list-item 5">5 +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-008a.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-008a.html new file mode 100644 index 0000000000..0bbddbb975 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-008a.html @@ -0,0 +1,39 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-008-ref.html"> +<meta name="assert" content="The last (non-zero) counter-increment value before the first counter-set determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +</style> +<ol reversed> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + <li style="counter-set: list-item 5"><!-- note: there's an implicit -1 increment here --> + <li style="counter-increment: list-item -2"> +</ol> +<ol reversed> + <li style="counter-increment: list-item -3"> + <li style="counter-increment: list-item -2; counter-set: list-item 5"> + <li style="counter-increment: list-item -1"> + <li style="counter-increment: list-item -8"> +</ol> +<ol reversed> + <li style="counter-increment: list-item 2; counter-set: list-item 5"> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> +</ol> +<ol reversed> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8; counter-set: list-item 5"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-008b.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-008b.html new file mode 100644 index 0000000000..17e81f8189 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-008b.html @@ -0,0 +1,57 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-008-ref.html"> +<meta name="assert" content="The last (non-zero) counter-increment value before the first counter-set determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +div, span { + counter-increment: list-item 0; +} +</style> +<ol reversed> + <li style="counter-increment: list-item -2"></li> + <div style="counter-increment: list-item -1"></div> + <li style="counter-increment: list-item -1"></li> + <li style="counter-increment: list-item 0; counter-set: list-item 5"></li> + <li style="counter-increment: list-item -2"></li> +</ol> +<ol reversed> + <div></div> + <div style="counter-increment: list-item -1"></div> + <div></div> + <li style="counter-increment: list-item -2"><span></span></li> + <div></div> + <li style="counter-increment: list-item 0; counter-set: list-item 5"><span></span></li> + <li style="counter-increment: list-item -1"><span></span></li> + <li style="counter-increment: list-item -8"><span></span></li> + <div style="counter-increment: list-item 11; counter-set: list-item 99"></div> +</ol> +<ol reversed> + <div></div> + <li style="counter-increment: list-item 2; counter-set: list-item 5"></li> + <div></div> + <li style="counter-increment: list-item 2"></li> + <div></div> + <li style="counter-increment: list-item 2"></li> + <div></div> +</ol> +<ol reversed> + <li style="counter-increment: list-item 3"></li> + <li style="counter-increment: list-item 1"></li> + <div></div> + <div style="counter-increment: list-item 4"></div> + <div></div> + <div></div> + <li style="counter-increment: list-item 0; counter-set: list-item 5"><span></span></li> + <div style="counter-increment: list-item 11; counter-set: list-item 99"></div> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-009-ref.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-009-ref.html new file mode 100644 index 0000000000..d0a54486f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-009-ref.html @@ -0,0 +1,54 @@ +<!doctype html> +<title></title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +</style> +<ol start="10"> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + <ol start="10"> + <li style="counter-increment: list-item -3"> + <li style="counter-increment: list-item -1"> + <li style="counter-increment: list-item -8"> + </ol> + </li> + <li style="counter-increment: list-item -2"> +</ol> +<ol start="9"> + <li style="counter-increment: list-item -3"> + <li style="counter-increment: list-item -1"> + <ol start="8"> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + </ol> + </li> + <li style="counter-increment: list-item -8"> +</ol> +<ol start="2"> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2"> + <ol start="-6"> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> + </ol> + </li> +</ol> +<ol start="-6"> + <ol start="3"> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> + </ol> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-009a.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-009a.html new file mode 100644 index 0000000000..e0b5e9403c --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-009a.html @@ -0,0 +1,60 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-009-ref.html"> +<meta name="assert" content="The last (non-zero) counter-increment value before the first counter-set determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +</style> +<ol reversed> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2; counter-set: list-item 5"> + <ol reversed> + <li style="counter-increment: list-item -3"> + <li style="counter-increment: list-item -1; counter-set: list-item 5"> + <li style="counter-increment: list-item -8"> + </ol> + </li> + <li style="counter-increment: list-item -2"> +</ol> +<ol reversed> + <li style="counter-increment: list-item -3; counter-set: list-item 5"> + <li style="counter-increment: list-item -1"> + <ol reversed> + <li style="counter-increment: list-item -2; counter-set: list-item 5"> + <li style="counter-increment: list-item -2"> + <li style="counter-increment: list-item -2"> + </ol> + </li> + <li style="counter-increment: list-item -8"> +</ol> +<ol reversed> + <li style="counter-increment: list-item 2"> + <li style="counter-increment: list-item 2; counter-set: list-item 5"> + <li style="counter-increment: list-item 2"> + <ol reversed> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8; counter-set: list-item 5"> + </ol> + </li> +</ol> +<ol reversed> + <ol reversed> + <li style="counter-increment: list-item 3; counter-set: list-item 5"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8"> + </ol> + <li style="counter-increment: list-item 3"> + <li style="counter-increment: list-item 1"> + <li style="counter-increment: list-item 8; counter-set: list-item 5"> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-value-reversed-009b.html b/testing/web-platform/tests/css/css-lists/li-value-reversed-009b.html new file mode 100644 index 0000000000..c3ee99dbc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-value-reversed-009b.html @@ -0,0 +1,87 @@ +<!doctype html> +<title></title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="li-value-reversed-009-ref.html"> +<meta name="assert" content="The last (non-zero) counter-increment value before the first counter-set determines the start value."> +<style> +:root { + color:black; background-color:white; font:10px/1 monospace; +} +ol::before, li::before { + content: counters(list-item,"."); +} +div, span { + counter-increment: list-item 0; +} +.pure-set { + counter-increment: list-item 0; + counter-set: list-item 5; +} +</style> +<ol reversed> + <li style="counter-increment: list-item -2"></li> + <div></div> + <li class="pure-set"> + <ol reversed> + <li style="counter-increment: list-item -3"></li> + <div style="counter-increment: list-item -3"></div> + <div style="counter-increment: list-item 1"></div> + <div></div> + <li class="pure-set"></li> + <li style="counter-increment: list-item -8"></li> + </ol> + </li> + <div></div> + <li style="counter-increment: list-item -2"></li> +</ol> +<ol reversed> + <div style="counter-increment: list-item 1"></div> + <div style="counter-increment: list-item -2"></div> + <li class="pure-set"></li> + <li style="counter-increment: list-item -1"></li> + <ol reversed> + <div><span></span></div> + <div style="counter-increment: list-item -1"></div> + <li class="pure-set"><span></span></li> + <div></div> + <li style="counter-increment: list-item -2"><span></span></li> + <div></div> + <li style="counter-increment: list-item -2"><span></span></li> + <div><span></span></div> + </ol> + </li> + <li style="counter-increment: list-item -8"></li> +</ol> +<ol reversed> + <div><span></span></div> + <li style="counter-increment: list-item 2"></li> + <li class="pure-set"></li> + <div><span></span></div> + <li style="counter-increment: list-item 2"></li> + <ol reversed> + <li style="counter-increment: list-item 3"></li> + <li style="counter-increment: list-item 1"></li> + <div style="counter-increment: list-item 4"></div> + <div><span></span></div> + <li class="pure-set"></li> + <div><span></span></div> + </ol> + </li> +</ol> +<ol reversed> + <ol reversed> + <div style="counter-increment: list-item -1"></div> + <div style="counter-increment: list-item 2"></div> + <li class="pure-set"></li> + <li style="counter-increment: list-item 1"></li> + <li style="counter-increment: list-item 8"></li> + </ol> + <li style="counter-increment: list-item 3"></li> + <li style="counter-increment: list-item 1"></li> + <div style="counter-increment: list-item 4"></div> + <li class="pure-set"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-lists/li-with-height-001-ref.html b/testing/web-platform/tests/css/css-lists/li-with-height-001-ref.html new file mode 100644 index 0000000000..486009d560 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-with-height-001-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: list with height</title> + +<p>The test passes if "second" is in the following line of "first".</p> +<ul> + <li id="li_target" style="height:200px; border:1px solid black; width:200px"> + first<div id="div_target" style="overflow:hidden;">second</div> + </li> +</ul> + diff --git a/testing/web-platform/tests/css/css-lists/li-with-height-001.html b/testing/web-platform/tests/css/css-lists/li-with-height-001.html new file mode 100644 index 0000000000..ad2ac65e17 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-with-height-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: list with height</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=match href="li-with-height-001-ref.html"> +<meta name="assert" content="This is to check the behavior of adding an element at the begining of li" /> + +<p>The test passes if "second" is in the following line of "first".</p> + +<ul> + <li id="li_target" style="height:200px; border:1px solid black; width:200px"> + <div id="div_target" style="overflow:hidden;">second</div> + </li> +</ul> + +<script> + document.body.clientHeight; + + var text_node = document.createTextNode("first"); + var li_target = document.getElementById("li_target"); + var div_target = document.getElementById("div_target"); + li_target.insertBefore(text_node,div_target); +</script> diff --git a/testing/web-platform/tests/css/css-lists/li-with-overflow-hidden-change-list-style-position-001-ref.html b/testing/web-platform/tests/css/css-lists/li-with-overflow-hidden-change-list-style-position-001-ref.html new file mode 100644 index 0000000000..a3ea8b66ee --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-with-overflow-hidden-change-list-style-position-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test inside and outside switch</title> + +<p>The test passes if the first li is inside and the second one is outside.</p> + +<ul> + <li style="list-style-position: inside;"> + <div style="overflow:hidden;"> + outside to inside + </div> + </li> +</ul> + +<ul> + <li style="list-style-position: outside;"> + <div style="overflow:hidden;"> + inside to outside + </div> + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/li-with-overflow-hidden-change-list-style-position-001.html b/testing/web-platform/tests/css/css-lists/li-with-overflow-hidden-change-list-style-position-001.html new file mode 100644 index 0000000000..992ed83ced --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/li-with-overflow-hidden-change-list-style-position-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test inside and outside switch</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=match href="li-with-overflow-hidden-change-list-style-position-001-ref.html"> +<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=344941 --> + +<p>The test passes if the first li is inside and the second one is outside.</p> + +<ul> + <li id="outSide" style="list-style-position: outside;"> + <div style="overflow:hidden;"> + outside to inside + </div> + </li> +</ul> + +<ul> + <li id="inSide" style="list-style-position: inside;"> + <div style="overflow:hidden;"> + inside to outside + </div> + </li> +</ul> +<script> + document.body.offsetHeight; + + var outside_li=document.getElementById("outSide"); + outside_li.style.listStylePosition = "inside"; + document.body.offsetHeight; + + var inside_li=document.getElementById("inSide"); + inside_li.style.listStylePosition = "outside"; + document.body.offsetHeight; + +</script> diff --git a/testing/web-platform/tests/css/css-lists/list-and-block-in-inline-ref.html b/testing/web-platform/tests/css/css-lists/list-and-block-in-inline-ref.html new file mode 100644 index 0000000000..9f106c3b91 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-and-block-in-inline-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<ul> + <li> + <div style="display: inline-block;">line1<br>line2</div> + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/list-and-block-in-inline.html b/testing/web-platform/tests/css/css-lists/list-and-block-in-inline.html new file mode 100644 index 0000000000..165b1cce1e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-and-block-in-inline.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=match href="list-and-block-in-inline-ref.html"> +<meta name="assert" content="The list-marker should be aligned with the 2nd line."> +<ul> + <li> + <div style="display: inline-block;"><span><div>line1<br>line2</div></span></div> + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/list-and-block-textarea-001.html b/testing/web-platform/tests/css/css-lists/list-and-block-textarea-001.html new file mode 100644 index 0000000000..13f723ac5c --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-and-block-textarea-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test list with textarea as its first child</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=767408 --> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> + +ul, textarea { + font-size: 16px; +} +</style> + +<div id="log"></div> + +<ul> + <li id="target1"> + <textarea id="target2" rows="3" cols="20" style="display:block; height:45px"> + hello + </textarea> + </li> +</ul> + +<script> +test(function() { + var height1 = document.getElementById("target1").offsetHeight; + var height2 = document.getElementById("target2").offsetHeight; + assert_equals(height1, height2, "List marker and textarea should be in the same line, no line-break between them.") +}, "list and block textarea"); + +</script> diff --git a/testing/web-platform/tests/css/css-lists/list-and-flex-001-ref.html b/testing/web-platform/tests/css/css-lists/list-and-flex-001-ref.html new file mode 100644 index 0000000000..d7be687125 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-and-flex-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test list with flex as its first child</title> + +<p>There should be no extra line generated between the marker and the flex.</p> + +<ul> + <li> + <div style="border: 1px black solid;"> + <div style="display: inline-flex; align-items: flex-end; height: 200px;"> + <span style="line-height: 50px">text</span> + </div> + </div> + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/list-and-flex-001.html b/testing/web-platform/tests/css/css-lists/list-and-flex-001.html new file mode 100644 index 0000000000..98ab9c400b --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-and-flex-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test list with flex as its first child</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=match href="list-and-flex-001-ref.html"> +<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=767408 --> + +<p>There should be no extra line generated between the marker and the flex.</p> + +<ul> + <li> + <div style="border: 1px black solid;"> + <div style="display: flex; align-items: flex-end; height: 200px;"> + <span style="line-height: 50px">text</span> + </div> + </div> + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/list-and-grid-001-ref.html b/testing/web-platform/tests/css/css-lists/list-and-grid-001-ref.html new file mode 100644 index 0000000000..b6e777428d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-and-grid-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test list with grid as its first child</title> + +<p>There should be no extra line generated between the marker and the grid.</p> + +<ul> + <li> + <div style="display: inline-grid; grid-template-rows: 100px; align-items: center;"> + <div>grid</div> + </div> + </li> +</ul> + diff --git a/testing/web-platform/tests/css/css-lists/list-and-grid-001.html b/testing/web-platform/tests/css/css-lists/list-and-grid-001.html new file mode 100644 index 0000000000..562961d5a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-and-grid-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test list with grid as its first child</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=match href="list-and-grid-001-ref.html"> +<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=767408 --> + +<p>There should be no extra line generated between the marker and the grid.</p> + +<ul> + <li> + <div style="display: grid; grid-template-rows: 100px; align-items: center;"> + <div>grid</div> + </div> + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/list-and-margin-collapse-001.html b/testing/web-platform/tests/css/css-lists/list-and-margin-collapse-001.html new file mode 100644 index 0000000000..e267b83908 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-and-margin-collapse-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the margin collapse of marker</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=767408 --> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<ul id="target" style="margin-top:100px;"> + <li> + <div style="overflow:hidden; margin-top:100px; height:25px;"><a href="#">xxx</a></div> + </li> +</ul> + +<script> +test(function() { + var height = document.getElementById("target").clientHeight; + assert_equals(height, 25, "the height of ul should be 25px") +}, "list and margin collapse"); +</script> diff --git a/testing/web-platform/tests/css/css-lists/list-and-margin-collapse-002.html b/testing/web-platform/tests/css/css-lists/list-and-margin-collapse-002.html new file mode 100644 index 0000000000..ef110ca17c --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-and-margin-collapse-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test the margin collapse of marker</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel="help" href="http://crbug.com/969741"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<div id="target_with_marker" style="overflow:hidden; width:100px;"> + <div style="margin-bottom:100px;"></div> + <div style="display:list-item; margin-left:100px; height:0px;"></div> + <div style="margin-top:100px;"></div> +</div> + +<div id="target_without_marker" style="overflow:hidden; width:100px;"> + <div style="margin-bottom:100px;"></div> + <div style="display:list-item; margin-left:100px; list-style:none;"></div> + <div style="margin-top:100px;"></div> +</div> + +<script> +test(function() { + var height_with_marker = document.getElementById("target_with_marker").clientHeight; + assert_equals(height_with_marker, 200, "Should not allow margin-collapsing through if list is with marker."); + var height_without_marker = document.getElementById("target_without_marker").clientHeight; + assert_equals(height_without_marker, 100, "Should allow margin-collapsing through if list is without marker."); +}, "list and margin collapse"); +</script> diff --git a/testing/web-platform/tests/css/css-lists/list-and-writing-mode-001.html b/testing/web-platform/tests/css/css-lists/list-and-writing-mode-001.html new file mode 100644 index 0000000000..df54e8fb0d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-and-writing-mode-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test list with root writing-mode as its first child</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=767408 --> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<ul> + <li id="target"> + <div style="writing-mode: vertical-lr; height: 45px;">a b c</div> + </li> +</ul> + +<script> +test(function() { + var height = document.getElementById("target").offsetHeight; + assert_equals(height, 45, "the height of li should be 45px, and no extra line generated") +}, "list and writing-mode"); +</script> + diff --git a/testing/web-platform/tests/css/css-lists/list-inside-contain.html b/testing/web-platform/tests/css/css-lists/list-inside-contain.html new file mode 100644 index 0000000000..70e25b8644 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-inside-contain.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<head> + <meta charset="utf-8"> + <title>CSS Lists: list inside a contain ul</title> + <link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> + <link rel="help" href="http://crbug.com/1004764"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + + <style> + ul { contain: size layout; } + li { list-style: inside; columns: 1; background-image: url(#svgvar00008); } + </style> +</head> + +<script> +setup({ single_test: true }); + +function changeBackground() { + document.getElementById("target").style.setProperty("background", "url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) no-repeat scroll top right"); + + done(); +} +</script> + +<body onload=requestAnimationFrame(changeBackground)> + <p>PASS if no crash or DCHECK failure.</p> + <ul> + <li id="target"> + </li> + </ul> +</body> diff --git a/testing/web-platform/tests/css/css-lists/list-item-counter-crash.html b/testing/web-platform/tests/css/css-lists/list-item-counter-crash.html new file mode 100644 index 0000000000..fc8a38c628 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-item-counter-crash.html @@ -0,0 +1,15 @@ +<!doctype html> +<html class="reftest-wait"> +<link rel="help" href="http://crbug.com/1487174"> +<style> +* { counter-increment: c; } +</style> +<script> + function error_fn() { + test.style.setProperty("text-orientation", "upright"); + document.documentElement.classList.remove("reftest-wait"); + } +</script> +<li id="test"></li> +<image onerror="error_fn()" srcset="error" ></image> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-item-definition-ref.html b/testing/web-platform/tests/css/css-lists/list-item-definition-ref.html new file mode 100644 index 0000000000..2d49bc4cb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-item-definition-ref.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<ol> + <svg style="display: list-item"></svg> + <img style="display: list-item"> + <img style="display: list-item" alt="Foo"> + <li value="4">Foo + <li>Bar + <div style="display: list-item"><div style="display: list-item">Before</div>WithBefore</div> + <div style="display: list-item">WithAfter<div style="display: list-item">After</div></div> + <li value="10">Baz +</ol> diff --git a/testing/web-platform/tests/css/css-lists/list-item-definition.html b/testing/web-platform/tests/css/css-lists/list-item-definition.html new file mode 100644 index 0000000000..14e351f9ec --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-item-definition.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>The definition of what a list-item is only depends on the display value</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#list-item"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1539171"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1543758"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="list-item-definition-ref.html"> +<style> + .before::before, .after::after { + display: list-item; + content: "Before"; + } + .after::after { + content: "After"; + } +</style> +<ol> + <svg style="display: list-item"></svg> + <img style="display: list-item"> + <img style="display: list-item" alt="Foo"> + <div style="display: list-item">Foo</div> + <li>Bar + <li class="before">WithBefore + <li class="after">WithAfter + <li>Baz +</ol> diff --git a/testing/web-platform/tests/css/css-lists/list-marker-alignment-ref.html b/testing/web-platform/tests/css/css-lists/list-marker-alignment-ref.html new file mode 100644 index 0000000000..acbc73e284 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-marker-alignment-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style>::marker { font-family:inherit; }</style> +<div style="display:inline-block;"> + <ul> + <li> + xx + </li> + xx + </ul> +</div> diff --git a/testing/web-platform/tests/css/css-lists/list-marker-alignment.html b/testing/web-platform/tests/css/css-lists/list-marker-alignment.html new file mode 100644 index 0000000000..46f63a6981 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-marker-alignment.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1051181"> +<link rel="match" href="list-marker-alignment-ref.html"> +<meta name="assert" content="This test checks the list marker aligns to the first baseline."> +<style>::marker { font-family:inherit; }</style> +<div style="display:inline-block;"> + <ul> + <li> + <p> + xx<br>xx + </p> + </li> + </ul> +</div> diff --git a/testing/web-platform/tests/css/css-lists/list-marker-containing-control-char-crash.html b/testing/web-platform/tests/css/css-lists/list-marker-containing-control-char-crash.html new file mode 100644 index 0000000000..280ef34262 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-marker-containing-control-char-crash.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +*::marker { + content: '\643\D' +} +</style> +<script> +addEventListener("DOMContentLoaded", () => { + getSelection().collapse(document.body.lastChild, document.body.lastChild.length); +}, {once: true}); +</script> +</head> +<body> +<ol> + <li contenteditable></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-marker-position-crash.html b/testing/web-platform/tests/css/css-lists/list-marker-position-crash.html new file mode 100644 index 0000000000..06ae5fa45b --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-marker-position-crash.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1183869"> +<div> + <div style="width: 1000px; display: list-item; float: right;"></div> + <table style="max-height: 0; display: list-item;"> + <caption style="display: list-item;"> + <button style="padding-top: 6%; display: list-item;"> + <big style="float: right;"> + <button style="display; list-item;"></button> + </big> + </button> + </caption> + </table> + <h2 style="padding:0 2147483652%; max-height: 0; display: list-item;"></h2> +</div> diff --git a/testing/web-platform/tests/css/css-lists/list-marker-symbol-bidi-ref.html b/testing/web-platform/tests/css/css-lists/list-marker-symbol-bidi-ref.html new file mode 100644 index 0000000000..892933a48f --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-marker-symbol-bidi-ref.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: Symbol markers with unicode-bidi</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +section { + float: left; +} +.inside { + list-style-position: inside; +} +span { + float: right; +} +::marker { font-family: inherit; } +</style> +<section> + <ul dir="ltr"> + <li class="outside embed-none">text</li> + <li class="outside embed-item">text</li> + <li class="outside embed-marker">text</li> + <li class="outside embed-both">text</li> + <li class="inside embed-none">text</li> + <li class="inside embed-item">text</li> + <li class="inside embed-marker">text</li> + <li class="inside embed-both">text</li> + </ul> + <ul dir="rtl"> + <li class="outside isolate-none">text</li> + <li class="outside isolate-item">text</li> + <li class="outside isolate-marker">text</li> + <li class="outside isolate-both">text</li> + <li class="inside isolate-none">text</li> + <li class="inside isolate-item">text</li> + <li class="inside isolate-marker">text</li> + <li class="inside isolate-both">text</li> + </ul> +</section> +<section> + <ul dir="ltr"> + <li class="outside isolate-none">text</li> + <li class="outside isolate-item">text</li> + <li class="outside isolate-marker">text</li> + <li class="outside isolate-both">text</li> + <li class="inside isolate-none">text</li> + <li class="inside isolate-item">text</li> + <li class="inside isolate-marker">text</li> + <li class="inside isolate-both">text</li> + </ul> + <ul dir="rtl"> + <li class="outside isolate-none">text</li> + <li class="outside isolate-item">text</li> + <li class="outside isolate-marker">text</li> + <li class="outside isolate-both">text</li> + <li class="inside isolate-none">text</li> + <li class="inside isolate-item">text</li> + <li class="inside isolate-marker">text</li> + <li class="inside isolate-both">text</li> + </ul> +</section> +<section> + <ul dir="ltr"> + <li class="outside override-none">text</li> + <li class="outside override-item">text</li> + <li class="outside override-marker">text</li> + <li class="outside override-both">text</li> + <li class="inside override-none">text</li> + <li class="inside override-item">text</li> + <li class="inside override-marker">text</li> + <li class="inside override-both">text</li> + </ul> + <ul dir="rtl"> + <li class="outside override-none">text</li> + <li class="outside override-item">txet</li> + <li class="outside override-marker">text</li> + <li class="outside override-both">txet</li> + <li class="inside override-none">text</li> + <li class="inside override-item">txet</li> + <li class="inside override-marker">text</li> + <li class="inside override-both">txet</li> + </ul> +</section> +<section> + <ul dir="ltr"> + <li class="outside isolateoverride-none">text</li> + <li class="outside isolateoverride-item">text</li> + <li class="outside isolateoverride-marker">text</li> + <li class="outside isolateoverride-both">text</li> + <li class="inside isolateoverride-none">text</li> + <li class="inside isolateoverride-item">text</li> + <li class="inside isolateoverride-marker">text</li> + <li class="inside isolateoverride-both">text</li> + </ul> + <ul dir="rtl"> + <li class="outside isolateoverride-none">text</li> + <li class="outside isolateoverride-item">txet</li> + <li class="outside isolateoverride-marker">text</li> + <li class="outside isolateoverride-both">txet</li> + <li class="inside isolateoverride-none">text</li> + <li class="inside isolateoverride-item">txet</li> + <li class="inside isolateoverride-marker">text</li> + <li class="inside isolateoverride-both">txet</li> + </ul> +</section> +<section> + <ul dir="ltr"> + <li class="outside plaintext-none">text</li> + <li class="outside plaintext-item">text</li> + <li class="outside plaintext-marker">text</li> + <li class="outside plaintext-both">text</li> + <li class="inside plaintext-none">text</li> + <li class="inside plaintext-item">text</li> + <li class="inside plaintext-marker">text</li> + <li class="inside plaintext-both">text</li> + </ul> + <ul dir="rtl"> + <li class="outside plaintext-none">text</li> + <li class="outside plaintext-item">text</li> + <li class="outside plaintext-marker">text</li> + <li class="outside plaintext-both">text</li> + <li class="inside plaintext-none">text</li> + <li class="inside plaintext-item"><span>text</span></li> + <li class="inside plaintext-marker">text</li> + <li class="inside plaintext-both"><span>text</span></li> + </ul> +</section> diff --git a/testing/web-platform/tests/css/css-lists/list-marker-symbol-bidi.html b/testing/web-platform/tests/css/css-lists/list-marker-symbol-bidi.html new file mode 100644 index 0000000000..47e77be899 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-marker-symbol-bidi.html @@ -0,0 +1,148 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Symbol markers with unicode-bidi</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#markers" title="3. Markers"> +<link rel="match" href="list-marker-symbol-bidi-ref.html"> +<meta name="assert" content="This test checks that symbol markers are painted independently of unicode-bidi."> +<style> +section { + float: left; +} +.inside { + list-style-position: inside; +} +.embed-item, .embed-both { + unicode-bidi: embed; +} +.isolate-item, .isolate-both { + unicode-bidi: isolate; +} +.override-item, .override-both { + unicode-bidi: bidi-override; +} +.isolateoverride-item, .isolateoverride-both { + unicode-bidi: isolate-override; +} +.plaintext-item, .plaintext-both { + unicode-bidi: plaintext; +} +.embed-item::marker, .embed-none::marker, +.isolate-item::marker, .isolate-none::marker, +.override-item::marker, .override-none::marker, +.paintext-item::marker, .paintext-none::marker, +.isolateoverride-item::marker, .isolateoverride-none::marker { + unicode-bidi: normal; +} +::marker { font-family: inherit; } +</style> +<section> + <ul dir="ltr"> + <li class="outside embed-none">text</li> + <li class="outside embed-item">text</li> + <li class="outside embed-marker">text</li> + <li class="outside embed-both">text</li> + <li class="inside embed-none">text</li> + <li class="inside embed-item">text</li> + <li class="inside embed-marker">text</li> + <li class="inside embed-both">text</li> + </ul> + <ul dir="rtl"> + <li class="outside isolate-none">text</li> + <li class="outside isolate-item">text</li> + <li class="outside isolate-marker">text</li> + <li class="outside isolate-both">text</li> + <li class="inside isolate-none">text</li> + <li class="inside isolate-item">text</li> + <li class="inside isolate-marker">text</li> + <li class="inside isolate-both">text</li> + </ul> +</section> +<section> + <ul dir="ltr"> + <li class="outside isolate-none">text</li> + <li class="outside isolate-item">text</li> + <li class="outside isolate-marker">text</li> + <li class="outside isolate-both">text</li> + <li class="inside isolate-none">text</li> + <li class="inside isolate-item">text</li> + <li class="inside isolate-marker">text</li> + <li class="inside isolate-both">text</li> + </ul> + <ul dir="rtl"> + <li class="outside isolate-none">text</li> + <li class="outside isolate-item">text</li> + <li class="outside isolate-marker">text</li> + <li class="outside isolate-both">text</li> + <li class="inside isolate-none">text</li> + <li class="inside isolate-item">text</li> + <li class="inside isolate-marker">text</li> + <li class="inside isolate-both">text</li> + </ul> +</section> +<section> + <ul dir="ltr"> + <li class="outside override-none">text</li> + <li class="outside override-item">text</li> + <li class="outside override-marker">text</li> + <li class="outside override-both">text</li> + <li class="inside override-none">text</li> + <li class="inside override-item">text</li> + <li class="inside override-marker">text</li> + <li class="inside override-both">text</li> + </ul> + <ul dir="rtl"> + <li class="outside override-none">text</li> + <li class="outside override-item">text</li> + <li class="outside override-marker">text</li> + <li class="outside override-both">text</li> + <li class="inside override-none">text</li> + <li class="inside override-item">text</li> + <li class="inside override-marker">text</li> + <li class="inside override-both">text</li> + </ul> +</section> +<section> + <ul dir="ltr"> + <li class="outside isolateoverride-none">text</li> + <li class="outside isolateoverride-item">text</li> + <li class="outside isolateoverride-marker">text</li> + <li class="outside isolateoverride-both">text</li> + <li class="inside isolateoverride-none">text</li> + <li class="inside isolateoverride-item">text</li> + <li class="inside isolateoverride-marker">text</li> + <li class="inside isolateoverride-both">text</li> + </ul> + <ul dir="rtl"> + <li class="outside isolateoverride-none">text</li> + <li class="outside isolateoverride-item">text</li> + <li class="outside isolateoverride-marker">text</li> + <li class="outside isolateoverride-both">text</li> + <li class="inside isolateoverride-none">text</li> + <li class="inside isolateoverride-item">text</li> + <li class="inside isolateoverride-marker">text</li> + <li class="inside isolateoverride-both">text</li> + </ul> +</section> +<section> + <ul dir="ltr"> + <li class="outside plaintext-none">text</li> + <li class="outside plaintext-item">text</li> + <li class="outside plaintext-marker">text</li> + <li class="outside plaintext-both">text</li> + <li class="inside plaintext-none">text</li> + <li class="inside plaintext-item">text</li> + <li class="inside plaintext-marker">text</li> + <li class="inside plaintext-both">text</li> + </ul> + <ul dir="rtl"> + <li class="outside plaintext-none">text</li> + <li class="outside plaintext-item">text</li> + <li class="outside plaintext-marker">text</li> + <li class="outside plaintext-both">text</li> + <li class="inside plaintext-none">text</li> + <li class="inside plaintext-item">text</li> + <li class="inside plaintext-marker">text</li> + <li class="inside plaintext-both">text</li> + </ul> +</section> diff --git a/testing/web-platform/tests/css/css-lists/list-marker-with-lineheight-and-overflow-hidden-001-ref.html b/testing/web-platform/tests/css/css-lists/list-marker-with-lineheight-and-overflow-hidden-001-ref.html new file mode 100644 index 0000000000..ae6486147e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-marker-with-lineheight-and-overflow-hidden-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test list with overflow:hidden and line-height firstchild</title> + +<p>This test passes if there is a marker for each li and followed by "text" in the same line.</p> + +<ul> + <li> + <div style="line-height:100px;"> + <span>text</span> + </div> + </li> +</ul> +<ul> + <li style="list-style-image: url(resources/white.gif);"> + <div style="line-height:100px;">text</div> + </li> +</ul> + diff --git a/testing/web-platform/tests/css/css-lists/list-marker-with-lineheight-and-overflow-hidden-001.html b/testing/web-platform/tests/css/css-lists/list-marker-with-lineheight-and-overflow-hidden-001.html new file mode 100644 index 0000000000..d78743facb --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-marker-with-lineheight-and-overflow-hidden-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test list with overflow:hidden and line-height firstchild</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel=match href="list-marker-with-lineheight-and-overflow-hidden-001-ref.html"> +<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=344941 --> + +<p>This test passes if there is a marker for each li and followed by "text" in the same line.</p> + +<ul> + <li> + <div style="overflow:hidden; line-height:100px;"> + <span>text</span> + </div> + </li> +</ul> + +<ul> + <li style="list-style-image: url(resources/white.gif);"> + <div style="overflow:hidden; line-height:100px;">text</div> + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/list-style-image-gradients-dynamic-ref.html b/testing/web-platform/tests/css/css-lists/list-style-image-gradients-dynamic-ref.html new file mode 100644 index 0000000000..b8940767e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-image-gradients-dynamic-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<meta charset="utf-8"> +<title>CSS Reference: Gradient list markers with dynamic font-size change</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +li { + list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='background: blue'></svg>"); +} +::marker { + font-size: 36px; +} +</style> +<ul> + <li>text</li> + <li>text</li> + <li>text</li> + <li>text</li> +</ul> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-image-gradients-dynamic.html b/testing/web-platform/tests/css/css-lists/list-style-image-gradients-dynamic.html new file mode 100644 index 0000000000..eb96fdd444 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-image-gradients-dynamic.html @@ -0,0 +1,33 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: Gradient list markers with dynamic font-size change</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#image-markers"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#typedef-gradient"> +<link rel="match" href="list-style-image-gradients-dynamic-ref.html"> +<meta name="assert" content="list-style-image:<gradient> with a single color renders the same as an image without an intrinsic size of the same color"> +<style> +.larger-font ::marker { + font-size: 36px; +} +</style> +<ul> + <li style="list-style-image: linear-gradient(blue, blue)">text</li> + <li style="list-style-image: repeating-linear-gradient(blue, blue 2px, blue 4px)">text</li> + <li style="list-style-image: radial-gradient(blue, blue)">text</li> + <li style="list-style-image: repeating-radial-gradient(blue, blue .2em, blue .4em)">text</li> +</ul> +<script src="/common/reftest-wait.js"></script> +<script> +addEventListener("load", () => { + document.body.offsetLeft; + document.body.classList.add("larger-font"); + takeScreenshot(); +}, {once: true}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-image-gradients-ref.html b/testing/web-platform/tests/css/css-lists/list-style-image-gradients-ref.html new file mode 100644 index 0000000000..21092dad6e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-image-gradients-ref.html @@ -0,0 +1,34 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<meta charset="utf-8"> +<title>CSS Reference: Gradient list markers</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +li { + list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='background: blue'></svg>"); +} +.none > li { list-style-type: none; } +</style> +<ul> + <li>text</li> + <li>text</li> + <li>text</li> + <li>text</li> +</ul> +<ol> + <li>text</li> + <li>text</li> + <li>text</li> + <li>text</li> +</ol> +<ol class="none"> + <li>text</li> + <li>text</li> + <li>text</li> + <li>text</li> +</ol> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-image-gradients.html b/testing/web-platform/tests/css/css-lists/list-style-image-gradients.html new file mode 100644 index 0000000000..eb79715564 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-image-gradients.html @@ -0,0 +1,35 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<meta charset="utf-8"> +<title>CSS Test: Gradient list markers</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#image-markers"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#typedef-gradient"> +<link rel="match" href="list-style-image-gradients-ref.html"> +<meta name="assert" content="list-style-image:<gradient> with a single color renders the same as an image without an intrinsic size of the same color"> +<style> +.none > li { list-style-type: none; } +</style> +<ul> + <li style="list-style-image: linear-gradient(blue, blue)">text</li> + <li style="list-style-image: repeating-linear-gradient(blue, blue 2px, blue 4px)">text</li> + <li style="list-style-image: radial-gradient(blue, blue)">text</li> + <li style="list-style-image: repeating-radial-gradient(blue, blue .2em, blue .4em)">text</li> +</ul> +<ol> + <li style="list-style-image: linear-gradient(blue, blue)">text</li> + <li style="list-style-image: repeating-linear-gradient(blue, blue 2px, blue 4px)">text</li> + <li style="list-style-image: radial-gradient(blue, blue)">text</li> + <li style="list-style-image: repeating-radial-gradient(blue, blue .2em, blue .4em)">text</li> +</ol> +<ol class="none"> + <li style="list-style-image: linear-gradient(blue, blue)">text</li> + <li style="list-style-image: repeating-linear-gradient(blue, blue 2px, blue 4px)">text</li> + <li style="list-style-image: radial-gradient(blue, blue)">text</li> + <li style="list-style-image: repeating-radial-gradient(blue, blue .2em, blue .4em)">text</li> +</ol> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-image-zoom-dynamic-ref.html b/testing/web-platform/tests/css/css-lists/list-style-image-zoom-dynamic-ref.html new file mode 100644 index 0000000000..09baac4663 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-image-zoom-dynamic-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Reference: Image list markers with dynamic zoom</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +body { + zoom: 2; +} +ol { + list-style-position: inside; +} +.gradient { + list-style-image: linear-gradient(blue, cyan); +} +.image { + list-style-image: url("/css/support/blue-100.png"); +} +.svg { + list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='background: blue'></svg>"); +} +</style> +<ol> + <li class="gradient">text</li> + <li class="image">text</li> + <li class="svg">text</li> +</ol> +<script src="/common/reftest-wait.js"></script> +<script> +// Use a "load" event listener to ensure the images have been loaded. +addEventListener("load", () => { + takeScreenshot(); +}, {once: true}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-image-zoom-dynamic.html b/testing/web-platform/tests/css/css-lists/list-style-image-zoom-dynamic.html new file mode 100644 index 0000000000..d0cd9de0aa --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-image-zoom-dynamic.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: Image list markers with dynamic zoom</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#image-markers"> +<link rel="match" href="list-style-image-zoom-dynamic-ref.html"> +<meta name="assert" content="Checks that, if the non-standard 'zoom' property is supported, list marker images are correctly updated when the 'zoom' value changes dynamically."> +<style> +.zoom { + zoom: 2; +} +ol { + list-style-position: inside; +} +.gradient { + list-style-image: linear-gradient(blue, cyan); +} +.image { + list-style-image: url("/css/support/blue-100.png"); +} +.svg { + list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='background: blue'></svg>"); +} +</style> +<ol> + <li class="gradient">text</li> + <li class="image">text</li> + <li class="svg">text</li> +</ol> +<script src="/common/reftest-wait.js"></script> +<script> +// Use a "load" event listener to ensure the images have been loaded. +addEventListener("load", () => { + document.body.offsetLeft; + document.body.classList.add("zoom"); + takeScreenshot(); +}, {once: true}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-armenian-002.xht b/testing/web-platform/tests/css/css-lists/list-style-type-armenian-002.xht new file mode 100644 index 0000000000..9b318b1b6e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-armenian-002.xht @@ -0,0 +1,102 @@ +<?xml version="1.0" encoding="utf-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Test: list-style-type - armenian, up to 9,999</title> +<link rel='author' title='Richard Ishida' href='http://rishida.net' /> +<link rel='reviewer' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact' /> +<link rel='help' href='http://www.w3.org/TR/CSS21/generate.html#list-style' /> +<link rel='alternate' href='http://www.w3.org/International/tests/tests-html-css/tests-list-style-type/generate?test=2' /> +<meta name="assert" content="Setting list-style-type to armenian will cause list numbering to format numbers up to 9,999 in the way described in CSS3 Lists module." /> +<style type='text/css'> +.armenian { list-style-type: armenian; } + +/* the CSS below is not part of the test */ +.test { font-size: 24px; font-family: sans-serif; } +ol { margin: 0; padding-left: 8em; } +.alt { color: #ff6633; margin-left: 40px;} + +</style> +</head> +<body> +<p class="instructions">Test passes if the numbering matches the numbering in the two columns is the same.</p> + + +<div class="test"> + <ol class="armenian"> + <li title="1">Ա</li> + <li title="2">Բ</li> + <li title="3">Գ</li> + <li title="4">Դ</li> + <li title="5">Ե</li> + <li title="6">Զ</li> + <li title="7">Է</li> + <li title="8">Ը</li> + <li title="9">Թ</li> + <li title="10">Ժ</li> + <li title="11">ԺԱ</li> + <li title="12">ԺԲ</li> + </ol> + <ol class="armenian" start="43"> + <li title="43">ԽԳ</li> + </ol> + <ol class="armenian" start="77"> + <li title="77">ՀԷ</li> + </ol> + <ol class="armenian" start="80"> + <li title="80">Ձ</li> + </ol> + <ol class="armenian" start="99"> + <li title="99">ՂԹ</li> + <li title="100">Ճ</li> + <li title="101">ՃԱ</li> + </ol> + <ol class="armenian" start="222"> + <li title="222">ՄԻԲ</li> + </ol> + <ol class="armenian" start="540"> + <li title="540">ՇԽ</li> + </ol> + <ol class="armenian" start="999"> + <li title="999">ՋՂԹ</li> + <li title="1000">Ռ</li> + </ol> + <ol class="armenian" start="1005"> + <li title="1005">ՌԵ</li> + </ol> + <ol class="armenian" start="1060"> + <li title="1060">ՌԿ</li> + </ol> + <ol class="armenian" start="1065"> + <li title="1065">ՌԿԵ</li> + </ol> + <ol class="armenian" start="1800"> + <li title="1800">ՌՊ</li> + </ol> + <ol class="armenian" start="1860"> + <li title="1860">ՌՊԿ</li> + </ol> + <ol class="armenian" start="1865"> + <li title="1865">ՌՊԿԵ</li> + </ol> + <ol class="armenian" start="5865"> + <li title="5865">ՐՊԿԵ</li> + </ol> + <ol class="armenian" start="7005"> + <li title="7005">ՈՒԵ</li> + </ol> + <ol class="armenian" start="7800"> + <li title="7800">ՈՒՊ</li> + </ol> + <ol class="armenian" start="7865"> + <li title="7865">ՈՒՊԿԵ</li> + </ol> + <ol class="armenian" start="9999"> + <li title="9999">ՔՋՂԹ</li> + </ol> +</div> + + +<!--p class="notes">Notes: <br />CSS2.1 CR specifies an armenian property, but does not specify in any detail the mechanism for implementing it. Expectations for behavior in these tests are based on the descriptions of lower-armenian and upper-armenian in the version of the CSS3 Lists module current at the time this test was last updated.</p><p class="notes">The test uses the start attribute to reduce the size of the list. This attribute is deprecated or unavailable in some formats, causing the test page not to validate, but appears to be supported in major browsers anyway (and will be reinstated in HTML5).</p><p class="notes">Both upper and lowercase variants are shown here because the test is about the generative mechanism. The case is tested elsewhere.</p--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-armenian-003.xht b/testing/web-platform/tests/css/css-lists/list-style-type-armenian-003.xht new file mode 100644 index 0000000000..cb915b8d3f --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-armenian-003.xht @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="utf-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Test: list-style-type - armenian, over 9,999</title> +<link rel='author' title='Richard Ishida' href='http://rishida.net' /> +<link rel='reviewer' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact' /> +<link rel='help' href='http://www.w3.org/TR/CSS21/generate.html#list-style' /> +<link rel='alternate' href='http://www.w3.org/International/tests/tests-html-css/tests-list-style-type/generate?test=3' /> +<meta name="assert" content="Setting list-style-type to armenian will cause list numbering to format numbers above 9,999 in the way described in the CSS3 Lists module." /> +<style type='text/css'> +.armenian { list-style-type: armenian; } + +/* the CSS below is not part of the test */ +.test { font-size: 24px; font-family: sans-serif; } +ol { margin: 0; padding-left: 8em; } +.alt { color: #ff6633; margin-left: 40px;} + +</style> +</head> +<body> +<p class="instructions">Test passes if the numbering matches the numbering in the two columns is the same.</p> + + +<div class="test"> + <ol class="armenian" start="10000"> + <li title="10,000">Ա̂</li> + <li title="10,001">Ա̂Ա</li> + </ol> + <ol class="armenian" start="55465"> + <li title="55,465">Ե̂ՐՆԿԵ</li> + </ol> + <ol class="armenian" start="655465"> + <li title="655,465">Կ̂Ե̂ՐՆԿԵ</li> + </ol> +</div> + + +<!--p class="notes">Notes: <br />CSS2.1 CR specifies an armenian property, but does not specify in any detail the mechanism for implementing it. Expectations for behavior in these tests are based on the descriptions of lower-armenian and upper-armenian in the version of the CSS3 Lists module current at the time this test was last updated.</p><p class="notes">The test uses the start attribute to reduce the size of the list. This attribute is deprecated or unavailable in some formats, causing the test page not to validate, but appears to be supported in major browsers anyway (and will be reinstated in HTML5).</p><p class="notes">Both upper and lowercase variants are shown here because the test is about the generative mechanism. The case is tested elsewhere.</p--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-decimal-line-height-ref.html b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-line-height-ref.html new file mode 100644 index 0000000000..856fe43d8e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-line-height-ref.html @@ -0,0 +1,43 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Lists Reference - check that the line height is the same between different forms of ::markers</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> + div { + display: grid; + grid-template-columns: 100px 100px auto; + align-items: start; + background: red; + } + li { + line-height: 100%; + counter-set: list-item 1; + } + ol { + margin: 0; + padding: 0; + padding-left: 40px; + background: green; + } + ::marker { + content: "1. "; + } +</style> + +<div> + <ol> + <li>foo</li> + <li>bar</li> + <li>baz</li> + </ol> + <ol> + <li>foo</li> + <li>bar</li> + <li>baz</li> + </ol> + <ol> + <li>foo</li> + <li>bar</li> + <li>baz</li> + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-decimal-line-height.html b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-line-height.html new file mode 100644 index 0000000000..7aefead82f --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-line-height.html @@ -0,0 +1,49 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Lists Test - check that the line height is the same between different forms of ::markers</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#text-markers"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=942017"> +<link rel="match" href="list-style-type-decimal-line-height-ref.html"> +<style> + div { + display: grid; + grid-template-columns: 100px 100px auto; + align-items: start; + background: red; + } + li { + line-height: 100%; + counter-set: list-item 1; + } + ol { + margin: 0; + padding: 0; + padding-left: 40px; + background: green; + } + ol:nth-child(2) > li { + list-style-type: "1. "; + } + ol:nth-child(3) > ::marker { + content: counter(list-item) ". "; + } +</style> + +<div> + <ol> + <li>foo</li> + <li>bar</li> + <li>baz</li> + </ol> + <ol> + <li>foo</li> + <li>bar</li> + <li>baz</li> + </ol> + <ol> + <li>foo</li> + <li>bar</li> + <li>baz</li> + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-lr-ref.html b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-lr-ref.html new file mode 100644 index 0000000000..6e2f0c101e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-lr-ref.html @@ -0,0 +1,35 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Lists Reference - check baseline alignment of vertical writing-mode text ::markers</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<html> +<style> +html { writing-mode: vertical-lr; } +ol { + padding: 0; + margin: 0; +} +li { list-style-type: none; } +m { + text-align: end; + text-transform: none; + unicode-bidi: isolate; + font-variant-numeric: tabular-nums; + white-space: pre; +} +.sz1 { font-size: 40px; } +.sz1 > m { font-size: 20px; } +.sz2 { font-size: 20px; } +.sz2 > m { font-size: 40px; } +</style> + +<ol><li><m>1. </m>1.</li></ol> +<ol><li><m>1. </m>1.</li></ol> +<ol><li class="sz1"><m>1. </m>1.</li></ol> +<ol><li class="sz1"><m>1. </m>1.</li></ol> +<ol><li class="sz2"><m>1. </m>1.</li></ol> +<ol><li class="sz2"><m>1. </m>1.</li></ol> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-lr.html b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-lr.html new file mode 100644 index 0000000000..56025865c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-lr.html @@ -0,0 +1,32 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Lists Test - check baseline alignment of vertical writing-mode text ::markers</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#text-markers"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1156996"> +<link rel="match" href="list-style-type-decimal-vertical-lr-ref.html"> +<html> +<style> +html { writing-mode: vertical-lr; } +ol { + list-style-position: inside; + padding: 0; + margin: 0; +} +.content::marker { content: "1. "; } +.sz1 { font-size: 40px; } +.sz1::marker { font-size: 20px; } +.sz2 { font-size: 20px; } +.sz2::marker { font-size: 40px; } +</style> + +<ol><li>1.</li></ol> +<ol><li class="content">1.</li></ol> +<ol><li class="sz1">1.</li></ol> +<ol><li class="content sz1">1.</li></ol> +<ol><li class="sz2">1.</li></ol> +<ol><li class="content sz2">1.</li></ol> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-rl-ref.html b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-rl-ref.html new file mode 100644 index 0000000000..b026bab7c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-rl-ref.html @@ -0,0 +1,35 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Lists Reference - check baseline alignment of vertical writing-mode text ::markers</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<html> +<style> +html { writing-mode: vertical-rl; } +ol { + padding: 0; + margin: 0; +} +li { list-style-type: none; } +m { + text-align: end; + text-transform: none; + unicode-bidi: isolate; + font-variant-numeric: tabular-nums; + white-space: pre; +} +.sz1 { font-size: 40px; } +.sz1 > m { font-size: 20px; } +.sz2 { font-size: 20px; } +.sz2 > m { font-size: 40px; } +</style> + +<ol><li><m>1. </m>1.</li></ol> +<ol><li><m>1. </m>1.</li></ol> +<ol><li class="sz1"><m>1. </m>1.</li></ol> +<ol><li class="sz1"><m>1. </m>1.</li></ol> +<ol><li class="sz2"><m>1. </m>1.</li></ol> +<ol><li class="sz2"><m>1. </m>1.</li></ol> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-rl.html b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-rl.html new file mode 100644 index 0000000000..249d7e4410 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-decimal-vertical-rl.html @@ -0,0 +1,32 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Lists Test - check baseline alignment of vertical writing-mode text ::markers</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#text-markers"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1156996"> +<link rel="match" href="list-style-type-decimal-vertical-rl-ref.html"> +<html> +<style> +html { writing-mode: vertical-rl; } +ol { + list-style-position: inside; + padding: 0; + margin: 0; +} +.content::marker { content: "1. "; } +.sz1 { font-size: 40px; } +.sz1::marker { font-size: 20px; } +.sz2 { font-size: 20px; } +.sz2::marker { font-size: 40px; } +</style> + +<ol><li>1.</li></ol> +<ol><li class="content">1.</li></ol> +<ol><li class="sz1">1.</li></ol> +<ol><li class="content sz1">1.</li></ol> +<ol><li class="sz2">1.</li></ol> +<ol><li class="content sz2">1.</li></ol> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-001-ref.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-001-ref.html new file mode 100644 index 0000000000..0d1b136287 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-001-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: String value of list-style-type</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <style> + ol, ul { list-style: none; } + li::before { + content: "# "; + font-variant-numeric: tabular-nums; + } + </style> +</head> +<body> + <ol start="-1"> + <li>item -1</li> + <li>item 0</li> + <li>item 1</li> + <li>item 2</li> + </ol> + <ul start="-1"> + <li>item -1</li> + <li>item 0</li> + <li>item 1</li> + <li>item 2</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-001a.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-001a.html new file mode 100644 index 0000000000..f7ed6e3b34 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-001a.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: String value of list-style-type</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string"> + <link rel="match" href="list-style-type-string-001-ref.html"> + <style> + ol, ul { list-style-type: "# "; list-style-position: inside; } + </style> +</head> +<body> + <ol start="-1"> + <li>item -1</li> + <li>item 0</li> + <li>item 1</li> + <li>item 2</li> + </ol> + <ul start="-1"> + <li>item -1</li> + <li>item 0</li> + <li>item 1</li> + <li>item 2</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-001b.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-001b.html new file mode 100644 index 0000000000..f02bf13a73 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-001b.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: String value of list-style</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string"> + <link rel="match" href="list-style-type-string-001-ref.html"> + <style> + ol, ul { list-style: inside "# "; } + </style> +</head> +<body> + <ol start="-1"> + <li>item -1</li> + <li>item 0</li> + <li>item 1</li> + <li>item 2</li> + </ol> + <ul start="-1"> + <li>item -1</li> + <li>item 0</li> + <li>item 1</li> + <li>item 2</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-002-ref.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-002-ref.html new file mode 100644 index 0000000000..8694b5f544 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-002-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: String value of list-style-type with outside position</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <style> + .list { list-style: none } + .list > ::before { + content: ""; + display: inline-block; + width: 0px; + direction: rtl; + white-space: pre; + } + .list > :nth-child(2)::before { content: "foo" } + .list > :nth-child(3)::before { content: "foobar"; } + .list > :nth-child(4)::before { content: "some very long text that is not going to fit and will overflow"; } + </style> +</head> +<body> + <ol class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ol> + <ul class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-002.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-002.html new file mode 100644 index 0000000000..6f00d8ac4f --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>String value of list-style-type with outside position</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string"> + <link rel="match" href="list-style-type-string-002-ref.html"> + <meta name="assert" content="This test checks that list-style-type can set the marker string when the marker is positioned outside."> + <style> + .list { list-style-type: "" } + .list > :nth-child(2) { list-style-type: "foo" } + .list > :nth-child(3) { list-style-type: "foobar"; } + .list > :nth-child(4) { list-style-type: "some very long text that is not going to fit and will overflow"; } + </style> +</head> +<body> + <ol class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ol> + <ul class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-003-ref.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-003-ref.html new file mode 100644 index 0000000000..ea3601b959 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-003-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: String value of list-style-type with RTL direction</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <style> + .list { + list-style: none; + direction: rtl; + } + .list > ::before { + content: ""; + display: inline-block; + width: 0px; + direction: ltr; + white-space: pre; + } + .list > :nth-child(2)::before { content: "foo" } + .list > :nth-child(3)::before { content: "foobar"; } + .list > :nth-child(4)::before { content: "some very long text that is not going to fit and will overflow"; } + </style> +</head> +<body> + <ol class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ol> + <ul class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-003.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-003.html new file mode 100644 index 0000000000..94467ca1f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>String value of list-style-type with RTL direction</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string"> + <link rel="match" href="list-style-type-string-003-ref.html"> + <meta name="assert" content="This test checks that list-style-type can set the marker string when the direction is RTL."> + <style> + .list { + list-style-type: ""; + direction: rtl; + } + .list > :nth-child(2) { list-style-type: "foo" } + .list > :nth-child(3) { list-style-type: "foobar"; } + .list > :nth-child(4) { list-style-type: "some very long text that is not going to fit and will overflow"; } + </style> +</head> +<body> + <ol class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ol> + <ul class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-004-ref.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-004-ref.html new file mode 100644 index 0000000000..3a828b2889 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-004-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: String value of list-style-type changing dynamically</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <style> + .list { list-style-type: "bar" } + </style> +</head> +<body> + <ol class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ol> + <ul class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-004.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-004.html new file mode 100644 index 0000000000..922a4ecea8 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-004.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: String value of list-style-type changing dynamically</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string"> + <link rel="match" href="list-style-type-string-004-ref.html"> + <meta name="assert" content="This test checks that the marker text is updated when list-style-type changes."> + <style> + .list { list-style-type: "foo" } + </style> +</head> +<body> + <ol class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ol> + <ul class="list"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + </ul> + <script src="/common/reftest-wait.js"></script> + <script> + "use strict"; + addEventListener("load", function() { + requestAnimationFrame(() => { + for (const list of document.querySelectorAll(".list")) { + list.style.listStyleType = '"bar"'; + } + takeScreenshot(); + }); + }, {once: true}); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-005-ref.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-005-ref.html new file mode 100644 index 0000000000..703ceff068 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-005-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: String value of list-style-type with bidi text</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <style> + .list { + width: 50%; + box-sizing: border-box; + float: left; + padding-inline-start: 14ch; + margin: 0; + line-height: 1.6; + list-style: none; + } + .rtl { direction: rtl } + .list > ::before { + unicode-bidi: isolate; + display: inline-flex; + flex-direction: row-reverse; + width: 0px; + white-space: pre; + } + .list > :nth-child(1)::before { content: "\627 \644 " } + .list > :nth-child(2)::before { content: "\61 \627 \644 " } + .list > :nth-child(3)::before { content: "\627 \644 \62 " } + .list > :nth-child(4)::before { content: "\61 \627 \644 \62 " } + .list > :nth-child(5)::before { content: "\61 \62 \627 \644 " } + .list > :nth-child(6)::before { content: "\627 \644 \61 \62 " } + .list > :nth-child(7)::before { content: "\31 \627 \644 " } + .list > :nth-child(8)::before { content: "\627 \644 \32 " } + .list > :nth-child(9)::before { content: "\31 \627 \644 \32 " } + .list > :nth-child(10)::before { content: "\31 \32 \627 \644 " } + .list > :nth-child(11)::before { content: "\627 \644 \31 \32 " } + </style> +</head> +<body> + <ol class="list ltr"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + </ol> + <ul class="list rtl"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-005a.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-005a.html new file mode 100644 index 0000000000..725cdee1a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-005a.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>String value of list-style-type with bidi text</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string"> + <link rel="match" href="list-style-type-string-005-ref.html"> + <meta name="assert" content="This test checks that the bidi algorithm runs for markers."> + <style> + .list { + width: 50%; + box-sizing: border-box; + float: left; + padding-inline-start: 14ch; + margin: 0; + line-height: 1.6; + } + .rtl { direction: rtl } + .list > :nth-child(1) { list-style-type: "\627 \644 " } + .list > :nth-child(2) { list-style-type: "\61 \627 \644 " } + .list > :nth-child(3) { list-style-type: "\627 \644 \62 " } + .list > :nth-child(4) { list-style-type: "\61 \627 \644 \62 " } + .list > :nth-child(5) { list-style-type: "\61 \62 \627 \644 " } + .list > :nth-child(6) { list-style-type: "\627 \644 \61 \62 " } + .list > :nth-child(7) { list-style-type: "\31 \627 \644 " } + .list > :nth-child(8) { list-style-type: "\627 \644 \32 " } + .list > :nth-child(9) { list-style-type: "\31 \627 \644 \32 " } + .list > :nth-child(10) { list-style-type: "\31 \32 \627 \644 " } + .list > :nth-child(11) { list-style-type: "\627 \644 \31 \32 " } + </style> +</head> +<body> + <ol class="list ltr"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + </ol> + <ul class="list rtl"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-005b.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-005b.html new file mode 100644 index 0000000000..ca984b6d3b --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-005b.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>String value of list-style-type with bidi text in multicol</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string"> + <link rel="match" href="list-style-type-string-005-ref.html"> + <meta name="assert" content="This test checks that the bidi algorithm runs for markers in multicol."> + <style> + body { column-count: 2 } + .list { + padding-inline-start: 14ch; + margin: 0; + line-height: 1.6; + } + .rtl { direction: rtl } + .list > :nth-child(1) { list-style-type: "\627 \644 " } + .list > :nth-child(2) { list-style-type: "\61 \627 \644 " } + .list > :nth-child(3) { list-style-type: "\627 \644 \62 " } + .list > :nth-child(4) { list-style-type: "\61 \627 \644 \62 " } + .list > :nth-child(5) { list-style-type: "\61 \62 \627 \644 " } + .list > :nth-child(6) { list-style-type: "\627 \644 \61 \62 " } + .list > :nth-child(7) { list-style-type: "\31 \627 \644 " } + .list > :nth-child(8) { list-style-type: "\627 \644 \32 " } + .list > :nth-child(9) { list-style-type: "\31 \627 \644 \32 " } + .list > :nth-child(10) { list-style-type: "\31 \32 \627 \644 " } + .list > :nth-child(11) { list-style-type: "\627 \644 \31 \32 " } + </style> +</head> +<body> + <ol class="list ltr"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + </ol> + <ul class="list rtl"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-006-ref.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-006-ref.html new file mode 100644 index 0000000000..5c0a51329e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-006-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: String value of list-style-type with bidi text inside</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <style> + .list { + width: 50%; + box-sizing: border-box; + float: left; + padding-inline-start: 14ch; + margin: 0; + line-height: 1.6; + list-style: none; + } + .rtl { direction: rtl } + .list > ::before { unicode-bidi: isolate } + .list > :nth-child(1)::before { content: "\627 \644 " } + .list > :nth-child(2)::before { content: "\61 \627 \644 " } + .list > :nth-child(3)::before { content: "\627 \644 \62 " } + .list > :nth-child(4)::before { content: "\61 \627 \644 \62 " } + .list > :nth-child(5)::before { content: "\61 \62 \627 \644 " } + .list > :nth-child(6)::before { content: "\627 \644 \61 \62 " } + .list > :nth-child(7)::before { content: "\31 \627 \644 " } + .list > :nth-child(8)::before { content: "\627 \644 \32 " } + .list > :nth-child(9)::before { content: "\31 \627 \644 \32 " } + .list > :nth-child(10)::before { content: "\31 \32 \627 \644 " } + .list > :nth-child(11)::before { content: "\627 \644 \31 \32 " } + </style> +</head> +<body> + <ol class="list ltr"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + </ol> + <ul class="list rtl"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-006.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-006.html new file mode 100644 index 0000000000..7f6904b777 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-006.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>String value of list-style-type with bidi text inside</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string"> + <link rel="match" href="list-style-type-string-006-ref.html"> + <meta name="assert" content="This test checks that the bidi algorithm runs for markers with unicode-bidi:isolate, so that the text inside the marker is isolated from the text outside. This is only relevant when the marker is positioned inside."> + <style> + .list { + list-style-position: inside; + width: 50%; + box-sizing: border-box; + float: left; + padding-inline-start: 14ch; + margin: 0; + line-height: 1.6; + } + .rtl { direction: rtl } + .list > :nth-child(1) { list-style-type: "\627 \644 " } + .list > :nth-child(2) { list-style-type: "\61 \627 \644 " } + .list > :nth-child(3) { list-style-type: "\627 \644 \62 " } + .list > :nth-child(4) { list-style-type: "\61 \627 \644 \62 " } + .list > :nth-child(5) { list-style-type: "\61 \62 \627 \644 " } + .list > :nth-child(6) { list-style-type: "\627 \644 \61 \62 " } + .list > :nth-child(7) { list-style-type: "\31 \627 \644 " } + .list > :nth-child(8) { list-style-type: "\627 \644 \32 " } + .list > :nth-child(9) { list-style-type: "\31 \627 \644 \32 " } + .list > :nth-child(10) { list-style-type: "\31 \32 \627 \644 " } + .list > :nth-child(11) { list-style-type: "\627 \644 \31 \32 " } + </style> +</head> +<body> + <ol class="list ltr"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + </ol> + <ul class="list rtl"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-007-ref.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-007-ref.html new file mode 100644 index 0000000000..8c523a968c --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-007-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: String value of list-style-type with Ahem font</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + main { + width: 300px; + overflow: auto; + padding: 10px 0; + } + pre { + font: 10px/1 Ahem; + margin: 0; + width: 100%; + padding-right: 70px; + } + </style> +</head> +<body> + <main> + <pre> É1 1É </pre> + <pre> XXXÉ2 2ÉXXX </pre> + <pre> XXXpppÉ3 3ÉXXXppp </pre> + <pre> XXX ppp É4 4É XXX ppp </pre> + <pre> XXX pppÉ5 5ÉXXX ppp </pre> + <pre>XX Xp pp É6 6É XX Xp pp</pre> + <pre>X X Xp p pÉ7 7ÉX X Xp p p</pre> + <pre>XX XXXpXXXÉ8 8ÉXXXXpXX XX</pre> + <pre>X XXXpXXX É9 9É XXXXpXX X</pre> + </main> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-style-type-string-007.html b/testing/web-platform/tests/css/css-lists/list-style-type-string-007.html new file mode 100644 index 0000000000..55c883ff4c --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-style-type-string-007.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>String value of list-style-type with Ahem font</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string"> + <link rel="match" href="list-style-type-string-007-ref.html"> + <meta name="assert" content="This test checks that list-style-type can set the marker string with the Ahem font."> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + main { + width: 300px; + overflow: auto; + padding: 10px 0; + } + .list { + font: 10px/1 Ahem; + padding-inline-start: 100px; + margin: 0; + width: 50px; + float: left; + } + .rtl { direction: rtl; } + .list > :nth-child(1) { list-style-type: ""; } + .list > :nth-child(2) { list-style-type: "XXX"; } + .list > :nth-child(3) { list-style-type: "XXXppp"; } + .list > :nth-child(4) { list-style-type: " XXX ppp "; } + .list > :nth-child(5) { list-style-type: "XXX ppp"; } + .list > :nth-child(6) { list-style-type: " XX Xp pp "; } + .list > :nth-child(7) { list-style-type: "X X Xp p p"; } + .list > :nth-child(8) { list-style-type: "XXXXpXX XXXpXXX"; } + .list > :nth-child(9) { list-style-type: " XXXXpXX XXXpXXX "; } + </style> +</head> +<body> + <main> + <ol class="list"> + <li>É1</li> + <li>É2</li> + <li>É3</li> + <li>É4</li> + <li>É5</li> + <li>É6</li> + <li>É7</li> + <li>É8</li> + <li>É9</li> + </ol> + <ul class="list rtl"> + <li>1É</li> + <li>2É</li> + <li>3É</li> + <li>4É</li> + <li>5É</li> + <li>6É</li> + <li>7É</li> + <li>8É</li> + <li>9É</li> + </ul> + </main> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-type-none-style-image-ref.html b/testing/web-platform/tests/css/css-lists/list-type-none-style-image-ref.html new file mode 100644 index 0000000000..e54375fe9b --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-type-none-style-image-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>Reference: CSS Lists: 'list-style-image' takes precedence over 'list-style-type: none'</title> + <link rel="author" title="Emil A Eklund" href="mailto:eae@chromium.org"> + <style> + li { + list-style-image: url('../../images/green-16x16.png'); + } + ::marker { + font-family: inherit; + } + </style> + </head> + <body> + <ul> + <li>Should have a green square list marker.</li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-type-none-style-image.html b/testing/web-platform/tests/css/css-lists/list-type-none-style-image.html new file mode 100644 index 0000000000..6b7b83afc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-type-none-style-image.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Lists: 'list-style-image' takes precedence over 'list-style-type: none'</title> + <link rel="author" title="Emil A Eklund" href="mailto:eae@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-image"> + <link rel="match" href="list-type-none-style-image-ref.html"> + <style> + ul { + list-style-type: none; + } + li { + list-style-image: url('../../images/green-16x16.png'); + } + </style> + </head> + <body> + <ul> + <li>Should have a green square list marker.</li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/list-with-image-display-changed-001-ref.html b/testing/web-platform/tests/css/css-lists/list-with-image-display-changed-001-ref.html new file mode 100644 index 0000000000..bfe0eb60f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-with-image-display-changed-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test list with firstchild changing display</title> + +<style> +li { border: 3px solid black; margin: 3px; } +img { display: block; } +</style> + +<ul> + <li> + <a href="#"><img src="./resources/white.gif" width=32 height=32 /></a> + Some other text + </li> +</ul> diff --git a/testing/web-platform/tests/css/css-lists/list-with-image-display-changed-001.html b/testing/web-platform/tests/css/css-lists/list-with-image-display-changed-001.html new file mode 100644 index 0000000000..d4b3e300f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/list-with-image-display-changed-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: test list with firstchild changing display</title> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/2787"> +<link rel=match href="list-with-image-display-changed-001-ref.html"> +<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=715288 --> +<meta name="assert" content=" + After the display of img being changed from block to inline, then back to block, + the final position of marker should be the same as the beginning." /> + +<style> +li { border: 3px solid black; margin: 3px; } +img { display: block; } +</style> + +<ul> + <li> + <a href="#"><img src="./resources/white.gif" width=32 height=32 /></a> + Some other text + </li> +</ul> +<script> + document.body.offsetTop; + var img = document.querySelector('a img'); + img.style.display = 'inline'; + img.offsetWidth; + img.style.display = 'block'; +</script> + diff --git a/testing/web-platform/tests/css/css-lists/marker-dynamic-content-change-ref.html b/testing/web-platform/tests/css/css-lists/marker-dynamic-content-change-ref.html new file mode 100644 index 0000000000..6b5daa1b97 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/marker-dynamic-content-change-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> +::marker { + content: "PASS"; +} +</style> +<ol> + <li>Item +</ol> diff --git a/testing/web-platform/tests/css/css-lists/marker-dynamic-content-change.html b/testing/web-platform/tests/css/css-lists/marker-dynamic-content-change.html new file mode 100644 index 0000000000..31abb16cdc --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/marker-dynamic-content-change.html @@ -0,0 +1,25 @@ +<!doctype html> +<html class=reftest-wait> +<title>Dynamic content change on ::marker</title> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-pseudo"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1697998"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-dynamic-content-change-ref.html"> +<style> +::marker { + content: "FAIL"; +} +.tweak ::marker { + content: "PASS"; +} +</style> +<script> + document.addEventListener("TestRendered", function() { + document.documentElement.classList = "tweak"; + }); +</script> +<ol> + <li>Item +</ol> diff --git a/testing/web-platform/tests/css/css-lists/marker-webkit-text-fill-color-ref.html b/testing/web-platform/tests/css/css-lists/marker-webkit-text-fill-color-ref.html new file mode 100644 index 0000000000..2ca6263d2c --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/marker-webkit-text-fill-color-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Lists Reference - ::markers should honor -webkit-text-fill-color</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Xidorn Quan" href="https://github.com/upsuper"> +<style> +:root, ::marker { color: green; -webkit-text-fill-color: green } +.c1::marker { content: counter(list-item, decimal) } +.c2::marker { content: counter(list-item, disc) } +.c3::marker { content: counter(list-item, square) } +.c4::marker { content: counter(list-item, circle) } +.c5::marker { content: counter(list-item, disclosure-open) } +.c6::marker { content: counter(list-item, disclosure-closed) } +</style> +<pre>PASS if all text and symbols are green. Nothing is red or black.</pre> +<ol><li>hello</li></ol> +<ul><li>hello<ul><li>hello<ul><li>hello</li></ul></li></ul></li></ul> +<ul><li style="list-style-type:disclosure-open">hello<ul><li style="list-style-type:disclosure-closed">hello</li></ul></li></ul> +<ul><li style="list-style-type:'hej'">hello</li></ul> +<ul><li class="c1">hello</li></ul> +<ul><li class="c2">hello</li></ul> +<ul><li class="c3">hello</li></ul> +<ul><li class="c4">hello</li></ul> +<ul><li class="c5">hello</li></ul> +<ul><li class="c6">hello</li></ul> diff --git a/testing/web-platform/tests/css/css-lists/marker-webkit-text-fill-color.html b/testing/web-platform/tests/css/css-lists/marker-webkit-text-fill-color.html new file mode 100644 index 0000000000..4ed97362cc --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/marker-webkit-text-fill-color.html @@ -0,0 +1,32 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Lists Test - ::markers should honor -webkit-text-fill-color</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Xidorn Quan" href="https://github.com/upsuper"> +<link rel="help" href="https://github.com/whatwg/compat/issues/71"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1329052"> +<link rel="match" href="marker-webkit-text-fill-color-ref.html"> +<style> +:root { color: red; -webkit-text-fill-color: green } +.c1::marker { content: counter(list-item, decimal) } +.c2::marker { content: counter(list-item, disc) } +.c3::marker { content: counter(list-item, square) } +.c4::marker { content: counter(list-item, circle) } +.c5::marker { content: counter(list-item, disclosure-open) } +.c6::marker { content: counter(list-item, disclosure-closed) } +</style> +<pre>PASS if all text and symbols are green. Nothing is red or black.</pre> +<ol><li>hello</li></ol> +<ul><li>hello<ul><li>hello<ul><li>hello</li></ul></li></ul></li></ul> +<ul><li style="list-style-type:disclosure-open">hello<ul><li style="list-style-type:disclosure-closed">hello</li></ul></li></ul> +<ul><li style="list-style-type:'hej'">hello</li></ul> +<ul><li class="c1">hello</li></ul> +<ul><li class="c2">hello</li></ul> +<ul><li class="c3">hello</li></ul> +<ul><li class="c4">hello</li></ul> +<ul><li class="c5">hello</li></ul> +<ul><li class="c6">hello</li></ul> diff --git a/testing/web-platform/tests/css/css-lists/nested-list-with-list-style-type-none.html b/testing/web-platform/tests/css/css-lists/nested-list-with-list-style-type-none.html new file mode 100644 index 0000000000..325459df8a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/nested-list-with-list-style-type-none.html @@ -0,0 +1,29 @@ +<meta charset="utf-8"> +<title>CSS Lists: test the margin collapse of marker</title> +<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists"> +<link rel="help" href="http://crbug.com/985298"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +li { + list-style-type:none; + list-style-image:url(images/white.gif); +} +</style> +<body> + <p>PASS if no crash or DCHECK failure in quirks mode.</p> + <ul> + <li> + <ul></ul> + </li> + </ul> + <script type="text/javascript"> + setup({ single_test: true }); + // TODO(jugglinmike): If accepted, WPT RFC #33 will introduce a new test + // type intended to simplify tests like this one. Refactor this test to the + // new test type following its acceptance. + // https://github.com/web-platform-tests/rfcs/pull/33 + done(); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-lists/nested-marker-dynamic.html b/testing/web-platform/tests/css/css-lists/nested-marker-dynamic.html new file mode 100644 index 0000000000..fdfb93dc61 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/nested-marker-dynamic.html @@ -0,0 +1,36 @@ +<!doctype html> +<title>::marker pseudo-elements generated by ::before and ::after are not addressable by selectors</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#list-item"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1539171"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1543758"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="nested-marker-ref.html"> +<style> + li, ::marker { + color: red; + } + li::before, li::after { + display: list-item; + content: "Before"; + } + li::after { + content: "After"; + } + .tweak::marker { + color: blue; + } + .tweak, .tweak::before, .tweak::after { + color: initial; + } +</style> +<ol> + <li>Foo + <li>Bar +<script> + window.onload = function() { + document.body.offsetTop; + for (let li of document.querySelectorAll("li")) + li.classList.add("tweak"); + } +</script> diff --git a/testing/web-platform/tests/css/css-lists/nested-marker-ref.html b/testing/web-platform/tests/css/css-lists/nested-marker-ref.html new file mode 100644 index 0000000000..c4233918ab --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/nested-marker-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<title>CSS test reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<style> + li::marker { + color: blue; + } + div { + display: list-item; + } +</style> +<ol> + <li><div>Before</div>Foo<div>After</div> + <li><div>Before</div>Bar<div>After</div> diff --git a/testing/web-platform/tests/css/css-lists/nested-marker.html b/testing/web-platform/tests/css/css-lists/nested-marker.html new file mode 100644 index 0000000000..9627ce936a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/nested-marker.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>::marker pseudo-elements generated by ::before and ::after are not addressable by global selectors</title> +<link rel="help" href="https://drafts.csswg.org/css-lists/#list-item"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1539171"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1543758"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="nested-marker-ref.html"> +<style> + ::marker { + color: red; + } + li::marker { + color: blue; + } + li::before, li::after { + display: list-item; + content: "Before"; + } + li::after { + content: "After"; + } +</style> +<ol> + <li>Foo + <li>Bar diff --git a/testing/web-platform/tests/css/css-lists/ol-change-display-type-ref.html b/testing/web-platform/tests/css/css-lists/ol-change-display-type-ref.html new file mode 100644 index 0000000000..a10bc17899 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/ol-change-display-type-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=help href="https://crbug.com/1020669"> +<style> + .item { + display: list-item; + } + .item:after { + content: counter(section); + display: list-item; + } + .table-header { + display: table-header-group; + } +</style> +<body> + <ol reversed="reversed"> + <span class="table-header"> + <figure class="item"></figure> + </span> + </ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/ol-change-display-type.html b/testing/web-platform/tests/css/css-lists/ol-change-display-type.html new file mode 100644 index 0000000000..e711cfef5d --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/ol-change-display-type.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Lists: Change display type of reverse ol list element.</title> +<link rel=help href="https://crbug.com/1020669"> +<link rel=match href="ol-change-display-type-ref.html"> +<style> + .item { + display: list-item; + } + .item:after { + content: counter(section); + display: list-item; + } + .table-header { + display: table-header-group; + } +</style> +<body> + <ol reversed="reversed"> + <span id="span"> + <figure class="item"></figure> + </span> + </ol> +</body> +<script> + document.body.offsetTop; + document.getElementById('span').setAttribute('class', 'table-header'); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/content-invalid.html b/testing/web-platform/tests/css/css-lists/parsing/content-invalid.html new file mode 100644 index 0000000000..54fe99c0f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/content-invalid.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: parsing counter()/counters() values for the 'content' property</title> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#counter-functions"> +<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('content', 'counter(foo, none)'); +test_invalid_value('content', 'counters(foo, "", none)'); +test_invalid_value('content', 'counter(foo, unset)'); +test_invalid_value('content', 'counters(foo, "", unset)'); +test_invalid_value('content', 'counter(foo, initial)'); +test_invalid_value('content', 'counters(foo, "", initial)'); +test_invalid_value('content', 'counter(foo, inherit)'); +test_invalid_value('content', 'counters(foo, "", inherit)'); + +test_invalid_value('content', '"z" counter(foo, none)'); +test_invalid_value('content', '"z" counters(foo, "", none)'); +test_invalid_value('content', '"z" counter(foo, unset)'); +test_invalid_value('content', '"z" counters(foo, "", unset)'); +test_invalid_value('content', '"z" counter(foo, initial)'); +test_invalid_value('content', '"z" counters(foo, "", initial)'); +test_invalid_value('content', '"z" counter(foo, inherit)'); +test_invalid_value('content', '"z" counters(foo, "", inherit)'); + +test_invalid_value('content', 'counter(foo, none) "z"'); +test_invalid_value('content', 'counters(foo, "", none) "z"'); +test_invalid_value('content', 'counter(foo, unset) "z"'); +test_invalid_value('content', 'counters(foo, "", unset) "z"'); +test_invalid_value('content', 'counter(foo, initial) "z"'); +test_invalid_value('content', 'counters(foo, "", initial) "z"'); +test_invalid_value('content', 'counter(foo, inherit) "z"'); +test_invalid_value('content', 'counters(foo, "", inherit) "z"'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/counter-increment-invalid.html b/testing/web-platform/tests/css/css-lists/parsing/counter-increment-invalid.html new file mode 100644 index 0000000000..b893d537ce --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/counter-increment-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: parsing counter-increment with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-counter-increment"> +<meta name="assert" content="counter-increment supports only the grammar '[ <counter-name> <integer>? ]+ | 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('counter-increment', 'none chapter'); +test_invalid_value('counter-increment', 'reversed(none)'); +test_invalid_value('counter-increment', 'reversed(chapter)'); +test_invalid_value('counter-increment', '3'); +test_invalid_value('counter-increment', '99 imagenum'); +test_invalid_value('counter-increment', 'section -1, imagenum 99'); +test_invalid_value('counter-increment', 'section 3.14'); +test_invalid_value('counter-increment', 'inherit 1'); +test_invalid_value('counter-increment', 'initial 1'); +test_invalid_value('counter-increment', 'unset 1'); +test_invalid_value('counter-increment', 'default 1'); +test_invalid_value('counter-increment', 'revert 1'); +test_invalid_value('counter-increment', 'revert-layer 1'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/counter-increment-valid.html b/testing/web-platform/tests/css/css-lists/parsing/counter-increment-valid.html new file mode 100644 index 0000000000..277269000a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/counter-increment-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: parsing counter-increment with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-counter-increment"> +<meta name="assert" content="counter-increment supports the full grammar '[ <counter-name> <integer>? ]+ | 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('counter-increment', 'none'); +test_valid_value('counter-increment', 'chapter', 'chapter 1'); +test_valid_value('counter-increment', 'section -1'); +test_valid_value('counter-increment', 'first -1 second third 99', 'first -1 second 1 third 99'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/counter-reset-invalid.html b/testing/web-platform/tests/css/css-lists/parsing/counter-reset-invalid.html new file mode 100644 index 0000000000..18e406bd17 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/counter-reset-invalid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: parsing counter-reset with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-counter-reset"> +<meta name="assert" content="counter-reset supports only the grammar '[ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+ | 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('counter-reset', 'none chapter'); +test_invalid_value('counter-reset', 'reversed(none)'); +test_invalid_value('counter-reset', 'reversed(chapter) none'); +test_invalid_value('counter-reset', '3'); +test_invalid_value('counter-reset', 'reversed(3)'); +test_invalid_value('counter-reset', '99 imagenum'); +test_invalid_value('counter-reset', '99 reversed(imagenum)'); +test_invalid_value('counter-reset', 'section -1, imagenum 99'); +test_invalid_value('counter-reset', 'section 3.14'); +test_invalid_value('counter-reset', 'inherit 0'); +test_invalid_value('counter-reset', 'initial 0'); +test_invalid_value('counter-reset', 'unset 0'); +test_invalid_value('counter-reset', 'default 0'); +test_invalid_value('counter-reset', 'revert 0'); +test_invalid_value('counter-reset', 'revert-layer 0'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/counter-reset-valid.html b/testing/web-platform/tests/css/css-lists/parsing/counter-reset-valid.html new file mode 100644 index 0000000000..2e6b37d0fc --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/counter-reset-valid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: parsing counter-reset with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-counter-reset"> +<meta name="assert" content="counter-reset supports the full grammar '[ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+ | 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('counter-reset', 'none'); +test_valid_value('counter-reset', 'chapter', 'chapter 0'); +test_valid_value('counter-reset', 'chapter chapter 9', 'chapter 0 chapter 9'); +test_valid_value('counter-reset', 'reversed(chapter)'); +test_valid_value('counter-reset', 'chapter reversed(chapter)', 'chapter 0 reversed(chapter)'); +test_valid_value('counter-reset', 'reversed(chapter) 9 chapter', 'reversed(chapter) 9 chapter 0'); +test_valid_value('counter-reset', 'section -1'); +test_valid_value('counter-reset', 'reversed(section) -1'); +test_valid_value('counter-reset', 'first -1 second third 99', 'first -1 second 0 third 99'); +test_valid_value('counter-reset', 'reversed(first) -1 reversed(second) third 99', 'reversed(first) -1 reversed(second) third 99'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/counter-set-computed.html b/testing/web-platform/tests/css/css-lists/parsing/counter-set-computed.html new file mode 100644 index 0000000000..d0a92896ed --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/counter-set-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: getComputedStyle().counterSet</title> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-counter-set"> +<meta name="assert" content="tests that counter-set grammar is supported."> +<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('counter-set', 'none'); +test_computed_value('counter-set', 'myCounter', 'myCounter 0'); +test_computed_value('counter-set', 'myCounter 5'); +test_computed_value('counter-set', 'myCounter 7 otherCounter 8'); +test_computed_value('counter-set', 'myCounter otherCounter 8', 'myCounter 0 otherCounter 8'); +test_computed_value('counter-set', 'myCounter 7 otherCounter', 'myCounter 7 otherCounter 0'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/counter-set-invalid.html b/testing/web-platform/tests/css/css-lists/parsing/counter-set-invalid.html new file mode 100644 index 0000000000..7b2f500fa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/counter-set-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: parsing counter-set with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-counter-set"> +<meta name="assert" content="counter-set supports only the grammar '[ <counter-name> <integer>? ]+ | 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('counter-set', 'none chapter'); +test_invalid_value('counter-set', 'reversed(none)'); +test_invalid_value('counter-set', 'reversed(chapter)'); +test_invalid_value('counter-set', '3'); +test_invalid_value('counter-set', '99 imagenum'); +test_invalid_value('counter-set', 'section -1, imagenum 99'); +test_invalid_value('counter-set', 'section 3.14'); +test_invalid_value('counter-set', 'inherit 2'); +test_invalid_value('counter-set', 'initial 2'); +test_invalid_value('counter-set', 'unset 2'); +test_invalid_value('counter-set', 'default 2'); +test_invalid_value('counter-set', 'revert 2'); +test_invalid_value('counter-set', 'revert-layer 2'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/counter-set-valid.html b/testing/web-platform/tests/css/css-lists/parsing/counter-set-valid.html new file mode 100644 index 0000000000..3a4a16af92 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/counter-set-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: parsing counter-set with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-counter-set"> +<meta name="assert" content="counter-set supports the full grammar '[ <counter-name> <integer>? ]+ | 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('counter-set', 'none'); +test_valid_value('counter-set', 'chapter', 'chapter 0'); +test_valid_value('counter-set', 'section -1'); +test_valid_value('counter-set', 'first -1 second third 99', 'first -1 second 0 third 99'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-computed.sub.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-computed.sub.html new file mode 100644 index 0000000000..f86915831e --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-computed.sub.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: getComputedStyle().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', 'outside none none', 'none'); + +test_computed_value('list-style', 'inside none disc', 'inside'); +test_computed_value('list-style', 'outside url("https://{{host}}/") disc', 'url("https://{{host}}/")'); +test_computed_value('list-style', 'outside none square', 'square'); + +test_computed_value('list-style', 'inside url("https://{{host}}/") square'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-image-computed.sub.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-image-computed.sub.html new file mode 100644 index 0000000000..a39b0f0912 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-image-computed.sub.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: getComputedStyle().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://{{host}}/")'); + +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> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-image-invalid.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-image-invalid.html new file mode 100644 index 0000000000..ea8bb8ca96 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-image-invalid.html @@ -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> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-image-valid.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-image-valid.html new file mode 100644 index 0000000000..7b7d43e4bf --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-image-valid.html @@ -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> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-invalid.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-invalid.html new file mode 100644 index 0000000000..0dda1630ad --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-invalid.html @@ -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> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-position-computed.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-position-computed.html new file mode 100644 index 0000000000..07d9161fc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-position-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: getComputedStyle().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> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-position-invalid.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-position-invalid.html new file mode 100644 index 0000000000..3cf596135a --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-position-invalid.html @@ -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> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-position-valid.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-position-valid.html new file mode 100644 index 0000000000..ff0c8366bb --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-position-valid.html @@ -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> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-shorthand.sub.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-shorthand.sub.html new file mode 100644 index 0000000000..140df208aa --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-shorthand.sub.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: list-style sets longhands</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/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('list-style', 'square url("https://{{host}}/") inside', { + 'list-style-position': 'inside', + 'list-style-image': 'url("https://{{host}}/")', + 'list-style-type': 'square' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-type-computed.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-type-computed.html new file mode 100644 index 0000000000..1f25e52001 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-type-computed.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Lists: getComputedStyle().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', 'disclosure-open'); +test_computed_value('list-style-type', 'disclosure-closed'); +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> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-type-invalid.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-type-invalid.html new file mode 100644 index 0000000000..c49f61ca70 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-type-invalid.html @@ -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> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-type-valid.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-type-valid.html new file mode 100644 index 0000000000..dde0bee8dd --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-type-valid.html @@ -0,0 +1,52 @@ +<!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', 'disclosure-open'); +test_valid_value('list-style-type', 'disclosure-closed'); +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> diff --git a/testing/web-platform/tests/css/css-lists/parsing/list-style-valid.html b/testing/web-platform/tests/css/css-lists/parsing/list-style-valid.html new file mode 100644 index 0000000000..55124521f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-valid.html @@ -0,0 +1,35 @@ +<!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', 'disc outside none', 'outside'); + +test_valid_value('list-style', 'inside'); +test_valid_value('list-style', 'inside disc', 'inside'); +test_valid_value('list-style', 'inside none'); +test_valid_value('list-style', 'inside none none', 'inside none'); +test_valid_value('list-style', 'none inside none', 'inside none'); +test_valid_value('list-style', 'none none inside', 'inside none'); +test_valid_value('list-style', 'none inside', 'inside none'); +test_valid_value('list-style', 'url("https://example.com/")'); +test_valid_value('list-style', 'none url("https://example.com/")', 'url("https://example.com/") none'); +test_valid_value('list-style', 'url("https://example.com/") disc', 'url("https://example.com/")'); +test_valid_value('list-style', 'url("https://example.com/") disc outside', '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'); +test_valid_value('list-style', 'square linear-gradient(red,blue) inside', 'inside linear-gradient(red, blue) square'); +test_valid_value('list-style', 'disc radial-gradient(circle, #006, #00a 90%, #0000af 100%,white 100%) inside', 'inside radial-gradient(circle, rgb(0, 0, 102), rgb(0, 0, 170) 90%, rgb(0, 0, 175) 100%, white 100%)'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-lists/resources/blue-20.png b/testing/web-platform/tests/css/css-lists/resources/blue-20.png Binary files differnew file mode 100644 index 0000000000..c464c75eec --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/resources/blue-20.png diff --git a/testing/web-platform/tests/css/css-lists/resources/green-20.png b/testing/web-platform/tests/css/css-lists/resources/green-20.png Binary files differnew file mode 100644 index 0000000000..738d1db846 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/resources/green-20.png diff --git a/testing/web-platform/tests/css/css-lists/resources/stripes-20.png b/testing/web-platform/tests/css/css-lists/resources/stripes-20.png Binary files differnew file mode 100644 index 0000000000..de30887ea3 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/resources/stripes-20.png diff --git a/testing/web-platform/tests/css/css-lists/resources/white.gif b/testing/web-platform/tests/css/css-lists/resources/white.gif Binary files differnew file mode 100644 index 0000000000..3aa2098dc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-lists/resources/white.gif |
