LibWeb: Hide audio element when controls is not set

Psychpsyo · pbrw · commit 556555c85986 · 2025-01-14T20:22:20.000+01:00
When an audio element has no controls attribute,
it should not render at all and take up no space.
diff --git a/Libraries/LibWeb/Layout/AudioBox.cpp b/Libraries/LibWeb/Layout/AudioBox.cpp
@@ -34,4 +34,21 @@ GC::Ptr<Painting::Paintable> AudioBox::create_paintable() const
     return Painting::AudioPaintable::create(*this);
 }
 
+bool AudioBox::should_paint() const
+{
+    auto const& audio_element = dom_node();
+    return audio_element.has_attribute(HTML::AttributeNames::controls) || audio_element.is_scripting_disabled();
+}
+
+void AudioBox::prepare_for_replaced_layout()
+{
+    if (should_paint()) {
+        set_natural_width(300);
+        set_natural_height(40);
+    } else {
+        set_natural_width(0);
+        set_natural_height(0);
+    }
+}
+
 }
diff --git a/Libraries/LibWeb/Layout/AudioBox.h b/Libraries/LibWeb/Layout/AudioBox.h
@@ -17,11 +17,15 @@ class AudioBox final : public ReplacedBox {
     GC_DECLARE_ALLOCATOR(AudioBox);
 
 public:
+    virtual void prepare_for_replaced_layout() override;
+
     HTML::HTMLAudioElement& dom_node();
     HTML::HTMLAudioElement const& dom_node() const;
 
     virtual GC::Ptr<Painting::Paintable> create_paintable() const override;
 
+    bool should_paint() const;
+
 private:
     AudioBox(DOM::Document&, DOM::Element&, GC::Ref<CSS::ComputedProperties>);
 };
diff --git a/Libraries/LibWeb/Painting/AudioPaintable.cpp b/Libraries/LibWeb/Painting/AudioPaintable.cpp
@@ -43,6 +43,9 @@ void AudioPaintable::paint(PaintContext& context, PaintPhase phase) const
     if (!is_visible())
         return;
 
+    if (!layout_box().should_paint())
+        return;
+
     Base::paint(context, phase);
 
     if (phase != PaintPhase::Foreground)
@@ -57,11 +60,7 @@ void AudioPaintable::paint(PaintContext& context, PaintPhase phase) const
 
     auto const& audio_element = layout_box().dom_node();
     auto mouse_position = MediaPaintable::mouse_position(context, audio_element);
-
-    auto paint_user_agent_controls = audio_element.has_attribute(HTML::AttributeNames::controls) || audio_element.is_scripting_disabled();
-
-    if (paint_user_agent_controls)
-        paint_media_controls(context, audio_element, audio_rect, mouse_position);
+    paint_media_controls(context, audio_element, audio_rect, mouse_position);
 }
 
 }
diff --git a/Tests/LibWeb/Layout/expected/hide-audio-based-on-controls.txt b/Tests/LibWeb/Layout/expected/hide-audio-based-on-controls.txt
@@ -0,0 +1,17 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x59 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x43 children: inline
+      frag 0 from AudioBox start: 0, length: 0, rect: [8,8 300x40] baseline: 40
+      frag 1 from TextNode start: 0, length: 1, rect: [308,34 8x17] baseline: 13.296875
+          " "
+      frag 2 from AudioBox start: 0, length: 0, rect: [316,48 0x0] baseline: 0
+      AudioBox <audio> at (8,8) content-size 300x40 children: not-inline
+      TextNode <#text>
+      AudioBox <audio> at (316,48) content-size 0x0 children: not-inline
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x59]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x43]
+      AudioPaintable (AudioBox<AUDIO>) [8,8 300x40]
+      TextPaintable (TextNode<#text>)
+      AudioPaintable (AudioBox<AUDIO>) [316,48 0x0]
diff --git a/Tests/LibWeb/Layout/input/hide-audio-based-on-controls.html b/Tests/LibWeb/Layout/input/hide-audio-based-on-controls.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<audio controls=""></audio>
+<audio></audio>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<audio controls=""></audio>`
	`3`	`+<audio></audio>`