object-view-box-fit-cover-template.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<title>CSS object-view-box with object-fit:contain</title>

<link rel="author" href="mailto:khushalsagar@chromium.org">

<link rel="match" href="object-view-box-fit-cover-__NAME__-ref.html">

<script src="support/testHelper.js"></script>

<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">

<body>

<style>

.view_box_subset {

  object-view-box: inset(50px 0px 0px 0px);

  object-fit: cover;

  width: 40px;

  height: 50px;

  margin: 5px;

.view_box_subset_with_position {

  object-view-box: inset(50px 0px 0px 0px);

  object-fit: cover;

  width: 40px;

  height: 50px;

  margin: 5px;

  object-position: 0% 0%;

.view_box_subset_with_scaling {

  object-view-box: inset(50px 0px 0px 0px);

  object-fit: cover;

  margin: 5px;

  width: 50px;

  height: 100px;

  /* The top row of pixels can have minor differences due to mismatch in order

     of clipping and scaling operations */

  clip-path: inset(1px 0px 0px 0px);

</style>

</body>

<__TAG__ class="view_box_subset"></__TAG__>

<__TAG__ class="view_box_subset_with_position"></__TAG__>

<__TAG__ class="view_box_subset_with_scaling"></__TAG__>

</body>

<script>

  populateElements("__IMAGE_SOURCE__");

</script>