/tests/wpt/css-tests/css-transitions-1_dev/html/properties-value-inherit-003.htm
HTML | 209 lines | 187 code | 16 blank | 6 comment | 0 complexity | 5a2c04f50e53dada630969818566ed83 MD5 | raw file
- <!DOCTYPE html>
- <html><head>
- <meta charset="utf-8">
- <title>CSS Transitions Test: transitioning implicitly inherited property values</title>
- <meta content="Test checks that implicitly inherited property values that are transitioned on a parent element don't start a transition" name="assert">
- <link href="http://www.w3.org/TR/css3-transitions/#starting" rel="help" title="3. Starting of transitions">
- <link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
- <meta content="dom " name="flags">
-
- <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>
- <script src="./support/properties.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">/*
- {
- "background-position length-em(em) / values": {},
- "background-position length-em(em) / events": {},
- "border-top-width length-em(em) / values": {},
- "border-top-width length-em(em) / events": {},
- "border-right-width length-em(em) / values": {},
- "border-right-width length-em(em) / events": {},
- "border-bottom-width length-em(em) / values": {},
- "border-bottom-width length-em(em) / events": {},
- "border-left-width length-em(em) / values": {},
- "border-left-width length-em(em) / events": {},
- "padding-bottom length-em(em) / values": {},
- "padding-bottom length-em(em) / events": {},
- "padding-left length-em(em) / values": {},
- "padding-left length-em(em) / events": {},
- "padding-right length-em(em) / values": {},
- "padding-right length-em(em) / events": {},
- "padding-top length-em(em) / values": {},
- "padding-top length-em(em) / events": {},
- "margin-bottom length-em(em) / values": {},
- "margin-bottom length-em(em) / events": {},
- "margin-left length-em(em) / values": {},
- "margin-left length-em(em) / events": {},
- "margin-right length-em(em) / values": {},
- "margin-right length-em(em) / events": {},
- "margin-top length-em(em) / values": {},
- "margin-top length-em(em) / events": {},
- "height length-em(em) / values": {},
- "height length-em(em) / events": {},
- "width length-em(em) / values": {},
- "width length-em(em) / events": {},
- "min-height length-em(em) / values": {},
- "min-height length-em(em) / events": {},
- "min-width length-em(em) / values": {},
- "min-width length-em(em) / events": {},
- "max-height length-em(em) / values": {},
- "max-height length-em(em) / events": {},
- "max-width length-em(em) / values": {},
- "max-width length-em(em) / events": {},
- "top length-em(em) / values": {},
- "top length-em(em) / events": {},
- "right length-em(em) / values": {},
- "right length-em(em) / events": {},
- "bottom length-em(em) / values": {},
- "bottom length-em(em) / events": {},
- "left length-em(em) / values": {},
- "left length-em(em) / events": {},
- "line-height length-em(em) / values": {},
- "line-height length-em(em) / events": {},
- "letter-spacing length-em(em) / values": {},
- "letter-spacing length-em(em) / events": {},
- "word-spacing length-em(em) / values": {},
- "word-spacing length-em(em) / events": {},
- "text-indent length-em(em) / values": {},
- "text-indent length-em(em) / events": {},
- "outline-offset length-em(em) / values": {},
- "outline-offset length-em(em) / events": {},
- "outline-width length-em(em) / values": {},
- "outline-width length-em(em) / events": {},
- "vertical-align length-em(em) / values": {},
- "vertical-align length-em(em) / events": {}
- }
- */</script>
- </head>
- <body>
- <!-- required by testharnessreport.js -->
- <div id="log"></div>
- <!-- elements used for testing -->
- <div class="fixture" id="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>
- // http://www.w3.org/TR/css3-transitions/#starting
- // Implementations also must not start a transition when the computed value changes because
- // it is inherited (directly or indirectly) from another element that is transitioning the same property.
- // Note: "indirectly" could mean "font-size" on parent, "em-based" on element
-
- // this test takes its time, give it a minute to run
- var timeout = 60000;
- setup({timeout: timeout});
-
- var tests = getFontSizeRelativePropertyTests();
- // for testing, limit to a couple of iterations
- // tests = tests.slice(10, 30);
- // or filter using one of:
- // tests = filterPropertyTests(tests, "background-color color(rgba)");
- // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
- // tests = filterPropertyTests(tests, /^background-color/);
-
- // 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) {
- // have parent transition the font-size only
- var from = extend({}, data.from, {'font-size': '20px'});
- delete from[data.property];
- var styles = {
- // as we're testing inheritance, #fixture is our new parent
- '.fixture': data.parentStyle,
-
- '.container': from,
- '.container.to': {'font-size': '30px'},
- // transition font-size on parent
- '.container.how': {transition: 'font-size ' + duration + ' linear 0s'},
-
- '.transition': data.from,
- '.transition.to' : {},
- // transition font-size dependent property on child
- '.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'}
- };
- 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);
- // make sure values differ, if they don't, the property could most likely not be parsed
- assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
- // kick off the transition
- generalParallelTest.startTransition(data);
-
- // make sure we didn't get the target value immediately.
- // If we did, there wouldn't be a transition!
- var current = data.transition.computedStyle(data.property);
- assert_not_equals(current, data.transition.to, "must not be target value after start");
- },
- done: function(test, data, options) {
- // make sure the property's value were neither initial nor target while transitioning
- test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'transition'));
- }
- },
- // test TransitionEnd events
- 'events': {
- done: function(test, data, options) {
- // make sure there were no events on parent
- test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', "font-size:" + duration));
- // make sure we got the event for the tested property only
- test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', ""));
- }
- }
- },
- // called once all tests are done
- done: generalParallelTest.done
- });
- </script>
-
- </body></html>