mix-blend-mode-parent-with-text.html (1787B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: check that the stacking context created by the parent element isolates blending.</title> 6 <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> 7 <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> 8 <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> 9 <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> 10 <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> 11 <meta name="assert" content="Test checks that an element with mix-blend-mode only blends with the contents 12 of a parent that creates a stacking context."> 13 <meta name="fuzzy" content="0-8;0-1284"> 14 <link rel="match" href="reference/mix-blend-mode-parent-with-text-ref.html"> 15 <style type="text/css"> 16 .parent { 17 position: absolute; 18 z-index: 1; 19 width: 100px; 20 height: 100px; 21 } 22 .blender { 23 background: #FF0; 24 width: 100px; 25 height: 100px; 26 margin-top: -60px; 27 mix-blend-mode: difference; 28 } 29 .text { 30 height: 60px; 31 color: #F00; 32 } 33 body { 34 background: lightgray; 35 } 36 </style> 37 </head> 38 <body> 39 <p>Test passes if a yellow square with green text is drawn over a lightgray background.</p> 40 <div class="parent"> 41 <div class="text">Red text that becomes green after blending </div> 42 <div class="blender"></div> 43 </div> 44 </body> 45 </html>