| <!DOCTYPE HTML> |
| <head> |
| <link rel="stylesheet" href="resources/blending-style.css"> |
| <style> |
| .example { |
| width: 180px; |
| height: 180px; |
| display: inline-block; |
| } |
| |
| .blendingbg { |
| position: relative; |
| width: 150px; |
| height: 150px; |
| background: linear-gradient(to right, #0ff 0%, #00f 25%, #f00 50%, #ff0 75%, #0f0 100%); |
| } |
| |
| .intermediate { |
| position: absolute; |
| top: 10px; |
| left: 10px; |
| width: 150px; |
| height: 150px; |
| background: linear-gradient(to bottom, #f00 0%, #0f0 100%); |
| } |
| |
| img { |
| position: absolute; |
| top: 20px; |
| left: 20px; |
| width: 150px; |
| height: 150px; |
| } |
| |
| ol { |
| margin-bottom: 2em; |
| } |
| </style> |
| </head> |
| <body> |
| <ul> |
| <ol> |
| <li>No blending. Duck should be yellow everywhere.</li> |
| <li>Simple blending. Duck should be a horizontal rainbow inside, and blue on overflow.</li> |
| <li>Parent is a stacking context. Duck should be a horizontal rainbow inside, and yellow on overflow (since there is no background there to blend with).</li> |
| <li>Intermediate parent - no stacking context. Duck should be a vertical gradient inside, and blue on overflow.</li> |
| <li>Intermediate parent with grandparent stacking context. Duck should be a vertical gradient inside, and yellow on overflow.</li> |
| <li>Intermediate parent has overflow. Duck should be a vertical gradient inside, and overflow is hidden.</li> |
| </ol> |
| |
| <!-- no blending --> |
| <div class="example"> |
| <div class="blendingbg"> |
| <img src="resources/ducky.png"> |
| </div> |
| </div> |
| |
| <!-- normal blending --> |
| <div class="example"> |
| <div class="blendingbg"> |
| <img src="resources/ducky.png" style="mix-blend-mode: difference;"> |
| </div> |
| </div> |
| |
| <!-- parent is a stacking context --> |
| <div class="example"> |
| <div class="accelerated blendingbg"> |
| <img src="resources/ducky.png" style="mix-blend-mode: difference;"> |
| </div> |
| </div> |
| |
| <!-- intermediate hierarchy --> |
| <div class="example"> |
| <div class="blendingbg"> |
| <div class="intermediate"> |
| <img src="resources/ducky.png" style="mix-blend-mode: difference;"> |
| </div> |
| </div> |
| </div> |
| |
| <!-- intermediate hierarchy with stacking context --> |
| <div class="example"> |
| <div class="accelerated blendingbg"> |
| <div class="intermediate"> |
| <img src="resources/ducky.png" style="mix-blend-mode: difference;"> |
| </div> |
| </div> |
| </div> |
| |
| <!-- intermediate hierarchy that overflows --> |
| <div class="example"> |
| <div class="accelerated blendingbg"> |
| <div class="intermediate" style="overflow: hidden"> |
| <img src="resources/ducky.png" style="mix-blend-mode: difference;"> |
| </div> |
| </div> |
| </div> |
| </ul> |
| </body> |
