Skip to content
Permalink
Browse files
"display" property value of computed style for audio element without …
…controls is "inline" (not "none")

"display" property value of computed style for audio element without controls is "inline" (not "none")

https://bugs.webkit.org/show_bug.cgi?id=88105

Reviewed by Devin Rousso.

This is to align Webkit behavior with Blink / Chrome and Gecko / Firefox and Web-Specifications:

https://html.spec.whatwg.org/#embedded-content-rendering-rules

"When an audio element is not exposing a user interface, the user agent is expected
to force its 'display' property to compute to 'none', irrespective of CSS rules."

When an audio element has no controls attribute, it should not be visible on the page.
Before this patch, when we removed the "controls" attribute, an empty div of the size of the controls remained.

Tests from Patch Authored by Silvia Pfeiffer.

* Source/WebCore/css/html.css: Update UA stylesheet where the audio controls are not visible
* LayoutTests/media/audio-controls-hidden-display-none.html: Added Test Cases
* LayoutTests/media/audio-controls-hidden-display-none-expected.txt: Added Test Case Expectations

Canonical link: https://commits.webkit.org/255528@main
  • Loading branch information
Ahmad-S792 authored and Ahmad Saleem committed Oct 14, 2022
1 parent f6f2c95 commit 13c796fb7f1d6bc0cb660bedae2f9f6e8e510675
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 0 deletions.
@@ -0,0 +1,10 @@
This tests if an audio file that has no controls is always display: none, including after script removal of attribute.

EXPECTED (getComputedStyle(audio)['display'] == 'none') OK

EXPECTED (getComputedStyle(audio)['display'] == 'inline') OK

EXPECTED (getComputedStyle(audio)['display'] == 'none') OK

END OF TEST

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>Audio Controls - selective control element display</title>
<script src="video-test.js"></script>
<script src="media-file.js"></script>
<script>
var audio;

function testDisplay(event)
{
audio = event.target;

testExpected("getComputedStyle(audio)['display']", 'none', "==");
consoleWrite("");

audio.setAttribute("controls", "");

testExpected("getComputedStyle(audio)['display']", 'inline', "==");
consoleWrite("");

audio.removeAttribute("controls");

testExpected("getComputedStyle(audio)['display']", 'none', "==");
consoleWrite("");

endTest();
}

function init()
{
audio = document.getElementsByTagName("audio")[0];
audio.addEventListener('canplaythrough', testDisplay, false);
audio.src = findMediaFile('audio', 'content/short');
}
</script>
</head>
<body onload="init()">
<audio></audio>
<p>
This tests if an audio file that has no controls is always display: none,
including after script removal of attribute.
</p>
</body>
</html>
@@ -131,6 +131,10 @@ audio {
height: 25px;
}

audio:not([controls]) {
display: none !important;
}

/* heading elements */

h1 {

0 comments on commit 13c796f

Please sign in to comment.