HTMLImageElement.cpp 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  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/ARIA/Roles.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. m_image_loader.on_load = [this] {
  24. set_needs_style_update(true);
  25. this->document().set_needs_layout();
  26. queue_an_element_task(HTML::Task::Source::DOMManipulation, [this] {
  27. dispatch_event(DOM::Event::create(this->realm(), EventNames::load).release_value_but_fixme_should_propagate_errors());
  28. });
  29. };
  30. m_image_loader.on_fail = [this] {
  31. dbgln("HTMLImageElement: Resource did fail: {}", src());
  32. set_needs_style_update(true);
  33. this->document().set_needs_layout();
  34. queue_an_element_task(HTML::Task::Source::DOMManipulation, [this] {
  35. dispatch_event(DOM::Event::create(this->realm(), EventNames::error).release_value_but_fixme_should_propagate_errors());
  36. });
  37. };
  38. m_image_loader.on_animate = [this] {
  39. if (layout_node())
  40. layout_node()->set_needs_display();
  41. };
  42. }
  43. HTMLImageElement::~HTMLImageElement() = default;
  44. JS::ThrowCompletionOr<void> HTMLImageElement::initialize(JS::Realm& realm)
  45. {
  46. MUST_OR_THROW_OOM(Base::initialize(realm));
  47. set_prototype(&Bindings::ensure_web_prototype<Bindings::HTMLImageElementPrototype>(realm, "HTMLImageElement"));
  48. return {};
  49. }
  50. void HTMLImageElement::apply_presentational_hints(CSS::StyleProperties& style) const
  51. {
  52. for_each_attribute([&](auto& name, auto& value) {
  53. if (name == HTML::AttributeNames::width) {
  54. if (auto parsed_value = parse_dimension_value(value))
  55. style.set_property(CSS::PropertyID::Width, parsed_value.release_nonnull());
  56. } else if (name == HTML::AttributeNames::height) {
  57. if (auto parsed_value = parse_dimension_value(value))
  58. style.set_property(CSS::PropertyID::Height, parsed_value.release_nonnull());
  59. } else if (name == HTML::AttributeNames::hspace) {
  60. if (auto parsed_value = parse_dimension_value(value)) {
  61. style.set_property(CSS::PropertyID::MarginLeft, *parsed_value);
  62. style.set_property(CSS::PropertyID::MarginRight, *parsed_value);
  63. }
  64. } else if (name == HTML::AttributeNames::vspace) {
  65. if (auto parsed_value = parse_dimension_value(value)) {
  66. style.set_property(CSS::PropertyID::MarginTop, *parsed_value);
  67. style.set_property(CSS::PropertyID::MarginBottom, *parsed_value);
  68. }
  69. }
  70. });
  71. }
  72. void HTMLImageElement::parse_attribute(DeprecatedFlyString const& name, DeprecatedString const& value)
  73. {
  74. HTMLElement::parse_attribute(name, value);
  75. if (name == HTML::AttributeNames::src && !value.is_empty())
  76. m_image_loader.load(document().parse_url(value));
  77. if (name == HTML::AttributeNames::alt) {
  78. if (layout_node())
  79. verify_cast<Layout::ImageBox>(*layout_node()).dom_node_did_update_alt_text({});
  80. }
  81. }
  82. JS::GCPtr<Layout::Node> HTMLImageElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style)
  83. {
  84. return heap().allocate_without_realm<Layout::ImageBox>(document(), *this, move(style), m_image_loader);
  85. }
  86. Gfx::Bitmap const* HTMLImageElement::bitmap() const
  87. {
  88. return m_image_loader.bitmap(m_image_loader.current_frame_index());
  89. }
  90. // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-width
  91. unsigned HTMLImageElement::width() const
  92. {
  93. const_cast<DOM::Document&>(document()).update_layout();
  94. // Return the rendered width of the image, in CSS pixels, if the image is being rendered.
  95. if (auto* paint_box = this->paint_box())
  96. return paint_box->content_width().value();
  97. // NOTE: This step seems to not be in the spec, but all browsers do it.
  98. auto width_attr = get_attribute(HTML::AttributeNames::width);
  99. if (auto converted = width_attr.to_uint(); converted.has_value())
  100. return *converted;
  101. // ...or else the density-corrected intrinsic width and height of the image, in CSS pixels,
  102. // if the image has intrinsic dimensions and is available but not being rendered.
  103. if (m_image_loader.has_image())
  104. return m_image_loader.width();
  105. // ...or else 0, if the image is not available or does not have intrinsic dimensions.
  106. return 0;
  107. }
  108. void HTMLImageElement::set_width(unsigned width)
  109. {
  110. MUST(set_attribute(HTML::AttributeNames::width, DeprecatedString::number(width)));
  111. }
  112. // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-height
  113. unsigned HTMLImageElement::height() const
  114. {
  115. const_cast<DOM::Document&>(document()).update_layout();
  116. // Return the rendered height of the image, in CSS pixels, if the image is being rendered.
  117. if (auto* paint_box = this->paint_box())
  118. return paint_box->content_height().value();
  119. // NOTE: This step seems to not be in the spec, but all browsers do it.
  120. auto height_attr = get_attribute(HTML::AttributeNames::height);
  121. if (auto converted = height_attr.to_uint(); converted.has_value())
  122. return *converted;
  123. // ...or else the density-corrected intrinsic height and height of the image, in CSS pixels,
  124. // if the image has intrinsic dimensions and is available but not being rendered.
  125. if (m_image_loader.has_image())
  126. return m_image_loader.height();
  127. // ...or else 0, if the image is not available or does not have intrinsic dimensions.
  128. return 0;
  129. }
  130. void HTMLImageElement::set_height(unsigned height)
  131. {
  132. MUST(set_attribute(HTML::AttributeNames::height, DeprecatedString::number(height)));
  133. }
  134. // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-naturalwidth
  135. unsigned HTMLImageElement::natural_width() const
  136. {
  137. // Return the density-corrected intrinsic width of the image, in CSS pixels,
  138. // if the image has intrinsic dimensions and is available.
  139. if (m_image_loader.has_image())
  140. return m_image_loader.width();
  141. // ...or else 0.
  142. return 0;
  143. }
  144. // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-naturalheight
  145. unsigned HTMLImageElement::natural_height() const
  146. {
  147. // Return the density-corrected intrinsic height of the image, in CSS pixels,
  148. // if the image has intrinsic dimensions and is available.
  149. if (m_image_loader.has_image())
  150. return m_image_loader.height();
  151. // ...or else 0.
  152. return 0;
  153. }
  154. // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-complete
  155. bool HTMLImageElement::complete() const
  156. {
  157. // The IDL attribute complete must return true if any of the following conditions is true:
  158. // - Both the src attribute and the srcset attribute are omitted.
  159. if (!has_attribute(HTML::AttributeNames::src) && !has_attribute(HTML::AttributeNames::srcset))
  160. return true;
  161. // - The srcset attribute is omitted and the src attribute's value is the empty string.
  162. if (!has_attribute(HTML::AttributeNames::srcset) && attribute(HTML::AttributeNames::src) == ""sv)
  163. return true;
  164. // - The img element's current request's state is completely available and its pending request is null.
  165. // - The img element's current request's state is broken and its pending request is null.
  166. // FIXME: This is ad-hoc and should be updated once we are loading images via the Fetch mechanism.
  167. if (m_image_loader.has_loaded_or_failed())
  168. return true;
  169. return false;
  170. }
  171. Optional<ARIA::Role> HTMLImageElement::default_role() const
  172. {
  173. // https://www.w3.org/TR/html-aria/#el-img
  174. // https://www.w3.org/TR/html-aria/#el-img-no-alt
  175. if (alt().is_null() || !alt().is_empty())
  176. return ARIA::Role::img;
  177. // https://www.w3.org/TR/html-aria/#el-img-empty-alt
  178. return ARIA::Role::presentation;
  179. }
  180. }