background_color Transparency Fixes

android/src/toga_android/widgets/base.py

@@ -1,7 +1,7 @@
 from abc import ABC, abstractmethod
 from decimal import ROUND_HALF_EVEN, Decimal
 
-from android.graphics import PorterDuff, PorterDuffColorFilter, Rect
+from android.graphics import Color, PorterDuff, PorterDuffColorFilter, Rect
 from android.graphics.drawable import ColorDrawable, InsetDrawable
 from android.view import Gravity, View
 from android.widget import RelativeLayout
@@ -138,8 +138,10 @@ def set_background_simple(self, value):
         if not hasattr(self, "_default_background"):
             self._default_background = self.native.getBackground()
 
-        if value in (None, TRANSPARENT):
+        if value is None:
             self.native.setBackground(self._default_background)
+        elif value is TRANSPARENT:
+            self.native.setBackgroundColor(Color.TRANSPARENT)
         else:
             background = ColorDrawable(native_color(value))
             if isinstance(self._default_background, InsetDrawable):

android/src/toga_android/widgets/canvas.py

@@ -1,4 +1,5 @@
 import itertools
+import warnings
 from math import degrees
 
 from android.graphics import (
@@ -244,6 +245,8 @@ def get_image_data(self):
         background = self.native.getBackground()
         if background:
             background.draw(canvas)
+        else:
+            warnings.warn("Failed to get canvas background")
         self.native.draw(canvas)
 
         stream = ByteArrayOutputStream()

android/src/toga_android/widgets/divider.py

@@ -10,13 +10,14 @@ class Divider(Widget):
     def create(self):
         self.native = View(self._native_activity)
 
-        # Background color needs to be set or else divider will not be visible.
-        self.native.setBackgroundColor(Color.LTGRAY)
-
         self._direction = self.interface.HORIZONTAL
 
     def set_background_color(self, value):
-        self.set_background_simple(value)
+        if value is None:
+            # Background color needs to be set or else divider will not be visible.
+            self.native.setBackgroundColor(Color.LTGRAY)
+        else:
+            self.set_background_simple(value)
 
     def get_direction(self):
         return self._direction

android/src/toga_android/widgets/progressbar.py

@@ -96,3 +96,6 @@ def rehint(self):
         self.interface.intrinsic.height = self.scale_out(
             self.native.getMeasuredHeight(), ROUND_UP
         )
+
+    def set_background_color(self, value):
+        self.set_background_simple(value)

android/tests_backend/widgets/canvas.py

@@ -20,6 +20,13 @@ def reference_variant(self, reference):
     def get_image(self):
         return Image.open(BytesIO(self.impl.get_image_data()))
 
+    def test_get_image_data_internal_fail(self, monkeypatch):
+        original_background = self.native.getBackground()
+        self.native.setBackground(None)
+        with pytest.warns(match="Failed to get canvas background"):
+            self.impl.get_image_data()
+        self.native.setBackground(original_background)
+
     def motion_event(self, action, x, y):
         time = SystemClock.uptimeMillis()
         super().motion_event(

changes/2484.bugfix.rst

@@ -0,0 +1 @@
+Bugs related to transparent background color are fixed.

cocoa/src/toga_cocoa/widgets/base.py

@@ -75,6 +75,7 @@ def set_color(self, color):
 
     def set_background_color(self, color):
         if color is TRANSPARENT:
+            self.native.backgroundColor = None
             self.native.drawsBackground = False
         else:
             self.native.backgroundColor = native_color(color)

cocoa/src/toga_cocoa/widgets/table.py

@@ -2,6 +2,7 @@
 from travertino.size import at_least
 
 import toga
+from toga.colors import TRANSPARENT
 from toga_cocoa.libs import (
     NSBezelBorder,
     NSIndexSet,
@@ -257,3 +258,9 @@ def remove_column(self, index):
         # delete column and identifier
         self.columns.remove(column)
         self.native_table.sizeToFit()
+
+    def set_background_color(self, color):
+        if color in {None, TRANSPARENT}:
+            super().set_background_color(TRANSPARENT)
+        else:
+            super().set_background_color(color)

cocoa/tests_backend/widgets/canvas.py

@@ -41,6 +41,9 @@ def get_image(self):
         except KeyError:
             return image
 
+    def test_get_image_data_internal_fail(self, monkeypatch):
+        pass
+
     async def mouse_press(self, x, y):
         await self.mouse_event(
             NSEventType.LeftMouseDown,

cocoa/tests_backend/widgets/table.py

@@ -4,7 +4,6 @@
 from toga_cocoa.libs import NSEventType, NSScrollView, NSTableView
 
 from .base import SimpleProbe
-from .properties import toga_color
 
 NSEventModifierFlagCommand = 1 << 20
 
@@ -24,13 +23,6 @@ def __init__(self, widget):
     def font(self):
         skip("Font changes not implemented for Tree on macOS")
 
-    @property
-    def background_color(self):
-        if self.native.drawsBackground:
-            return toga_color(self.native.backgroundColor)
-        else:
-            return None
-
     @property
     def row_count(self):
         return int(self.native_table.numberOfRowsInTableView(self.native_table))

gtk/tests_backend/widgets/canvas.py

@@ -19,6 +19,9 @@ def reference_variant(self, reference):
     def get_image(self):
         return Image.open(BytesIO(self.impl.get_image_data()))
 
+    def test_get_image_data_internal_fail(self, monkeypatch):
+        pass
+
     async def mouse_press(self, x, y):
         event = Gdk.Event.new(Gdk.EventType.BUTTON_PRESS)
         event.button = 1

iOS/src/toga_iOS/widgets/progressbar.py

@@ -105,6 +105,9 @@ def set_max(self, value):
             self._max = value
             self._stop_indeterminate()
 
+    def set_background_color(self, color):
+        self.set_background_color_simple(color)
+
     def rehint(self):
         fitting_size = self.native.systemLayoutSizeFittingSize(CGSize(0, 0))
         self.interface.intrinsic.width = at_least(self.interface._MIN_WIDTH)

iOS/tests_backend/widgets/canvas.py

@@ -33,6 +33,9 @@ def reference_variant(self, reference):
     def get_image(self):
         return Image.open(BytesIO(self.impl.get_image_data()))
 
+    def test_get_image_data_internal_fail(self, monkeypatch):
+        pass
+
     async def mouse_press(self, x, y):
         touch = MockTouch.alloc().init()
         touches = NSSet.setWithObject(touch)

testbed/tests/widgets/properties.py

@@ -381,8 +381,6 @@ async def test_background_color(widget, probe):
     for color in COLORS:
         widget.style.background_color = color
         await probe.redraw("Widget background color should be %s" % color)
-        if not getattr(probe, "background_supports_alpha", True):
-            color.a = 1
         assert_color(probe.background_color, color)
 
 
@@ -393,25 +391,28 @@ async def test_background_color_reset(widget, probe):
 
     # Set the background color to something different
     widget.style.background_color = RED
-    await probe.redraw("Widget background background color should be RED")
+    await probe.redraw("Widget background color should be RED")
     assert_color(probe.background_color, named_color(RED))
 
     # Reset the background color, and check that it has been restored to the original
     del widget.style.background_color
-    await probe.redraw(
-        message="Widget background background color should be restored to original"
-    )
+    await probe.redraw(message="Widget background color should be restored to original")
     assert_color(probe.background_color, original)
 
 
 async def test_background_color_transparent(widget, probe):
     "Background transparency is supported"
     original = probe.background_color
-    supports_alpha = getattr(probe, "background_supports_alpha", True)
 
+    # Change the background color to transparent
     widget.style.background_color = TRANSPARENT
-    await probe.redraw("Widget background background color should be TRANSPARENT")
-    assert_color(probe.background_color, TRANSPARENT if supports_alpha else original)
+    await probe.redraw("Widget background color should be TRANSPARENT")
+    assert_color(probe.background_color, TRANSPARENT)
+
+    # Restore original background color
+    del widget.style.background_color
+    await probe.redraw("Widget background color should be restored to original")
+    assert_color(probe.background_color, original)
 
 
 async def test_alignment(widget, probe, verify_vertical_alignment):

testbed/tests/widgets/test_box.py

@@ -6,6 +6,7 @@
 from .properties import (  # noqa: F401
     test_background_color,
     test_background_color_reset,
+    test_background_color_transparent,
     test_enable_noop,
     test_flex_widget_size,
     test_focus_noop,

testbed/tests/widgets/test_canvas.py

@@ -212,7 +212,7 @@ async def test_alt_drag(
     on_alt_release_handler.assert_called_once_with(canvas, 70, 90)
 
 
-async def test_image_data(canvas, probe):
+async def test_image_data(monkeypatch, canvas, probe):
     "The canvas can be saved as an image"
     with canvas.Stroke(x=0, y=0, color=RED) as stroke:
         stroke.line_to(x=200, y=200)
@@ -237,6 +237,10 @@ async def test_image_data(canvas, probe):
         screen=canvas.window.screen,
     )
 
+    # The internal methods to test are platform and
+    # implementation specific, hence the test is on the probe.
+    probe.test_get_image_data_internal_fail(monkeypatch)
+
 
 def assert_reference(probe, reference, threshold=0.0):
     """Assert that the canvas currently matches a reference image, within an RMS threshold"""

testbed/tests/widgets/test_divider.py

@@ -6,6 +6,9 @@
 
 from ..conftest import skip_on_platforms
 from .properties import (  # noqa: F401
+    test_background_color,
+    test_background_color_reset,
+    test_background_color_transparent,
     test_enable_noop,
     test_focus_noop,
 )

testbed/tests/widgets/test_progressbar.py

@@ -3,6 +3,9 @@
 import toga
 
 from .properties import (  # noqa: F401
+    test_background_color,
+    test_background_color_reset,
+    test_background_color_transparent,
     test_enable_noop,
     test_flex_horizontal_widget_size,
 )

testbed/tests/widgets/test_table.py

@@ -12,6 +12,7 @@
 from .properties import (  # noqa: F401
     test_background_color,
     test_background_color_reset,
+    test_background_color_transparent,
     test_enable_noop,
     test_flex_widget_size,
     test_focus_noop,

winforms/src/toga_winforms/colors.py

@@ -1,16 +1,64 @@
 from System.Drawing import Color
-from travertino.colors import TRANSPARENT
+from travertino.colors import TRANSPARENT, rgb, rgba
 
 CACHE = {TRANSPARENT: Color.Transparent}
 
 
-def native_color(c):
+def native_color(toga_color):
     try:
-        color = CACHE[c]
+        color = CACHE[toga_color]
     except KeyError:
         color = Color.FromArgb(
-            int(c.rgba.a * 255), int(c.rgba.r), int(c.rgba.g), int(c.rgba.b)
+            int(toga_color.rgba.a * 255),
+            int(toga_color.rgba.r),
+            int(toga_color.rgba.g),
+            int(toga_color.rgba.b),
         )
-        CACHE[c] = color
+        CACHE[toga_color] = color
 
     return color
+
+
+def toga_color(native_color):
+    return rgba(native_color.R, native_color.G, native_color.B, native_color.A / 255)
+
+
+def alpha_blending_over_operation(child_color, parent_color):
+    # The blending operation I have implemented here is the "over" operation and
+    # replicates CSS's rgba mechanism. For the formula used here, see:
+    # https://en.wikipedia.org/wiki/Alpha_compositing#Description
+
+    blended_alpha = child_color.a + ((1 - child_color.a) * parent_color.a)
+
+    # Check if the blended alpha is zero, indicating no blending
+    if blended_alpha == 0:
+        # If both child and parent alphas are 0, no blending occurs, so return child color.
+        return child_color
+
+    blended_color = rgb(
+        # Red Component
+        (
+            (
+                (child_color.r * child_color.a)
+                + (parent_color.r * parent_color.a * (1 - child_color.a))
+            )
+            / blended_alpha
+        ),
+        # Green Component
+        (
+            (
+                (child_color.g * child_color.a)
+                + (parent_color.g * parent_color.a * (1 - child_color.a))
+            )
+            / blended_alpha
+        ),
+        # Blue Component
+        (
+            (
+                (child_color.b * child_color.a)
+                + (parent_color.b * parent_color.a * (1 - child_color.a))
+            )
+            / blended_alpha
+        ),
+    )
+    return blended_color