pseudo-elements-001.html (7194B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transitions Test: Transitioning Pseudo Elements</title> 6 <meta name="assert" content="Test checks that transitions are run on pseudo elements"> 7 <link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property"> 8 <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"> 9 <link rel="help" title="CSS3 Generated and Replaced Content Module" href="http://www.w3.org/TR/css3-content/"> 10 <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/"> 11 <meta name="flags" content="dom"> 12 13 <script src="/resources/testharness.js" type="text/javascript"></script> 14 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 15 16 <script src="./support/vendorPrefix.js" type="text/javascript"></script> 17 <script src="./support/helper.js" type="text/javascript"></script> 18 <script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script> 19 <script src="./support/generalParallelTest.js" type="text/javascript"></script> 20 <script src="./support/properties.js" type="text/javascript"></script> 21 22 <style type="text/css"> 23 #offscreen { 24 position: absolute; 25 top: -100000px; 26 left: -100000px; 27 width: 100000px; 28 height: 100000px; 29 } 30 </style> 31 </head> 32 <body> 33 <!-- required by testharnessreport.js --> 34 <div id="log"></div> 35 <!-- elements used for testing --> 36 <div id="fixture" class="fixture"> 37 <div class="container"> 38 <div class="transition">Text sample</div> 39 </div> 40 </div> 41 <div id="offscreen"></div> 42 43 <!-- 44 SEE ./support/README.md for an abstract explanation of the test procedure 45 http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md 46 --> 47 48 <script> 49 50 // this test takes its time, give it a minute to run 51 var timeout = 60000; 52 setup({timeout: timeout}); 53 54 var tests = [ 55 { 56 name: "transition padding-left on :before", 57 pseudo: 'before', 58 property: 'padding-left', 59 flags: {}, 60 from: {'padding-left': '1px', 'content': '""'}, 61 to: {'padding-left': '10px'} 62 }, { 63 name: "transition padding-left on :after", 64 pseudo: 'after', 65 property: 'padding-left', 66 flags: {}, 67 from: {'padding-left': '1px', 'content': '""'}, 68 to: {'padding-left': '10px'} 69 }, { 70 name: "transition padding-left on :before, changing content", 71 pseudo: 'before', 72 property: 'padding-left', 73 flags: {}, 74 from: {'padding-left': '1px', 'content': '"1"'}, 75 to: {'padding-left': '10px', 'content': '"2"'} 76 }, { 77 name: "transition padding-left on :after, changing content", 78 pseudo: 'after', 79 property: 'padding-left', 80 flags: {}, 81 from: {'padding-left': '1px', 'content': '"1"'}, 82 to: {'padding-left': '10px', 'content': '"2"'} 83 } 84 ]; 85 86 // general transition-duration 87 var duration = '2s'; 88 89 runParallelAsyncHarness({ 90 // array of test data 91 tests: tests, 92 // the number of tests to run in parallel 93 testsPerSlice: 50, 94 // milliseconds to wait before calling teardown and ending test 95 duration: parseFloat(duration) * 1000, 96 // prepare individual test 97 setup: function(data, options) { 98 generalParallelTest.setup(data, options); 99 100 var styles = {}; 101 styles['.fixture'] = {}; 102 styles['.container'] = data.parentStyle; 103 styles['.container.to'] = {}; 104 styles['.container.how'] = {}; 105 styles['.transition'] = {}; 106 styles['.transition:' + data.pseudo.name] = data.from; 107 styles['.transition.how:' + data.pseudo.name] = {transition: 'all ' + duration + ' linear 0s'}; 108 styles['.transition.to:' + data.pseudo.name] = data.to; 109 110 generalParallelTest.addStyles(data, options, styles); 111 }, 112 // cleanup after individual test 113 teardown: generalParallelTest.teardown, 114 // invoked prior to running a slice of tests 115 sliceStart: generalParallelTest.sliceStart, 116 // Invoked after transitions have started. 117 transitionsStarted: generalParallelTest.transitionsStarted, 118 // invoked after running a slice of tests 119 sliceDone: generalParallelTest.sliceDone, 120 // test cases, make them as granular as possible 121 cases: { 122 // test property values while transitioning 123 // values.start kicks off a transition 124 'values': { 125 // run actual test, assertions can be used here! 126 start: function(test, data, options) { 127 // identify initial and target values 128 generalParallelTest.getStyle(data); 129 // make sure values differ, if they don't, the property could most likely not be parsed 130 assert_not_equals(data.pseudo.from, data.pseudo.to, "initial and target values may not match"); 131 // kick off the transition 132 generalParallelTest.startTransition(data); 133 134 // make sure we didn't get the target value immediately. 135 // If we did, there wouldn't be a transition! 136 var current = data.pseudo.computedStyle(data.property); 137 assert_not_equals(current, data.pseudo.to, "must not be target value after start"); 138 }, 139 done: function(test, data, options) { 140 // make sure the property's value were neither initial nor target while transitioning 141 test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'pseudo')); 142 } 143 } 144 }, 145 // called once all tests are done 146 done: generalParallelTest.done 147 }); 148 </script> 149 </body> 150 </html>