mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-08 09:09:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Plumbing for svg stroke-dasharray

Browse source
This commit is contained in:
Nico Weber 2024-11-20 19:23:10 -05:00 • committed by Alexander Kalenik
commit 94b97aa365
Notes: github-actions[bot] 2024-11-21 17:57:47 +00:00
10 changed files with 277 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Libraries/LibWeb/CSS/ComputedValues.h
View file

@ -480,6 +480,7 @@ public:
CSS::FillRule fill_rule() const { return m_inherited.fill_rule; } CSS::FillRule fill_rule() const { return m_inherited.fill_rule; }
Optional<SVGPaint> const& stroke() const { return m_inherited.stroke; } Optional<SVGPaint> const& stroke() const { return m_inherited.stroke; }
float fill_opacity() const { return m_inherited.fill_opacity; } float fill_opacity() const { return m_inherited.fill_opacity; }
Vector<Variant<LengthPercentage, NumberOrCalculated>> const& stroke_dasharray() const { return m_inherited.stroke_dasharray; }
LengthPercentage const& stroke_dashoffset() const { return m_inherited.stroke_dashoffset; } LengthPercentage const& stroke_dashoffset() const { return m_inherited.stroke_dashoffset; }
CSS::StrokeLinecap stroke_linecap() const { return m_inherited.stroke_linecap; } CSS::StrokeLinecap stroke_linecap() const { return m_inherited.stroke_linecap; }
CSS::StrokeLinejoin stroke_linejoin() const { return m_inherited.stroke_linejoin; } CSS::StrokeLinejoin stroke_linejoin() const { return m_inherited.stroke_linejoin; }
@ -581,6 +582,7 @@ protected:
CSS::FillRule fill_rule { InitialValues::fill_rule() }; CSS::FillRule fill_rule { InitialValues::fill_rule() };
Optional<SVGPaint> stroke; Optional<SVGPaint> stroke;
float fill_opacity { InitialValues::fill_opacity() }; float fill_opacity { InitialValues::fill_opacity() };
Vector<Variant<LengthPercentage, NumberOrCalculated>> stroke_dasharray;
LengthPercentage stroke_dashoffset { InitialValues::stroke_dashoffset() }; LengthPercentage stroke_dashoffset { InitialValues::stroke_dashoffset() };
CSS::StrokeLinecap stroke_linecap { InitialValues::stroke_linecap() }; CSS::StrokeLinecap stroke_linecap { InitialValues::stroke_linecap() };
CSS::StrokeLinejoin stroke_linejoin { InitialValues::stroke_linejoin() }; CSS::StrokeLinejoin stroke_linejoin { InitialValues::stroke_linejoin() };
@ -830,6 +832,7 @@ public:
void set_stroke(SVGPaint value) { m_inherited.stroke = value; } void set_stroke(SVGPaint value) { m_inherited.stroke = value; }
void set_fill_rule(CSS::FillRule value) { m_inherited.fill_rule = value; } void set_fill_rule(CSS::FillRule value) { m_inherited.fill_rule = value; }
void set_fill_opacity(float value) { m_inherited.fill_opacity = value; } void set_fill_opacity(float value) { m_inherited.fill_opacity = value; }
void set_stroke_dasharray(Vector<Variant<LengthPercentage, NumberOrCalculated>> value) { m_inherited.stroke_dasharray = move(value); }
void set_stroke_dashoffset(LengthPercentage value) { m_inherited.stroke_dashoffset = value; } void set_stroke_dashoffset(LengthPercentage value) { m_inherited.stroke_dashoffset = value; }
void set_stroke_linecap(CSS::StrokeLinecap value) { m_inherited.stroke_linecap = value; } void set_stroke_linecap(CSS::StrokeLinecap value) { m_inherited.stroke_linecap = value; }
void set_stroke_linejoin(CSS::StrokeLinejoin value) { m_inherited.stroke_linejoin = value; } void set_stroke_linejoin(CSS::StrokeLinejoin value) { m_inherited.stroke_linejoin = value; }

36
Libraries/LibWeb/CSS/Parser/Parser.cpp
View file

@ -5017,6 +5017,38 @@ RefPtr<CSSStyleValue> Parser::parse_rotate_value(TokenStream<ComponentValue>& to
return nullptr; return nullptr;
} }
RefPtr<CSSStyleValue> Parser::parse_stroke_dasharray_value(TokenStream<ComponentValue>& tokens)
{
// https://svgwg.org/svg2-draft/painting.html#StrokeDashing
// Value: none | <dasharray>
if (auto none = parse_all_as_single_keyword_value(tokens, Keyword::None))
return none;
// https://svgwg.org/svg2-draft/painting.html#DataTypeDasharray
// <dasharray> = [ [ <length-percentage> | <number> ]+ ]#
Vector<ValueComparingNonnullRefPtr<CSSStyleValue const>> dashes;
while (tokens.has_next_token()) {
tokens.discard_whitespace();
// A <dasharray> is a list of comma and/or white space separated <number> or <length-percentage> values. A <number> value represents a value in user units.
auto value = parse_number_value(tokens);
if (value) {
dashes.append(value.release_nonnull());
} else {
auto value = parse_length_percentage_value(tokens);
if (!value)
return {};
dashes.append(value.release_nonnull());
}
tokens.discard_whitespace();
if (tokens.has_next_token() && tokens.next_token().is(Token::Type::Comma))
tokens.discard_a_token();
}
return StyleValueList::create(move(dashes), StyleValueList::Separator::Comma);
}
RefPtr<CSSStyleValue> Parser::parse_content_value(TokenStream<ComponentValue>& tokens) RefPtr<CSSStyleValue> Parser::parse_content_value(TokenStream<ComponentValue>& tokens)
{ {
// FIXME: `content` accepts several kinds of function() type, which we don't handle in property_accepts_value() yet. // FIXME: `content` accepts several kinds of function() type, which we don't handle in property_accepts_value() yet.
@ -7885,6 +7917,10 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue>> Parser::parse_css_value(Prope
if (auto parsed_value = parse_scrollbar_gutter_value(tokens); parsed_value && !tokens.has_next_token()) if (auto parsed_value = parse_scrollbar_gutter_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull(); return parsed_value.release_nonnull();
return ParseError::SyntaxError; return ParseError::SyntaxError;
case PropertyID::StrokeDasharray:
if (auto parsed_value = parse_stroke_dasharray_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::TextDecoration: case PropertyID::TextDecoration:
if (auto parsed_value = parse_text_decoration_value(tokens); parsed_value && !tokens.has_next_token()) if (auto parsed_value = parse_text_decoration_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull(); return parsed_value.release_nonnull();

1
Libraries/LibWeb/CSS/Parser/Parser.h
View file

@ -339,6 +339,7 @@ private:
RefPtr<CSSStyleValue> parse_text_decoration_value(TokenStream<ComponentValue>&); RefPtr<CSSStyleValue> parse_text_decoration_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue> parse_text_decoration_line_value(TokenStream<ComponentValue>&); RefPtr<CSSStyleValue> parse_text_decoration_line_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue> parse_rotate_value(TokenStream<ComponentValue>&); RefPtr<CSSStyleValue> parse_rotate_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue> parse_stroke_dasharray_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue> parse_easing_value(TokenStream<ComponentValue>&); RefPtr<CSSStyleValue> parse_easing_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue> parse_transform_value(TokenStream<ComponentValue>&); RefPtr<CSSStyleValue> parse_transform_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue> parse_transform_origin_value(TokenStream<ComponentValue>&); RefPtr<CSSStyleValue> parse_transform_origin_value(TokenStream<ComponentValue>&);

6
Libraries/LibWeb/CSS/Properties.json
View file

@ -2420,6 +2420,12 @@
"paint" "paint"
] ]
}, },
"stroke-dasharray": {
"animation-type": "custom",
"inherited": true,
"initial": "none",
"affects-layout": false
},
"stroke-dashoffset": { "stroke-dashoffset": {
"affects-layout": false, "affects-layout": false,
"animation-type": "by-computed-value", "animation-type": "by-computed-value",

18
Libraries/LibWeb/Layout/Node.cpp
View file

@ -855,6 +855,24 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
computed_values.set_fill_opacity(computed_style.fill_opacity()); computed_values.set_fill_opacity(computed_style.fill_opacity());
if (auto const& stroke_dasharray_or_none = computed_style.property(CSS::PropertyID::StrokeDasharray); !stroke_dasharray_or_none.is_keyword()) {
auto const& stroke_dasharray = stroke_dasharray_or_none.as_value_list();
Vector<Variant<CSS::LengthPercentage, CSS::NumberOrCalculated>> dashes;
for (auto const& value : stroke_dasharray.values()) {
if (value->is_length())
dashes.append(CSS::LengthPercentage { value->as_length().length() });
else if (value->is_percentage())
dashes.append(CSS::LengthPercentage { value->as_percentage().percentage() });
else if (value->is_math())
dashes.append(CSS::LengthPercentage { value->as_math() });
else if (value->is_number())
dashes.append(CSS::NumberOrCalculated { value->as_number().number() });
}
computed_values.set_stroke_dasharray(move(dashes));
}
auto const& stroke_dashoffset = computed_style.property(CSS::PropertyID::StrokeDashoffset); auto const& stroke_dashoffset = computed_style.property(CSS::PropertyID::StrokeDashoffset);
// FIXME: Converting to pixels isn't really correct - values should be in "user units" // FIXME: Converting to pixels isn't really correct - values should be in "user units"
// https://svgwg.org/svg2-draft/coords.html#TermUserUnits // https://svgwg.org/svg2-draft/coords.html#TermUserUnits

36
Libraries/LibWeb/SVG/SVGGraphicsElement.cpp
View file

@ -150,6 +150,7 @@ void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style)
NamedPropertyID(CSS::PropertyID::Fill), NamedPropertyID(CSS::PropertyID::Fill),
// FIXME: The `stroke` attribute and CSS `stroke` property are not the same! But our support is limited enough that they are equivalent for now. // FIXME: The `stroke` attribute and CSS `stroke` property are not the same! But our support is limited enough that they are equivalent for now.
NamedPropertyID(CSS::PropertyID::Stroke), NamedPropertyID(CSS::PropertyID::Stroke),
NamedPropertyID(CSS::PropertyID::StrokeDasharray),
NamedPropertyID(CSS::PropertyID::StrokeDashoffset), NamedPropertyID(CSS::PropertyID::StrokeDashoffset),
NamedPropertyID(CSS::PropertyID::StrokeLinecap), NamedPropertyID(CSS::PropertyID::StrokeLinecap),
NamedPropertyID(CSS::PropertyID::StrokeLinejoin), NamedPropertyID(CSS::PropertyID::StrokeLinejoin),
@ -285,6 +286,41 @@ float SVGGraphicsElement::resolve_relative_to_viewport_size(CSS::LengthPercentag
return length_percentage.to_px(*layout_node(), scaled_viewport_size).to_double(); return length_percentage.to_px(*layout_node(), scaled_viewport_size).to_double();
} }
Vector<float> SVGGraphicsElement::stroke_dasharray() const
{
if (!layout_node())
return {};
Vector<float> dasharray;
for (auto const& value : layout_node()->computed_values().stroke_dasharray()) {
value.visit(
[&](CSS::LengthPercentage const& length_percentage) {
dasharray.append(resolve_relative_to_viewport_size(length_percentage));
},
[&](CSS::NumberOrCalculated const& number_or_calculated) {
dasharray.append(number_or_calculated.resolved(*layout_node()));
});
}
// https://svgwg.org/svg2-draft/painting.html#StrokeDashing
// If the list has an odd number of values, then it is repeated to yield an even number of values.
if (dasharray.size() % 2 == 1)
dasharray.extend(dasharray);
// If any value in the list is negative, the <dasharray> value is invalid. If all of the values in the list are zero, then the stroke is rendered as a solid line without any dashing.
bool all_zero = true;
for (auto& value : dasharray) {
if (value < 0)
return {};
if (value != 0)
all_zero = false;
}
if (all_zero)
return {};
return dasharray;
}
Optional<float> SVGGraphicsElement::stroke_dashoffset() const Optional<float> SVGGraphicsElement::stroke_dashoffset() const
{ {
if (!layout_node()) if (!layout_node())

1
Libraries/LibWeb/SVG/SVGGraphicsElement.h
View file

@ -36,6 +36,7 @@ public:
Optional<Gfx::Color> fill_color() const; Optional<Gfx::Color> fill_color() const;
Optional<Gfx::Color> stroke_color() const; Optional<Gfx::Color> stroke_color() const;
Vector<float> stroke_dasharray() const;
Optional<float> stroke_dashoffset() const; Optional<float> stroke_dashoffset() const;
Optional<float> stroke_width() const; Optional<float> stroke_width() const;
Optional<float> fill_opacity() const; Optional<float> fill_opacity() const;

4
Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt
View file

@ -1,6 +1,6 @@
All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle: All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
'cssText': '' 'cssText': ''
'length': '203' 'length': '204'
'parentRule': 'null' 'parentRule': 'null'
'cssFloat': 'none' 'cssFloat': 'none'
'WebkitAlignContent': 'normal' 'WebkitAlignContent': 'normal'
@ -495,6 +495,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
'stopOpacity': '1' 'stopOpacity': '1'
'stop-opacity': '1' 'stop-opacity': '1'
'stroke': 'none' 'stroke': 'none'
'strokeDasharray': 'none'
'stroke-dasharray': 'none'
'strokeDashoffset': '0' 'strokeDashoffset': '0'
'stroke-dashoffset': '0' 'stroke-dashoffset': '0'
'strokeLinecap': 'butt' 'strokeLinecap': 'butt'

341
Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt
View file

@ -33,176 +33,177 @@ All properties associated with getComputedStyle(document.body):
"30": "pointer-events", "30": "pointer-events",
"31": "quotes", "31": "quotes",
"32": "stroke", "32": "stroke",
"33": "stroke-dashoffset", "33": "stroke-dasharray",
"34": "stroke-linecap", "34": "stroke-dashoffset",
"35": "stroke-linejoin", "35": "stroke-linecap",
"36": "stroke-miterlimit", "36": "stroke-linejoin",
"37": "stroke-opacity", "37": "stroke-miterlimit",
"38": "stroke-width", "38": "stroke-opacity",
"39": "tab-size", "39": "stroke-width",
"40": "text-align", "40": "tab-size",
"41": "text-anchor", "41": "text-align",
"42": "text-decoration-line", "42": "text-anchor",
"43": "text-indent", "43": "text-decoration-line",
"44": "text-justify", "44": "text-indent",
"45": "text-shadow", "45": "text-justify",
"46": "text-transform", "46": "text-shadow",
"47": "visibility", "47": "text-transform",
"48": "white-space", "48": "visibility",
"49": "word-break", "49": "white-space",
"50": "word-spacing", "50": "word-break",
"51": "word-wrap", "51": "word-spacing",
"52": "writing-mode", "52": "word-wrap",
"53": "align-content", "53": "writing-mode",
"54": "align-items", "54": "align-content",
"55": "align-self", "55": "align-items",
"56": "animation-delay", "56": "align-self",
"57": "animation-direction", "57": "animation-delay",
"58": "animation-duration", "58": "animation-direction",
"59": "animation-fill-mode", "59": "animation-duration",
"60": "animation-iteration-count", "60": "animation-fill-mode",
"61": "animation-name", "61": "animation-iteration-count",
"62": "animation-play-state", "62": "animation-name",
"63": "animation-timing-function", "63": "animation-play-state",
"64": "appearance", "64": "animation-timing-function",
"65": "aspect-ratio", "65": "appearance",
"66": "backdrop-filter", "66": "aspect-ratio",
"67": "background-attachment", "67": "backdrop-filter",
"68": "background-clip", "68": "background-attachment",
"69": "background-color", "69": "background-clip",
"70": "background-image", "70": "background-color",
"71": "background-origin", "71": "background-image",
"72": "background-position-x", "72": "background-origin",
"73": "background-position-y", "73": "background-position-x",
"74": "background-repeat", "74": "background-position-y",
"75": "background-size", "75": "background-repeat",
"76": "border-bottom-color", "76": "background-size",
"77": "border-bottom-left-radius", "77": "border-bottom-color",
"78": "border-bottom-right-radius", "78": "border-bottom-left-radius",
"79": "border-bottom-style", "79": "border-bottom-right-radius",
"80": "border-bottom-width", "80": "border-bottom-style",
"81": "border-left-color", "81": "border-bottom-width",
"82": "border-left-style", "82": "border-left-color",
"83": "border-left-width", "83": "border-left-style",
"84": "border-right-color", "84": "border-left-width",
"85": "border-right-style", "85": "border-right-color",
"86": "border-right-width", "86": "border-right-style",
"87": "border-top-color", "87": "border-right-width",
"88": "border-top-left-radius", "88": "border-top-color",
"89": "border-top-right-radius", "89": "border-top-left-radius",
"90": "border-top-style", "90": "border-top-right-radius",
"91": "border-top-width", "91": "border-top-style",
"92": "bottom", "92": "border-top-width",
"93": "box-shadow", "93": "bottom",
"94": "box-sizing", "94": "box-shadow",
"95": "clear", "95": "box-sizing",
"96": "clip", "96": "clear",
"97": "clip-path", "97": "clip",
"98": "column-count", "98": "clip-path",
"99": "column-gap", "99": "column-count",
"100": "column-span", "100": "column-gap",
"101": "column-width", "101": "column-span",
"102": "content", "102": "column-width",
"103": "content-visibility", "103": "content",
"104": "counter-increment", "104": "content-visibility",
"105": "counter-reset", "105": "counter-increment",
"106": "counter-set", "106": "counter-reset",
"107": "cx", "107": "counter-set",
"108": "cy", "108": "cx",
"109": "display", "109": "cy",
"110": "filter", "110": "display",
"111": "flex-basis", "111": "filter",
"112": "flex-direction", "112": "flex-basis",
"113": "flex-grow", "113": "flex-direction",
"114": "flex-shrink", "114": "flex-grow",
"115": "flex-wrap", "115": "flex-shrink",
"116": "float", "116": "flex-wrap",
"117": "grid-auto-columns", "117": "float",
"118": "grid-auto-flow", "118": "grid-auto-columns",
"119": "grid-auto-rows", "119": "grid-auto-flow",
"120": "grid-column-end", "120": "grid-auto-rows",
"121": "grid-column-start", "121": "grid-column-end",
"122": "grid-row-end", "122": "grid-column-start",
"123": "grid-row-start", "123": "grid-row-end",
"124": "grid-template-areas", "124": "grid-row-start",
"125": "grid-template-columns", "125": "grid-template-areas",
"126": "grid-template-rows", "126": "grid-template-columns",
"127": "height", "127": "grid-template-rows",
"128": "inline-size", "128": "height",
"129": "inset-block-end", "129": "inline-size",
"130": "inset-block-start", "130": "inset-block-end",
"131": "inset-inline-end", "131": "inset-block-start",
"132": "inset-inline-start", "132": "inset-inline-end",
"133": "justify-content", "133": "inset-inline-start",
"134": "justify-items", "134": "justify-content",
"135": "justify-self", "135": "justify-items",
"136": "left", "136": "justify-self",
"137": "margin-block-end", "137": "left",
"138": "margin-block-start", "138": "margin-block-end",
"139": "margin-bottom", "139": "margin-block-start",
"140": "margin-inline-end", "140": "margin-bottom",
"141": "margin-inline-start", "141": "margin-inline-end",
"142": "margin-left", "142": "margin-inline-start",
"143": "margin-right", "143": "margin-left",
"144": "margin-top", "144": "margin-right",
"145": "mask", "145": "margin-top",
"146": "mask-image", "146": "mask",
"147": "mask-type", "147": "mask-image",
"148": "max-height", "148": "mask-type",
"149": "max-inline-size", "149": "max-height",
"150": "max-width", "150": "max-inline-size",
"151": "min-height", "151": "max-width",
"152": "min-inline-size", "152": "min-height",
"153": "min-width", "153": "min-inline-size",
"154": "object-fit", "154": "min-width",
"155": "object-position", "155": "object-fit",
"156": "opacity", "156": "object-position",
"157": "order", "157": "opacity",
"158": "outline-color", "158": "order",
"159": "outline-offset", "159": "outline-color",
"160": "outline-style", "160": "outline-offset",
"161": "outline-width", "161": "outline-style",
"162": "overflow-x", "162": "outline-width",
"163": "overflow-y", "163": "overflow-x",
"164": "padding-block-end", "164": "overflow-y",
"165": "padding-block-start", "165": "padding-block-end",
"166": "padding-bottom", "166": "padding-block-start",
"167": "padding-inline-end", "167": "padding-bottom",
"168": "padding-inline-start", "168": "padding-inline-end",
"169": "padding-left", "169": "padding-inline-start",
"170": "padding-right", "170": "padding-left",
"171": "padding-top", "171": "padding-right",
"172": "position", "172": "padding-top",
"173": "r", "173": "position",
"174": "right", "174": "r",
"175": "rotate", "175": "right",
"176": "row-gap", "176": "rotate",
"177": "rx", "177": "row-gap",
"178": "ry", "178": "rx",
"179": "scrollbar-gutter", "179": "ry",
"180": "scrollbar-width", "180": "scrollbar-gutter",
"181": "stop-color", "181": "scrollbar-width",
"182": "stop-opacity", "182": "stop-color",
"183": "table-layout", "183": "stop-opacity",
"184": "text-decoration-color", "184": "table-layout",
"185": "text-decoration-style", "185": "text-decoration-color",
"186": "text-decoration-thickness", "186": "text-decoration-style",
"187": "text-overflow", "187": "text-decoration-thickness",
"188": "top", "188": "text-overflow",
"189": "transform", "189": "top",
"190": "transform-box", "190": "transform",
"191": "transform-origin", "191": "transform-box",
"192": "transition-delay", "192": "transform-origin",
"193": "transition-duration", "193": "transition-delay",
"194": "transition-property", "194": "transition-duration",
"195": "transition-timing-function", "195": "transition-property",
"196": "unicode-bidi", "196": "transition-timing-function",
"197": "user-select", "197": "unicode-bidi",
"198": "vertical-align", "198": "user-select",
"199": "width", "199": "vertical-align",
"200": "x", "200": "width",
"201": "y", "201": "x",
"202": "z-index" "202": "y",
"203": "z-index"
} }
All properties associated with document.body.style by default: All properties associated with document.body.style by default:
{} {}

3
Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
View file

@ -31,6 +31,7 @@ math-style: normal
pointer-events: auto pointer-events: auto
quotes: auto quotes: auto
stroke: none stroke: none
stroke-dasharray: none
stroke-dashoffset: 0 stroke-dashoffset: 0
stroke-linecap: butt stroke-linecap: butt
stroke-linejoin: miter stroke-linejoin: miter
@ -125,7 +126,7 @@ grid-row-start: auto
grid-template-areas: none grid-template-areas: none
grid-template-columns: auto grid-template-columns: auto
grid-template-rows: auto grid-template-rows: auto
height: 2159px height: 2176px
inline-size: auto inline-size: auto
inset-block-end: auto inset-block-end: auto
inset-block-start: auto inset-block-start: auto