Bug 1636258 [wpt PR 23465] - [css-pseudo] Add test with ::marker web animations, a=testonly
authorOriol Brufau <obrufau@igalia.com>
Wed, 13 May 2020 09:47:47 +0000
changeset 531150 e0cb1fb269f4c6f00f6cecb435ecb8a51e5c92a0
parent 531149 07c15b19a9b95e5fcdbe79d09f57134b0753c932
child 531151 e1b279ab9036a08e94efc1c896c82e1bc14afd21
push id37435
push userapavel@mozilla.com
push dateWed, 20 May 2020 15:28:23 +0000
treeherdermozilla-central@5415da14ec9a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1636258, 23465, 1063283, 2188391, 766835
milestone78.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1636258 [wpt PR 23465] - [css-pseudo] Add test with ::marker web animations, a=testonly 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
testing/web-platform/tests/css/css-pseudo/marker-animate.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/marker-animate.html
@@ -0,0 +1,59 @@
+<!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>