marker-text-emphasis.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-pseudo/marker-text-emphasis.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>::marker supports 'text-emphasis'</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-text-decor-4/#emphasis-marks">

<link rel="match" href="marker-text-emphasis-ref.html">

<meta name="assert" content="Checks that ::marker supports 'text-emphasis', both explicitly set or inherited from an ancestor">

<style>

ol {

  float: left;

  width: 50px;

  list-style-position: inside;

.text-emphasis-shorthand.explicit ::marker,

.text-emphasis-shorthand.inherit {

  -webkit-text-emphasis: circle green;

  text-emphasis: circle green;

.text-emphasis-longhands.explicit ::marker,

.text-emphasis-longhands.inherit {

  -webkit-text-emphasis-style: circle;

  -webkit-text-emphasis-color: green;

  -webkit-text-emphasis-position: under right;

  text-emphasis-style: circle;

  text-emphasis-color: green;

  text-emphasis-position: under right;

.marker-decimal {

  list-style-type: decimal;

.marker-string {

  list-style-type: "2. ";

.marker-content::marker {

  content: "3. ";

</style>

<ol class="text-emphasis-shorthand explicit">

  <li class="marker-decimal"></li>

  <li class="marker-string"></li>

  <li class="marker-content"></li>

</ol>

<ol class="text-emphasis-shorthand inherit">

  <li class="marker-decimal"></li>

  <li class="marker-string"></li>

  <li class="marker-content"></li>

</ol>

<ol class="text-emphasis-longhands explicit">

  <li class="marker-decimal"></li>

  <li class="marker-string"></li>

  <li class="marker-content"></li>

</ol>

<ol class="text-emphasis-longhands inherit">

  <li class="marker-decimal"></li>

  <li class="marker-string"></li>

  <li class="marker-content"></li>

</ol>