LibWeb: Parse drop-shadow filter with missing or starting color

This commit is contained in:
Gingeh 2024-10-30 21:36:57 +11:00 committed by Jelle Raaijmakers
commit bd25d0b1b4
Notes: github-actions[bot] 2024-10-30 11:42:20 +00:00
4 changed files with 38 additions and 1 deletions

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<link rel="match" href="reference/css-filter-drop-shadow-ref.html" />
<style>
div {
height: 20px;
width: 20px;
margin: 10px;
background-color: black;
color: blue;
}
</style>
<div style="filter: drop-shadow(5px 5px)"></div>
<div style="filter: drop-shadow(5px 5px red)"></div>
<div style="filter: drop-shadow(red 5px 5px)"></div>
<div style="filter: drop-shadow(-5px -5px red)"></div>
<div style="filter: drop-shadow(16px)"></div>
<div style="filter: drop-shadow()"></div>
<div style="filter: drop-shadow(red)"></div>
<div style="filter: drop-shadow(5px 5px 5px)"></div>
<div style="filter: drop-shadow(red 5px 5px 5px)"></div>
<div style="filter: drop-shadow(5px 5px 5px red)"></div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

View file

@ -0,0 +1,10 @@
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<img src="../images/css-filter-drop-shadow-ref.png">

View file

@ -5455,6 +5455,7 @@ RefPtr<CSSStyleValue> Parser::parse_filter_value_list_value(TokenStream<Componen
// Note: The following code is a little awkward to allow the color to be before or after the lengths. // Note: The following code is a little awkward to allow the color to be before or after the lengths.
Optional<LengthOrCalculated> maybe_radius = {}; Optional<LengthOrCalculated> maybe_radius = {};
auto maybe_color = parse_color_value(tokens); auto maybe_color = parse_color_value(tokens);
tokens.discard_whitespace();
auto x_offset = parse_length(tokens); auto x_offset = parse_length(tokens);
tokens.discard_whitespace(); tokens.discard_whitespace();
if (!x_offset.has_value() || !tokens.has_next_token()) if (!x_offset.has_value() || !tokens.has_next_token())
@ -5476,8 +5477,12 @@ RefPtr<CSSStyleValue> Parser::parse_filter_value_list_value(TokenStream<Componen
return {}; return {};
} }
} }
Optional<Color> color = {};
if (maybe_color)
color = maybe_color->to_color({});
// FIXME: Support calculated offsets and radius // FIXME: Support calculated offsets and radius
return if_no_more_tokens_return(FilterOperation::DropShadow { x_offset->value(), y_offset->value(), maybe_radius.map([](auto& it) { return it.value(); }), maybe_color->to_color({}) }); return if_no_more_tokens_return(FilterOperation::DropShadow { x_offset->value(), y_offset->value(), maybe_radius.map([](auto& it) { return it.value(); }), color });
} else if (filter_token == FilterToken::HueRotate) { } else if (filter_token == FilterToken::HueRotate) {
// hue-rotate( [ <angle> | <zero> ]? ) // hue-rotate( [ <angle> | <zero> ]? )
if (!tokens.has_next_token()) if (!tokens.has_next_token())