| <!DOCTYPE html> |
| <!-- |
| Any copyright is dedicated to the Public Domain. |
| http://creativecommons.org/publicdomain/zero/1.0/ |
| --> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Test: 'object-fit: contain' and 'contain-intrinsic-size' on video element with a PNG poster image</title> |
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116"> |
| <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html"> |
| <style type="text/css"> |
| video { |
| border: 1px dashed gray; |
| padding: 1px; |
| image-rendering: pixelated; |
| float: left; |
| object-position: top left; |
| contain: size; |
| } |
| br { |
| clear: both; |
| } |
| .big { |
| contain-intrinsic-width: 32px; |
| contain-intrinsic-height: 48px; |
| } |
| .small { |
| contain-intrinsic-width: 8px; |
| contain-intrinsic-height: 8px; |
| } |
| |
| .cover { object-fit: cover } |
| .contain { object-fit: contain } |
| .fill { object-fit: fill } |
| .none { object-fit: none } |
| .scaledown { object-fit: scale-down } |
| |
| </style> |
| </head> |
| <body> |
| <!-- big: --> |
| <video poster="support/colors-16x8.png" class="big cover"></video> |
| <video poster="support/colors-16x8.png" class="big contain"></video> |
| <video poster="support/colors-16x8.png" class="big fill"></video> |
| <video poster="support/colors-16x8.png" class="big none"></video> |
| <video poster="support/colors-16x8.png" class="big scaledown"></video> |
| <br> |
| <!-- small: --> |
| <video poster="support/colors-16x8.png" class="small cover"></video> |
| <video poster="support/colors-16x8.png" class="small contain"></video> |
| <video poster="support/colors-16x8.png" class="small fill"></video> |
| <video poster="support/colors-16x8.png" class="small none"></video> |
| <video poster="support/colors-16x8.png" class="small scaledown"></video> |
| <br> |
| </body> |
| </html> |
