LibWeb/Painting: Keep alpha for inset/outset border colors

Also return the original color when needed, instead of reconstructing it
from HSV.
This commit is contained in:
Sam Atkins 2025-07-02 12:48:08 +01:00 committed by Jelle Raaijmakers
commit c7166527ce
Notes: github-actions[bot] 2025-07-02 13:17:10 +00:00
3 changed files with 44 additions and 5 deletions

View file

@ -1,6 +1,6 @@
/*
* Copyright (c) 2020, Andreas Kling <andreas@ladybird.org>
* Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2021-2025, Sam Atkins <sam@ladybird.org>
* Copyright (c) 2022, MacDue <macdue@dueutil.tech>
*
* SPDX-License-Identifier: BSD-2-Clause
@ -20,16 +20,20 @@ static Color light_color_for_inset_and_outset(Color const& color)
{
auto hsv = color.to_hsv();
if (hsv.value >= dark_light_absolute_value_difference)
return Color::from_hsv(hsv);
return Color::from_hsv({ hsv.hue, hsv.saturation, hsv.value + dark_light_absolute_value_difference });
return color;
auto result = Color::from_hsv({ hsv.hue, hsv.saturation, hsv.value + dark_light_absolute_value_difference });
result.set_alpha(color.alpha());
return result;
}
static Color dark_color_for_inset_and_outset(Color const& color)
{
auto hsv = color.to_hsv();
if (hsv.value < dark_light_absolute_value_difference)
return Color::from_hsv(hsv);
return Color::from_hsv({ hsv.hue, hsv.saturation, hsv.value - dark_light_absolute_value_difference });
return color;
auto result = Color::from_hsv({ hsv.hue, hsv.saturation, hsv.value - dark_light_absolute_value_difference });
result.set_alpha(color.alpha());
return result;
}
Gfx::Color border_color(BorderEdge edge, BordersDataDevicePixels const& borders_data)

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="match" href="../../expected/css/transparent-borders-ref.html" />
<style>
.example {
width: 40px;
height: 40px;
background: orange;
margin-bottom: 10px;
}
</style>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="match" href="../../expected/css/transparent-borders-ref.html" />
<style>
.example {
width: 0;
height: 0;
background: orange;
border: 20px solid transparent;
margin-bottom: 10px;
}
</style>
<div class="example" style="border-style: dotted"></div>
<div class="example" style="border-style: dashed"></div>
<div class="example" style="border-style: solid"></div>
<div class="example" style="border-style: groove"></div>
<div class="example" style="border-style: ridge"></div>
<div class="example" style="border-style: inset"></div>
<div class="example" style="border-style: outset"></div>