third_party/blink/web_tests/external/wpt/css/css-transitions/properties-value-inherit-002.html - chromium/src - Git at Google

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>CSS Transitions Test: transitioning inherited property values</title>
         <meta name="assert" content="Test checks that inherited property values that are not transitioned on a parent element start a transition">
         <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>
         <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>
     </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>
             // 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: Parent element doesn't transition, so above quote doesn't apply!

             // this test takes its time, give it a minute to run
             var timeout = 60000;
             setup({timeout: timeout});

             var tests = getPropertyTests();
             // 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,
                 // prepare individual test
                 setup: function(data, options) {
                     // clone and overwrite initial styles to be
                     // applied to #transition
                     var inherited = extend({}, data.from);
                     inherited[data.property] = 'inherit';

                     var styles = {
                         // as we're testing inheritance, #fixture is our new parent
                         '.fixture': data.parentStyle,
                         // all styles including transition apply to to #container so they
                         // can inherit down to #transition
                         '.container': extend({}, data.parentStyle, data.from),
                         '.container.to': data.to,
                         '.container.how': {},
                         // #transition only inherits and listens for transition events
                         '.transition': inherited,
                         '.transition.to' : {},
                         '.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', ""));
                             // make sure we got the event for the tested property only
                             test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
                         }
                     }
                 },
                 // called once all tests are done
                 done: generalParallelTest.done
             });
         </script>
     </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>CSS Transitions Test: transitioning inherited property values</title>
	<meta name="assert" content="Test checks that inherited property values that are not transitioned on a parent element start a transition">
	<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>
	<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>
	</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>
	// 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: Parent element doesn't transition, so above quote doesn't apply!

	// this test takes its time, give it a minute to run
	var timeout = 60000;
	setup({timeout: timeout});

	var tests = getPropertyTests();
	// 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,
	// prepare individual test
	setup: function(data, options) {
	// clone and overwrite initial styles to be
	// applied to #transition
	var inherited = extend({}, data.from);
	inherited[data.property] = 'inherit';

	var styles = {
	// as we're testing inheritance, #fixture is our new parent
	'.fixture': data.parentStyle,
	// all styles including transition apply to to #container so they
	// can inherit down to #transition
	'.container': extend({}, data.parentStyle, data.from),
	'.container.to': data.to,
	'.container.how': {},
	// #transition only inherits and listens for transition events
	'.transition': inherited,
	'.transition.to' : {},
	'.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', ""));
	// make sure we got the event for the tested property only
	test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
	}
	}
	},
	// called once all tests are done
	done: generalParallelTest.done
	});
	</script>
	</body>
	</html>