| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <style> |
| div { |
| width: 160px; |
| height: 160px; |
| transform: rotateY(30deg) rotateX(-30deg); |
| background-blend-mode: difference; |
| color: black; |
| } |
| |
| .a { |
| background: url('resources/white_square.svg') no-repeat, rgba(55, 55, 99, 1); |
| } |
| |
| .b, .c { |
| width: 120px; |
| height: 120px; |
| } |
| |
| .b { |
| background: url('resources/white_square.svg') no-repeat, rgba(200, 200, 156, 1); |
| color: yellow; |
| } |
| |
| .c { |
| background: url('resources/white_square.svg') no-repeat, rgba(100, 100, 56, 1); |
| color: white; |
| margin-top: -90px; |
| } |
| |
| </style> |
| </head> |
| <!-- Test to validate that background blending is working properly for series of hardware accelerated elements. --> |
| <body> |
| <!-- Simple test: parent and child, both accelerated, both having background-blend-mode set and some text. The child shouldn't blend with the parent's content. The text should keep its color. --> |
| <div class="a">sample<div class="b">sample</div></div> |
| |
| <!-- Parent and two children, all accelerated, all having background-blend-mode set and some text. None of the elements should blend with any of the others. The text should keep its color. --> |
| <div class="a">sample<div class="b">sample</div>sample<div class="c">sample</div></div> |
| |
| <!-- Parent and two children, all accelerated, all having background-blend-mode set and some text. The second child has z-index set, causing it to be painted below the first child. None of the elements should blend with any of the others. The text should keep its color. --> |
| <div class="a">sample |
| <div class="b">sample</div> |
| <div class="c" style="position:absolute; z-index: -1">sample sample sample sample sample sample sample sample sample sample sample sample</div> |
| </div> |
| </body> |
