diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc686b822..6871215f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- Dropped "loading-indicator--dot" component style from LoadingIndicator https://github.com/Textualize/textual/pull/2050
-## Unreleased
+### Fixed
+
+- Fixed borders not rendering correctly. https://github.com/Textualize/textual/pull/2074
### Changed
diff --git a/src/textual/dom.py b/src/textual/dom.py
index 457131030..9e9ec8163 100644
--- a/src/textual/dom.py
+++ b/src/textual/dom.py
@@ -609,9 +609,8 @@ class DOMNode(MessagePump):
base_background = background = BLACK
for node in reversed(self.ancestors_with_self):
styles = node.styles
- if styles.has_rule("background"):
- base_background = background
- background += styles.background
+ base_background = background
+ background += styles.background
return (base_background, background)
@property
@@ -621,9 +620,8 @@ class DOMNode(MessagePump):
base_color = color = BLACK
for node in reversed(self.ancestors_with_self):
styles = node.styles
- if styles.has_rule("background"):
- base_background = background
- background += styles.background
+ base_background = background
+ background += styles.background
if styles.has_rule("color"):
base_color = color
if styles.auto_color:
diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
index f2855c724..2033ee8ce 100644
--- a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
+++ b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
@@ -568,140 +568,138 @@
font-weight: 700;
}
- .terminal-360352576-matrix {
+ .terminal-2470781732-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
- .terminal-360352576-title {
+ .terminal-2470781732-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
- .terminal-360352576-r1 { fill: #121212 }
- .terminal-360352576-r2 { fill: #0c600c }
- .terminal-360352576-r3 { fill: #c5c8c6 }
- .terminal-360352576-r4 { fill: #e1e1e1 }
- .terminal-360352576-r5 { fill: #e1e1e1;font-weight: bold }
- .terminal-360352576-r6 { fill: #06ae06 }
- .terminal-360352576-r7 { fill: #00ff00 }
- .terminal-360352576-r8 { fill: #60420c }
- .terminal-360352576-r9 { fill: #065a06 }
- .terminal-360352576-r10 { fill: #0000ff }
+ .terminal-2470781732-r1 { fill: #1e1e1e }
+ .terminal-2470781732-r2 { fill: #c5c8c6 }
+ .terminal-2470781732-r3 { fill: #e1e1e1 }
+ .terminal-2470781732-r4 { fill: #183118 }
+ .terminal-2470781732-r5 { fill: #124512 }
+ .terminal-2470781732-r6 { fill: #0c580c }
+ .terminal-2470781732-r7 { fill: #066c06 }
+ .terminal-2470781732-r8 { fill: #008000 }
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
- BorderAlphaApp
+ BorderAlphaApp
-
-
-
- ┌──────────────────┐┌──────────────────┐┌──────────────────┐┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓
- │Widget#b00││Widget#b01││Widget#b10│╏Widget#b11╏
- ││││││╏╏
- ││││││╏╏
- ││││││╏╏
- └──────────────────┘└──────────────────┘└──────────────────┘┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛
- ┌──────────────────┐┌──────────────────┐╭──────────────────╮+------------------+
- │Widget#b02││Widget#b03││Widget#b12│|Widget#b13|
- ││││││||
- ││││││||
- ││││││||
- └──────────────────┘└──────────────────┘╰──────────────────╯+------------------+
- ┌──────────────────┐┌──────────────────┐┌──────────────────┐┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓
- │Widget#b20││Widget#b21││Widget#b30│╏Widget#b31╏
- ││││││╏╏
- ││││││╏╏
- ││││││╏╏
- └──────────────────┘└──────────────────┘└──────────────────┘┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛
- ┌──────────────────┐┌──────────────────┐╭──────────────────╮+------------------+
- │Widget#b22││Widget#b23││Widget#b32│|Widget#b33|
- ││││││||
- ││││││||
- ││││││||
- └──────────────────┘└──────────────────┘╰──────────────────╯+------------------+
+
+
+
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ ┃┃
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ ┃┃
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ ┃┃
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ ┃┃
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ ┃┃
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ ┃┃
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+
+
+
+
+
@@ -2804,134 +2802,133 @@
font-weight: 700;
}
- .terminal-1700294531-matrix {
+ .terminal-1146190351-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
- .terminal-1700294531-title {
+ .terminal-1146190351-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
- .terminal-1700294531-r1 { fill: #c5c8c6 }
- .terminal-1700294531-r2 { fill: #0178d4 }
- .terminal-1700294531-r3 { fill: #e1e1e1 }
- .terminal-1700294531-r4 { fill: #121212 }
- .terminal-1700294531-r5 { fill: #1e1e1e }
+ .terminal-1146190351-r1 { fill: #c5c8c6 }
+ .terminal-1146190351-r2 { fill: #0178d4 }
+ .terminal-1146190351-r3 { fill: #e1e1e1 }
+ .terminal-1146190351-r4 { fill: #1e1e1e }
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
- AllBordersApp
+ AllBordersApp
-
-
-
- +------------------+┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓
- |ascii|blank╏dashed╏
- +------------------+┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛
-
-
- ╔══════════════════╗┏━━━━━━━━━━━━━━━━━━┓
- ║double║┃heavy┃hidden/none
- ╚══════════════════╝┗━━━━━━━━━━━━━━━━━━┛
-
-
- ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▗▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▖
- hkey▐inner▌none
- ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▘
-
-
- ▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜╭──────────────────╮┌──────────────────┐
- ▌outer▐│round││solid│
- ▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟╰──────────────────╯└──────────────────┘
-
-
- ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎▏▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
- ▊tall▎▏vkey▕▎wide▋
- ▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎▏▕▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+
+
+
+ +------------------+┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓
+ |ascii|blank╏dashed╏
+ +------------------+┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛
+
+
+ ╔══════════════════╗┏━━━━━━━━━━━━━━━━━━┓
+ ║double║┃heavy┃hidden/none
+ ╚══════════════════╝┗━━━━━━━━━━━━━━━━━━┛
+
+
+ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▗▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▖
+ hkey▐inner▌none
+ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▘
+
+
+ ▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜╭──────────────────╮┌──────────────────┐
+ ▌outer▐│round││solid│
+ ▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟╰──────────────────╯└──────────────────┘
+
+
+ ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎▏▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+ ▊tall▎▏vkey▕▎wide▋
+ ▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎▏▕▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
@@ -8168,134 +8165,133 @@
font-weight: 700;
}
- .terminal-3596709893-matrix {
+ .terminal-3219552913-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
- .terminal-3596709893-title {
+ .terminal-3219552913-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
- .terminal-3596709893-r1 { fill: #c5c8c6 }
- .terminal-3596709893-r2 { fill: #0178d4 }
- .terminal-3596709893-r3 { fill: #e1e1e1 }
- .terminal-3596709893-r4 { fill: #121212 }
- .terminal-3596709893-r5 { fill: #1e1e1e }
+ .terminal-3219552913-r1 { fill: #c5c8c6 }
+ .terminal-3219552913-r2 { fill: #0178d4 }
+ .terminal-3219552913-r3 { fill: #e1e1e1 }
+ .terminal-3219552913-r4 { fill: #1e1e1e }
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
- AllOutlinesApp
+ AllOutlinesApp
-
-
-
- +------------------+┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓
- |ascii|blank╏dashed╏
- +------------------+┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛
-
-
- ╔══════════════════╗┏━━━━━━━━━━━━━━━━━━┓
- ║double║┃heavy┃hidden/none
- ╚══════════════════╝┗━━━━━━━━━━━━━━━━━━┛
-
-
- ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▗▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▖
- hkey▐inner▌none
- ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▘
-
-
- ▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜╭──────────────────╮┌──────────────────┐
- ▌outer▐│round││solid│
- ▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟╰──────────────────╯└──────────────────┘
-
-
- ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎▏▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
- ▊tall▎▏vkey▕▎wide▋
- ▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎▏▕▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+
+
+
+ +------------------+┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓
+ |ascii|blank╏dashed╏
+ +------------------+┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛
+
+
+ ╔══════════════════╗┏━━━━━━━━━━━━━━━━━━┓
+ ║double║┃heavy┃hidden/none
+ ╚══════════════════╝┗━━━━━━━━━━━━━━━━━━┛
+
+
+ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▗▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▖
+ hkey▐inner▌none
+ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▘
+
+
+ ▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜╭──────────────────╮┌──────────────────┐
+ ▌outer▐│round││solid│
+ ▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟╰──────────────────╯└──────────────────┘
+
+
+ ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎▏▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+ ▊tall▎▏vkey▕▎wide▋
+ ▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎▏▕▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
diff --git a/tests/snapshot_tests/snapshot_apps/border_alpha.py b/tests/snapshot_tests/snapshot_apps/border_alpha.py
index 9b1b02125..43f34d97b 100644
--- a/tests/snapshot_tests/snapshot_apps/border_alpha.py
+++ b/tests/snapshot_tests/snapshot_apps/border_alpha.py
@@ -1,43 +1,40 @@
from textual.app import App, ComposeResult
-from textual.containers import Grid
-from textual.widget import Widget
+from textual.containers import Vertical
+from textual.widgets import Label
+
class BorderAlphaApp(App[None]):
-
- CSS = """
- Grid {
- height: 100%;
+ CSS = """
+ .boxes {
+ height: 3;
width: 100%;
- grid-size: 2 2;
}
-
- #b00 { border: 0%; }
- #b01 { border: 33%; }
- #b02 { border: 66%; }
- #b03 { border: 100%; }
-
- #b10 { border: solid 0%; }
- #b11 { border: dashed 33%; }
- #b12 { border: round 66%; }
- #b13 { border: ascii 100%; }
-
- #b20 { border: 0% red; }
- #b21 { border: 33% orange; }
- #b22 { border: 66% green; }
- #b23 { border: 100% blue; }
-
- #b30 { border: solid 0% red; }
- #b31 { border: dashed 33% orange; }
- #b32 { border: round 66% green; }
- #b33 { border: ascii 100% blue; }
+
+ #box0 {
+ border: heavy green 0%;
+ }
+ #box1 {
+ border: heavy green 20%;
+ }
+ #box2 {
+ border: heavy green 40%;
+ }
+ #box3 {
+ border: heavy green 60%;
+ }
+ #box4 {
+ border: heavy green 80%;
+ }
+ #box5 {
+ border: heavy green 100%;
+ }
"""
- def compose( self ) -> ComposeResult:
- with Grid():
- for outer in range(4):
- with Grid():
- for inner in range(4):
- yield Widget(id=f"b{outer}{inner}")
+ def compose(self) -> ComposeResult:
+ with Vertical():
+ for box in range(6):
+ yield Label(id=f"box{box}", classes="boxes")
+
if __name__ == "__main__":
BorderAlphaApp().run()