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