tools/perf/page_sets/tough_animation_cases/css_animations_many_keyframes.html - Issue 2530253002: CSS Animations: Reduce usage of webkit prefix in perf tests

Side by Side Diff: tools/perf/page_sets/tough_animation_cases/css_animations_many_keyframes.html

Issue 2530253002: CSS Animations: Reduce usage of webkit prefix in perf tests (Closed)

Patch Set: keyframes Created 4 years 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 | « tools/perf/page_sets/tough_animation_cases/compositor_heavy_animation.html ('k') | tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_inserting_style_element.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <meta name="viewport" content="width=device-width, user-scalable=no">	2 <meta name="viewport" content="width=device-width, user-scalable=no">

3 <link rel="stylesheet" type="text/css" href="resources/tablet.css">	3 <link rel="stylesheet" type="text/css" href="resources/tablet.css">

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

5 <style>	5 <style>

6 target {	6 target {

7 position: absolute;	7 position: absolute;

8 width: 0px;	8 width: 0px;

9 height: 0px;	9 height: 0px;

10 border: 5px solid green;	10 border: 5px solid green;

11 border-radius: 100%;	11 border-radius: 100%;

12 }	12 }

13 </style>	13 </style>

14	14

15 <container id="container"></container>	15 <container id="container"></container>

16	16

17 <script>	17 <script>

18 var N = PerfTestHelper.getN(1000);	18 var N = PerfTestHelper.getN(1000);

19 var numKeyframes = 500;	19 var numKeyframes = 500;

20 var duration = 4000;	20 var duration = 4000;

21	21

22 function makeKeyframes(numKeyframes, width, height) {	22 function makeKeyframes(numKeyframes, width, height) {

23 var keyframes = '@-webkit-keyframes anim {\n'	23 var keyframes = '@keyframes anim {\n'

24 for (var i = 0; i < numKeyframes + 1; i++) {	24 for (var i = 0; i < numKeyframes + 1; i++) {

25 var fraction = i / numKeyframes;	25 var fraction = i / numKeyframes;

26 var t = fraction * 2 * Math.PI;	26 var t = fraction * 2 * Math.PI;

27 var x = Math.cos(t) - Math.pow(Math.cos(4 * t), 3);	27 var x = Math.cos(t) - Math.pow(Math.cos(4 * t), 3);

28 x = ((x / 4 + 1 / 2) * width).toFixed(5);	28 x = ((x / 4 + 1 / 2) * width).toFixed(5);

29 var y = Math.pow(Math.sin(4 * t), 3) - Math.sin(2 * t);	29 var y = Math.pow(Math.sin(4 * t), 3) - Math.sin(2 * t);

30 y = ((y / 4 + 1 / 2) * height).toFixed(5);	30 y = ((y / 4 + 1 / 2) * height).toFixed(5);

31 keyframes += (fraction * 100) + '% { transform: translate(' + x + 'px, ' + y + 'px); }\n';	31 keyframes += (fraction * 100) + '% { transform: translate(' + x + 'px, ' + y + 'px); }\n';

32 }	32 }

33 return keyframes;	33 return keyframes;

34 }	34 }

35	35

36 var style = document.createElement('style');	36 var style = document.createElement('style');

37 style.textContent = makeKeyframes(numKeyframes, 550, 800);	37 style.textContent = makeKeyframes(numKeyframes, 550, 800);

38	38

39 for (var i = 0; i < N; i++) {	39 for (var i = 0; i < N; i++) {

40 var target = document.createElement('target');	40 var target = document.createElement('target');

41 target.style.webkitAnimation = 'anim ' + duration + 'ms linear infinite ' + (- duration / 10 * i / N) + 'ms';	41 target.style.animation = 'anim ' + duration + 'ms linear infinite ' + (-durati on / 10 * i / N) + 'ms';

42 container.appendChild(target);	42 container.appendChild(target);

43 }	43 }

44	44

45 container.appendChild(style);	45 container.appendChild(style);

46	46

47 PerfTestHelper.signalReady();	47 PerfTestHelper.signalReady();

48 </script>	48 </script>

OLD	NEW