third_party/WebKit/LayoutTests/animations/responsive/resources/responsive-test.js - chromium/src.git - Git at Google

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

 /*
 Exported functions:
 assertCSSResponsive
 assertSVGResponsive

 Exported objects:
 neutralKeyframe

 Options format: {
   ?targetTag: <Target element tag name>,
   property: <Property/Attribute name>,
   ?getter(target): <Reads animated value from target>,
   from: <Value>,
   to: <Value>,
   configurations: [{
     state: {
       ?underlying: <Value>,
       ?inherited: <CSS Value>,
     },
     expect: [
       { at: <Float>, is: <Value> },
     ],
   }],
 }

 Description:
 assertCSSResponsive() and assertSVGResponsive() take a property
 specific interpolation and a list of style configurations with interpolation
 expectations that apply to each configuration.
 It starts the interpolation in every configuration, changes the
 state to every other configuration (n * (n - 1) complexity) and asserts that
 each destination configuration's expectations are met.
 Each animation target can be assigned custom styles via the ".target" selector.
 This test is designed to catch stale interpolation caches.
 Set from/to to the exported neutralKeyframe object to use neutral keyframes.
 */

 (function() {
 'use strict';
 var pendingResponsiveTests = [];
 var htmlNamespace = 'http://www.w3.org/1999/xhtml';
 var svgNamespace = 'http://www.w3.org/2000/svg';
 var neutralKeyframe = {};

 function assertCSSResponsive(options) {
   pendingResponsiveTests.push({
     options,
     bindings: {
       prefixProperty(property) {
         return toCamelCase(property);
       },
       createTargetContainer(container) {
         if (options.targetTag) {
           var svgRoot = createElement('svg', container, 'svg-root', svgNamespace);
           svgRoot.setAttribute('width', 0);
           svgRoot.setAttribute('height', 0);
           return svgRoot;
         }

         return createElement('div', container);
       },
       createTarget(container) {
         if (options.targetTag)
           return createElement(options.targetTag, container, 'target', svgNamespace);

         return createElement('div', container, 'target');
       },
       setValue(target, property, value) {
         test(function() {
           assert_true(CSS.supports(property, value), 'CSS.supports ' + property + ' ' + value);
         });
         target.style[property] = value;
       },
       getAnimatedValue(target, property) {
         return getComputedStyle(target)[property];
       },
     },
   });
 }

 function assertSVGResponsive(options) {
   pendingResponsiveTests.push({
     options,
     bindings: {
       prefixProperty(property) {
         return 'svg-' + property;
       },
       createTargetContainer(container) {
         var svgRoot = createElement('svg', container, 'svg-root', svgNamespace);
         svgRoot.setAttribute('width', 0);
         svgRoot.setAttribute('height', 0);
         return svgRoot;
       },
       createTarget(targetContainer) {
         console.assert(options.targetTag);
         return createElement(options.targetTag, targetContainer, 'target', svgNamespace);
       },
       setValue(target, property, value) {
         target.setAttribute(property, value);
       },
       getAnimatedValue(target, property) {
         return options.getter ? options.getter(target) : target[property].animVal;
       },
     },
   });
 }

 function createStateTransitions(configurations) {
   var stateTransitions = [];
   for (var i = 0; i < configurations.length; i++) {
     var beforeConfiguration = configurations[i];
     for (var j = 0; j < configurations.length; j++) {
       var afterConfiguration = configurations[j];
       if (j != i) {
         stateTransitions.push({
           before: beforeConfiguration,
           after: afterConfiguration,
         });
       }
     }
   }
   return stateTransitions;
 }

 function createElement(tag, container, className, namespace) {
   var element = document.createElementNS(namespace || htmlNamespace, tag);
   if (container) {
     container.appendChild(element);
   }
   if (className) {
     element.classList.add(className);
   }
   return element;
 }

 function createTargets(bindings, n, container) {
   var targets = [];
   for (var i = 0; i < n; i++) {
     targets.push(bindings.createTarget(container));
   }
   return targets;
 }

 function setState(bindings, targets, property, state) {
   for (var item in state) {
     switch (item) {
     case 'inherited':
       var parent = targets[0].parentElement;
       console.assert(targets.every(target => target.parentElement === parent));
       bindings.setValue(parent, property, state.inherited);
       break;
     case 'underlying':
       for (var target of targets) {
         bindings.setValue(target, property, state.underlying);
       }
       break;
     default:
       for (var target of targets) {
         bindings.setValue(target, item, state[item]);
       }
       break;
     }
   }
 }

 function isNeutralKeyframe(keyframe) {
   return keyframe === neutralKeyframe;
 }

 function keyframeText(keyframe) {
   return isNeutralKeyframe(keyframe) ? 'neutral' : `[${keyframe}]`;
 }

 function toCamelCase(property) {
   for (var i = property.length - 2; i > 0; --i) {
     if (property[i] === '-') {
       property = property.substring(0, i) + property[i + 1].toUpperCase() + property.substring(i + 2);
     }
   }
   return property;
 }

 function createKeyframes(prefixedProperty, from, to) {
   var keyframes = [];
   if (!isNeutralKeyframe(from)) {
     keyframes.push({
       offset: 0,
       [prefixedProperty]: from,
     });
   }
   if (!isNeutralKeyframe(to)) {
     keyframes.push({
       offset: 1,
       [prefixedProperty]: to,
     });
   }
   return keyframes;
 }

 function createPausedAnimations(targets, keyframes, fractions) {
   console.assert(targets.length == fractions.length);
   return targets.map((target, i) => {
     var fraction = fractions[i];
     console.assert(fraction >= 0 && fraction < 1);
     var animation = target.animate(keyframes, 1);
     animation.pause();
     animation.currentTime = fraction;
     return animation;
   });
 }

 function runPendingResponsiveTests() {
   return new Promise(resolve => {
     var stateTransitionTests = [];
     pendingResponsiveTests.forEach(responsiveTest => {
       var options = responsiveTest.options;
       var bindings = responsiveTest.bindings;
       var property = options.property;
       var prefixedProperty = bindings.prefixProperty(property);
       assert_true('from' in options);
       assert_true('to' in options);
       var from = options.from;
       var to = options.to;
       var keyframes = createKeyframes(prefixedProperty, from, to);

       var stateTransitions = createStateTransitions(options.configurations);
       stateTransitions.forEach(stateTransition => {
         var before = stateTransition.before;
         var after = stateTransition.after;
         var container = bindings.createTargetContainer(document.body);
         var targets = createTargets(bindings, after.expect.length, container);
         var expectationTargets = createTargets(bindings, after.expect.length, container);

         setState(bindings, targets, property, before.state);
         var animations = createPausedAnimations(targets, keyframes, after.expect.map(expectation => expectation.at));
         stateTransitionTests.push({
           applyStateTransition() {
             setState(bindings, targets, property, after.state);
           },
           assert() {
             for (var i = 0; i < targets.length; i++) {
               var target = targets[i];
               var expectation = after.expect[i];
               var expectationTarget = expectationTargets[i];
               bindings.setValue(expectationTarget, property, expectation.is);
               var actual = bindings.getAnimatedValue(target, property);
               test(() => {
                 assert_equals(actual, bindings.getAnimatedValue(expectationTarget, property));
               }, `Animation on property <${prefixedProperty}> from ${keyframeText(from)} to ${keyframeText(to)} with ${JSON.stringify(before.state)} changed to ${JSON.stringify(after.state)} at (${expectation.at}) is [${expectation.is}]`);
             }
           },
         });
       });
     });

     requestAnimationFrame(() => {
       for (var stateTransitionTest of stateTransitionTests) {
         stateTransitionTest.applyStateTransition();
       }

       requestAnimationFrame(() => {
         for (var stateTransitionTest of stateTransitionTests) {
           stateTransitionTest.assert();
         }
         resolve();
       });
     });
   });
 }

 function loadScript(url) {
   return new Promise(resolve => {
     var script = document.createElement('script');
     script.src = url;
     script.onload = resolve;
     document.head.appendChild(script);
   });
 }

 loadScript('../../resources/testharness.js').then(() => {
   return loadScript('../../resources/testharnessreport.js');
 }).then(() => {
   var asyncHandle = async_test('This test uses responsive-test.js.')
   runPendingResponsiveTests().then(() => {
     asyncHandle.done();
   });
 });


 window.assertCSSResponsive = assertCSSResponsive;
 window.assertSVGResponsive = assertSVGResponsive;
 window.neutralKeyframe = neutralKeyframe;

 })();
	// Copyright 2015 The Chromium Authors. All rights reserved.
	// Use of this source code is governed by a BSD-style license that can be
	// found in the LICENSE file.

	/*
	Exported functions:
	assertCSSResponsive
	assertSVGResponsive

	Exported objects:
	neutralKeyframe

	Options format: {
	?targetTag: <Target element tag name>,
	property: <Property/Attribute name>,
	?getter(target): <Reads animated value from target>,
	from: <Value>,
	to: <Value>,
	configurations: [{
	state: {
	?underlying: <Value>,
	?inherited: <CSS Value>,
	},
	expect: [
	{ at: <Float>, is: <Value> },
	],
	}],
	}

	Description:
	assertCSSResponsive() and assertSVGResponsive() take a property
	specific interpolation and a list of style configurations with interpolation
	expectations that apply to each configuration.
	It starts the interpolation in every configuration, changes the
	state to every other configuration (n * (n - 1) complexity) and asserts that
	each destination configuration's expectations are met.
	Each animation target can be assigned custom styles via the ".target" selector.
	This test is designed to catch stale interpolation caches.
	Set from/to to the exported neutralKeyframe object to use neutral keyframes.
	*/

	(function() {
	'use strict';
	var pendingResponsiveTests = [];
	var htmlNamespace = 'http://www.w3.org/1999/xhtml';
	var svgNamespace = 'http://www.w3.org/2000/svg';
	var neutralKeyframe = {};

	function assertCSSResponsive(options) {
	pendingResponsiveTests.push({
	options,
	bindings: {
	prefixProperty(property) {
	return toCamelCase(property);
	},
	createTargetContainer(container) {
	if (options.targetTag) {
	var svgRoot = createElement('svg', container, 'svg-root', svgNamespace);
	svgRoot.setAttribute('width', 0);
	svgRoot.setAttribute('height', 0);
	return svgRoot;
	}

	return createElement('div', container);
	},
	createTarget(container) {
	if (options.targetTag)
	return createElement(options.targetTag, container, 'target', svgNamespace);

	return createElement('div', container, 'target');
	},
	setValue(target, property, value) {
	test(function() {
	assert_true(CSS.supports(property, value), 'CSS.supports ' + property + ' ' + value);
	});
	target.style[property] = value;
	},
	getAnimatedValue(target, property) {
	return getComputedStyle(target)[property];
	},
	},
	});
	}

	function assertSVGResponsive(options) {
	pendingResponsiveTests.push({
	options,
	bindings: {
	prefixProperty(property) {
	return 'svg-' + property;
	},
	createTargetContainer(container) {
	var svgRoot = createElement('svg', container, 'svg-root', svgNamespace);
	svgRoot.setAttribute('width', 0);
	svgRoot.setAttribute('height', 0);
	return svgRoot;
	},
	createTarget(targetContainer) {
	console.assert(options.targetTag);
	return createElement(options.targetTag, targetContainer, 'target', svgNamespace);
	},
	setValue(target, property, value) {
	target.setAttribute(property, value);
	},
	getAnimatedValue(target, property) {
	return options.getter ? options.getter(target) : target[property].animVal;
	},
	},
	});
	}

	function createStateTransitions(configurations) {
	var stateTransitions = [];
	for (var i = 0; i < configurations.length; i++) {
	var beforeConfiguration = configurations[i];
	for (var j = 0; j < configurations.length; j++) {
	var afterConfiguration = configurations[j];
	if (j != i) {
	stateTransitions.push({
	before: beforeConfiguration,
	after: afterConfiguration,
	});
	}
	}
	}
	return stateTransitions;
	}

	function createElement(tag, container, className, namespace) {
	var element = document.createElementNS(namespace \|\| htmlNamespace, tag);
	if (container) {
	container.appendChild(element);
	}
	if (className) {
	element.classList.add(className);
	}
	return element;
	}

	function createTargets(bindings, n, container) {
	var targets = [];
	for (var i = 0; i < n; i++) {
	targets.push(bindings.createTarget(container));
	}
	return targets;
	}

	function setState(bindings, targets, property, state) {
	for (var item in state) {
	switch (item) {
	case 'inherited':
	var parent = targets[0].parentElement;
	console.assert(targets.every(target => target.parentElement === parent));
	bindings.setValue(parent, property, state.inherited);
	break;
	case 'underlying':
	for (var target of targets) {
	bindings.setValue(target, property, state.underlying);
	}
	break;
	default:
	for (var target of targets) {
	bindings.setValue(target, item, state[item]);
	}
	break;
	}
	}
	}

	function isNeutralKeyframe(keyframe) {
	return keyframe === neutralKeyframe;
	}

	function keyframeText(keyframe) {
	return isNeutralKeyframe(keyframe) ? 'neutral' : `[${keyframe}]`;
	}

	function toCamelCase(property) {
	for (var i = property.length - 2; i > 0; --i) {
	if (property[i] === '-') {
	property = property.substring(0, i) + property[i + 1].toUpperCase() + property.substring(i + 2);
	}
	}
	return property;
	}

	function createKeyframes(prefixedProperty, from, to) {
	var keyframes = [];
	if (!isNeutralKeyframe(from)) {
	keyframes.push({
	offset: 0,
	[prefixedProperty]: from,
	});
	}
	if (!isNeutralKeyframe(to)) {
	keyframes.push({
	offset: 1,
	[prefixedProperty]: to,
	});
	}
	return keyframes;
	}

	function createPausedAnimations(targets, keyframes, fractions) {
	console.assert(targets.length == fractions.length);
	return targets.map((target, i) => {
	var fraction = fractions[i];
	console.assert(fraction >= 0 && fraction < 1);
	var animation = target.animate(keyframes, 1);
	animation.pause();
	animation.currentTime = fraction;
	return animation;
	});
	}

	function runPendingResponsiveTests() {
	return new Promise(resolve => {
	var stateTransitionTests = [];
	pendingResponsiveTests.forEach(responsiveTest => {
	var options = responsiveTest.options;
	var bindings = responsiveTest.bindings;
	var property = options.property;
	var prefixedProperty = bindings.prefixProperty(property);
	assert_true('from' in options);
	assert_true('to' in options);
	var from = options.from;
	var to = options.to;
	var keyframes = createKeyframes(prefixedProperty, from, to);

	var stateTransitions = createStateTransitions(options.configurations);
	stateTransitions.forEach(stateTransition => {
	var before = stateTransition.before;
	var after = stateTransition.after;
	var container = bindings.createTargetContainer(document.body);
	var targets = createTargets(bindings, after.expect.length, container);
	var expectationTargets = createTargets(bindings, after.expect.length, container);

	setState(bindings, targets, property, before.state);
	var animations = createPausedAnimations(targets, keyframes, after.expect.map(expectation => expectation.at));
	stateTransitionTests.push({
	applyStateTransition() {
	setState(bindings, targets, property, after.state);
	},
	assert() {
	for (var i = 0; i < targets.length; i++) {
	var target = targets[i];
	var expectation = after.expect[i];
	var expectationTarget = expectationTargets[i];
	bindings.setValue(expectationTarget, property, expectation.is);
	var actual = bindings.getAnimatedValue(target, property);
	test(() => {
	assert_equals(actual, bindings.getAnimatedValue(expectationTarget, property));
	}, `Animation on property <${prefixedProperty}> from ${keyframeText(from)} to ${keyframeText(to)} with ${JSON.stringify(before.state)} changed to ${JSON.stringify(after.state)} at (${expectation.at}) is [${expectation.is}]`);
	}
	},
	});
	});
	});

	requestAnimationFrame(() => {
	for (var stateTransitionTest of stateTransitionTests) {
	stateTransitionTest.applyStateTransition();
	}

	requestAnimationFrame(() => {
	for (var stateTransitionTest of stateTransitionTests) {
	stateTransitionTest.assert();
	}
	resolve();
	});
	});
	});
	}

	function loadScript(url) {
	return new Promise(resolve => {
	var script = document.createElement('script');
	script.src = url;
	script.onload = resolve;
	document.head.appendChild(script);
	});
	}

	loadScript('../../resources/testharness.js').then(() => {
	return loadScript('../../resources/testharnessreport.js');
	}).then(() => {
	var asyncHandle = async_test('This test uses responsive-test.js.')
	runPendingResponsiveTests().then(() => {
	asyncHandle.done();
	});
	});


	window.assertCSSResponsive = assertCSSResponsive;
	window.assertSVGResponsive = assertSVGResponsive;
	window.neutralKeyframe = neutralKeyframe;

	})();