LibWeb: Add support for animated images to HTMLImageElement

Uses a Core::Timer (similar to HTMLBlinkElement) to transition between
frames of an animated image. Also keeps track of the number of animation
loops.

2 files changed, 44 insertions, 0 deletions

diff --git a/Libraries/LibWeb/DOM/HTMLImageElement.cpp b/Libraries/LibWeb/DOM/HTMLImageElement.cpp
index 27b9c484e8..534fe87082 100644
--- a/Libraries/LibWeb/DOM/HTMLImageElement.cpp
+++ b/Libraries/LibWeb/DOM/HTMLImageElement.cpp
@@ -24,6 +24,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+#include <LibCore/Timer.h>
 #include <LibGfx/Bitmap.h>
 #include <LibGfx/ImageDecoder.h>
 #include <LibWeb/CSS/StyleResolver.h>
@@ -37,6 +38,7 @@ namespace Web {
 
 HTMLImageElement::HTMLImageElement(Document& document, const FlyString& tag_name)
     : HTMLElement(document, tag_name)
+    , m_timer(Core::Timer::construct())
 {
 }
 
@@ -66,12 +68,42 @@ void HTMLImageElement::load_image(const String& src)
         m_encoded_data = data;
         m_image_decoder = Gfx::ImageDecoder::create(m_encoded_data.data(), m_encoded_data.size());
 
+        if (m_image_decoder->is_animated() && m_image_decoder->frame_count() > 1) {
+            const auto& first_frame = m_image_decoder->frame(0);
+            m_timer->set_interval(first_frame.duration);
+            m_timer->on_timeout = [this] { animate(); };
+            m_timer->start();
+        }
+
         document().update_layout();
 
         dispatch_event(Event::create("load"));
     });
 }
 
+void HTMLImageElement::animate()
+{
+    if (!layout_node()) {
+        return;
+    }
+
+    m_current_frame_index = (m_current_frame_index + 1) % m_image_decoder->frame_count();
+    const auto& current_frame = m_image_decoder->frame(m_current_frame_index);
+
+    if (current_frame.duration != m_timer->interval()) {
+        m_timer->restart(current_frame.duration);
+    }
+
+    if (m_current_frame_index == m_image_decoder->frame_count() - 1) {
+        ++m_loops_completed;
+        if (m_loops_completed > 0 && m_loops_completed == m_image_decoder->loop_count()) {
+            m_timer->stop();
+        }
+    }
+
+    layout_node()->set_needs_display();
+}
+
 int HTMLImageElement::preferred_width() const
 {
     bool ok = false;
@@ -111,6 +143,11 @@ const Gfx::Bitmap* HTMLImageElement::bitmap() const
 {
     if (!m_image_decoder)
         return nullptr;
+
+    if (m_image_decoder->is_animated()) {
+        return m_image_decoder->frame(m_current_frame_index).image;
+    }
+
     return m_image_decoder->bitmap();
 }
 
diff --git a/Libraries/LibWeb/DOM/HTMLImageElement.h b/Libraries/LibWeb/DOM/HTMLImageElement.h
index f56850004e..b123612591 100644
--- a/Libraries/LibWeb/DOM/HTMLImageElement.h
+++ b/Libraries/LibWeb/DOM/HTMLImageElement.h
@@ -27,6 +27,7 @@
 #pragma once
 
 #include <AK/ByteBuffer.h>
+#include <LibCore/Forward.h>
 #include <LibGfx/Forward.h>
 #include <LibWeb/DOM/HTMLElement.h>
 
@@ -56,10 +57,16 @@ public:
 private:
     void load_image(const String& src);
 
+    void animate();
+
     virtual RefPtr<LayoutNode> create_layout_node(const StyleProperties* parent_style) const override;
 
     RefPtr<Gfx::ImageDecoder> m_image_decoder;
     ByteBuffer m_encoded_data;
+
+    size_t m_current_frame_index { 0 };
+    size_t m_loops_completed { 0 };
+    NonnullRefPtr<Core::Timer> m_timer;
 };
 
 template<>