Bug 1545707 - Rework hidden-container-001.html CSS transitions tests; r=hiro
authorBrian Birtles <birtles@gmail.com>
Mon, 22 Apr 2019 00:53:49 +0000
changeset 470325 6ccf33c9e56e44937858a86890a65c4296861d98
parent 470324 b061de30553d63447163d449f1ae78c8e8cb7827
child 470326 bc8f94bb6bb6dad3f71b1ac955f1d89643548013
push id112863
push usershindli@mozilla.com
push dateMon, 22 Apr 2019 09:53:25 +0000
treeherdermozilla-inbound@ab1da7fa2ad0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1545707
milestone68.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 1545707 - Rework hidden-container-001.html CSS transitions tests; r=hiro This behavior is not actually clearly specified yet. See: https://github.com/w3c/csswg-drafts/issues/3790 But when it is specified it will most likely be specified in terms of HTML's "being rendered" definition: https://html.spec.whatwg.org/#being-rendered I had planned to specify this behavior before updating these tests but I need to update them first in order to add the ::marker tests for this bug. Differential Revision: https://phabricator.services.mozilla.com/D28174
testing/web-platform/meta/css/css-transitions/hidden-container-001.html.ini
testing/web-platform/tests/css/css-transitions/hidden-container-001.html
testing/web-platform/tests/css/css-transitions/non-rendered-element-001.html
testing/web-platform/tests/css/css-transitions/non-rendered-element-002.html
testing/web-platform/tests/css/css-transitions/support/helper.js
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-transitions/hidden-container-001.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[hidden-container-001.html]
-  disabled: https://bugzilla.mozilla.org/show_bug.cgi?id=1472172
deleted file mode 100644
--- a/testing/web-platform/tests/css/css-transitions/hidden-container-001.html
+++ /dev/null
@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>CSS Transitions Test: Not Transitioning within hidden element</title>
-        <meta name="assert" content="Test checks that transitions are NOT run within hidden elements">
-        <link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions">
-        <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
-        <meta name="flags" content="dom">
-
-        <script src="/resources/testharness.js" type="text/javascript"></script>
-        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
-
-        <script src="./support/vendorPrefix.js" type="text/javascript"></script>
-        <script src="./support/helper.js" type="text/javascript"></script>
-        <script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
-        <script src="./support/generalParallelTest.js" type="text/javascript"></script>
-        <script src="./support/properties.js" type="text/javascript"></script>
-
-        <style type="text/css">
-            #offscreen {
-                display: none;
-            }
-        </style>
-    </head>
-    <body>
-        <!-- required by testharnessreport.js -->
-        <div id="log"></div>
-        <!-- elements used for testing -->
-        <div id="fixture" class="fixture">
-            <div class="container">
-                <div class="transition">Text sample</div>
-            </div>
-        </div>
-        <div id="offscreen"></div>
-
-        <!--
-            SEE ./support/README.md for an abstract explanation of the test procedure
-            http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
-        -->
-
-        <script>
-
-            // this test takes its time, give it a minute to run
-            var timeout = 60000;
-            setup({timeout: timeout});
-
-            var tests = [
-                {
-                    name: "transition within display:none",
-                    property: 'background-color',
-                    flags: {},
-                    from: {'background-color': 'red'},
-                    to: {'background-color': 'green'}
-                }
-            ];
-
-            // general transition-duration
-            var duration = '0.5s';
-
-            runParallelAsyncHarness({
-                // array of test data
-                tests: tests,
-                // the number of tests to run in parallel
-                testsPerSlice: 1,
-                // milliseconds to wait before calling teardown and ending test
-                duration: parseFloat(duration) * 1000,
-                // prepare individual test
-                setup: function(data, options) {
-                    var styles = {
-                        '.fixture': {},
-
-                        '.container': data.parentStyle,
-                        '.container.to': {},
-                        '.container.how': {},
-
-                        '.transition': data.from,
-                        '.transition.to' : data.to,
-                        '.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
-                    };
-
-                    generalParallelTest.setup(data, options);
-                    generalParallelTest.addStyles(data, options, styles);
-                },
-                // cleanup after individual test
-                teardown: generalParallelTest.teardown,
-                // invoked prior to running a slice of tests
-                sliceStart: generalParallelTest.sliceStart,
-                // invoked after running a slice of tests
-                sliceDone: generalParallelTest.sliceDone,
-                // test cases, make them as granular as possible
-                cases: {
-                    // test property values while transitioning
-                    // values.start kicks off a transition
-                    'values': {
-                        // run actual test, assertions can be used here!
-                        start: function(test, data, options) {
-                            // identify initial and target values
-                            generalParallelTest.getStyle(data);
-                            // make sure values differ, if they don't, the property could most likely not be parsed
-                            assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
-                            // kick off the transition
-                            generalParallelTest.startTransition(data);
-                        },
-                        done: function(test, data, options) {
-                            // make sure there were no intermediate values
-                            assert_equals(data.transition.values.length, 2, "no intermediate values");
-                        }
-                    },
-                    // test TransitionEnd events
-                    'events': {
-                        done: function(test, data, options) {
-                            // make sure there were no events on parent
-                            test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
-                            // make sure we got the event for the tested property only
-                            test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', ""));
-                        }
-                    }
-                },
-                // called once all tests are done
-                done: generalParallelTest.done
-            });
-        </script>
-    </body>
-</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/non-rendered-element-001.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>CSS Transitions Test: Transitions do not run for an element that is not being rendered</title>
+<link rel="help" title="Starting transitions"
+  href="https://drafts.csswg.org/css-transitions/#starting">
+
+<script src="/resources/testharness.js" type="text/javascript"></script>
+<script src="/resources/testharnessreport.js" type="text/javascript"></script>
+<script src="./support/helper.js" type="text/javascript"></script>
+
+</head>
+<body>
+<div id="log"></div>
+
+<script>
+promise_test(async t => {
+  // Create element that is not rendered
+  const div = addDiv(t, {
+    style:
+      'transition: background-color 100s;' +
+      'background-color: red;' +
+      'display: none',
+  });
+
+  // Attach event listeners
+  div.addEventListener(
+    'transitionrun',
+    t.step_func(() => {
+      assert_unreached('transitionrun event should not be fired');
+    })
+  );
+
+  // Resolve before-change style
+  getComputedStyle(div).backgroundColor;
+
+  // Set up and resolve after-change style
+  div.style.backgroundColor = 'green';
+  getComputedStyle(div).backgroundColor;
+
+  // There should be no events received for the triggered transition.
+  await waitForFrame();
+  await waitForFrame();
+}, 'Transitions do not run on an element not being rendered');
+
+test(t => {
+  // Create element that is not rendered
+  const div = addDiv(t, {
+    style:
+      'transition: background-color 100s;' +
+      'background-color: red;' +
+      'display: none',
+  });
+
+  // Resolve before-change style
+  getComputedStyle(div).backgroundColor;
+
+  // Make it rendered
+  div.style.display = 'block';
+
+  // Set up and resolve after-change style
+  div.style.backgroundColor = 'green';
+  getComputedStyle(div).backgroundColor;
+
+  // We should have jumped immediately to the after-change style rather than
+  // transitioning to it.
+  assert_equals(
+    getComputedStyle(div).backgroundColor,
+    'rgb(0, 128, 0)',
+    'No transition should run'
+  );
+}, 'Transitions do not run for an element newly rendered');
+
+promise_test(async t => {
+  // Create element
+  const div = addDiv(t, {
+    style: 'transition: background-color 100s; background-color: red',
+  });
+
+  // Attach event listeners
+  div.addEventListener('transitionrun', t.step_func(() => {
+    assert_unreached('transitionrun event should not be fired');
+  }));
+
+  // Resolve before-change style
+  getComputedStyle(div).backgroundColor;
+
+  // Set up after-change style
+  div.style.backgroundColor = 'green';
+
+  // But make the element non-rendered
+  div.style.display = 'none';
+
+  // There should be no events received for the triggered transition.
+  await waitForFrame();
+  await waitForFrame();
+}, 'Transitions do not run for an element newly made not rendered');
+
+promise_test(async t => {
+  // Create element
+  const div = addDiv(t, {
+    style: 'transition: background-color 100s; background-color: red',
+  });
+
+  // Attach event listeners
+  const eventWatcher = new EventWatcher(t, div, [
+    'transitionrun',
+    'transitioncancel',
+  ]);
+
+  // Trigger transition
+  getComputedStyle(div).backgroundColor;
+  div.style.backgroundColor = 'green';
+  getComputedStyle(div).backgroundColor;
+
+  await eventWatcher.wait_for('transitionrun');
+
+  // Make the element no longer rendered
+  div.style.display = 'none';
+
+  await eventWatcher.wait_for('transitioncancel');
+}, 'Transitions are canceled when an element is no longer rendered');
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/non-rendered-element-002.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>CSS Transitions Test: Transitions do not run for a pseudo-element that is not being rendered</title>
+<link rel="help" title="Starting transitions"
+  href="https://drafts.csswg.org/css-transitions/#starting">
+
+<script src="/resources/testharness.js" type="text/javascript"></script>
+<script src="/resources/testharnessreport.js" type="text/javascript"></script>
+<script src="./support/helper.js" type="text/javascript"></script>
+
+</head>
+<body>
+<div id="log"></div>
+
+<script>
+
+promise_test(async t => {
+  for (const pseudoType of ['before', 'after']) {
+    const style = addStyle(t, {
+      [`.init::${pseudoType}`]: 'content: ""; width: 0px; transition: width 100s;',
+      [`.change::${pseudoType}`]: 'width: 100px;',
+      [`.cancel::${pseudoType}`]: 'content: none',
+    });
+
+    // Create element (and pseudo-element) and attach event listeners
+    const div = addDiv(t);
+    div.classList.add('init');
+
+    const eventWatcher = new EventWatcher(t, div, [
+      'transitionrun',
+      'transitioncancel',
+    ]);
+
+    // Trigger transition
+    getComputedStyle(div).width;
+    div.classList.add('change');
+    getComputedStyle(div).width;
+
+    await eventWatcher.wait_for('transitionrun');
+
+    // Make the pseudo-element no longer rendered
+    div.classList.add('cancel');
+
+    await eventWatcher.wait_for('transitioncancel');
+
+    div.remove();
+    style.remove();
+  }
+}, 'Transitions on ::before/::after pseudo-elements are canceled when the'
+   + ' content property is cleared');
+</script>
+
+</body>
+</html>
--- a/testing/web-platform/tests/css/css-transitions/support/helper.js
+++ b/testing/web-platform/tests/css/css-transitions/support/helper.js
@@ -226,16 +226,17 @@ root.addStyle = (t, rules) => {
     }
   }
 
   if (t && typeof t.add_cleanup === 'function') {
     t.add_cleanup(() => {
       extraStyle.remove();
     });
   }
+  return extraStyle;
 };
 
 /**
  * Promise wrapper for requestAnimationFrame.
  */
 root.waitForFrame = () => {
   return new Promise(resolve => {
     window.requestAnimationFrame(resolve);