| Index: tools/perf/page_sets/tough_animation_cases/mix_blend_mode_animation_screen.html
|
| diff --git a/tools/perf/page_sets/tough_animation_cases/mix_blend_mode_animation_screen.html b/tools/perf/page_sets/tough_animation_cases/mix_blend_mode_animation_screen.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..8c61992b87c1f2bd71a69eeb31b73537cf20b994
|
| --- /dev/null
|
| +++ b/tools/perf/page_sets/tough_animation_cases/mix_blend_mode_animation_screen.html
|
| @@ -0,0 +1,45 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| + <title>Benchmark - CSS Blending and CSS Animation</title>
|
| + <style>
|
| + #backdrop {
|
| + float: left;
|
| + width: 400px;
|
| + height: 400px;
|
| + isolation: isolate;
|
| + background-image: linear-gradient(to bottom,
|
| + rgba(255, 255, 0, 0.9),
|
| + rgba(255, 0, 0, 0.9),
|
| + rgba(0, 255, 0, 0.9),
|
| + rgba(0, 0, 255, 0.9),
|
| + rgba(0, 0, 0, 0.9));
|
| + position: absolute;
|
| + top: 50px;
|
| + left: 100px;
|
| + }
|
| + #backdrop div {
|
| + width: 5%;
|
| + height: 5%;
|
| + background-color: rgba(200, 100, 100, 0.7);
|
| + float: left;
|
| + will-change: transform;
|
| + mix-blend-mode: screen;
|
| + animation: rotate 3s infinite linear;
|
| + }
|
| + @keyframes rotate {
|
| + to {transform: rotateZ(360deg);}
|
| + }
|
| + </style>
|
| + <script>
|
| + window.onload = function() {
|
| + for (var i = 0; i < 400; i++) {
|
| + backdrop.appendChild(document.createElement("div"));
|
| + }
|
| + };
|
| + </script>
|
| +</head>
|
| +<body>
|
| + <div id="backdrop"></div>
|
| +</body>
|
| +</html>
|
|
|