Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-10-20 08:03:21 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Userland/Libraries/LibWeb/Layout/SVGFormattingContext.cpp

207 lines
10 KiB
C++
Raw Normal View History

LibWeb: Add SVGFormattingContext to handle SVG box trees Instead of trying to layout SVG boxes as if they are regular CSS boxes, let's invent an "SVG formatting context" and let it manage SVG boxes. To facilitate this, Layout::SVGBox no longer inherits from ReplacedBox, and is instead a simple, "inline-block" style BlockBox.
2021-09-17 23:12:16 +02:00
/*
LibWeb: Layout <svg> nested inside <svg> This is far from perfect, but let's at least make an attempt at laying out <svg> when encountering it inside another <svg>. This makes https://awesomekling.substack.com actually load and render instead of asserting. :^)
2023-04-18 19:32:00 +02:00
* Copyright (c) 2021-2023, Andreas Kling <kling@serenityos.org>
LibWeb: Remove content-size hack from SVGFormattingContext Everything functions fine without it. :^)
2022-02-16 16:32:18 +00:00
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
LibWeb: Add support for 'view-box' attribute to SVGs This patch begins the support for the 'view-box' attribute that can be attached to <svg>'s. The FormattingContext determines the size of the Element according to the specified 'width' and 'height' or if they are not given by the 'viewbox' or by the bounding box of the path if nothing is specified. When we try to paint a SVG Path that belongs to a <svg> that has the 'view-box' and a specified 'height'/'width', all the parts of the path get scaled/moved accordingly. There probably are many edge cases and bugs still to be found, but this is a nice start. :^)
2022-02-27 21:00:04 +01:00
* Copyright (c) 2022, Tobias Christiansen <tobyase@serenityos.org>
LibWeb: Remove SVG sizing hack and fix viewbox scaling Previously, if you had an SVG with a viewbox and a definite width and height, then all SVGGeometryBox boxes within that SVG would have a width and height set to the size of the parent SVG. This broke hit testing for SVG paths, and didn't make much sense. It seems like the SVG sizing hack was patching over the incorrect logic in viewbox_scaling() and the incorrect path sizing (which was never reached). Before this change the view box scaling was: element_dimension / viewbox_dimension Which only seemed to work because of the SVG sizing hack that made all paths the size of the containing SVG. After this change SVGGeometryBoxes are (in most cases) sized correctly based on their bounding boxes, which allows hit testing to function, and the view box scaling is updated now to: containing_SVG_dimension / viewbox_dimension Which works with one less hack :^) This now also handles centering the viewbox within the parent SVG element and applying any tranforms to the bounding box. This still a bit ad-hoc, but much more closely matches other browsers now.
2023-04-10 12:28:55 +01:00
* Copyright (c) 2023, MacDue <macdue@dueutil.tech>
LibWeb: Add SVGFormattingContext to handle SVG box trees Instead of trying to layout SVG boxes as if they are regular CSS boxes, let's invent an "SVG formatting context" and let it manage SVG boxes. To facilitate this, Layout::SVGBox no longer inherits from ReplacedBox, and is instead a simple, "inline-block" style BlockBox.
2021-09-17 23:12:16 +02:00
*
* SPDX-License-Identifier: BSD-2-Clause
*/
LibWeb: Put debug spam about indefinitely sized SVGs behind a flag
2023-05-31 11:48:29 +02:00
#include <AK/Debug.h>
LibWeb: Add naive layout for SVG foreign objects We now layout foreign objects as if they form a nested block formatting context. This probably isn't the most correct way to do this, but it's a start.
2022-11-10 13:54:57 +01:00
#include <LibWeb/Layout/BlockFormattingContext.h>
LibWeb: Add SVGFormattingContext to handle SVG box trees Instead of trying to layout SVG boxes as if they are regular CSS boxes, let's invent an "SVG formatting context" and let it manage SVG boxes. To facilitate this, Layout::SVGBox no longer inherits from ReplacedBox, and is instead a simple, "inline-block" style BlockBox.
2021-09-17 23:12:16 +02:00
#include <LibWeb/Layout/SVGFormattingContext.h>
LibWeb: Rename SVGPathBox -> SVGGeometryBox This fits better since it's now used by all SVGGeometryElements.
2022-02-11 12:37:22 +00:00
#include <LibWeb/Layout/SVGGeometryBox.h>
LibWeb: Layout <svg> nested inside <svg> This is far from perfect, but let's at least make an attempt at laying out <svg> when encountering it inside another <svg>. This makes https://awesomekling.substack.com actually load and render instead of asserting. :^)
2023-04-18 19:32:00 +02:00
#include <LibWeb/Layout/SVGSVGBox.h>
LibWeb: Implement painting for svg text The implementation of painting for SVG text follows the same pattern as the implementation of painting for SVG geometries. However, instead of reusing the existing PaintableWithLines to draw text, a new class called SVGTextPaintable is introduced. because everything that is painted inside an SVG is expected to inherit from SVGGraphicsPaintable. Therefore reusing the text painting from regular text nodes would require significant refactoring.
2023-06-08 21:32:33 +03:00
#include <LibWeb/Layout/SVGTextBox.h>
LibWeb: Add naive layout for SVG foreign objects We now layout foreign objects as if they form a nested block formatting context. This probably isn't the most correct way to do this, but it's a start.
2022-11-10 13:54:57 +01:00
#include <LibWeb/SVG/SVGForeignObjectElement.h>
LibWeb: Add support for 'view-box' attribute to SVGs This patch begins the support for the 'view-box' attribute that can be attached to <svg>'s. The FormattingContext determines the size of the Element according to the specified 'width' and 'height' or if they are not given by the 'viewbox' or by the bounding box of the path if nothing is specified. When we try to paint a SVG Path that belongs to a <svg> that has the 'view-box' and a specified 'height'/'width', all the parts of the path get scaled/moved accordingly. There probably are many edge cases and bugs still to be found, but this is a nice start. :^)
2022-02-27 21:00:04 +01:00
#include <LibWeb/SVG/SVGSVGElement.h>
LibWeb: Add SVGFormattingContext to handle SVG box trees Instead of trying to layout SVG boxes as if they are regular CSS boxes, let's invent an "SVG formatting context" and let it manage SVG boxes. To facilitate this, Layout::SVGBox no longer inherits from ReplacedBox, and is instead a simple, "inline-block" style BlockBox.
2021-09-17 23:12:16 +02:00
namespace Web::Layout {
LibWeb: Rename FormattingState to LayoutState This seems a bit more descriptive (and also a bit shorter).
2022-07-16 23:30:32 +02:00
SVGFormattingContext::SVGFormattingContext(LayoutState& state, Box const& box, FormattingContext* parent)
LibWeb: Add Layout::FormattingState The purpose of this new object will be to keep track of various states during an ongoing layout. Until now, we've been updating layout tree nodes as we go during layout, which adds an invisible layer of implicit serialization to the whole layout system. My idea with FormattingState is that running layout will produce a result entirely contained within the FormattingState object. At the end of layout, it can then be applied to the layout tree, or simply queried for some metrics we were trying to determine. When doing subtree layouts to determine intrinsic sizes, we will eventually be able to clone the current FormattingState, and run the subtree layout in isolation, opening up opportunities for parallelism. This first patch doesn't go very far though, it merely adds the object as a skeleton class, and makes sure the root BFC has one. :^)
2022-02-19 20:13:47 +01:00
: FormattingContext(Type::SVG, state, box, parent)
LibWeb: Add SVGFormattingContext to handle SVG box trees Instead of trying to layout SVG boxes as if they are regular CSS boxes, let's invent an "SVG formatting context" and let it manage SVG boxes. To facilitate this, Layout::SVGBox no longer inherits from ReplacedBox, and is instead a simple, "inline-block" style BlockBox.
2021-09-17 23:12:16 +02:00
{
}
Libraries: Use default constructors/destructors in LibWeb https://isocpp.github.io/CppCoreGuidelines/CppCoreGuidelines#cother-other-default-operation-rules "The compiler is more likely to get the default semantics right and you cannot implement these functions better than the compiler."
2022-03-14 13:21:51 -06:00
SVGFormattingContext::~SVGFormattingContext() = default;
LibWeb: Add SVGFormattingContext to handle SVG box trees Instead of trying to layout SVG boxes as if they are regular CSS boxes, let's invent an "SVG formatting context" and let it manage SVG boxes. To facilitate this, Layout::SVGBox no longer inherits from ReplacedBox, and is instead a simple, "inline-block" style BlockBox.
2021-09-17 23:12:16 +02:00
LibWeb: Let FormattingContext decide the automatic width of its root Instead of special-casing FlexFormattingContext in the intrinsic sizing layout helpers, add FormattingContext::automatic_content_width() and let each context subclass decide what that means. No behavior change here, just moving this responsibility.
2023-03-19 09:57:31 +01:00
CSSPixels SVGFormattingContext::automatic_content_width() const
{
return 0;
}
LibWeb: Convert FormattingContext to new pixel units Just FormattingContext and AvailableSpace, and the minor adjustments to make everything else work.
2022-11-23 17:46:10 +00:00
CSSPixels SVGFormattingContext::automatic_content_height() const
LibWeb: Add FormattingContext::automatic_content_height() This function should return the automatic height of the formatting context's root box. Until now, we've been relying on some magical handshakes between parent and child context, when negotiating the height of child context root boxes. This is a step towards something more reasonable.
2022-09-24 13:39:43 +02:00
{
return 0;
}
LibWeb: Implement SVG `preserveAspectRatio` attribute This attribute is used to define how the viewBox should be scaled. Previously the behaviour implemented was that of "xMidYMid meet", now all of them work (expect none :P). With this the Discord login backend is now correctly scaled/positioned. This also brings our SVG code a little closer to the spec! With spec comments and all :^) (Minor non-visible update to layout tests)
2023-04-17 01:20:24 +01:00
struct ViewBoxTransform {
CSSPixelPoint offset;
LibWeb: Make CSSPixels and Length use 64-bit (double) floating point This fixes a plethora of rounding problems on many websites. In the future, we may want to replace this with fixed-point arithmetic (bug #18566) for performance (and consistency with other engines), but in the meantime this makes the web look a bit better. :^) There's a lot more things that could be converted to doubles, which would reduce the amount of casting necessary in this patch. We can do that incrementally, however.
2023-05-24 10:50:57 +02:00
double scale_factor;
LibWeb: Implement SVG `preserveAspectRatio` attribute This attribute is used to define how the viewBox should be scaled. Previously the behaviour implemented was that of "xMidYMid meet", now all of them work (expect none :P). With this the Discord login backend is now correctly scaled/positioned. This also brings our SVG code a little closer to the spec! With spec comments and all :^) (Minor non-visible update to layout tests)
2023-04-17 01:20:24 +01:00
};
// https://svgwg.org/svg2-draft/coords.html#PreserveAspectRatioAttribute
static ViewBoxTransform scale_and_align_viewbox_content(SVG::PreserveAspectRatio const& preserve_aspect_ratio,
SVG::ViewBox const& view_box, Gfx::FloatSize viewbox_scale, auto const& svg_box_state)
{
ViewBoxTransform viewbox_transform {};
switch (preserve_aspect_ratio.meet_or_slice) {
case SVG::PreserveAspectRatio::MeetOrSlice::Meet:
// meet (the default) - Scale the graphic such that:
// - aspect ratio is preserved
// - the entire ‘viewBox’ is visible within the SVG viewport
// - the ‘viewBox’ is scaled up as much as possible, while still meeting the other criteria
viewbox_transform.scale_factor = min(viewbox_scale.width(), viewbox_scale.height());
break;
case SVG::PreserveAspectRatio::MeetOrSlice::Slice:
// slice - Scale the graphic such that:
// aspect ratio is preserved
// the entire SVG viewport is covered by the ‘viewBox’
// the ‘viewBox’ is scaled down as much as possible, while still meeting the other criteria
viewbox_transform.scale_factor = max(viewbox_scale.width(), viewbox_scale.height());
break;
default:
VERIFY_NOT_REACHED();
}
// Handle X alignment:
if (svg_box_state.has_definite_width()) {
switch (preserve_aspect_ratio.align) {
case SVG::PreserveAspectRatio::Align::xMinYMin:
case SVG::PreserveAspectRatio::Align::xMinYMid:
case SVG::PreserveAspectRatio::Align::xMinYMax:
// Align the <min-x> of the element's ‘viewBox’ with the smallest X value of the SVG viewport.
viewbox_transform.offset.translate_by(0, 0);
break;
case SVG::PreserveAspectRatio::Align::None: {
// Do not force uniform scaling. Scale the graphic content of the given element non-uniformly
// if necessary such that the element's bounding box exactly matches the SVG viewport rectangle.
// FIXME: None is unimplemented (treat as xMidYMid)
[[fallthrough]];
}
case SVG::PreserveAspectRatio::Align::xMidYMin:
case SVG::PreserveAspectRatio::Align::xMidYMid:
case SVG::PreserveAspectRatio::Align::xMidYMax:
// Align the midpoint X value of the element's ‘viewBox’ with the midpoint X value of the SVG viewport.
viewbox_transform.offset.translate_by((svg_box_state.content_width() - (view_box.width * viewbox_transform.scale_factor)) / 2, 0);
break;
case SVG::PreserveAspectRatio::Align::xMaxYMin:
case SVG::PreserveAspectRatio::Align::xMaxYMid:
case SVG::PreserveAspectRatio::Align::xMaxYMax:
// Align the <min-x>+<width> of the element's ‘viewBox’ with the maximum X value of the SVG viewport.
viewbox_transform.offset.translate_by((svg_box_state.content_width() - (view_box.width * viewbox_transform.scale_factor)), 0);
break;
default:
VERIFY_NOT_REACHED();
}
}
if (svg_box_state.has_definite_width()) {
switch (preserve_aspect_ratio.align) {
case SVG::PreserveAspectRatio::Align::xMinYMin:
case SVG::PreserveAspectRatio::Align::xMidYMin:
case SVG::PreserveAspectRatio::Align::xMaxYMin:
// Align the <min-y> of the element's ‘viewBox’ with the smallest Y value of the SVG viewport.
viewbox_transform.offset.translate_by(0, 0);
break;
case SVG::PreserveAspectRatio::Align::None: {
// Do not force uniform scaling. Scale the graphic content of the given element non-uniformly
// if necessary such that the element's bounding box exactly matches the SVG viewport rectangle.
// FIXME: None is unimplemented (treat as xMidYMid)
[[fallthrough]];
}
case SVG::PreserveAspectRatio::Align::xMinYMid:
case SVG::PreserveAspectRatio::Align::xMidYMid:
case SVG::PreserveAspectRatio::Align::xMaxYMid:
// Align the midpoint Y value of the element's ‘viewBox’ with the midpoint Y value of the SVG viewport.
viewbox_transform.offset.translate_by(0, (svg_box_state.content_height() - (view_box.height * viewbox_transform.scale_factor)) / 2);
break;
case SVG::PreserveAspectRatio::Align::xMinYMax:
case SVG::PreserveAspectRatio::Align::xMidYMax:
case SVG::PreserveAspectRatio::Align::xMaxYMax:
// Align the <min-y>+<height> of the element's ‘viewBox’ with the maximum Y value of the SVG viewport.
viewbox_transform.offset.translate_by(0, (svg_box_state.content_height() - (view_box.height * viewbox_transform.scale_factor)));
break;
default:
VERIFY_NOT_REACHED();
}
}
return viewbox_transform;
}
LibWeb: Layout <svg> nested inside <svg> This is far from perfect, but let's at least make an attempt at laying out <svg> when encountering it inside another <svg>. This makes https://awesomekling.substack.com actually load and render instead of asserting. :^)
2023-04-18 19:32:00 +02:00
void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, AvailableSpace const& available_space)
LibWeb: Add SVGFormattingContext to handle SVG box trees Instead of trying to layout SVG boxes as if they are regular CSS boxes, let's invent an "SVG formatting context" and let it manage SVG boxes. To facilitate this, Layout::SVGBox no longer inherits from ReplacedBox, and is instead a simple, "inline-block" style BlockBox.
2021-09-17 23:12:16 +02:00
{
LibWeb: Cache reference to <svg> element in SVGFormattingContext
2022-07-11 00:27:54 +02:00
auto& svg_svg_element = verify_cast<SVG::SVGSVGElement>(*box.dom_node());
LibWeb: Remove SVG sizing hack and fix viewbox scaling Previously, if you had an SVG with a viewbox and a definite width and height, then all SVGGeometryBox boxes within that SVG would have a width and height set to the size of the parent SVG. This broke hit testing for SVG paths, and didn't make much sense. It seems like the SVG sizing hack was patching over the incorrect logic in viewbox_scaling() and the incorrect path sizing (which was never reached). Before this change the view box scaling was: element_dimension / viewbox_dimension Which only seemed to work because of the SVG sizing hack that made all paths the size of the containing SVG. After this change SVGGeometryBoxes are (in most cases) sized correctly based on their bounding boxes, which allows hit testing to function, and the view box scaling is updated now to: containing_SVG_dimension / viewbox_dimension Which works with one less hack :^) This now also handles centering the viewbox within the parent SVG element and applying any tranforms to the bounding box. This still a bit ad-hoc, but much more closely matches other browsers now.
2023-04-10 12:28:55 +01:00
auto svg_box_state = m_state.get(box);
auto root_offset = svg_box_state.offset;
LibWeb: Add naive layout for SVG foreign objects We now layout foreign objects as if they form a nested block formatting context. This probably isn't the most correct way to do this, but it's a start.
2022-11-10 13:54:57 +01:00
box.for_each_child_of_type<BlockContainer>([&](BlockContainer const& child_box) {
if (is<SVG::SVGForeignObjectElement>(child_box.dom_node())) {
Layout::BlockFormattingContext bfc(m_state, child_box, this);
bfc.run(child_box, LayoutMode::Normal, available_space);
auto& child_state = m_state.get_mutable(child_box);
child_state.set_content_offset(child_state.offset.translated(root_offset));
}
return IterationDecision::Continue;
});
LibWeb: Layout <svg> nested inside <svg> This is far from perfect, but let's at least make an attempt at laying out <svg> when encountering it inside another <svg>. This makes https://awesomekling.substack.com actually load and render instead of asserting. :^)
2023-04-18 19:32:00 +02:00
box.for_each_in_subtree_of_type<Box>([&](Box const& descendant) {
LibWeb: Rename SVGPathBox -> SVGGeometryBox This fits better since it's now used by all SVGGeometryElements.
2022-02-11 12:37:22 +00:00
if (is<SVGGeometryBox>(descendant)) {
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto const& geometry_box = static_cast<SVGGeometryBox const&>(descendant);
LibWeb: Add support for 'view-box' attribute to SVGs This patch begins the support for the 'view-box' attribute that can be attached to <svg>'s. The FormattingContext determines the size of the Element according to the specified 'width' and 'height' or if they are not given by the 'viewbox' or by the bounding box of the path if nothing is specified. When we try to paint a SVG Path that belongs to a <svg> that has the 'view-box' and a specified 'height'/'width', all the parts of the path get scaled/moved accordingly. There probably are many edge cases and bugs still to be found, but this is a nice start. :^)
2022-02-27 21:00:04 +01:00
auto& geometry_box_state = m_state.get_mutable(geometry_box);
auto& dom_node = const_cast<SVGGeometryBox&>(geometry_box).dom_node();
auto& path = dom_node.get_path();
LibWeb: Implement SVG `preserveAspectRatio` attribute This attribute is used to define how the viewBox should be scaled. Previously the behaviour implemented was that of "xMidYMid meet", now all of them work (expect none :P). With this the Discord login backend is now correctly scaled/positioned. This also brings our SVG code a little closer to the spec! With spec comments and all :^) (Minor non-visible update to layout tests)
2023-04-17 01:20:24 +01:00
auto path_transform = dom_node.get_transform();
LibWeb: Give SVG geometry elements a position This makes the selected-in-the-inspector outline appear in the right place. We take the stroke-width into account when producing the bounding box, which makes the fit nice and snug. :^)
2022-02-16 15:17:50 +00:00
LibWeb: Make CSSPixels and Length use 64-bit (double) floating point This fixes a plethora of rounding problems on many websites. In the future, we may want to replace this with fixed-point arithmetic (bug #18566) for performance (and consistency with other engines), but in the meantime this makes the web look a bit better. :^) There's a lot more things that could be converted to doubles, which would reduce the amount of casting necessary in this patch. We can do that incrementally, however.
2023-05-24 10:50:57 +02:00
double viewbox_scale = 1;
LibWeb: Use viewbox attribute in SVG symbol element Previously when a viewBox was passed to a SVG symbol element it would not be taken into account when drawing the SVG.
2023-07-31 18:37:44 +02:00
auto maybe_view_box = dom_node.view_box();
LibWeb: Add support for 'view-box' attribute to SVGs This patch begins the support for the 'view-box' attribute that can be attached to <svg>'s. The FormattingContext determines the size of the Element according to the specified 'width' and 'height' or if they are not given by the 'viewbox' or by the bounding box of the path if nothing is specified. When we try to paint a SVG Path that belongs to a <svg> that has the 'view-box' and a specified 'height'/'width', all the parts of the path get scaled/moved accordingly. There probably are many edge cases and bugs still to be found, but this is a nice start. :^)
2022-02-27 21:00:04 +01:00
if (maybe_view_box.has_value()) {
LibWeb: Remove SVG sizing hack and fix viewbox scaling Previously, if you had an SVG with a viewbox and a definite width and height, then all SVGGeometryBox boxes within that SVG would have a width and height set to the size of the parent SVG. This broke hit testing for SVG paths, and didn't make much sense. It seems like the SVG sizing hack was patching over the incorrect logic in viewbox_scaling() and the incorrect path sizing (which was never reached). Before this change the view box scaling was: element_dimension / viewbox_dimension Which only seemed to work because of the SVG sizing hack that made all paths the size of the containing SVG. After this change SVGGeometryBoxes are (in most cases) sized correctly based on their bounding boxes, which allows hit testing to function, and the view box scaling is updated now to: containing_SVG_dimension / viewbox_dimension Which works with one less hack :^) This now also handles centering the viewbox within the parent SVG element and applying any tranforms to the bounding box. This still a bit ad-hoc, but much more closely matches other browsers now.
2023-04-10 12:28:55 +01:00
// FIXME: This should allow just one of width or height to be specified.
// E.g. We should be able to layout <svg width="100%"> where height is unspecified/auto.
if (!svg_box_state.has_definite_width() || !svg_box_state.has_definite_height()) {
LibWeb: Put debug spam about indefinitely sized SVGs behind a flag
2023-05-31 11:48:29 +02:00
dbgln_if(LIBWEB_CSS_DEBUG, "FIXME: Attempting to layout indefinitely sized SVG with a viewbox -- this likely won't work!");
LibWeb: Remove SVG sizing hack and fix viewbox scaling Previously, if you had an SVG with a viewbox and a definite width and height, then all SVGGeometryBox boxes within that SVG would have a width and height set to the size of the parent SVG. This broke hit testing for SVG paths, and didn't make much sense. It seems like the SVG sizing hack was patching over the incorrect logic in viewbox_scaling() and the incorrect path sizing (which was never reached). Before this change the view box scaling was: element_dimension / viewbox_dimension Which only seemed to work because of the SVG sizing hack that made all paths the size of the containing SVG. After this change SVGGeometryBoxes are (in most cases) sized correctly based on their bounding boxes, which allows hit testing to function, and the view box scaling is updated now to: containing_SVG_dimension / viewbox_dimension Which works with one less hack :^) This now also handles centering the viewbox within the parent SVG element and applying any tranforms to the bounding box. This still a bit ad-hoc, but much more closely matches other browsers now.
2023-04-10 12:28:55 +01:00
}
LibWeb: Implement SVG `preserveAspectRatio` attribute This attribute is used to define how the viewBox should be scaled. Previously the behaviour implemented was that of "xMidYMid meet", now all of them work (expect none :P). With this the Discord login backend is now correctly scaled/positioned. This also brings our SVG code a little closer to the spec! With spec comments and all :^) (Minor non-visible update to layout tests)
2023-04-17 01:20:24 +01:00
auto view_box = maybe_view_box.value();
LibWeb+WebContent: Forbid access to underlying type of CSSPixels Although DistinctNumeric, which is supposed to abstract the underlying type, was used to represent CSSPixels, we have a whole bunch of places in the layout code that assume CSSPixels::value() returns a floating-point type. This assumption makes it difficult to replace the underlying type in CSSPixels with a non-floating type. To make it easier to transition CSSPixels to fixed-point math, one step we can take is to prevent access to the underlying type using value() and instead use explicit conversions with the to_float(), to_double(), and to_int() methods.
2023-06-12 21:37:35 +03:00
auto scale_width = svg_box_state.has_definite_width() ? svg_box_state.content_width() / view_box.width : 1;
auto scale_height = svg_box_state.has_definite_height() ? svg_box_state.content_height() / view_box.height : 1;
LibWeb: Remove SVG sizing hack and fix viewbox scaling Previously, if you had an SVG with a viewbox and a definite width and height, then all SVGGeometryBox boxes within that SVG would have a width and height set to the size of the parent SVG. This broke hit testing for SVG paths, and didn't make much sense. It seems like the SVG sizing hack was patching over the incorrect logic in viewbox_scaling() and the incorrect path sizing (which was never reached). Before this change the view box scaling was: element_dimension / viewbox_dimension Which only seemed to work because of the SVG sizing hack that made all paths the size of the containing SVG. After this change SVGGeometryBoxes are (in most cases) sized correctly based on their bounding boxes, which allows hit testing to function, and the view box scaling is updated now to: containing_SVG_dimension / viewbox_dimension Which works with one less hack :^) This now also handles centering the viewbox within the parent SVG element and applying any tranforms to the bounding box. This still a bit ad-hoc, but much more closely matches other browsers now.
2023-04-10 12:28:55 +01:00
LibWeb: Implement SVG `preserveAspectRatio` attribute This attribute is used to define how the viewBox should be scaled. Previously the behaviour implemented was that of "xMidYMid meet", now all of them work (expect none :P). With this the Discord login backend is now correctly scaled/positioned. This also brings our SVG code a little closer to the spec! With spec comments and all :^) (Minor non-visible update to layout tests)
2023-04-17 01:20:24 +01:00
// The initial value for preserveAspectRatio is xMidYMid meet.
auto preserve_aspect_ratio = svg_svg_element.preserve_aspect_ratio().value_or(SVG::PreserveAspectRatio {});
LibWeb: Use fixed-point saturated arithmetics for CSSPixels Using fixed-point saturated arithmetics for CSSPixels allows to avoid accumulating floating-point errors. This implementation is not complete yet: currently saturated arithmetics implemented only for addition. But it is enough to not regress any of layout tests we have :) See https://github.com/SerenityOS/serenity/issues/18566
2023-07-23 01:09:39 +02:00
auto viewbox_transform = scale_and_align_viewbox_content(preserve_aspect_ratio, view_box, { scale_width, scale_height }, svg_box_state);
LibWeb: Allow (explicitly) converting CSSPixels to float and int ...and remove some unnecessary cast chains.
2023-08-07 22:12:21 +01:00
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);
LibWeb: Implement SVG `preserveAspectRatio` attribute This attribute is used to define how the viewBox should be scaled. Previously the behaviour implemented was that of "xMidYMid meet", now all of them work (expect none :P). With this the Discord login backend is now correctly scaled/positioned. This also brings our SVG code a little closer to the spec! With spec comments and all :^) (Minor non-visible update to layout tests)
2023-04-17 01:20:24 +01:00
viewbox_scale = viewbox_transform.scale_factor;
LibWeb: Add support for 'view-box' attribute to SVGs This patch begins the support for the 'view-box' attribute that can be attached to <svg>'s. The FormattingContext determines the size of the Element according to the specified 'width' and 'height' or if they are not given by the 'viewbox' or by the bounding box of the path if nothing is specified. When we try to paint a SVG Path that belongs to a <svg> that has the 'view-box' and a specified 'height'/'width', all the parts of the path get scaled/moved accordingly. There probably are many edge cases and bugs still to be found, but this is a nice start. :^)
2022-02-27 21:00:04 +01:00
}
LibWeb: Remove SVG sizing hack and fix viewbox scaling Previously, if you had an SVG with a viewbox and a definite width and height, then all SVGGeometryBox boxes within that SVG would have a width and height set to the size of the parent SVG. This broke hit testing for SVG paths, and didn't make much sense. It seems like the SVG sizing hack was patching over the incorrect logic in viewbox_scaling() and the incorrect path sizing (which was never reached). Before this change the view box scaling was: element_dimension / viewbox_dimension Which only seemed to work because of the SVG sizing hack that made all paths the size of the containing SVG. After this change SVGGeometryBoxes are (in most cases) sized correctly based on their bounding boxes, which allows hit testing to function, and the view box scaling is updated now to: containing_SVG_dimension / viewbox_dimension Which works with one less hack :^) This now also handles centering the viewbox within the parent SVG element and applying any tranforms to the bounding box. This still a bit ad-hoc, but much more closely matches other browsers now.
2023-04-10 12:28:55 +01:00
// Stroke increases the path's size by stroke_width/2 per side.
LibWeb: Implement SVG `preserveAspectRatio` attribute This attribute is used to define how the viewBox should be scaled. Previously the behaviour implemented was that of "xMidYMid meet", now all of them work (expect none :P). With this the Discord login backend is now correctly scaled/positioned. This also brings our SVG code a little closer to the spec! With spec comments and all :^) (Minor non-visible update to layout tests)
2023-04-17 01:20:24 +01:00
auto path_bounding_box = path_transform.map(path.bounding_box()).to_type<CSSPixels>();
LibWeb: Make CSSPixels and Length use 64-bit (double) floating point This fixes a plethora of rounding problems on many websites. In the future, we may want to replace this with fixed-point arithmetic (bug #18566) for performance (and consistency with other engines), but in the meantime this makes the web look a bit better. :^) There's a lot more things that could be converted to doubles, which would reduce the amount of casting necessary in this patch. We can do that incrementally, however.
2023-05-24 10:50:57 +02:00
CSSPixels stroke_width = static_cast<double>(geometry_box.dom_node().visible_stroke_width()) * viewbox_scale;
LibWeb: Remove SVG sizing hack and fix viewbox scaling Previously, if you had an SVG with a viewbox and a definite width and height, then all SVGGeometryBox boxes within that SVG would have a width and height set to the size of the parent SVG. This broke hit testing for SVG paths, and didn't make much sense. It seems like the SVG sizing hack was patching over the incorrect logic in viewbox_scaling() and the incorrect path sizing (which was never reached). Before this change the view box scaling was: element_dimension / viewbox_dimension Which only seemed to work because of the SVG sizing hack that made all paths the size of the containing SVG. After this change SVGGeometryBoxes are (in most cases) sized correctly based on their bounding boxes, which allows hit testing to function, and the view box scaling is updated now to: containing_SVG_dimension / viewbox_dimension Which works with one less hack :^) This now also handles centering the viewbox within the parent SVG element and applying any tranforms to the bounding box. This still a bit ad-hoc, but much more closely matches other browsers now.
2023-04-10 12:28:55 +01:00
path_bounding_box.inflate(stroke_width, stroke_width);
LibWeb: Implement SVG `preserveAspectRatio` attribute This attribute is used to define how the viewBox should be scaled. Previously the behaviour implemented was that of "xMidYMid meet", now all of them work (expect none :P). With this the Discord login backend is now correctly scaled/positioned. This also brings our SVG code a little closer to the spec! With spec comments and all :^) (Minor non-visible update to layout tests)
2023-04-17 01:20:24 +01:00
geometry_box_state.set_content_offset(path_bounding_box.top_left());
LibWeb: Convert LayoutState to new pixel units
2022-11-04 20:32:50 +00:00
geometry_box_state.set_content_width(path_bounding_box.width());
geometry_box_state.set_content_height(path_bounding_box.height());
LibWeb: Layout <svg> nested inside <svg> This is far from perfect, but let's at least make an attempt at laying out <svg> when encountering it inside another <svg>. This makes https://awesomekling.substack.com actually load and render instead of asserting. :^)
2023-04-18 19:32:00 +02:00
} else if (is<SVGSVGBox>(descendant)) {
SVGFormattingContext nested_context(m_state, descendant, this);
nested_context.run(descendant, layout_mode, available_space);
LibWeb: Implement painting for svg text The implementation of painting for SVG text follows the same pattern as the implementation of painting for SVG geometries. However, instead of reusing the existing PaintableWithLines to draw text, a new class called SVGTextPaintable is introduced. because everything that is painted inside an SVG is expected to inherit from SVGGraphicsPaintable. Therefore reusing the text painting from regular text nodes would require significant refactoring.
2023-06-08 21:32:33 +03:00
} else if (is<SVGTextBox>(descendant)) {
auto const& svg_text_box = static_cast<SVGTextBox const&>(descendant);
// 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.
m_state.get_mutable(svg_text_box);
LibWeb: Force paintable to exist for SVG <g> elements This (along with the previous commit) fixes the missing tears on the sad Duolingo owl.
2023-07-01 21:41:00 +01:00
} else if (is<SVGGraphicsBox>(descendant)) {
// Same hack as above.
// FIXME: This should be sized based on its children.
auto const& svg_graphics_box = static_cast<SVGGraphicsBox const&>(descendant);
m_state.get_mutable(svg_graphics_box);
LibWeb: Implement very naive layout of <path> within <svg>
2021-09-18 00:06:16 +02:00
}
return IterationDecision::Continue;
});
LibWeb: Add SVGFormattingContext to handle SVG box trees Instead of trying to layout SVG boxes as if they are regular CSS boxes, let's invent an "SVG formatting context" and let it manage SVG boxes. To facilitate this, Layout::SVGBox no longer inherits from ReplacedBox, and is instead a simple, "inline-block" style BlockBox.
2021-09-17 23:12:16 +02:00
}
}
Reference in a new issue Copy permalink