Blitz - WPT: marker-text-matches-circle.html

wpt / css / css-lists / content-property / marker-text-matches-circle.html

/css/css-lists/content-property/marker-text-matches-circle.html

<!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>

/css/css-lists/content-property/marker-text-matches-circle-ref.html

<!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