mix-blend-mode-sibling-with-3D-transform-and-transition.html (3047B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: blending between an element and its sibling having 3D transform and transition</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 an overlapping sibling element having 3D transform and transition"> 12 <style type="text/css"> 13 .parent { 14 position: relative; 15 z-index: 1; 16 float: left; 17 margin-left: 10px; 18 } 19 .blended { 20 background: blue; 21 margin-top: -120px; 22 width: 140px; 23 position: relative; 24 z-index: 1; 25 height: 140px; 26 mix-blend-mode: difference; 27 } 28 .siblingOfBlended { 29 background: aqua; 30 width: 100px; 31 height: 100px; 32 margin-top: 20px; 33 margin-left: 20px; 34 transition: transform 2s; 35 } 36 .rotated { 37 transform: rotateX(60deg) rotateY(10deg) rotateZ(90deg); 38 } 39 40 .ref .blended { 41 mix-blend-mode: normal; 42 } 43 .ref .siblingOfBlended { 44 z-index: 2; 45 position: relative; 46 background: lime; 47 } 48 </style> 49 </head> 50 <body> 51 <p>Test passes if you can see two blue rectangles having inside a lime rotating rectangle each.<br> 52 Lime rectangles should look identical when while rotating.</p> 53 <div> 54 <div class="parent"> 55 <div class="siblingOfBlended" id="sibling"></div> 56 <div class="blended"></div> 57 </div> 58 <div class="parent ref"> 59 <div class="siblingOfBlended ref" id="siblingref"></div> 60 <div class="blended"></div> 61 </div> 62 </div> 63 <script type="text/javascript"> 64 var sibling = document.getElementById('sibling'); 65 var siblingref = document.getElementById('siblingref'); 66 function rotate (el, cl) { 67 if (el.className === cl + ' rotated') 68 el.className = cl; 69 else 70 el.className = cl + ' rotated'; 71 } 72 setTimeout(function () { rotate(sibling, 'siblingOfBlended'); rotate(siblingref, 'siblingOfBlended ref'); }, 0); 73 setInterval(function () { rotate(sibling, 'siblingOfBlended'); rotate(siblingref, 'siblingOfBlended ref'); }, 2000); 74 </script> 75 </body> 76 </html>