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