Description
This issue is a little subtle, and there are related connected issues, but this is just focused on when/where does the 2:1 aspect-ratio of an unloaded <video> come from?
See the rendering of:
<!DOCTYPE html>
<video style="width: 100px;"></video>
Above in all browsers will render as 100x50.
https://wpt.live/css/css-sizing/intrinsic-size-fallback-video.html asserts this behaviour.
In html: https://html.spec.whatwg.org/#the-video-element
The default object size is a width of 300 CSS pixels and a height of 150 CSS pixels. [CSSIMAGES]
This is the same for other replaced elements - however having a size, doesn't imply having an aspect-ratio.
In #7524 (comment) we discussed that aspect-ratio:auto doesn't pull from the default object size. The above testcase clearly has an aspect-ratio, and aspect-ratio is auto, but then where does the 2:1 aspect-ratio for <video> come from?
A simple testcase with <iframe> & <svg> for comparison (both who also have a 300x150 default size).
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13638
Given the resolution in #7524 there are 3 potential solutions for this behaviour:
- The
<video>element shouldn't have a 2:1 aspect ratio by default, and instead behave like its replaced friends. This has the largest potential web-compat issue, but might be fine given most videos are either sized of have 100% width/height, or explicitly sized. - The
<video>element should have a UA stylesheet rule ofvideo { aspect-ratio: 2 auto; }. This would likely be the most web-compatible, and easily explains the behaviour of current browsers. - A step in the "normalization" step of natural-sizes where if we are a video with no aspect-ratio, we always get a aspect-ratio of 2:1. This is the icky, and isn't easily explainable. Can potentially produce undesirable behaviour in certain circumstances.
I like either option 1 or 2.