properties-value-003.html (6812B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transitions Test: Intermediate Property Values of unspecified properties</title> 6 <meta name="timeout" content="long"> 7 <meta name="assert" content="Test checks that properties are transitionable that haven't been specified"> 8 <link rel="help" href="http://www.w3.org/TR/css3-transitions/#transitions"> 9 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#animation-type"> 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 // see README.md for an explanation of how this test suite works 50 // this suite tests properties that haven't been specified at all 51 // (like background-image and column-rule-width) 52 53 // this test takes its time, give it a minute to run 54 var timeout = 60000; 55 setup({timeout: timeout}); 56 57 var tests = getUnspecifiedPropertyTests(); 58 // for testing, limit to a couple of iterations 59 // tests = tests.slice(10, 30); 60 // or filter using one of: 61 // tests = filterPropertyTests(tests, "background-color color(rgba)"); 62 // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]); 63 // tests = filterPropertyTests(tests, /^background-color/); 64 65 // general transition-duration 66 var duration = '2s'; 67 68 runParallelAsyncHarness({ 69 // array of test data 70 tests: tests, 71 // the number of tests to run in parallel 72 testsPerSlice: 50, 73 // milliseconds to wait before calling teardown and ending test 74 duration: parseFloat(duration) * 1000, 75 // prepare individual test 76 setup: function(data, options) { 77 var styles = { 78 '.fixture': {}, 79 80 '.container': data.parentStyle, 81 '.container.to': {}, 82 '.container.how': {}, 83 84 '.transition': data.from, 85 '.transition.to' : data.to, 86 '.transition.how' : {transition: 'all ' + duration + ' linear 0s'} 87 }; 88 89 generalParallelTest.setup(data, options); 90 generalParallelTest.addStyles(data, options, styles); 91 }, 92 // cleanup after individual test 93 teardown: generalParallelTest.teardown, 94 // invoked prior to running a slice of tests 95 sliceStart: generalParallelTest.sliceStart, 96 // invoked after transitions have started 97 transitionsStarted: generalParallelTest.transitionsStarted, 98 // invoked after running a slice of tests 99 sliceDone: generalParallelTest.sliceDone, 100 // test cases, make them as granular as possible 101 cases: { 102 // test property values while transitioning 103 // values.start kicks off a transition 104 'values': { 105 // run actual test, assertions can be used here! 106 start: function(test, data, options) { 107 // identify initial and target values 108 generalParallelTest.getStyle(data); 109 // make sure values differ, if they don't, the property could most likely not be parsed 110 assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match"); 111 // kick off the transition 112 generalParallelTest.startTransition(data); 113 114 // make sure we didn't get the target value immediately. 115 // If we did, there wouldn't be a transition! 116 var current = data.transition.computedStyle(data.property); 117 assert_not_equals(current, data.transition.to, "must not be target value after start"); 118 }, 119 done: function(test, data, options) { 120 // make sure the property's value were neither initial nor target while transitioning 121 test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'transition')); 122 } 123 }, 124 // test TransitionEnd events 125 'events': { 126 done: function(test, data, options) { 127 // make sure there were no events on parent 128 test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', "")); 129 // make sure we got the event for the tested property only 130 test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration)); 131 } 132 } 133 }, 134 // called once all tests are done 135 done: generalParallelTest.done 136 }); 137 </script> 138 </body> 139 </html>