Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 11:25:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1716612 - Don't apply aspect-ratio to audio elements with controls. r=emilio

Browse Source 
There are two cases for the audio element:
1. audio element with "controls" - replaced element (but UA shouldn't
   show the content. Only control UI there.)
2. audio element without "controls" - UA sets display:none.

Per spec, if a replaced element’s only natural dimension is a natural width or
a natural height, giving it a preferred aspect ratio also gives it an natural
height or width, whichever was missing, by transferring the existing size
through the preferred aspect ratio.

However, the audio element (with or without "controls") doesn't have the
natural ratio and natural size. I think it's a special case and it doesn't
make sense to apply aspect-ratio to it even though we specify a width or
height.

Blink and Webkit don't apply aspect-ratio to audio element, either. So
let's follow other browsers' behavior.

Differential Revision: https://phabricator.services.mozilla.com/D118245
This commit is contained in:
Boris Chiou 2022-04-14 02:10:34 +00:00
parent 4fccdde58f
commit 993c59ddf8
4 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layout/generic/nsVideoFrame.cpp
View File

@ -466,6 +466,10 @@ bool nsVideoFrame::ShouldDisplayPoster() const {
}
nsSize nsVideoFrame::GetVideoIntrinsicSize() const {
if (!HasVideoElement()) {
return nsSize(0, 0);
}
// 'contain:size' replaced elements have intrinsic size 0,0.
if (StyleDisplay()->IsContainSize()) {
return nsSize(0, 0);

6
layout/generic/nsVideoFrame.h
View File

@ -71,6 +71,12 @@ class nsVideoFrame final : public nsContainerFrame,
#endif
bool IsFrameOfType(uint32_t aFlags) const override {
// audio element with visible controls is an inline element, so we don't
// apply aspect-ratio.
if ((aFlags & nsIFrame::eSupportsAspectRatio) && !HasVideoElement()) {
return false;
}
return nsSplittableFrame::IsFrameOfType(
aFlags & ~(nsIFrame::eReplaced | nsIFrame::eReplacedSizing));
}

6
testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-035-ref.html Normal file
View File

@ -0,0 +1,6 @@
<!DOCTYPE html>
<title>CSS aspect-ratio reference: audio element</title>
<audio controls style="background: green;"></audio><br>
<audio controls style="width: 100px; background: green;"></audio><br>
<audio controls style="height: 100px; background: green;"></audio>

10
testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-035.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<title>CSS aspect-ratio: audio element</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://html.spec.whatwg.org/multipage/media.html#the-audio-element">
<link rel="match" href="replaced-element-035-ref.html">
<audio controls style="aspect-ratio: 1/1; background: green;"></audio><br>
<audio controls style="aspect-ratio: 1/1; width: 100px; background: green;"></audio><br>
<audio controls style="aspect-ratio: 1/1; height: 100px; background: green;"></audio>