properties-value-implicit-001.html (7164B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transitions Test: font-size-relative properties transition by implicit value change</title> 6 <meta name="timeout" content="long"> 7 <meta name="assert" content="Test checks that font-size-relative properties (all em-lengths) run a transition when font-size is changed"> 8 <link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions"> 9 <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/"> 10 <meta name="flags" content="dom "> 11 12 <script src="/resources/testharness.js" type="text/javascript"></script> 13 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 14 15 <script src="./support/vendorPrefix.js" type="text/javascript"></script> 16 <script src="./support/helper.js" type="text/javascript"></script> 17 <script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script> 18 <script src="./support/generalParallelTest.js" type="text/javascript"></script> 19 <script src="./support/properties.js" type="text/javascript"></script> 20 21 <style type="text/css"> 22 #offscreen { 23 position: absolute; 24 top: -100000px; 25 left: -100000px; 26 width: 100000px; 27 height: 100000px; 28 } 29 </style> 30 </head> 31 <body> 32 <!-- required by testharnessreport.js --> 33 <div id="log"></div> 34 <!-- elements used for testing --> 35 <div id="fixture" class="fixture"> 36 <div class="container"> 37 <div class="transition">Text sample</div> 38 </div> 39 </div> 40 <div id="offscreen"></div> 41 42 <!-- 43 SEE ./support/README.md for an abstract explanation of the test procedure 44 http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md 45 --> 46 47 <script> 48 // see README.md for an explanation of how this test suite works 49 // this suite tests properties that haven't been specified at all 50 // (like background-image and column-rule-width) 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 // as we're dealing with em-based lengths, we need to define a font-size 77 data.from['font-size'] = '20px'; 78 data.to['font-size'] = '30px'; 79 // remove property from target style so it won't transition on its own 80 delete data.to[data.property]; 81 82 var styles = { 83 '.fixture': {}, 84 85 '.container': data.parentStyle, 86 '.container.to': {}, 87 '.container.how': {}, 88 89 '.transition': data.from, 90 '.transition.to' : data.to, 91 '.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'} 92 }; 93 94 generalParallelTest.setup(data, options); 95 generalParallelTest.addStyles(data, options, styles); 96 }, 97 // cleanup after individual test 98 teardown: generalParallelTest.teardown, 99 // invoked prior to running a slice of tests 100 sliceStart: generalParallelTest.sliceStart, 101 // invoked after transitions have started. 102 transitionsStarted: generalParallelTest.transitionsStarted, 103 // invoked after running a slice of tests 104 sliceDone: generalParallelTest.sliceDone, 105 // test cases, make them as granular as possible 106 cases: { 107 // test property values while transitioning 108 // values.start kicks off a transition 109 'values': { 110 // run actual test, assertions can be used here! 111 start: function(test, data, options) { 112 // identify initial and target values 113 generalParallelTest.getStyle(data); 114 // make sure values differ, if they don't, the property could most likely not be parsed 115 assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match"); 116 // kick off the transition 117 generalParallelTest.startTransition(data); 118 119 // make sure we didn't get the target value immediately. 120 // If we did, there wouldn't be a transition! 121 var current = data.transition.computedStyle(data.property); 122 assert_not_equals(current, data.transition.to, "must not be target value after start"); 123 }, 124 done: function(test, data, options) { 125 // make sure the property's value were neither initial nor target while transitioning 126 test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'transition')); 127 } 128 }, 129 // test TransitionEnd events 130 'events': { 131 done: function(test, data, options) { 132 // make sure there were no events on parent 133 test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', "")); 134 // make sure we got the event for the tested property only 135 test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration)); 136 } 137 } 138 }, 139 // called once all tests are done 140 done: generalParallelTest.done 141 }); 142 </script> 143 </body> 144 </html>