| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  | /*
 | 
					
						
							| 
									
										
										
										
											2024-10-04 13:19:50 +02:00
										 |  |  |  * Copyright (c) 2018-2023, Andreas Kling <andreas@ladybird.org> | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  |  * | 
					
						
							|  |  |  |  * SPDX-License-Identifier: BSD-2-Clause | 
					
						
							|  |  |  |  */ | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-10-16 13:54:19 +02:00
										 |  |  | #include <LibWeb/CSS/StyleValues/EdgeStyleValue.h>
 | 
					
						
							|  |  |  | #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
 | 
					
						
							|  |  |  | #include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
 | 
					
						
							| 
									
										
										
										
											2023-05-11 19:23:36 +02:00
										 |  |  | #include <LibWeb/HTML/DecodedImageData.h>
 | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  | #include <LibWeb/HTML/HTMLImageElement.h>
 | 
					
						
							| 
									
										
										
										
											2023-05-11 19:23:36 +02:00
										 |  |  | #include <LibWeb/HTML/ImageRequest.h>
 | 
					
						
							| 
									
										
										
										
											2022-06-15 21:29:55 +01:00
										 |  |  | #include <LibWeb/Painting/BorderRadiusCornerClipper.h>
 | 
					
						
							| 
									
										
										
										
											2025-02-02 15:55:26 +01:00
										 |  |  | #include <LibWeb/Painting/DisplayListRecorder.h>
 | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  | #include <LibWeb/Painting/ImagePaintable.h>
 | 
					
						
							| 
									
										
										
										
											2022-09-17 21:25:50 +02:00
										 |  |  | #include <LibWeb/Platform/FontPlugin.h>
 | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  | 
 | 
					
						
							|  |  |  | namespace Web::Painting { | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-11-15 04:01:23 +13:00
										 |  |  | GC_DEFINE_ALLOCATOR(ImagePaintable); | 
					
						
							| 
									
										
										
										
											2024-04-06 10:16:04 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-11-15 04:01:23 +13:00
										 |  |  | GC::Ref<ImagePaintable> ImagePaintable::create(Layout::SVGImageBox const& layout_box) | 
					
						
							| 
									
										
										
										
											2024-08-20 15:12:55 +01:00
										 |  |  | { | 
					
						
							| 
									
										
										
										
											2024-11-14 06:13:46 +13:00
										 |  |  |     return layout_box.heap().allocate<ImagePaintable>(layout_box, layout_box.dom_node(), false, String {}, true); | 
					
						
							| 
									
										
										
										
											2024-08-20 15:12:55 +01:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-11-15 04:01:23 +13:00
										 |  |  | GC::Ref<ImagePaintable> ImagePaintable::create(Layout::ImageBox const& layout_box) | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  | { | 
					
						
							| 
									
										
										
										
											2024-02-26 09:18:31 +01:00
										 |  |  |     auto alt = layout_box.dom_node().get_attribute_value(HTML::AttributeNames::alt); | 
					
						
							| 
									
										
										
										
											2024-11-14 06:13:46 +13:00
										 |  |  |     return layout_box.heap().allocate<ImagePaintable>(layout_box, layout_box.image_provider(), layout_box.renders_as_alt_text(), move(alt), false); | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-08-20 15:12:55 +01:00
										 |  |  | ImagePaintable::ImagePaintable(Layout::Box const& layout_box, Layout::ImageProvider const& image_provider, bool renders_as_alt_text, String alt_text, bool is_svg_image) | 
					
						
							| 
									
										
										
										
											2022-03-10 15:50:57 +01:00
										 |  |  |     : PaintableBox(layout_box) | 
					
						
							| 
									
										
										
										
											2024-08-20 15:12:55 +01:00
										 |  |  |     , m_renders_as_alt_text(renders_as_alt_text) | 
					
						
							| 
									
										
										
										
											2024-02-26 09:18:31 +01:00
										 |  |  |     , m_alt_text(move(alt_text)) | 
					
						
							| 
									
										
										
										
											2024-08-20 15:12:55 +01:00
										 |  |  |     , m_image_provider(image_provider) | 
					
						
							|  |  |  |     , m_is_svg_image(is_svg_image) | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  | { | 
					
						
							| 
									
										
										
										
											2023-08-23 18:58:42 +02:00
										 |  |  |     const_cast<DOM::Document&>(layout_box.document()).register_viewport_client(*this); | 
					
						
							| 
									
										
										
										
											2023-05-09 07:02:28 +02:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-02-26 09:38:52 +01:00
										 |  |  | void ImagePaintable::visit_edges(JS::Cell::Visitor& visitor) | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     Base::visit_edges(visitor); | 
					
						
							|  |  |  |     visitor.visit(m_image_provider.to_html_element()); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-05-09 07:02:28 +02:00
										 |  |  | void ImagePaintable::finalize() | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     Base::finalize(); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-08-23 18:58:42 +02:00
										 |  |  |     // NOTE: We unregister from the document in finalize() to avoid trouble
 | 
					
						
							|  |  |  |     //       in the scenario where our Document has already been swept by GC.
 | 
					
						
							|  |  |  |     document().unregister_viewport_client(*this); | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | void ImagePaintable::paint(PaintContext& context, PaintPhase phase) const | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     if (!is_visible()) | 
					
						
							|  |  |  |         return; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-03-10 15:50:57 +01:00
										 |  |  |     PaintableBox::paint(context, phase); | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  | 
 | 
					
						
							|  |  |  |     if (phase == PaintPhase::Foreground) { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |         auto image_rect = absolute_rect(); | 
					
						
							|  |  |  |         auto image_rect_device_pixels = context.rounded_device_rect(image_rect); | 
					
						
							| 
									
										
										
										
											2024-02-26 09:18:31 +01:00
										 |  |  |         if (m_renders_as_alt_text) { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |             auto enclosing_rect = context.enclosing_device_rect(image_rect).to_type<int>(); | 
					
						
							| 
									
										
										
										
											2024-06-23 18:40:10 +02:00
										 |  |  |             context.display_list_recorder().draw_rect(enclosing_rect, Gfx::Color::Black); | 
					
						
							| 
									
										
										
										
											2025-01-02 03:56:05 +03:00
										 |  |  |             context.display_list_recorder().draw_text(enclosing_rect, m_alt_text, *Platform::FontPlugin::the().default_font(12), Gfx::TextAlignment::Center, computed_values().color()); | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |         } else if (auto bitmap = m_image_provider.current_image_bitmap(image_rect_device_pixels.size().to_type<int>())) { | 
					
						
							|  |  |  |             ScopedCornerRadiusClip corner_clip { context, image_rect_device_pixels, normalized_border_radii_data(ShrinkRadiiForBorders::Yes) }; | 
					
						
							|  |  |  |             auto image_int_rect_device_pixels = image_rect_device_pixels.to_type<int>(); | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  |             auto bitmap_rect = bitmap->rect(); | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |             auto scaling_mode = to_gfx_scaling_mode(computed_values().image_rendering(), bitmap_rect, image_int_rect_device_pixels); | 
					
						
							| 
									
										
										
										
											2023-10-30 15:52:26 +01:00
										 |  |  |             auto bitmap_aspect_ratio = (float)bitmap_rect.height() / bitmap_rect.width(); | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |             auto image_aspect_ratio = (float)image_rect.height() / (float)image_rect.width(); | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  | 
 | 
					
						
							|  |  |  |             auto scale_x = 0.0f; | 
					
						
							|  |  |  |             auto scale_y = 0.0f; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-12-08 21:23:15 +01:00
										 |  |  |             // https://drafts.csswg.org/css-images/#the-object-fit
 | 
					
						
							| 
									
										
										
										
											2024-08-20 15:12:55 +01:00
										 |  |  |             auto object_fit = m_is_svg_image ? CSS::ObjectFit::Contain : computed_values().object_fit(); | 
					
						
							| 
									
										
										
										
											2024-12-08 21:23:15 +01:00
										 |  |  |             if (object_fit == CSS::ObjectFit::ScaleDown) { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                 if (bitmap_rect.width() > image_rect.width() || bitmap_rect.height() > image_rect.height()) { | 
					
						
							| 
									
										
										
										
											2024-12-08 21:23:15 +01:00
										 |  |  |                     object_fit = CSS::ObjectFit::Contain; | 
					
						
							|  |  |  |                 } else { | 
					
						
							|  |  |  |                     object_fit = CSS::ObjectFit::None; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-08-20 15:12:55 +01:00
										 |  |  |             switch (object_fit) { | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  |             case CSS::ObjectFit::Fill: | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                 scale_x = (float)image_rect.width() / bitmap_rect.width(); | 
					
						
							|  |  |  |                 scale_y = (float)image_rect.height() / bitmap_rect.height(); | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  |                 break; | 
					
						
							|  |  |  |             case CSS::ObjectFit::Contain: | 
					
						
							|  |  |  |                 if (bitmap_aspect_ratio >= image_aspect_ratio) { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                     scale_x = (float)image_rect.height() / bitmap_rect.height(); | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  |                     scale_y = scale_x; | 
					
						
							|  |  |  |                 } else { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                     scale_x = (float)image_rect.width() / bitmap_rect.width(); | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  |                     scale_y = scale_x; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  |                 break; | 
					
						
							|  |  |  |             case CSS::ObjectFit::Cover: | 
					
						
							|  |  |  |                 if (bitmap_aspect_ratio >= image_aspect_ratio) { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                     scale_x = (float)image_rect.width() / bitmap_rect.width(); | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  |                     scale_y = scale_x; | 
					
						
							|  |  |  |                 } else { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                     scale_x = (float)image_rect.height() / bitmap_rect.height(); | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  |                     scale_y = scale_x; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  |                 break; | 
					
						
							|  |  |  |             case CSS::ObjectFit::ScaleDown: | 
					
						
							| 
									
										
										
										
											2024-12-08 21:23:15 +01:00
										 |  |  |                 VERIFY_NOT_REACHED(); // handled outside the switch-case
 | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  |             case CSS::ObjectFit::None: | 
					
						
							|  |  |  |                 scale_x = 1; | 
					
						
							|  |  |  |                 scale_y = 1; | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |             auto scaled_bitmap_width = CSSPixels::nearest_value_for(bitmap_rect.width() * scale_x); | 
					
						
							|  |  |  |             auto scaled_bitmap_height = CSSPixels::nearest_value_for(bitmap_rect.height() * scale_y); | 
					
						
							| 
									
										
										
										
											2023-10-16 13:54:19 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |             auto residual_horizontal = image_rect.width() - scaled_bitmap_width; | 
					
						
							|  |  |  |             auto residual_vertical = image_rect.height() - scaled_bitmap_height; | 
					
						
							| 
									
										
										
										
											2023-10-16 13:54:19 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-12-08 21:23:15 +01:00
										 |  |  |             // https://drafts.csswg.org/css-images/#the-object-position
 | 
					
						
							| 
									
										
										
										
											2024-02-26 11:33:54 +01:00
										 |  |  |             auto const& object_position = computed_values().object_position(); | 
					
						
							| 
									
										
										
										
											2023-10-16 13:54:19 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |             auto offset_x = CSSPixels::from_raw(0); | 
					
						
							| 
									
										
										
										
											2024-02-26 11:33:54 +01:00
										 |  |  |             if (object_position.edge_x == CSS::PositionEdge::Left) { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                 offset_x = object_position.offset_x.to_px(layout_node(), residual_horizontal); | 
					
						
							| 
									
										
										
										
											2024-02-26 11:33:54 +01:00
										 |  |  |             } else if (object_position.edge_x == CSS::PositionEdge::Right) { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                 offset_x = residual_horizontal - object_position.offset_x.to_px(layout_node(), residual_horizontal); | 
					
						
							| 
									
										
										
										
											2023-10-16 13:54:19 +02:00
										 |  |  |             } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |             auto offset_y = CSSPixels::from_raw(0); | 
					
						
							| 
									
										
										
										
											2024-02-26 11:33:54 +01:00
										 |  |  |             if (object_position.edge_y == CSS::PositionEdge::Top) { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                 offset_y = object_position.offset_y.to_px(layout_node(), residual_vertical); | 
					
						
							| 
									
										
										
										
											2024-02-26 11:33:54 +01:00
										 |  |  |             } else if (object_position.edge_y == CSS::PositionEdge::Bottom) { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                 offset_y = residual_vertical - object_position.offset_y.to_px(layout_node(), residual_vertical); | 
					
						
							| 
									
										
										
										
											2023-10-16 13:54:19 +02:00
										 |  |  |             } | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  | 
 | 
					
						
							|  |  |  |             Gfx::IntRect draw_rect = { | 
					
						
							| 
									
										
										
										
											2024-12-19 22:07:34 +01:00
										 |  |  |                 image_int_rect_device_pixels.x() + context.rounded_device_pixels(offset_x).value(), | 
					
						
							|  |  |  |                 image_int_rect_device_pixels.y() + context.rounded_device_pixels(offset_y).value(), | 
					
						
							|  |  |  |                 context.rounded_device_pixels(scaled_bitmap_width).value(), | 
					
						
							|  |  |  |                 context.rounded_device_pixels(scaled_bitmap_height).value() | 
					
						
							| 
									
										
										
										
											2023-08-01 20:07:34 +02:00
										 |  |  |             }; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-02-04 21:51:51 +01:00
										 |  |  |             context.display_list_recorder().draw_scaled_immutable_bitmap(draw_rect, image_int_rect_device_pixels, *bitmap, scaling_mode); | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  |         } | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-08-23 18:58:42 +02:00
										 |  |  | void ImagePaintable::did_set_viewport_rect(CSSPixelRect const& viewport_rect) | 
					
						
							| 
									
										
										
										
											2023-05-09 07:02:28 +02:00
										 |  |  | { | 
					
						
							| 
									
										
										
										
											2024-02-26 09:38:52 +01:00
										 |  |  |     const_cast<Layout::ImageProvider&>(m_image_provider).set_visible_in_viewport(viewport_rect.intersects(absolute_rect())); | 
					
						
							| 
									
										
										
										
											2023-05-09 07:02:28 +02:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-03-10 14:02:25 +01:00
										 |  |  | } |