forked from mirrors/gecko-dev
a0bb80321e
Automatic update from web-platform-tests [css-pseudo] Add test with ::marker web animations An early return in StyleResolver::PseudoStyleForElementInternal used to prevent a ::marker with no styles from being affected by web animations. That early return was already removed in r765965 so the problem has been fixed, this patch just adds a test. BUG=1063283 TEST=external/wpt/css/css-pseudo/marker-animate.html Change-Id: I72a1286e9c3fbd200f46cb3172760f5aaedda18b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2188391 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#766835} -- wpt-commits: d929bede252f5d1a51fdad2bcfca8839e7e436ac wpt-pr: 23465
59 lines
1.8 KiB
HTML
59 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<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>
|
|
<ul>
|
|
<li id="target">list item</li>
|
|
</ul>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
const target = document.getElementById("target");
|
|
const cs = getComputedStyle(target, "::marker");
|
|
const options = {
|
|
pseudoElement: "::marker",
|
|
duration: 2,
|
|
delay: -1,
|
|
};
|
|
|
|
// 'color' applies to ::marker so it should be animatable
|
|
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");
|
|
|
|
// 'opacity' doesn't apply to ::marker so it shouldn't be animatable
|
|
test(function() {
|
|
const anim = target.animate([
|
|
{opacity: .2},
|
|
{opacity: .8},
|
|
], options);
|
|
this.add_cleanup(() => anim.cancel());
|
|
assert_equals(cs.opacity, "1", "opacity");
|
|
}, "'opacity' animation");
|
|
|
|
// When both 'color' and 'opacity' are specified, only the former should be animated.
|
|
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");
|
|
</script>
|