Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LibWeb: Not following shadowbox border radius decreasing standard #24033

Open
SuntzuDragon opened this issue Apr 19, 2024 · 1 comment
Open

Comments

@SuntzuDragon
Copy link

Student project from the University of Utah!
This formula $1 + (r-1)^3$ is not being used for box shadow corner radius modification, but it should be (see last paragraph in section on csswg).

Right now, it is simply being added:

auto spread_corner = [&](auto& corner) {
    if (corner) {
        corner.horizontal_radius += spread_distance.value();
        corner.vertical_radius += spread_distance.value();
    }
};
@SuntzuDragon
Copy link
Author

SuntzuDragon commented Apr 19, 2024

Code like this should fix it:

auto spread_corner = [&](auto& corner) {
    if (corner) {
        auto spread_distance_value = spread_distance.value();
        // When radii < spread distance, modify spread distance in each direction per last paragraph of https://drafts.csswg.org/css-backgrounds/#shadow-shape
        auto horizontal_spread_distance = spread_distance_value;
        if (corner.horizontal_radius < spread_distance_value) {
            auto radius_spread_ratio = static_cast<float>(corner.horizontal_radius) / spread_distance_value;
            horizontal_spread_distance *= 1 + pow((radius_spread_ratio - 1), 3);
        }
        corner.horizontal_radius += round(horizontal_spread_distance);

        auto vertical_spread_distance = spread_distance_value;
        if (corner.vertical_radius < spread_distance_value) {
            auto radius_spread_ratio = static_cast<float>(corner.vertical_radius) / spread_distance_value;
            vertical_spread_distance *= 1 + pow((radius_spread_ratio - 1), 3);
        }
        corner.vertical_radius += round(vertical_spread_distance);
    }
};

I tested this against the example csswg gave:

For example, if the border radius is 10px and the spread distance is 20px (r = .5), the corner radius of the shadow shape will be 10px + 20px × (1 + (.5 - 1)3) = 27.5px rather than 30px.

And found the same results (rounded because CSSPixels use integers):

horizontal: 10
vertical: 10
spread_distance: 20
horizontal ratio: 0.5
horizontal pow -0.125
new horizontal spread: 17
vertical ratio: 0.5
vertical pow: -0.125
new vertical spread: 17
new horizontal: 27
new vertical: 27

SuntzuDragon added a commit to SuntzuDragon/serenity that referenced this issue Apr 19, 2024
Student project from the University of Utah!
This formula $1 + (r-1)^3$ is not being used for box shadow corner radius modification, but it should be (see last paragraph in section on [csswg](https://drafts.csswg.org/css-backgrounds/#shadow-shape)).

Issue (still may need to be applied for inner shadow boxes): SerenityOS#24033
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants