HTMLImageElement.cpp 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. /*
  2. * Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibGfx/Bitmap.h>
  7. #include <LibWeb/Bindings/HTMLImageElementPrototype.h>
  8. #include <LibWeb/CSS/Parser/Parser.h>
  9. #include <LibWeb/CSS/StyleComputer.h>
  10. #include <LibWeb/DOM/Document.h>
  11. #include <LibWeb/DOM/Event.h>
  12. #include <LibWeb/HTML/EventNames.h>
  13. #include <LibWeb/HTML/HTMLImageElement.h>
  14. #include <LibWeb/HTML/Parser/HTMLParser.h>
  15. #include <LibWeb/Layout/ImageBox.h>
  16. #include <LibWeb/Loader/ResourceLoader.h>
  17. #include <LibWeb/Painting/PaintableBox.h>
  18. namespace Web::HTML {
  19. HTMLImageElement::HTMLImageElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  20. : HTMLElement(document, move(qualified_name))
  21. , m_image_loader(*this)
  22. {
  23. set_prototype(&window().ensure_web_prototype<Bindings::HTMLImageElementPrototype>("HTMLImageElement"));
  24. m_image_loader.on_load = [this] {
  25. set_needs_style_update(true);
  26. this->document().set_needs_layout();
  27. queue_an_element_task(HTML::Task::Source::DOMManipulation, [this] {
  28. dispatch_event(*DOM::Event::create(this->document().window(), EventNames::load));
  29. });
  30. };
  31. m_image_loader.on_fail = [this] {
  32. dbgln("HTMLImageElement: Resource did fail: {}", src());
  33. set_needs_style_update(true);
  34. this->document().set_needs_layout();
  35. queue_an_element_task(HTML::Task::Source::DOMManipulation, [this] {
  36. dispatch_event(*DOM::Event::create(this->document().window(), EventNames::error));
  37. });
  38. };
  39. m_image_loader.on_animate = [this] {
  40. if (layout_node())
  41. layout_node()->set_needs_display();
  42. };
  43. }
  44. HTMLImageElement::~HTMLImageElement() = default;
  45. void HTMLImageElement::apply_presentational_hints(CSS::StyleProperties& style) const
  46. {
  47. for_each_attribute([&](auto& name, auto& value) {
  48. if (name == HTML::AttributeNames::width) {
  49. if (auto parsed_value = parse_dimension_value(value))
  50. style.set_property(CSS::PropertyID::Width, parsed_value.release_nonnull());
  51. } else if (name == HTML::AttributeNames::height) {
  52. if (auto parsed_value = parse_dimension_value(value))
  53. style.set_property(CSS::PropertyID::Height, parsed_value.release_nonnull());
  54. } else if (name == HTML::AttributeNames::hspace) {
  55. if (auto parsed_value = parse_dimension_value(value)) {
  56. style.set_property(CSS::PropertyID::MarginLeft, *parsed_value);
  57. style.set_property(CSS::PropertyID::MarginRight, *parsed_value);
  58. }
  59. } else if (name == HTML::AttributeNames::vspace) {
  60. if (auto parsed_value = parse_dimension_value(value)) {
  61. style.set_property(CSS::PropertyID::MarginTop, *parsed_value);
  62. style.set_property(CSS::PropertyID::MarginBottom, *parsed_value);
  63. }
  64. }
  65. });
  66. }
  67. void HTMLImageElement::parse_attribute(FlyString const& name, String const& value)
  68. {
  69. HTMLElement::parse_attribute(name, value);
  70. if (name == HTML::AttributeNames::src && !value.is_empty())
  71. m_image_loader.load(document().parse_url(value));
  72. }
  73. RefPtr<Layout::Node> HTMLImageElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style)
  74. {
  75. auto display = style->display();
  76. auto layout_node = adopt_ref(*new Layout::ImageBox(document(), *this, move(style), m_image_loader));
  77. if (display.is_block_outside())
  78. layout_node->set_inline(false);
  79. return layout_node;
  80. }
  81. Gfx::Bitmap const* HTMLImageElement::bitmap() const
  82. {
  83. return m_image_loader.bitmap(m_image_loader.current_frame_index());
  84. }
  85. // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-width
  86. unsigned HTMLImageElement::width() const
  87. {
  88. const_cast<DOM::Document&>(document()).update_layout();
  89. // Return the rendered width of the image, in CSS pixels, if the image is being rendered.
  90. if (auto* paint_box = this->paint_box())
  91. return paint_box->content_width();
  92. // NOTE: This step seems to not be in the spec, but all browsers do it.
  93. auto width_attr = get_attribute(HTML::AttributeNames::width);
  94. if (auto converted = width_attr.to_uint(); converted.has_value())
  95. return *converted;
  96. // ...or else the density-corrected intrinsic width and height of the image, in CSS pixels,
  97. // if the image has intrinsic dimensions and is available but not being rendered.
  98. if (m_image_loader.has_image())
  99. return m_image_loader.width();
  100. // ...or else 0, if the image is not available or does not have intrinsic dimensions.
  101. return 0;
  102. }
  103. void HTMLImageElement::set_width(unsigned width)
  104. {
  105. set_attribute(HTML::AttributeNames::width, String::number(width));
  106. }
  107. // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-height
  108. unsigned HTMLImageElement::height() const
  109. {
  110. const_cast<DOM::Document&>(document()).update_layout();
  111. // Return the rendered height of the image, in CSS pixels, if the image is being rendered.
  112. if (auto* paint_box = this->paint_box())
  113. return paint_box->content_height();
  114. // NOTE: This step seems to not be in the spec, but all browsers do it.
  115. auto height_attr = get_attribute(HTML::AttributeNames::height);
  116. if (auto converted = height_attr.to_uint(); converted.has_value())
  117. return *converted;
  118. // ...or else the density-corrected intrinsic height and height of the image, in CSS pixels,
  119. // if the image has intrinsic dimensions and is available but not being rendered.
  120. if (m_image_loader.has_image())
  121. return m_image_loader.height();
  122. // ...or else 0, if the image is not available or does not have intrinsic dimensions.
  123. return 0;
  124. }
  125. void HTMLImageElement::set_height(unsigned height)
  126. {
  127. set_attribute(HTML::AttributeNames::height, String::number(height));
  128. }
  129. // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-naturalwidth
  130. unsigned HTMLImageElement::natural_width() const
  131. {
  132. // Return the density-corrected intrinsic width of the image, in CSS pixels,
  133. // if the image has intrinsic dimensions and is available.
  134. if (m_image_loader.has_image())
  135. return m_image_loader.width();
  136. // ...or else 0.
  137. return 0;
  138. }
  139. // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-naturalheight
  140. unsigned HTMLImageElement::natural_height() const
  141. {
  142. // Return the density-corrected intrinsic height of the image, in CSS pixels,
  143. // if the image has intrinsic dimensions and is available.
  144. if (m_image_loader.has_image())
  145. return m_image_loader.height();
  146. // ...or else 0.
  147. return 0;
  148. }
  149. }