layout/reftests/webm-video/object-fit-contain-webm-002.html

   1 <!DOCTYPE html>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html>
   7   <head>
   8     <meta charset="utf-8">
   9     <title>CSS Test: 'object-fit: contain' on video element, with a WebM video and with various 'object-position' values</title>
  10     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
  11     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
  12     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
  13     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
  14     <link rel="match" href="object-fit-contain-webm-002-ref.html">
  15     <style type="text/css">
  16       video {
  17         border: 1px dashed gray;
  18         padding: 1px;
  19         object-fit: contain;
  20         image-rendering: -moz-crisp-edges;
  21         float: left;
  22       }
  23
  24       .bigWide {
  25         width: 48px;
  26         height: 32px;
  27       }
  28       .bigTall {
  29         width: 32px;
  30         height: 48px;
  31       }
  32       .small {
  33         width: 8px;
  34         height: 8px;
  35       }
  36
  37       br { clear: both; }
  38
  39       .tr { object-position: top right }
  40       .bl { object-position: bottom left }
  41       .tl { object-position: top 25% left 25% }
  42       .br { object-position: bottom 1px right 2px }
  43
  44       .tc { object-position: top 3px left 50% }
  45       .cr { object-position: top 50% right 25% }
  46     </style>
  47   </head>
  48   <body>
  49     <!-- big/wide: -->
  50     <video src="colors-8x16.webm" class="bigWide tr"></video>
  51     <video src="colors-8x16.webm" class="bigWide bl"></video>
  52     <video src="colors-8x16.webm" class="bigWide tl"></video>
  53     <video src="colors-8x16.webm" class="bigWide br"></video>
  54     <video src="colors-8x16.webm" class="bigWide tc"></video>
  55     <video src="colors-8x16.webm" class="bigWide cr"></video>
  56     <video src="colors-8x16.webm" class="bigWide"></video>
  57     <br>
  58     <!-- big/tall: -->
  59     <video src="colors-8x16.webm" class="bigTall tr"></video>
  60     <video src="colors-8x16.webm" class="bigTall bl"></video>
  61     <video src="colors-8x16.webm" class="bigTall tl"></video>
  62     <video src="colors-8x16.webm" class="bigTall br"></video>
  63     <video src="colors-8x16.webm" class="bigTall tc"></video>
  64     <video src="colors-8x16.webm" class="bigTall cr"></video>
  65     <video src="colors-8x16.webm" class="bigTall"></video>
  66     <br>
  67     <!-- small: -->
  68     <video src="colors-8x16.webm" class="small tr"></video>
  69     <video src="colors-8x16.webm" class="small bl"></video>
  70     <video src="colors-8x16.webm" class="small tl"></video>
  71     <video src="colors-8x16.webm" class="small br"></video>
  72     <video src="colors-8x16.webm" class="small tc"></video>
  73     <video src="colors-8x16.webm" class="small cr"></video>
  74     <video src="colors-8x16.webm" class="small"></video>
  75     <br>
  76   </body>
  77 </html>