LayoutTests/imported/w3c/web-platform-tests/css-timing-1/cubic-bezier-timing-functions-output.html - WebKit - Git at Google

 <!DOCTYPE html>
 <meta charset=utf-8>
 <meta name="assert"
 content="This test checks the output of Cubic Bézier functions" />
 <title>Tests for the output of Cubic Bézier timing functions</title>
 <link rel="help"
 href="https://drafts.csswg.org/css-timing/#cubic-bezier-timing-functions">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';

 function assert_style_left_at(animation, time, easingFunction) {
   animation.currentTime = time;
   var portion = time / animation.effect.timing.duration;
   assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
                        easingFunction(portion) * 100,
                        0.01,
                        'The left of the animation should be approximately ' +
                        easingFunction(portion) * 100 + ' at ' + time + 'ms');
 }

 test(function(t) {
   var target = createDiv(t);
   target.style.position = 'absolute';
   var anim = target.animate(
     // http://cubic-bezier.com/#.5,1,.5,0
     [ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
       { left: '100px' } ],
       { duration: 1000,
         fill: 'forwards',
         easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
   var keyframeEasing = function(x) {
     assert_greater_than_equal(x, 0.0,
       'This function should be called in [0, 1.0] range');
     assert_less_than_equal(x, 1.0,
       'This function should be called in [0, 1.0] range');
     return cubicBezier(0.5, 1, 0.5, 0)(x);
   }
   var keyframeEasingExtrapolated = function(x) {
     assert_greater_than(x, 1.0,
       'This function should be called in (1.0, infinity) range');
     // p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x)
     return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0);
   }
   var effectEasing = function(x) {
     return cubicBezier(0, 1.5, 1, 1.5)(x);
   }

   // The effect-easing produces values greater than 1 in (0.23368794, 1)
   assert_style_left_at(anim, 0, function(x) {
     return keyframeEasing(effectEasing(x));
   });
   assert_style_left_at(anim, 230, function(x) {
     return keyframeEasing(effectEasing(x));
   });
   assert_style_left_at(anim, 240, function(x) {
     return keyframeEasingExtrapolated(effectEasing(x));
   });
   // Near the extreme point of the effect-easing function
   assert_style_left_at(anim, 700, function(x) {
     return keyframeEasingExtrapolated(effectEasing(x));
   });
   assert_style_left_at(anim, 990, function(x) {
     return keyframeEasingExtrapolated(effectEasing(x));
   });
   assert_style_left_at(anim, 1000, function(x) {
     return keyframeEasing(effectEasing(x));
   });
 }, 'cubic-bezier easing with input progress greater than 1');

 test(function(t) {
   var target = createDiv(t);
   target.style.position = 'absolute';
   var anim = target.animate(
     // http://cubic-bezier.com/#0,1.5,1,1.5
     [ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' },
       { left: '100px' } ],
       { duration: 1000,
         fill: 'forwards',
         easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
   var easing = function(x) {
     assert_greater_than_equal(x, 0.0,
       'This function should be called in [0, 1.0] range');
     assert_less_than_equal(x, 1.0,
       'This function should be called in [0, 1.0] range');
     return cubicBezier(0, 1.5, 1, 1.5)(x);
   }
   var easingExtrapolated = function(x) {
     assert_greater_than(x, 1.0,
       'This function should be called in negative range');
     // For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the
     // endpoint (x = 1.0) is infinity so we should just return 1.0.
     return 1.0;
   }

   // The effect-easing produces values greater than 1 in (0.23368794, 1)
   assert_style_left_at(anim, 0, function(x) {
     return easing(easing(x))
   });
   assert_style_left_at(anim, 230, function(x) {
     return easing(easing(x))
   });
   assert_style_left_at(anim, 240, function(x) {
     return easingExtrapolated(easing(x));
   });
   // Near the extreme point of the effect-easing function
   assert_style_left_at(anim, 700, function(x) {
     return easingExtrapolated(easing(x));
   });
   assert_style_left_at(anim, 990, function(x) {
     return easingExtrapolated(easing(x));
   });
   assert_style_left_at(anim, 1000, function(x) {
     return easing(easing(x))
   });
 }, 'cubic-bezier easing with input progress greater than 1 and where the ' +
    'tangent on the upper boundary is infinity');

 test(function(t) {
   var target = createDiv(t);
   target.style.position = 'absolute';
   var anim = target.animate(
     // http://cubic-bezier.com/#.5,1,.5,0
     [ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
       { left: '100px' } ],
       { duration: 1000,
         fill: 'forwards',
         easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
   var keyframeEasing = function(x) {
     assert_greater_than_equal(x, 0.0,
       'This function should be called in [0, 1.0] range');
     assert_less_than_equal(x, 1.0,
       'This function should be called in [0, 1.0] range');
     return cubicBezier(0.5, 1, 0.5, 0)(x);
   }
   var keyframeEasingExtrapolated = function(x) {
     assert_less_than(x, 0.0,
       'This function should be called in negative range');
     // p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x)
     return (1 / 0.5) * x;
   }
   var effectEasing = function(x) {
     return cubicBezier(0, -0.5, 1, -0.5)(x);
   }

   // The effect-easing produces negative values in (0, 0.766312060)
   assert_style_left_at(anim, 0, function(x) {
     return keyframeEasing(effectEasing(x));
   });
   assert_style_left_at(anim, 10, function(x) {
     return keyframeEasingExtrapolated(effectEasing(x));
   });
   // Near the extreme point of the effect-easing function
   assert_style_left_at(anim, 300, function(x) {
     return keyframeEasingExtrapolated(effectEasing(x));
   });
   assert_style_left_at(anim, 750, function(x) {
     return keyframeEasingExtrapolated(effectEasing(x));
   });
   assert_style_left_at(anim, 770, function(x) {
     return keyframeEasing(effectEasing(x));
   });
   assert_style_left_at(anim, 1000, function(x) {
     return keyframeEasing(effectEasing(x));
   });
 }, 'cubic-bezier easing with input progress less than 0');

 test(function(t) {
   var target = createDiv(t);
   target.style.position = 'absolute';
   var anim = target.animate(
     // http://cubic-bezier.com/#0,-0.5,1,-0.5
     [ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' },
       { left: '100px' } ],
       { duration: 1000,
         fill: 'forwards',
         easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
   var easing = function(x) {
     assert_greater_than_equal(x, 0.0,
       'This function should be called in [0, 1.0] range');
     assert_less_than_equal(x, 1.0,
       'This function should be called in [0, 1.0] range');
     return cubicBezier(0, -0.5, 1, -0.5)(x);
   }
   var easingExtrapolated = function(x) {
     assert_less_than(x, 0.0,
       'This function should be called in negative range');
     // For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the
     // endpoint (x = 0.0) is infinity so we should just return 0.0.
     return 0.0;
   }

   // The effect-easing produces negative values in (0, 0.766312060)
   assert_style_left_at(anim, 0, function(x) {
     return easing(easing(x))
   });
   assert_style_left_at(anim, 10, function(x) {
     return easingExtrapolated(easing(x));
   });
   // Near the extreme point of the effect-easing function
   assert_style_left_at(anim, 300, function(x) {
     return easingExtrapolated(easing(x));
   });
   assert_style_left_at(anim, 750, function(x) {
     return easingExtrapolated(easing(x));
   });
   assert_style_left_at(anim, 770, function(x) {
     return easing(easing(x))
   });
   assert_style_left_at(anim, 1000, function(x) {
     return easing(easing(x))
   });
 }, 'cubic-bezier easing with input progress less than 0 and where the ' +
    'tangent on the lower boundary is infinity');

 </script>
 </body>
	<!DOCTYPE html>
	<meta charset=utf-8>
	<meta name="assert"
	content="This test checks the output of Cubic Bézier functions" />
	<title>Tests for the output of Cubic Bézier timing functions</title>
	<link rel="help"
	href="https://drafts.csswg.org/css-timing/#cubic-bezier-timing-functions">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="testcommon.js"></script>
	<body>
	<div id="log"></div>
	<script>
	'use strict';

	function assert_style_left_at(animation, time, easingFunction) {
	animation.currentTime = time;
	var portion = time / animation.effect.timing.duration;
	assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
	easingFunction(portion) * 100,
	0.01,
	'The left of the animation should be approximately ' +
	easingFunction(portion) * 100 + ' at ' + time + 'ms');
	}

	test(function(t) {
	var target = createDiv(t);
	target.style.position = 'absolute';
	var anim = target.animate(
	// http://cubic-bezier.com/#.5,1,.5,0
	[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
	{ left: '100px' } ],
	{ duration: 1000,
	fill: 'forwards',
	easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
	var keyframeEasing = function(x) {
	assert_greater_than_equal(x, 0.0,
	'This function should be called in [0, 1.0] range');
	assert_less_than_equal(x, 1.0,
	'This function should be called in [0, 1.0] range');
	return cubicBezier(0.5, 1, 0.5, 0)(x);
	}
	var keyframeEasingExtrapolated = function(x) {
	assert_greater_than(x, 1.0,
	'This function should be called in (1.0, infinity) range');
	// p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x)
	return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0);
	}
	var effectEasing = function(x) {
	return cubicBezier(0, 1.5, 1, 1.5)(x);
	}

	// The effect-easing produces values greater than 1 in (0.23368794, 1)
	assert_style_left_at(anim, 0, function(x) {
	return keyframeEasing(effectEasing(x));
	});
	assert_style_left_at(anim, 230, function(x) {
	return keyframeEasing(effectEasing(x));
	});
	assert_style_left_at(anim, 240, function(x) {
	return keyframeEasingExtrapolated(effectEasing(x));
	});
	// Near the extreme point of the effect-easing function
	assert_style_left_at(anim, 700, function(x) {
	return keyframeEasingExtrapolated(effectEasing(x));
	});
	assert_style_left_at(anim, 990, function(x) {
	return keyframeEasingExtrapolated(effectEasing(x));
	});
	assert_style_left_at(anim, 1000, function(x) {
	return keyframeEasing(effectEasing(x));
	});
	}, 'cubic-bezier easing with input progress greater than 1');

	test(function(t) {
	var target = createDiv(t);
	target.style.position = 'absolute';
	var anim = target.animate(
	// http://cubic-bezier.com/#0,1.5,1,1.5
	[ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' },
	{ left: '100px' } ],
	{ duration: 1000,
	fill: 'forwards',
	easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
	var easing = function(x) {
	assert_greater_than_equal(x, 0.0,
	'This function should be called in [0, 1.0] range');
	assert_less_than_equal(x, 1.0,
	'This function should be called in [0, 1.0] range');
	return cubicBezier(0, 1.5, 1, 1.5)(x);
	}
	var easingExtrapolated = function(x) {
	assert_greater_than(x, 1.0,
	'This function should be called in negative range');
	// For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the
	// endpoint (x = 1.0) is infinity so we should just return 1.0.
	return 1.0;
	}

	// The effect-easing produces values greater than 1 in (0.23368794, 1)
	assert_style_left_at(anim, 0, function(x) {
	return easing(easing(x))
	});
	assert_style_left_at(anim, 230, function(x) {
	return easing(easing(x))
	});
	assert_style_left_at(anim, 240, function(x) {
	return easingExtrapolated(easing(x));
	});
	// Near the extreme point of the effect-easing function
	assert_style_left_at(anim, 700, function(x) {
	return easingExtrapolated(easing(x));
	});
	assert_style_left_at(anim, 990, function(x) {
	return easingExtrapolated(easing(x));
	});
	assert_style_left_at(anim, 1000, function(x) {
	return easing(easing(x))
	});
	}, 'cubic-bezier easing with input progress greater than 1 and where the ' +
	'tangent on the upper boundary is infinity');

	test(function(t) {
	var target = createDiv(t);
	target.style.position = 'absolute';
	var anim = target.animate(
	// http://cubic-bezier.com/#.5,1,.5,0
	[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
	{ left: '100px' } ],
	{ duration: 1000,
	fill: 'forwards',
	easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
	var keyframeEasing = function(x) {
	assert_greater_than_equal(x, 0.0,
	'This function should be called in [0, 1.0] range');
	assert_less_than_equal(x, 1.0,
	'This function should be called in [0, 1.0] range');
	return cubicBezier(0.5, 1, 0.5, 0)(x);
	}
	var keyframeEasingExtrapolated = function(x) {
	assert_less_than(x, 0.0,
	'This function should be called in negative range');
	// p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x)
	return (1 / 0.5) * x;
	}
	var effectEasing = function(x) {
	return cubicBezier(0, -0.5, 1, -0.5)(x);
	}

	// The effect-easing produces negative values in (0, 0.766312060)
	assert_style_left_at(anim, 0, function(x) {
	return keyframeEasing(effectEasing(x));
	});
	assert_style_left_at(anim, 10, function(x) {
	return keyframeEasingExtrapolated(effectEasing(x));
	});
	// Near the extreme point of the effect-easing function
	assert_style_left_at(anim, 300, function(x) {
	return keyframeEasingExtrapolated(effectEasing(x));
	});
	assert_style_left_at(anim, 750, function(x) {
	return keyframeEasingExtrapolated(effectEasing(x));
	});
	assert_style_left_at(anim, 770, function(x) {
	return keyframeEasing(effectEasing(x));
	});
	assert_style_left_at(anim, 1000, function(x) {
	return keyframeEasing(effectEasing(x));
	});
	}, 'cubic-bezier easing with input progress less than 0');

	test(function(t) {
	var target = createDiv(t);
	target.style.position = 'absolute';
	var anim = target.animate(
	// http://cubic-bezier.com/#0,-0.5,1,-0.5
	[ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' },
	{ left: '100px' } ],
	{ duration: 1000,
	fill: 'forwards',
	easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
	var easing = function(x) {
	assert_greater_than_equal(x, 0.0,
	'This function should be called in [0, 1.0] range');
	assert_less_than_equal(x, 1.0,
	'This function should be called in [0, 1.0] range');
	return cubicBezier(0, -0.5, 1, -0.5)(x);
	}
	var easingExtrapolated = function(x) {
	assert_less_than(x, 0.0,
	'This function should be called in negative range');
	// For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the
	// endpoint (x = 0.0) is infinity so we should just return 0.0.
	return 0.0;
	}

	// The effect-easing produces negative values in (0, 0.766312060)
	assert_style_left_at(anim, 0, function(x) {
	return easing(easing(x))
	});
	assert_style_left_at(anim, 10, function(x) {
	return easingExtrapolated(easing(x));
	});
	// Near the extreme point of the effect-easing function
	assert_style_left_at(anim, 300, function(x) {
	return easingExtrapolated(easing(x));
	});
	assert_style_left_at(anim, 750, function(x) {
	return easingExtrapolated(easing(x));
	});
	assert_style_left_at(anim, 770, function(x) {
	return easing(easing(x))
	});
	assert_style_left_at(anim, 1000, function(x) {
	return easing(easing(x))
	});
	}, 'cubic-bezier easing with input progress less than 0 and where the ' +
	'tangent on the lower boundary is infinity');

	</script>
	</body>