SVGFormattingContext.cpp 9.3 KB

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