| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Painting deep tree with CSS Blending</title> |
| 5 <!-- https://codereview.chromium.org/478333002/ --> |
| 6 <style> |
| 7 .box { |
| 8 width: 100px; |
| 9 height: 100px; |
| 10 position: relative; |
| 11 z-index: 1; |
| 12 top: 10px; |
| 13 background-color: red; |
| 14 border: 1px black solid; |
| 15 } |
| 16 .blending { |
| 17 mix-blend-mode: difference; |
| 18 } |
| 19 #container { |
| 20 position: absolute; |
| 21 left: 0px; |
| 22 z-index: 0; |
| 23 } |
| 24 </style> |
| 25 <script src="../resources/runner.js"></script> |
| 26 <script src="resources/framerate.js"></script> |
| 27 <script> |
| 28 var intervalId = 0; |
| 29 window.onload = function () { |
| 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 }); |
| 35 |
| 36 // The leaf element has blending |
| 37 var lastElement = document.createElement("div"); |
| 38 lastElement.setAttribute("class", "blending box"); |
| 39 |
| 40 for (var i = 0; i < 100; i++) { |
| 41 var el = document.createElement("div"); |
| 42 el.setAttribute("class", "box"); |
| 43 el.appendChild(lastElement); |
| 44 lastElement = el; |
| 45 } |
| 46 var container = document.getElementById("container"); |
| 47 container.appendChild(lastElement); |
| 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(); |
| 55 } |
| 56 |
| 57 function onCompletedRun() { |
| 58 clearInterval(intervalId); |
| 59 stopTrackingFrameRate(); |
| 60 } |
| 61 </script> |
| 62 </head> |
| 63 <body> |
| 64 <pre id="log"> </pre> |
| 65 <div id="container"> </div> |
| 66 </body> |
| 67 </html> |
| OLD | NEW |