| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Transitions Test: Transitioning Pseudo Elements</title> |
| <meta name="assert" content="Test checks that transitions are run on pseudo elements"> |
| <link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property"> |
| <link rel="help" title="CSS21 - 12.1 The :before and :after pseudo-elements" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"> |
| <link rel="help" title="CSS3 Generated and Replaced Content Module" href="http://www.w3.org/TR/css3-content/"> |
| <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 { |
| position: absolute; |
| top: -100000px; |
| left: -100000px; |
| width: 100000px; |
| height: 100000px; |
| } |
| </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 padding-left on :before", |
| pseudo: 'before', |
| property: 'padding-left', |
| flags: {}, |
| from: {'padding-left': '1px', 'content': '""'}, |
| to: {'padding-left': '10px'} |
| }, { |
| name: "transition padding-left on :after", |
| pseudo: 'after', |
| property: 'padding-left', |
| flags: {}, |
| from: {'padding-left': '1px', 'content': '""'}, |
| to: {'padding-left': '10px'} |
| }, { |
| name: "transition padding-left on :before, changing content", |
| pseudo: 'before', |
| property: 'padding-left', |
| flags: {}, |
| from: {'padding-left': '1px', 'content': '"1"'}, |
| to: {'padding-left': '10px', 'content': '"2"'} |
| }, { |
| name: "transition padding-left on :after, changing content", |
| pseudo: 'after', |
| property: 'padding-left', |
| flags: {}, |
| from: {'padding-left': '1px', 'content': '"1"'}, |
| to: {'padding-left': '10px', 'content': '"2"'} |
| } |
| ]; |
| |
| // general transition-duration |
| var duration = '2s'; |
| |
| 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, |
| // prepare individual test |
| setup: function(data, options) { |
| generalParallelTest.setup(data, options); |
| |
| var styles = {}; |
| styles['.fixture'] = {}; |
| styles['.container'] = data.parentStyle; |
| styles['.container.to'] = {}; |
| styles['.container.how'] = {}; |
| styles['.transition'] = {}; |
| styles['.transition:' + data.pseudo.name] = data.from; |
| styles['.transition.how:' + data.pseudo.name] = {transition: 'all ' + duration + ' linear 0s'}; |
| styles['.transition.to:' + data.pseudo.name] = data.to; |
| |
| 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.pseudo.from, data.pseudo.to, "initial and target values may not match"); |
| // kick off the transition |
| generalParallelTest.startTransition(data); |
| |
| // make sure we didn't get the target value immediately. |
| // If we did, there wouldn't be a transition! |
| var current = data.pseudo.computedStyle(data.property); |
| assert_not_equals(current, data.pseudo.to, "must not be target value after start"); |
| }, |
| done: function(test, data, options) { |
| // make sure the property's value were neither initial nor target while transitioning |
| test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'pseudo')); |
| } |
| } |
| }, |
| // called once all tests are done |
| done: generalParallelTest.done |
| }); |
| </script> |
| </body> |
| </html> |