| Index: tools/perf/page_sets/tough_animation_cases/mix_blend_mode_propagating_isolation.html
|
| diff --git a/tools/perf/page_sets/tough_animation_cases/mix_blend_mode_propagating_isolation.html b/tools/perf/page_sets/tough_animation_cases/mix_blend_mode_propagating_isolation.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..4dd23fc98fe42c3e1d1a2d9dc8893d1ef74d271e
|
| --- /dev/null
|
| +++ b/tools/perf/page_sets/tough_animation_cases/mix_blend_mode_propagating_isolation.html
|
| @@ -0,0 +1,51 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| + <title>Painting deep tree with CSS Blending</title>
|
| + <!-- https://codereview.chromium.org/478333002/ -->
|
| + <style>
|
| + .box {
|
| + width: 100px;
|
| + height: 100px;
|
| + position: relative;
|
| + z-index: 1;
|
| + top: 10px;
|
| + background-color: green;
|
| + border: 1px black solid;
|
| + }
|
| + .blending {
|
| + mix-blend-mode: difference;
|
| + }
|
| + .container {
|
| + position: absolute;
|
| + left: 0px;
|
| + z-index: 0;
|
| + }
|
| + </style>
|
| + <script>
|
| + window.onload = function() {
|
| + var container = document.createElement('div');
|
| + container.classList.add('container');
|
| + var lastElement = container;
|
| + for (var i = 0; i < 100; i++) {
|
| + var box = document.createElement('div');
|
| + box.classList.add('box');
|
| + lastElement.appendChild(box);
|
| + lastElement = box;
|
| + }
|
| + // The leaf element has blending.
|
| + lastElement.classList.add('blending');
|
| + document.body.appendChild(container);
|
| + // Force repaint.
|
| + var left = 0;
|
| + (function frame() {
|
| + container.style.left = left + 'px';
|
| + left = (left + 1) % 2;
|
| + requestAnimationFrame(frame);
|
| + })();
|
| + };
|
| + </script>
|
| +</head>
|
| +<body>
|
| +</body>
|
| +</html>
|
|
|