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