"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
WebKit · Oct 14, 2022 · 13c796fb7f1d6bc0cb660bedae2f9f6e8e510675 · 13c796f
1 parent f6f2c95
commit 13c796fb7f1d6bc0cb660bedae2f9f6e8e510675
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 0 deletions.
diff --git a/LayoutTests/media/audio-controls-hidden-display-none-expected.txt b/LayoutTests/media/audio-controls-hidden-display-none-expected.txt
@@ -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
+
diff --git a/LayoutTests/media/audio-controls-hidden-display-none.html b/LayoutTests/media/audio-controls-hidden-display-none.html
@@ -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>
diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css
@@ -131,6 +131,10 @@ audio {
     height: 25px;
 }
 
+audio:not([controls]) {
+    display: none !important;
+}
+
 /* heading elements */
 
 h1 {