element-paint-transform-03.html (1280B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/licenses/publicdomain/ 4 5 Test paint servers that are rotated. We have to paint them as rectangles. 6 --> 7 <!DOCTYPE html> 8 <html> 9 <body style="margin:0; filter:url(#thresholdAt128);"> 10 <div style="width:80px; height:40px; border:1px solid black; 11 background:-moz-element(#d1);"></div> 12 <div style="width:80px; height:40px; border:1px solid black; 13 background:-moz-element(#d2);"></div> 14 <div style="width:80px; height:40px; border:1px solid black; 15 background:-moz-element(#d3);"></div> 16 17 <div style="overflow:hidden; height:0;"> 18 <div id="d1" style="width:40px; height:40px; transform:rotate(-30deg);"> 19 <div id="d2" style="width:40px; height:40px"> 20 <div id="d3" style="border:10px solid blue; width:20px; height:20px; 21 transform:rotate(30deg); background:lime"> 22 </div> 23 </div> 24 </div> 25 </div> 26 <svg> 27 <filter id="thresholdAt128" color-interpolation-filters="sRGB"> 28 <feColorMatrix type="matrix" 29 values="255 0 0 0 -128 30 0 255 0 0 -128 31 0 0 255 0 -128 32 0 0 0 255 -128"/> 33 34 </filter> 35 </svg> 36 </body> 37 </html>