SVGFormattingContext.cpp 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. /*
  2. * Copyright (c) 2021-2023, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
  4. * Copyright (c) 2022, Tobias Christiansen <tobyase@serenityos.org>
  5. * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
  6. *
  7. * SPDX-License-Identifier: BSD-2-Clause
  8. */
  9. #include <AK/Debug.h>
  10. #include <LibWeb/Layout/BlockFormattingContext.h>
  11. #include <LibWeb/Layout/SVGFormattingContext.h>
  12. #include <LibWeb/Layout/SVGGeometryBox.h>
  13. #include <LibWeb/Layout/SVGSVGBox.h>
  14. #include <LibWeb/Layout/SVGTextBox.h>
  15. #include <LibWeb/SVG/SVGForeignObjectElement.h>
  16. #include <LibWeb/SVG/SVGSVGElement.h>
  17. namespace Web::Layout {
  18. SVGFormattingContext::SVGFormattingContext(LayoutState& state, Box const& box, FormattingContext* parent)
  19. : FormattingContext(Type::SVG, state, box, parent)
  20. {
  21. }
  22. SVGFormattingContext::~SVGFormattingContext() = default;
  23. CSSPixels SVGFormattingContext::automatic_content_width() const
  24. {
  25. return 0;
  26. }
  27. CSSPixels SVGFormattingContext::automatic_content_height() const
  28. {
  29. return 0;
  30. }
  31. struct ViewBoxTransform {
  32. CSSPixelPoint offset;
  33. double scale_factor;
  34. };
  35. // https://svgwg.org/svg2-draft/coords.html#PreserveAspectRatioAttribute
  36. static ViewBoxTransform scale_and_align_viewbox_content(SVG::PreserveAspectRatio const& preserve_aspect_ratio,
  37. SVG::ViewBox const& view_box, Gfx::FloatSize viewbox_scale, auto const& svg_box_state)
  38. {
  39. ViewBoxTransform viewbox_transform {};
  40. switch (preserve_aspect_ratio.meet_or_slice) {
  41. case SVG::PreserveAspectRatio::MeetOrSlice::Meet:
  42. // meet (the default) - Scale the graphic such that:
  43. // - aspect ratio is preserved
  44. // - the entire ‘viewBox’ is visible within the SVG viewport
  45. // - the ‘viewBox’ is scaled up as much as possible, while still meeting the other criteria
  46. viewbox_transform.scale_factor = min(viewbox_scale.width(), viewbox_scale.height());
  47. break;
  48. case SVG::PreserveAspectRatio::MeetOrSlice::Slice:
  49. // slice - Scale the graphic such that:
  50. // aspect ratio is preserved
  51. // the entire SVG viewport is covered by the ‘viewBox’
  52. // the ‘viewBox’ is scaled down as much as possible, while still meeting the other criteria
  53. viewbox_transform.scale_factor = max(viewbox_scale.width(), viewbox_scale.height());
  54. break;
  55. default:
  56. VERIFY_NOT_REACHED();
  57. }
  58. // Handle X alignment:
  59. if (svg_box_state.has_definite_width()) {
  60. switch (preserve_aspect_ratio.align) {
  61. case SVG::PreserveAspectRatio::Align::xMinYMin:
  62. case SVG::PreserveAspectRatio::Align::xMinYMid:
  63. case SVG::PreserveAspectRatio::Align::xMinYMax:
  64. // Align the <min-x> of the element's ‘viewBox’ with the smallest X value of the SVG viewport.
  65. viewbox_transform.offset.translate_by(0, 0);
  66. break;
  67. case SVG::PreserveAspectRatio::Align::None: {
  68. // Do not force uniform scaling. Scale the graphic content of the given element non-uniformly
  69. // if necessary such that the element's bounding box exactly matches the SVG viewport rectangle.
  70. // FIXME: None is unimplemented (treat as xMidYMid)
  71. [[fallthrough]];
  72. }
  73. case SVG::PreserveAspectRatio::Align::xMidYMin:
  74. case SVG::PreserveAspectRatio::Align::xMidYMid:
  75. case SVG::PreserveAspectRatio::Align::xMidYMax:
  76. // Align the midpoint X value of the element's ‘viewBox’ with the midpoint X value of the SVG viewport.
  77. viewbox_transform.offset.translate_by((svg_box_state.content_width() - (view_box.width * viewbox_transform.scale_factor)) / 2, 0);
  78. break;
  79. case SVG::PreserveAspectRatio::Align::xMaxYMin:
  80. case SVG::PreserveAspectRatio::Align::xMaxYMid:
  81. case SVG::PreserveAspectRatio::Align::xMaxYMax:
  82. // Align the <min-x>+<width> of the element's ‘viewBox’ with the maximum X value of the SVG viewport.
  83. viewbox_transform.offset.translate_by((svg_box_state.content_width() - (view_box.width * viewbox_transform.scale_factor)), 0);
  84. break;
  85. default:
  86. VERIFY_NOT_REACHED();
  87. }
  88. }
  89. if (svg_box_state.has_definite_width()) {
  90. switch (preserve_aspect_ratio.align) {
  91. case SVG::PreserveAspectRatio::Align::xMinYMin:
  92. case SVG::PreserveAspectRatio::Align::xMidYMin:
  93. case SVG::PreserveAspectRatio::Align::xMaxYMin:
  94. // Align the <min-y> of the element's ‘viewBox’ with the smallest Y value of the SVG viewport.
  95. viewbox_transform.offset.translate_by(0, 0);
  96. break;
  97. case SVG::PreserveAspectRatio::Align::None: {
  98. // Do not force uniform scaling. Scale the graphic content of the given element non-uniformly
  99. // if necessary such that the element's bounding box exactly matches the SVG viewport rectangle.
  100. // FIXME: None is unimplemented (treat as xMidYMid)
  101. [[fallthrough]];
  102. }
  103. case SVG::PreserveAspectRatio::Align::xMinYMid:
  104. case SVG::PreserveAspectRatio::Align::xMidYMid:
  105. case SVG::PreserveAspectRatio::Align::xMaxYMid:
  106. // Align the midpoint Y value of the element's ‘viewBox’ with the midpoint Y value of the SVG viewport.
  107. viewbox_transform.offset.translate_by(0, (svg_box_state.content_height() - (view_box.height * viewbox_transform.scale_factor)) / 2);
  108. break;
  109. case SVG::PreserveAspectRatio::Align::xMinYMax:
  110. case SVG::PreserveAspectRatio::Align::xMidYMax:
  111. case SVG::PreserveAspectRatio::Align::xMaxYMax:
  112. // Align the <min-y>+<height> of the element's ‘viewBox’ with the maximum Y value of the SVG viewport.
  113. viewbox_transform.offset.translate_by(0, (svg_box_state.content_height() - (view_box.height * viewbox_transform.scale_factor)));
  114. break;
  115. default:
  116. VERIFY_NOT_REACHED();
  117. }
  118. }
  119. return viewbox_transform;
  120. }
  121. void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, AvailableSpace const& available_space)
  122. {
  123. auto& svg_svg_element = verify_cast<SVG::SVGSVGElement>(*box.dom_node());
  124. auto svg_box_state = m_state.get(box);
  125. auto root_offset = svg_box_state.offset;
  126. box.for_each_child_of_type<BlockContainer>([&](BlockContainer const& child_box) {
  127. if (is<SVG::SVGForeignObjectElement>(child_box.dom_node())) {
  128. Layout::BlockFormattingContext bfc(m_state, child_box, this);
  129. bfc.run(child_box, LayoutMode::Normal, available_space);
  130. auto& child_state = m_state.get_mutable(child_box);
  131. child_state.set_content_offset(child_state.offset.translated(root_offset));
  132. }
  133. return IterationDecision::Continue;
  134. });
  135. box.for_each_in_subtree_of_type<Box>([&](Box const& descendant) {
  136. if (is<SVGGeometryBox>(descendant)) {
  137. auto const& geometry_box = static_cast<SVGGeometryBox const&>(descendant);
  138. auto& geometry_box_state = m_state.get_mutable(geometry_box);
  139. auto& dom_node = const_cast<SVGGeometryBox&>(geometry_box).dom_node();
  140. auto& path = dom_node.get_path();
  141. auto path_transform = dom_node.get_transform();
  142. double viewbox_scale = 1;
  143. auto maybe_view_box = dom_node.view_box();
  144. if (maybe_view_box.has_value()) {
  145. // FIXME: This should allow just one of width or height to be specified.
  146. // E.g. We should be able to layout <svg width="100%"> where height is unspecified/auto.
  147. if (!svg_box_state.has_definite_width() || !svg_box_state.has_definite_height()) {
  148. dbgln_if(LIBWEB_CSS_DEBUG, "FIXME: Attempting to layout indefinitely sized SVG with a viewbox -- this likely won't work!");
  149. }
  150. auto view_box = maybe_view_box.value();
  151. auto scale_width = svg_box_state.has_definite_width() ? svg_box_state.content_width() / view_box.width : 1;
  152. auto scale_height = svg_box_state.has_definite_height() ? svg_box_state.content_height() / view_box.height : 1;
  153. // The initial value for preserveAspectRatio is xMidYMid meet.
  154. auto preserve_aspect_ratio = svg_svg_element.preserve_aspect_ratio().value_or(SVG::PreserveAspectRatio {});
  155. auto viewbox_transform = scale_and_align_viewbox_content(preserve_aspect_ratio, view_box, { scale_width, scale_height }, svg_box_state);
  156. path_transform = Gfx::AffineTransform {}.translate(viewbox_transform.offset.to_type<double>().to_type<float>()).scale(viewbox_transform.scale_factor, viewbox_transform.scale_factor).translate({ -view_box.min_x, -view_box.min_y }).multiply(path_transform);
  157. viewbox_scale = viewbox_transform.scale_factor;
  158. }
  159. // Stroke increases the path's size by stroke_width/2 per side.
  160. auto path_bounding_box = path_transform.map(path.bounding_box()).to_type<CSSPixels>();
  161. CSSPixels stroke_width = static_cast<double>(geometry_box.dom_node().visible_stroke_width()) * viewbox_scale;
  162. path_bounding_box.inflate(stroke_width, stroke_width);
  163. geometry_box_state.set_content_offset(path_bounding_box.top_left());
  164. geometry_box_state.set_content_width(path_bounding_box.width());
  165. geometry_box_state.set_content_height(path_bounding_box.height());
  166. } else if (is<SVGSVGBox>(descendant)) {
  167. SVGFormattingContext nested_context(m_state, descendant, this);
  168. nested_context.run(descendant, layout_mode, available_space);
  169. } else if (is<SVGTextBox>(descendant)) {
  170. auto const& svg_text_box = static_cast<SVGTextBox const&>(descendant);
  171. // NOTE: This hack creates a layout state to ensure the existence of a paintable box node in LayoutState::commit(), even when none of the values from UsedValues impact the SVG text.
  172. m_state.get_mutable(svg_text_box);
  173. } else if (is<SVGGraphicsBox>(descendant)) {
  174. // Same hack as above.
  175. // FIXME: This should be sized based on its children.
  176. auto const& svg_graphics_box = static_cast<SVGGraphicsBox const&>(descendant);
  177. m_state.get_mutable(svg_graphics_box);
  178. }
  179. return IterationDecision::Continue;
  180. });
  181. }
  182. }