mix-blend-mode-parent-with-3D-transform-and-transition.html (2503B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: blending between an element having 3D transitions and its child</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="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> 9 <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> 10 <meta name="flags" content="dom"/> 11 <meta name="assert" content="Test checks that an element having mix-blend-mode blends with its parent element having 3D transform and transition"> 12 <style type="text/css"> 13 .parent { 14 background: yellow; 15 width: 140px; 16 height: 140px; 17 position:relative; 18 z-index: 1; 19 margin: 10px; 20 float: left; 21 transition: transform 2s; 22 23 } 24 .rotated { 25 transform: rotateX(60deg) rotateZ(10deg) rotateY(180deg); 26 } 27 .blended { 28 background: red; 29 width: 140px; 30 height: 140px; 31 mix-blend-mode: difference; 32 } 33 .ref { 34 background: none; 35 } 36 .ref .blended { 37 background: lime; 38 mix-blend-mode: normal; 39 } 40 </style> 41 </head> 42 <body> 43 <p>Test passes if you can see two rotating lime rectangles, both identical.</p> 44 <div> 45 <div class="parent" id="parent"> 46 <div class="blended"></div> 47 </div> 48 <div class="parent ref" id="parentref"> 49 <div class="blended"></div> 50 </div> 51 </div> 52 <script type="text/javascript"> 53 var parent = document.getElementById('parent'); 54 var parentref = document.getElementById('parentref'); 55 function rotate (el, cl) { 56 if (el.className === cl + ' rotated') 57 el.className = cl; 58 else 59 el.className = cl + ' rotated'; 60 } 61 setTimeout(function () { rotate(parent, 'parent'); rotate(parentref, 'parent ref'); }, 0); 62 setInterval(function () { rotate(parent, 'parent'); rotate(parentref, 'parent ref'); }, 2000); 63 </script> 64 </body> 65 </html>