OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 div { | 5 div { |
6 width: 200px; | 6 width: 200px; |
7 height: 200px; | 7 height: 200px; |
8 -webkit-transform: rotateY(30deg) rotateX(-30deg); | 8 transform: rotateY(30deg) rotateX(-30deg); |
9 background: url("resources/white_square.svg") no-repeat, rgba(55, 55, 99
, 1); | 9 background: url("resources/white_square.svg") no-repeat, rgba(55, 55, 99
, 1); |
10 background-blend-mode: difference; | 10 background-blend-mode: difference; |
11 } | 11 } |
12 | 12 |
13 body { | 13 body { |
14 background: green; | 14 background: green; |
15 } | 15 } |
16 | 16 |
17 </style> | 17 </style> |
18 <!-- Test to validate that background blending is working properly for hardware
accelerated elements. | 18 <!-- Test to validate that background blending is working properly for hardware
accelerated elements. |
19 This also validates that background layers don't blend with any of the conte
nt below the accelerated element. --> | 19 This also validates that background layers don't blend with any of the conte
nt below the accelerated element. --> |
20 </head> | 20 </head> |
21 <body> | 21 <body> |
22 <div></div> | 22 <div></div> |
23 </body> | 23 </body> |
OLD | NEW |