wpt / css / css-values / attr-dynamic-marker-content.html

Status: PASS | Duration: 8ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-values/attr-dynamic-marker-content.html

<!doctype html>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-notation">
<link rel="match" href="attr-style-sharing-5-ref.html">
<style>
  li::marker {
    content: attr(icon, "* ");
  }
</style>
<ul>
  <li id="bullet" icon="$ ">Has icon attribute</li>
  <li>Fallback icon</li>
</ul>
<script>
onload = () => {
  bullet.getBoundingClientRect();
  bullet.setAttribute("icon", "@ ");
};
</script>

/css/css-values/attr-style-sharing-5-ref.html

<!doctype html>
<meta charset="utf-8">
<style>
  #bullet::marker {
    content: "@ ";
  }
  #other::marker {
    content: "* ";
  }
</style>
<ul>
  <li id="bullet">Has icon attribute</li>
  <li id="other">Fallback icon</li>
</ul>