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

   1 <!DOCTYPE html>
   2 <html>
   3 <title>CSS object-view-box with object-fit:contain</title>
   4 <link rel="author" href="mailto:khushalsagar@chromium.org">
   5 <link rel="match" href="object-view-box-fit-contain-__NAME__-ref.html">
   6 <script src="support/testHelper.js"></script>
   7 <link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
   8
   9 <body>
  10 <style>
  11 .view_box_subset {
  12   object-view-box: inset(50px 0px 0px 0px);
  13   object-fit: contain;
  14   width: 50px;
  15   height: 100px;
  16   background-color: grey;
  17   margin: 5px;
  18 }
  19
  20 .view_box_subset_with_position {
  21   object-view-box: inset(50px 0px 0px 0px);
  22   object-fit: contain;
  23   width: 50px;
  24   height: 100px;
  25   background-color: grey;
  26   margin: 5px;
  27
  28   object-position: 0% 0%;
  29   background-color: grey;
  30 }
  31
  32 .view_box_subset_with_scaling {
  33   object-view-box: inset(50px 0px 0px 0px);
  34   object-fit: contain;
  35   background-color: grey;
  36   margin: 5px;
  37
  38   width: 100px;
  39   height: 200px;
  40   object-position: 25px 125px;
  41 }
  42 </style>
  43 <__TAG__ class="view_box_subset"></__TAG__>
  44 <__TAG__ class="view_box_subset_with_position"></__TAG__>
  45 <__TAG__ class="view_box_subset_with_scaling"></__TAG__>
  46 </body>
  47 <script>
  48   populateElements("__IMAGE_SOURCE__");
  49 </script>