third_party/WebKit/PerformanceTests/Paint/transform-changes.html - Issue 2564773003: Increase load of blink_perf.paint to reduce flakiness

Side by Side Diff: third_party/WebKit/PerformanceTests/Paint/transform-changes.html

Issue 2564773003: Increase load of blink_perf.paint to reduce flakiness (Closed)

Patch Set: Fix a typo 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:

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

2 <body>	2 <body>

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

4 <style>	4 <style>

5 span {	5 span {

6 border: 1px solid blue;	6 border: 1px solid blue;

7 }	7 }

8 .changeTransform {	8 .changeTransform {

9 position: absolute;	9 position: absolute;

10 transform: rotate(0);	10 transform: rotate(0);

11 }	11 }

12 </style>	12 </style>

13 <script>	13 <script>

14 // This test measures the lifecycle update performance of changing transforms	14 // This test measures the lifecycle update performance of changing transforms

15 // in large trees.	15 // in large trees.

16	16

17 function buildTree(parent, depth, arity, createElementCallback) {	17 function buildTree(parent, depth, arity, tagNameCallback, createElementCallback) {

18 for (var child = 0; child < arity; child++) {	18 for (var child = 0; child < arity; child++) {

19 var element = document.createElement('span');	19 var element = document.createElement(tagNameCallback(depth));

20 parent.appendChild(element);	20 parent.appendChild(element);

21 createElementCallback(element, depth);	21 createElementCallback(element, depth);

22 if (depth > 1)	22 if (depth > 1)

23 buildTree(element, depth - 1, arity, createElementCallback);	23 buildTree(element, depth - 1, arity, tagNameCallback, createElementCallbac k);

24 }	24 }

25 }	25 }

26	26

27 // Build a tall tree (depth=10) that is skinny (arity=2). A middle layer of	27 // Build a tall tree that is skinny. A middle layer of

28 // the tree should have the changeTransform class.	28 // the tree should have the changeTransform class.

29 buildTree(document.body, 11, 2, function(element, depth) {	29 buildTree(document.body, 13, 2,

30 element.style.borderColor = 'red';	30 function(depth) {

31 if (depth == 5)	31 // Use divs at upper levels to avoid too much layout time.

32 element.setAttribute('class', 'changeTransform');	32 return depth > 11 ? 'div' : 'span';

33 });	33 },

	34 function(element, depth) {

	35 element.style.borderColor = 'red';

	36 if (depth == 5)

	37 element.setAttribute('class', 'changeTransform');

	38 }

	39 );

34	40

35 // Build a short tree (depth=6) that is fat (arity=4). A middle layer of	41 // Build a short tree that is fat. A middle layer of

36 // the tree should have the changeTransform class.	42 // the tree should have the changeTransform class.

37 buildTree(document.body, 6, 4, function(element, depth) {	43 buildTree(document.body, 6, 6,

38 element.style.borderColor = 'orange';	44 function(depth) {

39 if (depth == 3)	45 // Use divs at upper levels to avoid too much layout time.

40 element.setAttribute('class', 'changeTransform');	46 return depth > 5 ? 'div' : 'span';

41 });	47 },

	48 function(element, depth) {

	49 element.style.borderColor = 'orange';

	50 if (depth == 3)

	51 element.setAttribute('class', 'changeTransform');

	52 }

	53 );

42	54

43 var runCount = 0;	55 var runCount = 0;

44 var elementsToChange = document.getElementsByClassName('changeTransform');	56 var elementsToChange = document.getElementsByClassName('changeTransform');

45 PerfTestRunner.measureFrameTime({	57 PerfTestRunner.measureFrameTime({

46 run: function() {	58 run: function() {

47 runCount += 10;	59 runCount += 10;

48 for (var index = 0; index < elementsToChange.length; index++)	60 for (var index = 0; index < elementsToChange.length; index++)

49 elementsToChange[index].style.transform = 'rotate(' + runCount + 'deg)';	61 elementsToChange[index].style.transform = 'rotate(' + runCount + 'deg)';

50 },	62 },

51 warmUpCount: 5,	63 warmUpCount: 5,

52 });	64 });

53 </script>	65 </script>

54 </body>	66 </body>

OLD	NEW

« no previous file with comments | « third_party/WebKit/PerformanceTests/Paint/paint-offset-changes.html ('k') | no next file » | no next file with comments »