element-paint-transform-03.html 1.3 KB

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