layout/reftests/xul/object-fit-contain-svg-002.xhtml

   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: contain;
  13       }
  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
  28       br { clear: both; }
  29
  30       .tr { object-position: top right }
  31       .bl { object-position: bottom left }
  32       .tl { object-position: top 25% left 25% }
  33       .br { object-position: bottom 1px right 2px }
  34
  35       .tc { object-position: top 3px left 50% }
  36       .cr { object-position: top 50% right 25% }
  37   ]]></style>
  38   <hbox>
  39     <!-- big/wide: -->
  40     <image src="colors-8x16.svg" class="bigWide tr"/>
  41     <image src="colors-8x16.svg" class="bigWide bl"/>
  42     <image src="colors-8x16.svg" class="bigWide tl"/>
  43     <image src="colors-8x16.svg" class="bigWide br"/>
  44     <image src="colors-8x16.svg" class="bigWide tc"/>
  45     <image src="colors-8x16.svg" class="bigWide cr"/>
  46     <image src="colors-8x16.svg" class="bigWide"/>
  47   </hbox>
  48   <hbox>
  49     <!-- big/tall: -->
  50     <image src="colors-8x16.svg" class="bigTall tr"/>
  51     <image src="colors-8x16.svg" class="bigTall bl"/>
  52     <image src="colors-8x16.svg" class="bigTall tl"/>
  53     <image src="colors-8x16.svg" class="bigTall br"/>
  54     <image src="colors-8x16.svg" class="bigTall tc"/>
  55     <image src="colors-8x16.svg" class="bigTall cr"/>
  56     <image src="colors-8x16.svg" class="bigTall"/>
  57   </hbox>
  58   <hbox>
  59     <!-- small: -->
  60     <image src="colors-8x16.svg" class="small tr"/>
  61     <image src="colors-8x16.svg" class="small bl"/>
  62     <image src="colors-8x16.svg" class="small tl"/>
  63     <image src="colors-8x16.svg" class="small br"/>
  64     <image src="colors-8x16.svg" class="small tc"/>
  65     <image src="colors-8x16.svg" class="small cr"/>
  66     <image src="colors-8x16.svg" class="small"/>
  67   </hbox>
  68 </window>