Fixed CSS transparency bug in _style_properties.py

[edward-jazzhands]

Please review the following checklist.

• [ N/A ] Docstrings on all new or modified functions / classes
• [ N/A ] Updated documentation
• Updated CHANGELOG.md (where appropriate)

I believe I've found the fix for this issue as originally reported in the Discord help channel.

So first off, original MRE showcasing the problem since, as requested, we're going straight to PR without an attached issue:

from textual.app import App
from textual.widgets import Switch, Static
from textual.containers import Container

class TextualApp(App[None]):

    CSS = """
    Screen { background: darkblue; align: center middle; }
    #my_container {
        width: 50%; height: 50%;
        align: center middle;
        border: solid yellow;
        background: red;
        &.-transparent { background: transparent; }        
    }
    """

    def compose(self):
        with Container(id="my_container"):
            yield Static("Make container transparent:")
            yield Switch()

    def on_switch_changed(self, event: Switch.Changed):

        my_container = self.query_one("#my_container")
        if event.value:
            my_container.styles.background = "transparent"  # before fix: this doesn't work
            # my_container.add_class("-transparent")     # adding a CSS class works fine however
        else:
            my_container.styles.background = "red"
            # my_container.remove_class("-transparent")

TextualApp().run()

The issue was that in the ColorProperties class in css/_style_properties.py, it was not accounting for the case where a named color might have alpha built into it. Which is of course only one named color, "transparency".

Line in question:

textual/src/textual/css/_style_properties.py

Line 994 in 6e4f77b

parsed_color = parsed_color.with_alpha(alpha)

In the fix, I've added an extra line:

      try:
          parsed_color = Color.parse(token)
          _r, _g, _b, alpha, _, _ = parsed_color    # new line

Previously it would only get the alpha if token.endswith("%"), which was missing the edge case where the string is "transparent". Now after parsing the string, it extracts whatever alpha value is to re-use it for the parsed_color.with_alpha(alpha) call.

I thought this was a nice solution since its a one-line addition, which is a bit more elegant than making an extra condition just for the "transparent" string. But regardless, I'm pretty sure this is the root of the issue. Let me know if you think this is maybe not the best way to fix it.

[willmcgugan]

Aha, so its is making the alpha 1 regardless?

That looks like it would fix the case of transparent, but I think what we want to do is multiply the alpha. This would permit a color variable with an existing alpha, plus an additional alpha. Something like "rgba(100,20,20,0.5) 50%"

How about replacing the with_alpha with multiply_alpha?

[edward-jazzhands]

Yeah that's exactly right, It was just setting it to the default alpha of 1.0 for all named colors which includes "transparent".

Nice solution with multiply_alpha, that works great. With that implemented the extra retrieval of the alpha variable was unnecessary and so I removed that line. Now the multiply_alpha method just uses the parsed color's internal alpha setting directly.

[willmcgugan]

Awesome. Can I request a snapshot test?

[edward-jazzhands]

Yes that would be appropriate! Sorry didn't occur to me that this is related to visual output so a snapshot would be in order. That might take me a bit, I'm not super familiar with the snapshot system.

[willmcgugan]

Let me know if you need any pointers.

[edward-jazzhands]

I have added a snapshot test. Marked it as a regression test linking to this PR, I believe that's what I was supposed to do.

Love the snapshot system btw, I'll be using that more often now.

[willmcgugan]

Thanks