Bug 1524480 - Add tests for unstyled data; r=hiro
authorBrian Birtles <birtles@gmail.com>
Fri, 15 Feb 2019 05:54:49 +0000
changeset 459529 c6657979a1a6b0c5f856d43f4a039925c0febc6f
parent 459528 1625e825876ca6accdda4089532392e61a40d211
child 459530 cbe6355fcd801c87a1ee6503110a3742b2dcd0bc
push id111964
push usercsabou@mozilla.com
push dateFri, 15 Feb 2019 18:54:44 +0000
treeherdermozilla-inbound@db3c4f905082 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1524480
milestone67.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 1524480 - Add tests for unstyled data; r=hiro Differential Revision: https://phabricator.services.mozilla.com/D19886
dom/animation/test/mochitest.ini
dom/animation/test/mozilla/test_unstyled.html
layout/reftests/web-animations/reftest.list
layout/reftests/web-animations/restyle-after-display-none.html
--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -49,16 +49,17 @@ skip-if = (toolkit == 'android' && debug
 [mozilla/test_restyles.html]
 [mozilla/test_restyling_xhr_doc.html]
 [mozilla/test_set_easing.html]
 [mozilla/test_style_after_finished_on_compositor.html]
 [mozilla/test_transform_limits.html]
 [mozilla/test_transition_finish_on_compositor.html]
 skip-if = toolkit == 'android'
 [mozilla/test_underlying_discrete_value.html]
+[mozilla/test_unstyled.html]
 [mozilla/test_event_listener_leaks.html]
 [style/test_animation-seeking-with-current-time.html]
 [style/test_animation-seeking-with-start-time.html]
 [style/test_animation-setting-effect.html]
 [style/test_composite.html]
 [style/test_interpolation-from-interpolatematrix-to-none.html]
 [style/test_missing-keyframe.html]
 [style/test_missing-keyframe-on-compositor.html]
new file mode 100644
--- /dev/null
+++ b/dom/animation/test/mozilla/test_unstyled.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
+<style>
+div.pseudo::before {
+  animation: animation 1s;
+  content: 'content';
+}
+@keyframes animation {
+  to { opacity: 0 }
+}
+</style>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+// Tests for cases where we may not have style data for an element
+
+promise_test(async t => {
+  // Get a CSSPseudoElement
+  const div = addDiv(t, { class: 'pseudo' });
+  const cssAnim = document.getAnimations()[0];
+  const pseudoElem = cssAnim.effect.target;
+
+  // Drop pseudo from styles and flush styles
+  div.classList.remove('pseudo');
+  getComputedStyle(div, '::before').content;
+
+  // Try animating the pseudo's content attribute
+  const contentAnim = pseudoElem.animate(
+    { content: ['none', '"content"'] },
+    { duration: 100 * MS_PER_SEC, fill: 'both' }
+  );
+
+  // Check that the initial value is as expected
+  await contentAnim.ready;
+  assert_equals(getComputedStyle(div, '::before').content, 'none');
+
+  contentAnim.finish();
+
+  // Animating an obsolete pseudo element should NOT cause the pseudo element
+  // to be re-generated. That behavior might change in which case this test
+  // will need to be updated. The most important part of this test, however,
+  // is simply checking that nothing explodes if we try to animate such a
+  // pseudo element.
+
+  assert_equals(getComputedStyle(div, '::before').content, 'none');
+}, 'Animation on an obsolete pseudo element produces expected results');
+
+</script>
+</body>
--- a/layout/reftests/web-animations/reftest.list
+++ b/layout/reftests/web-animations/reftest.list
@@ -1,12 +1,13 @@
 == 1246046-1.html green-box.html
 test-pref(dom.animations-api.core.enabled,true) == 1267937-1.html 1267937-ref.html
 test-pref(dom.animations-api.core.enabled,true) == 1298742-1.html 1298742-ref.html
 == 1363639-1.html green-box.html
+== restyle-after-display-none.html green-box.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-none-animation-before-appending-element.html stacking-context-animation-ref.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-keyframe.html stacking-context-animation-ref.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-keyframe-in-delay.html stacking-context-animation-ref.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-target.html stacking-context-animation-changing-target-ref.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-target-in-delay.html stacking-context-animation-changing-target-ref.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-effect.html stacking-context-animation-ref.html
 == stacking-context-opacity-losing-css-animation-in-delay.html stacking-context-animation-ref.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe.html stacking-context-animation-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/web-animations/restyle-after-display-none.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html class="reftest-wait reftest-no-flush">
+<head>
+<meta charset=utf-8>
+<title>Check for animation restyling on an element's initial restyling after leaving a display:none subtree</title>
+<style>
+#target {
+  width: 0px;
+  height: 100px;
+  background: green;
+  display: none;
+}
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+// Wait for a steady state before beginning so that style flushes from the
+// initial restyling don't interfere with the results.
+document.addEventListener('MozReftestInvalidate', () => {
+  requestAnimationFrame(() => {
+    // Get target element -- computed style should be display: none by now.
+    const target = document.getElementById('target');
+
+    // Update specified style but don't flush
+    target.style.display = 'block';
+
+    // Trigger an animation on the element.
+    //
+    // animate() won't flush styles so we are testing that it still correctly
+    // marks the element as needing an animation restyle even when it doesn't have
+    // style data.
+    target.animate(
+      { width: ['0px', '100px'] },
+      { duration: 100 * 1000, easing: 'step-start' }
+    );
+
+    document.documentElement.classList.remove('reftest-wait');
+  });
+});
+</script>
+</body>
+</html>