mix-blend-mode-video-sibling.html (1381B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: mix-blend-mode blending between a video element and an overlapping sibling</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="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> 10 <meta name="assert" content="Test checks that a video element blends with an overlapping sibling element with some text inside"> 11 <link rel="mismatch" href="reference/mix-blend-mode-video-sibling-notref.html"> 12 <style type="text/css"> 13 div { 14 mix-blend-mode: difference; 15 margin-top: -361px; 16 background-color: #FF0; 17 width: 300px; 18 height: 350px; 19 color: #F00; 20 } 21 </style> 22 </head> 23 <body> 24 <p>Test passes if you can see text and a circle moving from the top to the bottom of the page,<br> 25 both drawn with green, over a blue background.</p> 26 <video autoplay> 27 <source type="video/mp4" src="support/red_circle.mp4"> 28 </video> 29 <div>Some text inside the div.</div> 30 </body> 31 </html>