| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Transitions Test: behavior when transition parameters change while transitioning</title> |
| <meta name="assert" content="Test checks that all transitions run properly when property or duration is changed mid-run"> |
| <link rel="help" title="3. Starting of transitions" href="http://www.w3.org/TR/css3-transitions/#starting"> |
| <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> |
| |
| <style type="text/css"> |
| #offscreen { |
| position: absolute; |
| top: -100000px; |
| left: -100000px; |
| width: 100000px; |
| height: 100000px; |
| } |
| </style> |
| |
| <script id="metadata_cache">/* |
| { |
| "changing transition-duration / values": {}, |
| "changing transition-property / values": {} |
| } |
| */</script> |
| </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: "changing transition-duration", |
| property: 'padding-left', |
| transitions: 'padding-left .5s linear 0s', |
| from: {'padding-left': '1px'}, |
| to: {'padding-left': '10px'}, |
| then: { |
| 'transition-duration': '0.1s' |
| }, |
| expect: [ |
| 'padding-left:0.5s' |
| ] |
| }, |
| { |
| name: "changing transition-property", |
| property: 'padding-left', |
| transitions: 'padding-left .5s linear 0s', |
| from: {'padding-left': '1px'}, |
| to: {'padding-left': '10px'}, |
| then: { |
| 'transition-property': 'margin-left' |
| }, |
| expect: [ |
| '' |
| ] |
| } |
| ]; |
| |
| // general transition-duration |
| var duration = '0.5s'; |
| |
| 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, |
| // the global suite timeout |
| timeout: timeout, |
| // prepare individual test |
| setup: function(data, options) { |
| var styles = { |
| '.fixture': {}, |
| |
| '.container': {}, |
| '.container.to': {}, |
| '.container.how': {}, |
| |
| '.transition': data.from, |
| '.transition.to' : data.to, |
| '.transition.how' : {transition: data.transitions}, |
| '.transition.then' : data.then |
| }; |
| |
| generalParallelTest.setup(data, options); |
| 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); |
| // kick off the transition |
| generalParallelTest.startTransition(data); |
| |
| setTimeout(function() { |
| data.transition.node.classList.add('then'); |
| |
| for (var property in data.then) { |
| var current = data.transition.computedStyle(property); |
| assert_equals(current, data.then[property], 'value of ' + property + ' changed'); |
| } |
| |
| }, 50); |
| }, |
| done: function(test, data, options) { |
| // make sure we got the event for the tested property only |
| test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', data.expect)); |
| } |
| } |
| }, |
| // called once all tests are done |
| done: generalParallelTest.done |
| }); |
| </script> |
| </body> |
| </html> |
