object-fit-fill-svg-001.xul 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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: fill;
  13. float: left;
  14. }
  15. .bigWide {
  16. width: 52px;
  17. height: 36px;
  18. }
  19. .bigTall {
  20. width: 36px;
  21. height: 52px;
  22. }
  23. .small {
  24. width: 12px;
  25. height: 12px;
  26. }
  27. br { clear: both; }
  28. .tr { object-position: top right }
  29. .bl { object-position: bottom left }
  30. .tl { object-position: top 25% left 25% }
  31. .br { object-position: bottom 1px right 2px }
  32. .tc { object-position: top 3px center }
  33. .cr { object-position: center right 25% }
  34. ]]></style>
  35. <hbox>
  36. <!-- big/wide: -->
  37. <image src="colors-16x8.svg" class="bigWide tr"/>
  38. <image src="colors-16x8.svg" class="bigWide bl"/>
  39. <image src="colors-16x8.svg" class="bigWide tl"/>
  40. <image src="colors-16x8.svg" class="bigWide br"/>
  41. <image src="colors-16x8.svg" class="bigWide tc"/>
  42. <image src="colors-16x8.svg" class="bigWide cr"/>
  43. <image src="colors-16x8.svg" class="bigWide"/>
  44. </hbox>
  45. <hbox>
  46. <!-- big/tall: -->
  47. <image src="colors-16x8.svg" class="bigTall tr"/>
  48. <image src="colors-16x8.svg" class="bigTall bl"/>
  49. <image src="colors-16x8.svg" class="bigTall tl"/>
  50. <image src="colors-16x8.svg" class="bigTall br"/>
  51. <image src="colors-16x8.svg" class="bigTall tc"/>
  52. <image src="colors-16x8.svg" class="bigTall cr"/>
  53. <image src="colors-16x8.svg" class="bigTall"/>
  54. </hbox>
  55. <hbox>
  56. <!-- small: -->
  57. <image src="colors-16x8.svg" class="small tr"/>
  58. <image src="colors-16x8.svg" class="small bl"/>
  59. <image src="colors-16x8.svg" class="small tl"/>
  60. <image src="colors-16x8.svg" class="small br"/>
  61. <image src="colors-16x8.svg" class="small tc"/>
  62. <image src="colors-16x8.svg" class="small cr"/>
  63. <image src="colors-16x8.svg" class="small"/>
  64. </hbox>
  65. </window>