Blitz - WPT: marker-intrinsic-contribution-001.html

wpt / css / css-pseudo / marker-intrinsic-contribution-001.html

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

Subtest	Status	Message
Intrinsic contribution of outside symbol marker	PASS
Intrinsic contribution of outside decimal marker	PASS
Intrinsic contribution of outside string marker	PASS
Intrinsic contribution of outside content marker	PASS
Intrinsic contribution of inside symbol marker	FAIL	assert_greater_than: clientWidth expected a number greater than 0 but got 0
Intrinsic contribution of inside decimal marker	FAIL	assert_equals: clientWidth expected 30 but got 0
Intrinsic contribution of inside string marker	FAIL	assert_equals: clientWidth expected 60 but got 0
Intrinsic contribution of inside content marker	FAIL	assert_equals: clientWidth expected 70 but got 0

Enable JavaScript in test iframe

/css/css-pseudo/marker-intrinsic-contribution-001.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: intrinsic contribution of ::marker</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic">
<meta name="assert" content="Checks that that outside markers have an intrinsic contribution of 0, and inside markers greater than 0.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
li {
  font: 10px/1 Ahem;
  border: 5px solid orange;
  float: left;
  clear: left;
}
.inside {
  list-style-position: inside;
}
.symbol {
  list-style-type: disc;
}
.decimal {
  list-style-type: decimal;
}
.string {
  list-style-type: "string";
}
.content::marker {
  content: "content";
}
</style>
<div id="log"></div>
<ol class="outside">
  <li class="symbol" data-width="0"></li>
  <li class="decimal" data-width="0"></li>
  <li class="string" data-width="0"></li>
  <li class="content" data-width="0"></li>
</ol>
<ol class="inside">
  <li class="symbol" data-min-width="0"></li>
  <li class="decimal" data-width="30"></li>
  <li class="string" data-width="60"></li>
  <li class="content" data-width="70"></li>
</ol>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
"use strict";
function check(item, msg) {
  test(function() {
    if (item.dataset.width) {
      assert_equals(item.clientWidth, +item.dataset.width, "clientWidth");
    } else {
      assert_greater_than(item.clientWidth, +item.dataset.minWidth, "clientWidth");
    }
  }, msg);
}

setup({ explicit_done: true });

document.fonts.ready.then(() => {
  for (let item of document.querySelectorAll(".outside > li")) {
    check(item, `Intrinsic contribution of outside ${item.className} marker`);
  }
  for (let item of document.querySelectorAll(".inside > li")) {
    check(item, `Intrinsic contribution of inside ${item.className} marker`);
  }
  done();
});
</script>