css-transitions-1/events-001.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>CSS Transitions Test: transitionend event for shorthand property</title>
  <meta name="assert" content="Test checks that all transitionend events are triggered for shorthand property">
  <link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
  <link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
  <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>

  <script id="metadata_cache">/*
  {
  "transition:all, changing padding-left / events": {},
  "transition:all, changing padding / events": {},
  "transition:all, changing padding but not padding-bottom / events": {},
  "transition:padding, changing padding-left / events": {},
  "transition:padding, changing padding / events": {},
  "transition:padding, changing padding but not padding-bottom / events": {},
  "transition:padding-left, changing padding-left / events": {},
  "transition:padding-left, changing padding / events": {},
  "transition:padding-left, changing padding but not padding-bottom / events": {}
  }
  */</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>
  // For the keyword ‘all’, or if one of the identifiers listed is a shorthand property, implementations must
  // start transitions for any of its longhand sub-properties that are animatable (or, for ‘all’, all animatable
  // properties), using the duration, delay, and timing function at the index corresponding to the shorthand.

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

  var tests = [
  {
  name: "transition:all, changing padding-left",
  transitions: 'all .1s linear .01s',
  from: {'padding-left': '1px'},
  to: {'padding-left': '10px'},
  expect: [
  'padding-left:0.1s'
  ]
  }, {
  name: "transition:all, changing padding",
  transitions: 'all .1s linear .01s',
  from: {'padding': '1px'},
  to: {'padding': '10px'},
  expect: [
  'padding-top:0.1s',
  'padding-right:0.1s',
  'padding-bottom:0.1s',
  'padding-left:0.1s'
  ]
  }, {
  name: "transition:all, changing padding but not padding-bottom",
  transitions: 'all .1s linear .01s',
  from: {'padding': '1px 1px 1px 1px'},
  to: {'padding': '10px 10px 1px 10px'},
  expect: [
  'padding-top:0.1s',
  'padding-right:0.1s',
  'padding-left:0.1s'
  ]
  }, {
  name: "transition:padding, changing padding-left",
  transitions: 'padding .1s linear .01s',
  from: {'padding-left': '1px'},
  to: {'padding-left': '10px'},
  expect: [
  'padding-left:0.1s'
  ]
  }, {
  name: "transition:padding, changing padding",
  transitions: 'padding .1s linear .01s',
  from: {'padding': '1px'},
  to: {'padding': '10px'},
  expect: [
  'padding-top:0.1s',
  'padding-right:0.1s',
  'padding-bottom:0.1s',
  'padding-left:0.1s'
  ]
  }, {
  name: "transition:padding, changing padding but not padding-bottom",
  transitions: 'padding .1s linear .01s',
  from: {'padding': '1px 1px 1px 1px'},
  to: {'padding': '10px 10px 1px 10px'},
  expect: [
  'padding-top:0.1s',
  'padding-right:0.1s',
  'padding-left:0.1s'
  ]
  }, {
  name: "transition:padding-left, changing padding-left",
  transitions: 'padding-left .1s linear .01s',
  from: {'padding-left': '1px'},
  to: {'padding-left': '10px'},
  expect: [
  'padding-left:0.1s'
  ]
  }, {
  name: "transition:padding-left, changing padding",
  transitions: 'padding-left .1s linear .01s',
  from: {'padding': '1px'},
  to: {'padding': '10px'},
  expect: [
  'padding-left:0.1s'
  ]
  }, {
  name: "transition:padding-left, changing padding but not padding-bottom",
  transitions: 'padding-left .1s linear .01s',
  from: {'padding': '1px 1px 1px 1px'},
  to: {'padding': '10px 10px 1px 10px'},
  expect: [
  'padding-left:0.1s'
  ]
  }
  ];

  // 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}
  };

  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 TransitionEnd events
  'events': {
  start: function(test, data, options) {
  // kick off the transition
  generalParallelTest.startTransition(data);
  },
  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>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>CSS Transitions Test: transitionend event for shorthand property</title>
	<meta name="assert" content="Test checks that all transitionend events are triggered for shorthand property">
	<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
	<link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
	<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>

	<script id="metadata_cache">/*
	{
	"transition:all, changing padding-left / events": {},
	"transition:all, changing padding / events": {},
	"transition:all, changing padding but not padding-bottom / events": {},
	"transition:padding, changing padding-left / events": {},
	"transition:padding, changing padding / events": {},
	"transition:padding, changing padding but not padding-bottom / events": {},
	"transition:padding-left, changing padding-left / events": {},
	"transition:padding-left, changing padding / events": {},
	"transition:padding-left, changing padding but not padding-bottom / events": {}
	}
	*/</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>
	// For the keyword ‘all’, or if one of the identifiers listed is a shorthand property, implementations must
	// start transitions for any of its longhand sub-properties that are animatable (or, for ‘all’, all animatable
	// properties), using the duration, delay, and timing function at the index corresponding to the shorthand.

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

	var tests = [
	{
	name: "transition:all, changing padding-left",
	transitions: 'all .1s linear .01s',
	from: {'padding-left': '1px'},
	to: {'padding-left': '10px'},
	expect: [
	'padding-left:0.1s'
	]
	}, {
	name: "transition:all, changing padding",
	transitions: 'all .1s linear .01s',
	from: {'padding': '1px'},
	to: {'padding': '10px'},
	expect: [
	'padding-top:0.1s',
	'padding-right:0.1s',
	'padding-bottom:0.1s',
	'padding-left:0.1s'
	]
	}, {
	name: "transition:all, changing padding but not padding-bottom",
	transitions: 'all .1s linear .01s',
	from: {'padding': '1px 1px 1px 1px'},
	to: {'padding': '10px 10px 1px 10px'},
	expect: [
	'padding-top:0.1s',
	'padding-right:0.1s',
	'padding-left:0.1s'
	]
	}, {
	name: "transition:padding, changing padding-left",
	transitions: 'padding .1s linear .01s',
	from: {'padding-left': '1px'},
	to: {'padding-left': '10px'},
	expect: [
	'padding-left:0.1s'
	]
	}, {
	name: "transition:padding, changing padding",
	transitions: 'padding .1s linear .01s',
	from: {'padding': '1px'},
	to: {'padding': '10px'},
	expect: [
	'padding-top:0.1s',
	'padding-right:0.1s',
	'padding-bottom:0.1s',
	'padding-left:0.1s'
	]
	}, {
	name: "transition:padding, changing padding but not padding-bottom",
	transitions: 'padding .1s linear .01s',
	from: {'padding': '1px 1px 1px 1px'},
	to: {'padding': '10px 10px 1px 10px'},
	expect: [
	'padding-top:0.1s',
	'padding-right:0.1s',
	'padding-left:0.1s'
	]
	}, {
	name: "transition:padding-left, changing padding-left",
	transitions: 'padding-left .1s linear .01s',
	from: {'padding-left': '1px'},
	to: {'padding-left': '10px'},
	expect: [
	'padding-left:0.1s'
	]
	}, {
	name: "transition:padding-left, changing padding",
	transitions: 'padding-left .1s linear .01s',
	from: {'padding': '1px'},
	to: {'padding': '10px'},
	expect: [
	'padding-left:0.1s'
	]
	}, {
	name: "transition:padding-left, changing padding but not padding-bottom",
	transitions: 'padding-left .1s linear .01s',
	from: {'padding': '1px 1px 1px 1px'},
	to: {'padding': '10px 10px 1px 10px'},
	expect: [
	'padding-left:0.1s'
	]
	}
	];

	// 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}
	};

	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 TransitionEnd events
	'events': {
	start: function(test, data, options) {
	// kick off the transition
	generalParallelTest.startTransition(data);
	},
	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>