<meta charset="utf-8">

<title>CSS Pseudo-Elements Test: Reverted styles for ::marker</title>

<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">

<link rel="help" href="https://drafts.csswg.org/web-animations-1/">

<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">

<meta name="assert" content="This test checks that ::marker can be animated with Web Animations, but only the supported properties." />

<div id="log"></div>

<li id="target">list item</li>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

const target = document.getElementById("target");

const cs = getComputedStyle(target, "::marker");

const options = {

pseudoElement: "::marker",

duration: 2,

delay: -1,

test(function() {

const anim = target.animate([

{color: "rgb(0, 100, 200)"},

{color: "rgb(200, 0, 100)"},

], options);

this.add_cleanup(() => anim.cancel());

assert_equals(cs.color, "rgb(100, 50, 150)", "color");

}, "'color' animation");

test(function() {

const anim = target.animate([

{opacity: .2},

{opacity: .8},

], options);

this.add_cleanup(() => anim.cancel());

assert_equals(cs.opacity, "1", "opacity");

}, "'opacity' animation");

test(function() {

const anim = target.animate([

{

color: "rgb(0, 100, 200)",

opacity: .2,

},

{

color: "rgb(200, 0, 100)",

opacity: .8,

},

], options);

this.add_cleanup(() => anim.cancel());

assert_equals(cs.color, "rgb(100, 50, 150)", "color");

assert_equals(cs.opacity, "1", "opacity");

}, "'color' + 'opacity' animation");