| <!DOCTYPE html> | |
| <title>A 'background-clip: text' background layer should blend with the underlying layer</title> | |
| <script src="../../resources/ahem.js"></script> | |
| <style> | |
| #target { | |
| font: 100px/1 Ahem; | |
| background-image: linear-gradient(#f00, #f00), linear-gradient(#ff0, #ff0); | |
| background-color: red; | |
| background-blend-mode: difference, normal; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| <div id="target">X</div> |