PerformanceTests/Animation/mix-blend-mode-propagating-isolation.html - Issue 643693006: Add performance tests for accelerated elements with CSS Blending.

Side by Side Diff: PerformanceTests/Animation/mix-blend-mode-propagating-isolation.html

Issue 643693006: Add performance tests for accelerated elements with CSS Blending. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 6 years, 1 month 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

« no previous file with comments | « PerformanceTests/Animation/mix-blend-mode-animation-screen.html ('k') | PerformanceTests/Blending/mix-blend-mode-propagating-isolation.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 <html>	2 <html>

3 <head>	3 <head>

	4 <title>Painting deep tree with CSS Blending</title>

	5 <!-- https://codereview.chromium.org/478333002/ -->

4 <style>	6 <style>

5 .box {	7 .box {

6 width: 100px;	8 width: 100px;

7 height: 100px;	9 height: 100px;

8 position: relative;	10 position: relative;

9 z-index: 1;	11 z-index: 1;

10 top: 10px;	12 top: 10px;

11 background-color: red;	13 background-color: red;

12 border: 1px black solid;	14 border: 1px black solid;

13 }	15 }

14 .blending {	16 .blending {

15 mix-blend-mode: difference;	17 mix-blend-mode: difference;

16 }	18 }

17 #container {	19 #container {

18 position: absolute;	20 position: absolute;

19 left: 0px;	21 left: 0px;

20 z-index: 0;	22 z-index: 0;

21 }	23 }

22 </style>	24 </style>

23 <script src="../resources/runner.js"></script>	25 <script src="../resources/runner.js"></script>

24 <script src="resources/framerate.js"></script>	26 <script src="resources/framerate.js"></script>

25 <script>	27 <script>

	28 var intervalId = 0;

26 window.onload = function () {	29 window.onload = function () {

27 PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'f ps'});	30 PerfTestRunner.prepareToMeasureValuesAsync({

	31 description: "Measure performance of software-animating a deep DOM subtr ee having one blending leaf.",

	32 done: onCompletedRun,

	33 unit: 'fps'

	34 });

28	35

29 // The leaf element has blending	36 // The leaf element has blending

30 var lastElement = document.createElement("div");	37 var lastElement = document.createElement("div");

31 lastElement.setAttribute("class", "blending box");	38 lastElement.setAttribute("class", "blending box");

32	39

33 for (var i = 0; i < 100; i++) {	40 for (var i = 0; i < 100; i++) {

34 var el = document.createElement("div");	41 var el = document.createElement("div");

35 el.setAttribute("class", "box");	42 el.setAttribute("class", "box");

36 el.appendChild(lastElement);	43 el.appendChild(lastElement);

37 lastElement = el;	44 lastElement = el;

38 }	45 }

39 var container = document.getElementById("container");	46 var container = document.getElementById("container");

40 container.appendChild(lastElement);	47 container.appendChild(lastElement);

41 startTrackingFrameRate({run: softwareAnimationStep});	48

	49 intervalId = window.setInterval(function () {

	50 var leftVal = parseInt(container.style.left) \|\| 0;

	51 container.style.left = (leftVal + 1) + "px";

	52 }, 16);

	53

	54 startTrackingFrameRate();

42 }	55 }

43	56

44 function onCompletedRun() {	57 function onCompletedRun() {

	58 clearInterval(intervalId);

45 stopTrackingFrameRate();	59 stopTrackingFrameRate();

46 }	60 }

47 function softwareAnimationStep() {

48 var leftVal = parseInt(container.style.left) \|\| 0;

49 container.style.left = (leftVal + 1) + "px";

50 }

51 </script>	61 </script>

52 </head>	62 </head>

53 <body>	63 <body>

54 <pre id="log"> </pre>	64 <pre id="log"> </pre>

55 <div id="container"> </div>	65 <div id="container"> </div>

56 </body>	66 </body>

57 </html>	67 </html>

OLD	NEW