mix-blend-mode-with-transform-and-preserve-3D.html (1883B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: mix-blend-mode between an element and its child having 3D transform and preserve 3D</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="assert" content="Test checks that mix-blend-mode overrides the behavior of transform-style:preserve-3d"> 11 <meta name="fuzzy" content="0-50;0-300"> 12 <link rel="match" href="reference/mix-blend-mode-with-transform-and-preserve-3D-ref.html"> 13 <style type="text/css"> 14 div { 15 height: 150px; 16 width: 150px; 17 } 18 .container { 19 position: relative; 20 z-index: 1; 21 background-color: lime;/*rgb(0,255,0);*/ 22 } 23 .transformed { 24 transform-style: preserve-3d; 25 transform: rotateY(50deg); 26 background-color: aqua;/*rgb(0,255,255);*/ 27 mix-blend-mode: difference; 28 } 29 .child { 30 transform-origin: top left; 31 transform: rotateX(40deg); 32 background-color: red;/*rgb(255,0,0);*/ 33 } 34 </style> 35 </head> 36 <body> 37 <p>You should see 2 small rectangles (yellow and blue) drawn inside a lime container.<br> 38 The edges for all the rectangles should be either horizontal, or vertical (not skewed).</p> 39 <div class="container"> 40 <div class="transformed"> 41 <div class="child"></div> 42 </div> 43 </div> 44 </body> 45 </html>