third_party/WebKit/LayoutTests/animations/custom-properties/length-percentage-type-mismatch-no-interpolation.html - Issue 2701533005: Support animating <percentage> and <length-percentage> custom properties

Side by Side Diff: third_party/WebKit/LayoutTests/animations/custom-properties/length-percentage-type-mismatch-no-interpolation.html

Issue 2701533005: Support animating <percentage> and <length-percentage> custom properties (Closed)

Patch Set: Review changes Created 3 years, 10 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/animations/custom-properties/length-percentage-type-interpolation-expected.txt ('k') | third_party/WebKit/LayoutTests/animations/custom-properties/length-percentage-type-mismatch-no-interpolation-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <meta charset="UTF-8">

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

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

	5 <div id="target"></div>

	6 <script>

	7 // The console warnings about "Invalid keyframe value" are expected for this tes t.
	suzyh_UTC10 (ex-contributor) 2017/02/20 00:22:01 Heads-up that this would be affected by https://gr Heads-up that this would be affected by https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/3Ob2lq14KEs (ignoring console warnings) if it comes to pass. alancutter (OOO until 2018) 2017/02/20 00:27:09 Saw that one, looks like it's only for WPT. Show quoted text On 2017/02/20 at 00:22:01, suzyh wrote: > Heads-up that this would be affected by https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/3Ob2lq14KEs (ignoring console warnings) if it comes to pass. Saw that one, looks like it's only for WPT.
	8

	9 setup(() => {

	10 CSS.registerProperty({

	11 name: '--length',

	12 syntax: '<length>',

	13 initialValue: '40px',

	14 });

	15

	16 CSS.registerProperty({

	17 name: '--percentage',

	18 syntax: '<percentage>',

	19 initialValue: '40%',

	20 });

	21 });

	22

	23 test(() => {

	24 var animation = target.animate({'--length': ['10%', '100px']}, 1);

	25 animation.currentTime = 0;

	26 assert_equals(getComputedStyle(target).getPropertyValue('--length'), '40px',

	27 'percentage fails to parse and is treated as neutral value');

	28 animation.currentTime = 0.5;

	29 assert_equals(getComputedStyle(target).getPropertyValue('--length'), '70px',

	30 '--length is being animated');

	31 animation.cancel();

	32 }, "<length> properties don't accept percentages in animation keyframes");

	33

	34 test(() => {

	35 var animation = target.animate({'--percentage': ['10px', '100%']}, 1);

	36 animation.currentTime = 0;

	37 assert_equals(getComputedStyle(target).getPropertyValue('--percentage'), '40%' ,

	38 'percentage is treated as neutral value');
	suzyh_UTC10 (ex-contributor) 2017/02/20 00:22:01 Copy-paste error from (previous version of) test a Copy-paste error from (previous version of) test above? Remember to also elaborate this comment as for the previous test.
	39 animation.currentTime = 0.5;

	40 assert_equals(getComputedStyle(target).getPropertyValue('--percentage'), '70%' ,

	41 '--length is being animated');
	suzyh_UTC10 (ex-contributor) 2017/02/20 00:22:01 Copy-paste error from test above? Copy-paste error from test above? alancutter (OOO until 2018) 2017/02/20 00:27:09 Copy paste errors are source of all that is bad. Show quoted text On 2017/02/20 at 00:22:01, suzyh wrote: > Copy-paste error from test above? Copy paste errors are source of all that is bad.
	42 animation.cancel();

	43 }, "<percentage> properties don't accept lengths in animation keyframes");

	44 </script>

	45 </body>

OLD	NEW