From 5f986b2c3359c1a5d3ce8eb55696f4387a9027f2 Mon Sep 17 00:00:00 2001 From: Sam Atkins Date: Mon, 4 Aug 2025 17:21:50 +0100 Subject: [PATCH] LibWeb/Painting: Paint `ridge` and `groove` border styles --- Libraries/LibWeb/Painting/BorderPainting.cpp | 7 +++++-- .../expected/css-border-style-groove-ref.html | 10 ++++++++++ .../expected/css-border-style-ridge-ref.html | 10 ++++++++++ .../images/css-border-style-groove-ref.png | Bin 0 -> 6141 bytes .../images/css-border-style-ridge-ref.png | Bin 0 -> 6134 bytes .../input/css-border-style-groove.html | 14 ++++++++++++++ .../Screenshot/input/css-border-style-ridge.html | 14 ++++++++++++++ 7 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Screenshot/expected/css-border-style-groove-ref.html create mode 100644 Tests/LibWeb/Screenshot/expected/css-border-style-ridge-ref.html create mode 100644 Tests/LibWeb/Screenshot/images/css-border-style-groove-ref.png create mode 100644 Tests/LibWeb/Screenshot/images/css-border-style-ridge-ref.png create mode 100644 Tests/LibWeb/Screenshot/input/css-border-style-groove.html create mode 100644 Tests/LibWeb/Screenshot/input/css-border-style-ridge.html diff --git a/Libraries/LibWeb/Painting/BorderPainting.cpp b/Libraries/LibWeb/Painting/BorderPainting.cpp index 311f5ea8452..958dfda028e 100644 --- a/Libraries/LibWeb/Painting/BorderPainting.cpp +++ b/Libraries/LibWeb/Painting/BorderPainting.cpp @@ -192,8 +192,11 @@ void paint_border(DisplayListRecorder& painter, BorderEdge edge, DevicePixelRect } case CSS::LineStyle::Groove: case CSS::LineStyle::Ridge: - // FIXME: Implement these - break; + // Two half-width borders + paint_double_border(0.5f, + border_style == CSS::LineStyle::Groove ? CSS::LineStyle::Inset : CSS::LineStyle::Outset, + border_style == CSS::LineStyle::Groove ? CSS::LineStyle::Outset : CSS::LineStyle::Inset); + return; } struct Points { diff --git a/Tests/LibWeb/Screenshot/expected/css-border-style-groove-ref.html b/Tests/LibWeb/Screenshot/expected/css-border-style-groove-ref.html new file mode 100644 index 00000000000..21a24c5d351 --- /dev/null +++ b/Tests/LibWeb/Screenshot/expected/css-border-style-groove-ref.html @@ -0,0 +1,10 @@ + + + diff --git a/Tests/LibWeb/Screenshot/expected/css-border-style-ridge-ref.html b/Tests/LibWeb/Screenshot/expected/css-border-style-ridge-ref.html new file mode 100644 index 00000000000..90c4bceae1c --- /dev/null +++ b/Tests/LibWeb/Screenshot/expected/css-border-style-ridge-ref.html @@ -0,0 +1,10 @@ + + + diff --git a/Tests/LibWeb/Screenshot/images/css-border-style-groove-ref.png b/Tests/LibWeb/Screenshot/images/css-border-style-groove-ref.png new file mode 100644 index 0000000000000000000000000000000000000000..e6fdb4f427ba73b1748d4a87cf4c758f445b33b4 GIT binary patch literal 6141 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 tpw@%9(D+A+5Tp0A literal 0 HcmV?d00001 diff --git a/Tests/LibWeb/Screenshot/input/css-border-style-groove.html b/Tests/LibWeb/Screenshot/input/css-border-style-groove.html new file mode 100644 index 00000000000..4d22bb03427 --- /dev/null +++ b/Tests/LibWeb/Screenshot/input/css-border-style-groove.html @@ -0,0 +1,14 @@ + + + + +
diff --git a/Tests/LibWeb/Screenshot/input/css-border-style-ridge.html b/Tests/LibWeb/Screenshot/input/css-border-style-ridge.html new file mode 100644 index 00000000000..daa085da607 --- /dev/null +++ b/Tests/LibWeb/Screenshot/input/css-border-style-ridge.html @@ -0,0 +1,14 @@ + + + + +