mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-28 19:59:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

22
Tests/LibWeb/Screenshot/css-filter-drop-shadow.html Normal file
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>

BIN
Tests/LibWeb/Screenshot/images/css-filter-drop-shadow-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB

10
Tests/LibWeb/Screenshot/reference/css-filter-drop-shadow-ref.html Normal file
View file

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

7
Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
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())