| <!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> |
