element-paint-transform-03-ref.html (2043B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/licenses/publicdomain/ 4 --> 5 <!DOCTYPE html> 6 <html> 7 <body style="margin:0; filter:url(#thresholdAt128);"> 8 <div style="width:80px; height:40px; border:1px solid black;"> 9 <div style="position:absolute; top:1px; left:1px; 10 border:10px solid blue; width:20px; height:20px; background:lime;"></div> 11 <div style="position:absolute; top:1px; left:41px; 12 border:10px solid blue; width:20px; height:20px; background:lime;"></div> 13 </div> 14 <div style="width:80px; height:40px; border:1px solid black;"> 15 <div style="position:absolute; top:43px; left:1px; 16 width:40px; height:40px; overflow:hidden;"> 17 <div style="border:10px solid blue; width:20px; height:20px; 18 background:lime; transform:rotate(30deg);"></div> 19 </div> 20 <div style="position:absolute; top:43px; left:41px; 21 width:40px; height:40px; overflow:hidden;"> 22 <div style="border:10px solid blue; width:20px; height:20px; 23 background:lime; transform:rotate(30deg);"></div> 24 </div> 25 </div> 26 <div style="width:80px; height:40px; border:1px solid black;"> 27 <div style="position:absolute; top:85px; left:1px; 28 width:40px; height:40px; overflow:hidden;"> 29 <div style="border:10px solid blue; width:20px; height:20px; 30 background:lime; transform:rotate(30deg);"></div> 31 </div> 32 <div style="position:absolute; top:85px; left:41px; 33 width:40px; height:40px; overflow:hidden;"> 34 <div style="border:10px solid blue; width:20px; height:20px; 35 background:lime; transform:rotate(30deg);"></div> 36 </div> 37 </div> 38 <svg> 39 <filter id="thresholdAt128" color-interpolation-filters="sRGB"> 40 <feColorMatrix type="matrix" 41 values="255 0 0 0 -128 42 0 255 0 0 -128 43 0 0 255 0 -128 44 0 0 0 255 -128"/> 45 46 </filter> 47 </svg> 48 </body> 49 </html>