testing/web-platform/tests/css/css-images/support/object-view-box-fit-cover-ref-template.html

   1 <!DOCTYPE html>
   2 <title>CSS object-view-box with object-fit:contain (ref)</title>
   3 <link rel="author" href="mailto:khushalsagar@chromium.org">
   4 <script src="support/testHelper.js"></script>
   5 <link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
   6
   7 <body>
   8 <style>
   9 div {
  10   margin: 5px;
  11 }
  12
  13 video {
  14   object-fit: fill;
  15 }
  16
  17 .container_view_box_subset {
  18   width: 40px;
  19   height: 50px;
  20   overflow: hidden;
  21   display: inline-block;
  22 }
  23 .view_box_subset {
  24   width: 50px;
  25   height: 100px;
  26   position: relative;
  27   left: -5px;
  28   top: -50px;
  29 }
  30
  31 .container_view_box_subset_with_position {
  32   width: 40px;
  33   height: 50px;
  34   overflow: hidden;
  35   display: inline-block;
  36 }
  37 .view_box_subset_with_position {
  38   width: 50px;
  39   height: 100px;
  40   position: relative;
  41   top: -50px;
  42 }
  43
  44 .container_view_box_subset_with_scaling {
  45   width: 50px;
  46   height: 100px;
  47   overflow: hidden;
  48   display: inline-block;
  49   clip-path: inset(1px 0px 0px 0px);
  50 }
  51 .view_box_subset_with_scaling {
  52   width: 100px;
  53   height: 200px;
  54   position: relative;
  55   left: -25px;
  56   top: -100px;
  57 }
  58 </style>
  59 <div class="container_view_box_subset">
  60   <__TAG__ class="view_box_subset"></__TAG__>
  61 </div>
  62 <div class="container_view_box_subset_with_position">
  63   <__TAG__ class="view_box_subset_with_position"></__TAG__>
  64 </div>
  65 <div class="container_view_box_subset_with_scaling">
  66   <__TAG__ class="view_box_subset_with_scaling"></__TAG__>
  67 </div>
  68 </body>
  69 <script>
  70   populateElements("__IMAGE_SOURCE__");
  71 </script>