Bug 1513654 [wpt PR 14480] - Serialize animation in the right order, a=testonly
authorXida Chen <xidachen@chromium.org>
Wed, 19 Dec 2018 11:38:54 +0000
changeset 454918 b8d762f13655ee9abb526783d38533a45e5e8ed8
parent 454917 98fb4602eafcd498d30b8b76e6c2dcb000b647c1
child 454919 a6529b88b34accd5201c56d607d6b262dbe6c4ff
push id111373
push userjames@hoppipolla.co.uk
push dateWed, 23 Jan 2019 11:17:29 +0000
treeherdermozilla-inbound@2072956ca042 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1513654, 14480, 772852, 1367935, 616639
milestone66.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 1513654 [wpt PR 14480] - Serialize animation in the right order, a=testonly Automatic update from web-platform-tests Serialize animation in the right order Per spec: https://drafts.csswg.org/css-animations/#animation The name of the animation should be the end of the value list, to avoid ambiguity when serializing/deserializing the animation. This CL fixes the problem for both element.style and the window.getComputedStyle. A wpt test is added. Since this CL changes the output of an existing web API, an Intent to Ship has been sent to blink-dev and 3 LGTMs has been granted. https://groups.google.com/a/chromium.org/forum/?utm_medium=email&utm_source=footer#!msg/blink-dev/KUelGRZP73Y/F4YxTGBOBwAJ Bug: 772852 Change-Id: I88b06b57c68013d99c8c4fd4bd39bdfcf9b807fc Reviewed-on: https://chromium-review.googlesource.com/c/1367935 Reviewed-by: Stephen McGruer <smcgruer@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Xida Chen <xidachen@chromium.org> Cr-Commit-Position: refs/heads/master@{#616639} -- wpt-commits: f378387ce241c01f959467cc4c755459fc705e30 wpt-pr: 14480
testing/web-platform/tests/css/css-animations/animations-parsing.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/animations-parsing.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#animation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="test1"></div>
+<div id="test2"></div>
+<script>
+function testStyle(style1, style2, name) {
+  assert_equals(style1.animationName, name, "style1.animationName");
+  assert_equals(style2.animationName, name, "style2.animationName");
+  assert_equals(style1.animation, style2.animation,
+                "style1 and style2 should have the same animation");
+}
+
+function testComputedStyle(computedStyle1, computedStyle2, name) {
+  assert_equals(computedStyle1.animationName, name, "computedStyle1.animationName");
+  assert_equals(computedStyle2.animationName, name, "computedStyle2.animationName");
+  assert_equals(computedStyle1.animation, computedStyle2.animation,
+                "computedStyle1 and computedStyle2 should have the same animation");
+}
+
+function testAnimation(input, name) {
+  var style1 = test1.style;
+  var style2 = test2.style;
+  var computedStyle1 = getComputedStyle(test1);
+  var computedStyle2 = getComputedStyle(test2);
+
+  style1.animation = input;
+  style2.animation = style1.animation;
+  testStyle(style1, style2, name);
+  testComputedStyle(computedStyle1, computedStyle2, name);
+  style2.animation = computedStyle1.animation;
+  testStyle(style1, style2, name);
+  testComputedStyle(computedStyle1, computedStyle2, name);
+}
+
+test(() => {
+  // We are duplicating the logic of testAnimation because the animationName of
+  // the getComputedStyle is "none" when there is no animation.
+  var style1 = test1.style;
+  var style2 = test2.style;
+  var computedStyle1 = window.getComputedStyle(test1, null);
+  var computedStyle2 = window.getComputedStyle(test2, null);
+
+  style1.animation = "";
+  style2.animation = style1.animation;
+  testStyle(style1, style2, "");
+  testComputedStyle(computedStyle1, computedStyle2, "none");
+  style2.animation = computedStyle1.animation;
+  assert_equals(style2.animationName, "none");
+  assert_equals(computedStyle2.animationName, "none");
+}, "Test animation name being empty.");
+
+test(() => {
+  testAnimation("myShorthandAnim", "myShorthandAnim");
+}, "Test a non-conflicting animation name.");
+
+test(() => {
+  testAnimation("none", "none");
+  testAnimation("forwards", "none");
+  testAnimation("none forwards", "forwards");
+}, "Test an animation name that is the same as a possible animation fill-mode.");
+
+test(() => {
+  testAnimation("normal", "none");
+  testAnimation("reverse", "none");
+  testAnimation("normal normal", "normal");
+  testAnimation("normal reverse", "reverse");
+}, "Test an animation name that is the same as a possible animation direction.");
+
+test(() => {
+  testAnimation("running", "none");
+  testAnimation("paused", "none");
+  testAnimation("running running", "running");
+  testAnimation("running paused", "paused");
+}, "Test an animation name that is the same as a possible running state.");
+</script>