LayoutTests/web-animations-api/animations-responsive-assorted-lengths.html - Issue 273683005: Web Animations API: Deferred computation of interpolated values

Side by Side Diff: LayoutTests/web-animations-api/animations-responsive-assorted-lengths.html

Issue 273683005: Web Animations API: Deferred computation of interpolated values (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Add missing test file Created 6 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <script src="../resources/testharness.js"></script>

	3 <script src="../resources/testharnessreport.js"></script>

	4

	5 <div id='container'>

	6 <div id='element'></div>

	7 </div>

	8

	9 <script>

	10 var element = document.getElementById('element');

	11 var container = document.getElementById('container');

	12

	13 test(function() {

	14 element.style.fontSize = '10px';

	15 var player = element.animate([{bottom: '3em', offset: 0}, {bottom: '5em', of fset: 1}], 10);

	16 player.pause();

	17 player.currentTime = 5;

	18 element.style.fontSize = '20px';

	19 assert_equals(getComputedStyle(element).bottom, '80px');

	20 }, 'bottom responsive to style changes');

	21

	22 test(function() {

	23 element.style.fontSize = '10px';

	24 var player = element.animate([{height: '3em', offset: 0}, {height: '5em', of fset: 1}], 10);

	25 player.pause();

	26 player.currentTime = 5;

	27 element.style.fontSize = '20px';

	28 assert_equals(getComputedStyle(element).height, '80px');

	29 }, 'height responsive to style changes');

	30

	31 test(function() {

	32 element.style.fontSize = '10px';

	33 var player = element.animate([{letterSpacing: '3em', offset: 0}, {letterSpac ing: '5em', offset: 1}], 10);

	34 player.pause();

	35 player.currentTime = 5;

	36 element.style.fontSize = '20px';

	37 assert_equals(getComputedStyle(element).letterSpacing, '80px');

	38 }, 'letterSpacing responsive to style changes');

	39

	40 test(function() {

	41 var player = element.animate([{letterSpacing: 'normal', offset: 0}, {letterS pacing: 'normal', offset: 1}], 10);

	42 player.pause();

	43 player.currentTime = 5;

	44 assert_equals(getComputedStyle(element).letterSpacing, 'normal');

	45 }, 'letterSpacing can be normal');

	46

	47 test(function() {

	48 element.style.fontSize = '10px';

	49 var player = element.animate([{marginRight: '3em', offset: 0}, {marginRight: '5em', offset: 1}], 10);

	50 player.pause();

	51 player.currentTime = 5;

	52 element.style.fontSize = '20px';

	53 assert_equals(getComputedStyle(element).marginRight, '80px');

	54 }, 'marginRight responsive to style changes');

	55

	56 test(function() {

	57 element.style.fontSize = '10px';

	58 container.style.width = '300px';

	59 var player = element.animate([{marginRight: '3em', offset: 0}, {marginRight: '50%', offset: 1}], 10);

	60 player.pause();

	61 player.currentTime = 5;

	62 element.style.fontSize = '20px';

	63 container.style.width = '600px';

	64 assert_equals(getComputedStyle(element).marginRight, '180px');

	65 }, 'marginRight allows percentages');

	66

	67 test(function() {

	68 element.style.fontSize = '10px';

	69 var player = element.animate([{outlineOffset: '3em', offset: 0}, {outlineOff set: '5em', offset: 1}], 10);

	70 player.pause();

	71 player.currentTime = 5;

	72 element.style.outline = 'dashed thin';

	73 element.style.fontSize = '20px';

	74 assert_equals(getComputedStyle(element).outlineOffset, '80px');

	75 }, 'outlineOffset responsive to style changes');

	76

	77 test(function() {

	78 container.style.fontSize = '10px';

	79 var player = container.animate([{perspective: '3em', offset: 0}, {perspectiv e: '5em', offset: 1}], 10);

	80 player.pause();

	81 player.currentTime = 5;

	82 container.style.fontSize = '20px';

	83 assert_equals(getComputedStyle(container).perspective, '80px');

	84 }, 'perspective responsive to style changes');

	85

	86 test(function() {

	87 var player = element.animate([{perspective: 'none', offset: 0}, {perspective : 'none', offset: 1}], 10);

	88 player.pause();

	89 player.currentTime = 10;

	90 assert_equals(getComputedStyle(element).perspective, 'none');

	91 }, 'perspective can be none');

	92

	93 test(function() {

	94 element.style.fontSize = '10px';

	95 var player = element.animate([{wordSpacing: '3em', offset: 0}, {wordSpacing: '5em', offset: 1}], 10);

	96 player.pause();

	97 player.currentTime = 5;

	98 element.style.fontSize = '20px';

	99 assert_equals(getComputedStyle(element).wordSpacing, '80px');

	100 }, 'wordSpacing responsive to style changes');

	101

	102 </script>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/web-animations-api/animations-responsive-backgroundPosition.html » ('j') | no next file with comments »