| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Lists Test: Supported properties in ::marker</title> |
| <link rel="help" href="https://drafts.csswg.org/css-lists/#list-style-position"> |
| <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> |
| <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> |
| <meta name="assert" content="This test checks the computed 'display' value of ::marker pseudo-elements. Inside markers are inline, outside ones are inline-blocks." /> |
| <style> |
| [data-marker-display] { |
| display: list-item; |
| } |
| .inside { |
| list-style-position: inside; |
| } |
| .outside { |
| list-style-position: outside; |
| } |
| </style> |
| |
| <!-- <li> elements with no <ol> or <ul> ancestor are forced to have inside markers --> |
| <li class="<li> not-in-list inside" data-marker-display="inline">item</li> |
| <li class="<li> not-in-list outside" data-marker-display="inline">item</li> |
| |
| <!-- That quirk is doesn't affect non-<li> elements with 'display: list-item' --> |
| <div class="<div> not-in-list inside" data-marker-display="inline">item</li> |
| <div class="<div> not-in-list outside" data-marker-display="inline-block">item</li> |
| |
| <!-- All list items inside a list element obey 'list-style-position' --> |
| <ol> |
| <li class="<li> in-ol inside" data-marker-display="inline">item</li> |
| <li class="<li> in-ol outside" data-marker-display="inline-block">item</li> |
| <div class="<div> in-ol inside" data-marker-display="inline">item</li> |
| <div class="<div> in-ol outside" data-marker-display="inline-block">item</li> |
| </ol> |
| <ul> |
| <li class="<li> in-ul inside" data-marker-display="inline">item</li> |
| <li class="<li> in-ul outside" data-marker-display="inline-block">item</li> |
| <div class="<div> in-ul inside" data-marker-display="inline">item</li> |
| <div class="<div> in-ul outside" data-marker-display="inline-block">item</li> |
| </ul> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| for (const target of document.querySelectorAll("[data-marker-display]")) { |
| test(() => { |
| const actual = getComputedStyle(target, "::marker").display; |
| const expected = target.dataset.markerDisplay; |
| assert_equals(actual, expected, "Computed 'display' value"); |
| }, `Computed 'display' for ::marker of ${target.className}`); |
| } |
| </script> |
