mix-blend-mode-parent-element-overflow-hidden-and-border-radius-2.html (1691B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: blending between an element having overflow:hidden and border-radius and its child, with will-change:opacity</title> 6 <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> 7 <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> 8 <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> 9 <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> 10 <link rel="help" href="https://crbug.com/328339028"> 11 <meta name="assert" content="Test checks that an element having mix-blend-mode and will-change:opacity blends with the parent element having overflow:hidden and border-radius"> 12 <meta name="fuzzy" content="0-128;0-400"> 13 <link rel="match" href="reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.html"> 14 <style type="text/css"> 15 .parent { 16 background: red; 17 width: 140px; 18 height: 140px; 19 position: relative; 20 z-index: 1; 21 overflow: hidden; 22 border-radius: 1em 5em; 23 } 24 .blended { 25 background: yellow; 26 width: 200px; 27 height: 200px; 28 mix-blend-mode: difference; 29 will-change: opacity; 30 } 31 </style> 32 </head> 33 <body> 34 <p> Test passes if you see a lime square with rounded corners.</p> 35 <div class="parent"> 36 <div class="blended"></div> 37 </div> 38 </body> 39 </html>