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

The opacity property should not be applied to children of an element but apply evenly to the element and the children #725

Closed
tronical opened this issue Dec 7, 2021 · 0 comments · Fixed by #1074

Comments

@tronical
Copy link
Member

tronical commented Dec 7, 2021

The following test case is currently rendered incorrectly (different than the way for example opacity works in CSS):

export Demo := Window {
    preferred-width: 800px;
    preferred-height: 600px;

    Rectangle {
        opacity: 0.5;
        width: 100px;
        height: 100px;

        background: red;

        Rectangle {
            background: blue;
            width: 50px;
            height: 50px;
            x: 25px;
            y: 25px;
        }
    }
}

Current (wrong) output (with the GL backend):

wrong

However the red and the blue rectangle should be rendered without opacity and then blended against the background with the specified opacity:

correct

tronical added a commit that referenced this issue Dec 7, 2021
The opacity on a rectangle should be applied before the shadow, so that it has
a visible effect.

This is a partial fix for #714 but needs also #725 to be entirely visually correct.
tronical added a commit that referenced this issue Dec 14, 2021
The opacity on a rectangle should be applied before the shadow, so that it has
a visible effect.

This is a partial fix for #714 but needs also #725 to be entirely visually correct.
tronical added a commit that referenced this issue Dec 14, 2021
The opacity on a rectangle should be applied before the shadow, so that it has
a visible effect.

This is a partial fix for #714 but needs also #725 to be entirely visually correct.
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
This also separates the blend-to-screen part of render_layer into a
helper function, as that will be useful in the future with public layer
elements.

Relates to #725
tronical added a commit that referenced this issue Mar 18, 2022
tronical added a commit that referenced this issue Mar 18, 2022
This also separates the blend-to-screen part of render_layer into a
helper function, as that will be useful in the future with public layer
elements.

Relates to #725
tronical added a commit that referenced this issue Mar 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant