<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>CSS Transitions Test: transitionend event for pseudo elements</title> <meta content="Test checks that TransitionEnd events are fired for pseudo-elements" name="assert"> <link href="http://www.w3.org/TR/css3-transitions/#transition-events" rel="help" title="5. Transition Events"> <link href="http://www.w3.org/TR/CSS21/generate.html#before-after-content" rel="help" title="CSS21 - 12.1 The :before and :after pseudo-elements"> <link href="http://www.w3.org/TR/css3-content/" rel="help" title="CSS3 Generated and Replaced Content Module"> <link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm"> <meta content="dom" name="flags"> <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 { position: absolute; top: -100000px; left: -100000px; width: 100000px; height: 100000px; } </style> <script id="metadata_cache">/* { "transition padding-left on :before / events": {}, "transition padding-left on :after / events": {} } */</script> </head> <body> <!-- required by testharnessreport.js --> <div id="log"></div> <!-- elements used for testing --> <div class="fixture" id="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 is yet to be specified behavior // this test takes its time, give it a minute to run var timeout = 60000; setup({timeout: timeout}); var tests = [ { name: "transition padding-left on :before", pseudo: 'before', property: 'padding-left', flags: {}, from: {'padding-left': '1px', 'content': '""'}, to: {'padding-left': '10px'}, expect: [ 'padding-left:before:0.1s' ] }, { name: "transition padding-left on :after", pseudo: 'after', property: 'padding-left', flags: {}, from: {'padding-left': '1px', 'content': '""'}, to: {'padding-left': '10px'}, expect: [ 'padding-left:after:0.1s' ] } ]; // general transition-duration var duration = '0.5s'; runParallelAsyncHarness({ // array of test data tests: tests, // the number of tests to run in parallel testsPerSlice: 50, // milliseconds to wait before calling teardown and ending test duration: parseFloat(duration) * 1000, // the global suite timeout timeout: timeout, // prepare individual test setup: function(data, options) { var styles = {}; styles['.container'] = {}; styles['.transition'] = {}; styles['.transition:' + data.pseudo.name] = data.from; styles['.transition.how:' + data.pseudo.name] = {transition: 'all .1s linear 0s'}; styles['.transition.to:' + data.pseudo.name] = data.to; 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 TransitionEnd events 'events': { start: function(test, data, options) { // kick off the transition generalParallelTest.startTransition(data); }, done: function(test, data, options) { // make sure we got the event for the tested property only test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', data.expect)); } } }, // called once all tests are done done: generalParallelTest.done }); </script> </body></html>