object-fit-none-png-001.xul 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <?xml version="1.0"?>
  2. <!--
  3. Any copyright is dedicated to the Public Domain.
  4. http://creativecommons.org/publicdomain/zero/1.0/
  5. -->
  6. <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7. <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
  8. window { padding: 8px; }
  9. image {
  10. border: 1px dashed gray;
  11. padding: 1px;
  12. object-fit: none;
  13. image-rendering: -moz-crisp-edges;
  14. float: left;
  15. }
  16. .bigWide {
  17. width: 52px;
  18. height: 36px;
  19. }
  20. .bigTall {
  21. width: 36px;
  22. height: 52px;
  23. }
  24. .small {
  25. width: 12px;
  26. height: 12px;
  27. }
  28. br { clear: both; }
  29. .tr { object-position: top right }
  30. .bl { object-position: bottom left }
  31. .tl { object-position: top 25% left 25% }
  32. .br { object-position: bottom 1px right 2px }
  33. .tc { object-position: top 3px center }
  34. .cr { object-position: center right 25% }
  35. ]]></style>
  36. <hbox>
  37. <!-- big/wide: -->
  38. <image src="colors-16x8.png" class="bigWide tr"/>
  39. <image src="colors-16x8.png" class="bigWide bl"/>
  40. <image src="colors-16x8.png" class="bigWide tl"/>
  41. <image src="colors-16x8.png" class="bigWide br"/>
  42. <image src="colors-16x8.png" class="bigWide tc"/>
  43. <image src="colors-16x8.png" class="bigWide cr"/>
  44. <image src="colors-16x8.png" class="bigWide"/>
  45. </hbox>
  46. <hbox>
  47. <!-- big/tall: -->
  48. <image src="colors-16x8.png" class="bigTall tr"/>
  49. <image src="colors-16x8.png" class="bigTall bl"/>
  50. <image src="colors-16x8.png" class="bigTall tl"/>
  51. <image src="colors-16x8.png" class="bigTall br"/>
  52. <image src="colors-16x8.png" class="bigTall tc"/>
  53. <image src="colors-16x8.png" class="bigTall cr"/>
  54. <image src="colors-16x8.png" class="bigTall"/>
  55. </hbox>
  56. <hbox>
  57. <!-- small: -->
  58. <image src="colors-16x8.png" class="small tr"/>
  59. <image src="colors-16x8.png" class="small bl"/>
  60. <image src="colors-16x8.png" class="small tl"/>
  61. <image src="colors-16x8.png" class="small br"/>
  62. <image src="colors-16x8.png" class="small tc"/>
  63. <image src="colors-16x8.png" class="small cr"/>
  64. <image src="colors-16x8.png" class="small"/>
  65. </hbox>
  66. </window>