Bug 1449403 [wpt PR 10202] - [css-typed-om] Support animation and transition properties., a=testonly
authorDarren Shen <shend@chromium.org>
Mon, 09 Apr 2018 22:03:53 +0000
changeset 413735 06e258ea8af70189d18e9504be0183b298e5e6af
parent 413734 880bb3f3bd3a6edc38e9e15be3230523b107a3dc
child 413736 481f211d7f1c96010a922bd976a10d47f51a5d5a
push id33850
push userapavel@mozilla.com
push dateMon, 16 Apr 2018 09:53:48 +0000
treeherdermozilla-central@6276ec7ebbf3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1449403, 10202, 820299, 983094, 548017
milestone61.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 1449403 [wpt PR 10202] - [css-typed-om] Support animation and transition properties., a=testonly Automatic update from web-platform-tests[css-typed-om] Support animation and transition properties. This patch supports all the animation/transition properties except animation-name and transition-property (need spec feedback first). We also fix the <time> tests so that computed time values use canonical units as spec'd in [1]. [1] https://github.com/w3c/css-houdini-drafts/issues/725 Bug: 820299 Change-Id: I7c038ce419f8bdb1c789493554776c5e7f9810c7 Reviewed-on: https://chromium-review.googlesource.com/983094 Commit-Queue: Darren Shen <shend@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#548017} wpt-commits: e50234432b0ada957446c990c92db9443a7b78fe wpt-pr: 10202 wpt-commits: e50234432b0ada957446c990c92db9443a7b78fe wpt-pr: 10202
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-delay.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-duration.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-fill-mode.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-iteration-count.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-play-state.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-timing-function.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/transition-delay.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/transition-timing-function.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/transition.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -318149,22 +318149,64 @@
     ]
    ],
    "css/css-typed-om/the-stylepropertymap/inline/set.tentative.html": [
     [
      "/css/css-typed-om/the-stylepropertymap/inline/set.tentative.html",
      {}
     ]
    ],
+   "css/css-typed-om/the-stylepropertymap/properties/animation-delay.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/animation-delay.html",
+     {}
+    ]
+   ],
    "css/css-typed-om/the-stylepropertymap/properties/animation-direction.html": [
     [
      "/css/css-typed-om/the-stylepropertymap/properties/animation-direction.html",
      {}
     ]
    ],
+   "css/css-typed-om/the-stylepropertymap/properties/animation-duration.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/animation-duration.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/animation-fill-mode.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/animation-fill-mode.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/animation-iteration-count.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/animation-iteration-count.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/animation-play-state.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/animation-play-state.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/animation-timing-function.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/animation-timing-function.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/animation.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/animation.html",
+     {}
+    ]
+   ],
    "css/css-typed-om/the-stylepropertymap/properties/backface-visibility.html": [
     [
      "/css/css-typed-om/the-stylepropertymap/properties/backface-visibility.html",
      {}
     ]
    ],
    "css/css-typed-om/the-stylepropertymap/properties/background-color.html": [
     [
@@ -318779,22 +318821,40 @@
     ]
    ],
    "css/css-typed-om/the-stylepropertymap/properties/transform.html": [
     [
      "/css/css-typed-om/the-stylepropertymap/properties/transform.html",
      {}
     ]
    ],
+   "css/css-typed-om/the-stylepropertymap/properties/transition-delay.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/transition-delay.html",
+     {}
+    ]
+   ],
    "css/css-typed-om/the-stylepropertymap/properties/transition-duration.html": [
     [
      "/css/css-typed-om/the-stylepropertymap/properties/transition-duration.html",
      {}
     ]
    ],
+   "css/css-typed-om/the-stylepropertymap/properties/transition-timing-function.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/transition-timing-function.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/transition.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/transition.html",
+     {}
+    ]
+   ],
    "css/css-typed-om/the-stylepropertymap/properties/unicode-bidi.html": [
     [
      "/css/css-typed-om/the-stylepropertymap/properties/unicode-bidi.html",
      {}
     ]
    ],
    "css/css-typed-om/the-stylepropertymap/properties/user-select.html": [
     [
@@ -524362,20 +524422,48 @@
   "css/css-typed-om/the-stylepropertymap/inline/set-shorthand.html": [
    "1b826ba2a6186ff317e8daa8f604f130be577d3d",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/inline/set.tentative.html": [
    "65c9c20da930fd46136d4dd5706524ae05118807",
    "testharness"
   ],
+  "css/css-typed-om/the-stylepropertymap/properties/animation-delay.html": [
+   "74240b29a90431d95199838ed8d8767382bb05c9",
+   "testharness"
+  ],
   "css/css-typed-om/the-stylepropertymap/properties/animation-direction.html": [
    "6c988281b4773fa25ef0d811ff6e0cd37a1e0fae",
    "testharness"
   ],
+  "css/css-typed-om/the-stylepropertymap/properties/animation-duration.html": [
+   "aaf4d4d1652feab4848bfe0cc8b8bf0d7a5c8e55",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/animation-fill-mode.html": [
+   "c0fe298e357b4b9c64f48fdee9c25bc21d60335c",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/animation-iteration-count.html": [
+   "0e41fba01660809dfae86a2b92ea2f149ac744a4",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/animation-play-state.html": [
+   "15773ef5076bbfe85cfc5d991d8ea721b1470bad",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/animation-timing-function.html": [
+   "f1822d277351570e200c29b9710426c2a1d5c814",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/animation.html": [
+   "2ab3c2c4495bf88359c758d7537d0afd414e79f4",
+   "testharness"
+  ],
   "css/css-typed-om/the-stylepropertymap/properties/backface-visibility.html": [
    "d880e41674d468fe364c74941a8ae0921b9bdfac",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/background-color.html": [
    "f52a2182afc7107a9f411a27aab81c4c4c90ef1e",
    "testharness"
   ],
@@ -524687,17 +524775,17 @@
    "ae21056fb993efb7112e0bc42fe1269f6bc0c72e",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/resize.html": [
    "533f287facbc82118469f75f9f88a1372848d3b2",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js": [
-   "7dad4e140a70b28cde65ff1c23c5f843223eee6f",
+   "a11458935f17ace154a68314677a4a868ba55273",
    "support"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/right.html": [
    "68a2611eaf9eecb7393c2b0db0f4378ebe285f22",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/scroll-margin.html": [
    "7d4636be3e35639b915917412465b443241e95b1",
@@ -524786,20 +524874,32 @@
   "css/css-typed-om/the-stylepropertymap/properties/transform-style.html": [
    "b36e671f379b935611a0c29348c469115b204488",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/transform.html": [
    "2723b6d3e9a213a1b33e9ecfafd5fd42eb8bca33",
    "testharness"
   ],
+  "css/css-typed-om/the-stylepropertymap/properties/transition-delay.html": [
+   "f3f9128692e9a03dfc736d6f8c20828ab42eb75d",
+   "testharness"
+  ],
   "css/css-typed-om/the-stylepropertymap/properties/transition-duration.html": [
    "fe613a427b8c057fb859eb70a58d506c6a0b3cde",
    "testharness"
   ],
+  "css/css-typed-om/the-stylepropertymap/properties/transition-timing-function.html": [
+   "3b2be1a6295128a13c01d2020014eff27ffc037c",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/transition.html": [
+   "b1457248f516d2e02edb668eb1a0ccafaf0127d8",
+   "testharness"
+  ],
   "css/css-typed-om/the-stylepropertymap/properties/unicode-bidi.html": [
    "b676714807b4fcdfd5ba7555f7c2ee3d1d9590d2",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/user-select.html": [
    "a4c544daf99e01d99b9115fb575248f8dad337df",
    "testharness"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-delay.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'animation-delay' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runListValuedPropertyTests('animation-delay', [
+  { syntax: '<time>' }
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-duration.html
@@ -0,0 +1,19 @@
+<meta charset="utf-8">
+<title>'animation-duration' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runListValuedPropertyTests('animation-duration', [
+  { syntax: '<time>' },
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-fill-mode.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'animation-fill-mode' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runListValuedPropertyTests('animation-fill-mode', [
+  { syntax: 'none' },
+  { syntax: 'forwards' },
+  { syntax: 'backwards' },
+  { syntax: 'both' },
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-iteration-count.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'animation-iteration-count' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runListValuedPropertyTests('animation-iteration-count', [
+  { syntax: 'infinite' },
+  { syntax: '<number>' },
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-play-state.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'animation-play-state' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runListValuedPropertyTests('animation-play-state', [
+  { syntax: 'running' },
+  { syntax: 'paused' },
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-timing-function.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'animation-timing-function' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runListValuedPropertyTests('animation-timing-function', [
+  { syntax: 'linear' },
+  { syntax: 'ease' },
+  { syntax: 'ease-in' },
+  { syntax: 'ease-out' },
+  { syntax: 'ease-in-out' },
+  { syntax: 'step-start' },
+  { syntax: 'step-end' },
+]);
+
+runUnsupportedPropertyTests('animation-timing-function', [
+  'cubic-bezier(0.1, 0.7, 1.0, 0.1)', 'steps(4, end)', 'frames(10)'
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'animation' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runUnsupportedPropertyTests('animation', [
+  'slidein 3s ease-in 1s infinite reverse both running',
+  'slidein .5s linear 1s infinite alternate'
+]);
+
+</script>
--- a/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
@@ -97,17 +97,19 @@ const gTestSyntaxExamples = {
     description: 'a time',
     examples: [
       {
         description: "zero seconds",
         input: new CSSUnitValue(0, 's')
       },
       {
         description: "negative milliseconds",
-        input: new CSSUnitValue(-3.14, 'ms')
+        input: new CSSUnitValue(-3.14, 'ms'),
+        // Computed values use canonical units
+        defaultComputed: (_, result) => assert_style_value_equals(result, new CSSUnitValue(-0.00314, 's'))
       },
       {
         description: "positive seconds",
         input: new CSSUnitValue(3.14, 's')
       },
       {
         description: "a calc time",
         input: new CSSMathSum(new CSSUnitValue(0, 's'), new CSSUnitValue(0, 'ms')),
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/transition-delay.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'transition-delay' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runListValuedPropertyTests('transition-delay', [
+  { syntax: '<time>' }
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/transition-timing-function.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'transition-timing-function' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runListValuedPropertyTests('transition-timing-function', [
+  { syntax: 'linear' },
+  { syntax: 'ease' },
+  { syntax: 'ease-in' },
+  { syntax: 'ease-out' },
+  { syntax: 'ease-in-out' },
+  { syntax: 'step-start' },
+  { syntax: 'step-end' },
+]);
+
+runUnsupportedPropertyTests('transition-timing-function', [
+  'cubic-bezier(0.1, 0.7, 1.0, 0.1)', 'steps(4, end)', 'frames(10)'
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/transition.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'transition' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runUnsupportedPropertyTests('transition', [
+  'none', 'none, none', 'margin-right 4s', 'all 0.5s ease-out, color 1s'
+]);
+
+</script>