commit 7bbef440d4af603e2493d767f8db66f53d658079
parent 93c15d546ddb4cbc968761db69b078e7279a6c3b
Author: Oriol Brufau <obrufau@igalia.com>
Date: Tue, 16 Dec 2025 08:49:01 +0000
Bug 2006072 [wpt PR 56739] - layout: Treat `<audio>` as replaced and do not display when there is no `controls` attribute, a=testonly
Automatic update from web-platform-tests
layout: Improve `<audio>` rendering
Add an important UA style to ensure that `<audio>` isn't displayed at
all when it doesn't have the `controls` attribute. This matches Gecko,
Blink and WebKit.
When it does have the attribute, then treat it as replaced. For example,
this means that it won't stretch by default if it's block-level, that it
will be atomic if inline-level, and that it won't generate `::before` or
`::after`.
Previously we were generating `::before` and `::after`, but there was a
bug: if they had some replaced content, the controls of the `<audio>`
would be duplicated, and also appear on the pseudo-element. Then, since
the various boxes for the controls would be backed by the same elements,
Servo could panic because of a double borrow. This is now avoided.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
--
wpt-commits: be58421548ea048419957a0c634761ed171c6350
wpt-pr: 56739
Diffstat:
1 file changed, 32 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-audio-element/audio-with-replaced-after-pseudo-crash.html b/testing/web-platform/tests/html/semantics/embedded-content/the-audio-element/audio-with-replaced-after-pseudo-crash.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<meta charset="utf-8">
+<title>HTML5 Media Elements: An 'audio' element with a replaced ::after shouldn't crash</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="https://github.com/servo/servo/issues/41183">
+
+<style>
+audio::after {
+ content: url("/css/support/60x60-red.png");
+}
+</style>
+<audio controls></audio>
+<script src="/common/media.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<script>
+(async function() {
+ const audio = document.querySelector("audio");
+ audio.src = getAudioURI("/media/sound_5");
+ for (let i = 0; i < 10; ++i) {
+ await waitForAtLeastOneFrame();
+ await audio.play();
+ document.body.style.color = "cyan";
+ await waitForAtLeastOneFrame();
+ audio.pause();
+ await waitForAtLeastOneFrame();
+ document.body.style.color = "magenta";
+ }
+ document.documentElement.removeAttribute("class");
+})();
+</script>
+</html>
