PSA: border-radius

[Frenzie]

I'm currently throwing some ideas at the wall to see what sicks. See the following poc screenshot on the left, Firefox 141 on the right. I'm mainly mentioning it in case someone else has the same idea, though I'm also having a bit of a "what have I started" moment. ;-)

border-radius.html

[poire-z]

You mean you have implemented something that renders what's on the left ?! Wow :)
I wouldn't dare having to touch our ugly border drawing code.
Wondering how you managed to limit the background color (and image?) painting to the border shape.

[Frenzie]

Yup, you might say it's self-serving testcase. Put another way, anything not shown probably doesn't work properly. For example I made different border styles fall back to a solid color, which was already difficult enough. Perhaps I'll try to look at it now that this is working properly.

(and image?)

I'd prefer not to think about that right now. Though since you brought it to my attention, perhaps an arbitrarily shaped cliprect with the same algorithm as below would be doable? For reference:

Wondering how you managed to limit the background color (and image?) painting to the border shape.

With a complex scanline for loop, which was to my surprise mostly autocompleted by VS Code Copilot ChatGPT 5. It must've seen a similar algorithm elsewhere before.

                else {
                    // Regular element: draw bgcolor or image inside its border box
                    if ( draw_bg_color ) {
                        int rx[4]={0,0,0,0}, ry[4]={0,0,0,0};
                        computeBorderRadiiPx(enode, style.get(), fmt.getWidth(), fmt.getHeight(), rx, ry);
                        if (rx[0]||rx[1]||rx[2]||rx[3]||ry[0]||ry[1]||ry[2]||ry[3])
                            fillRoundedRect(drawbuf, x0 + doc_x, y0 + doc_y, x0 + doc_x+fmt.getWidth(), y0+doc_y+fmt.getHeight(), rx, ry, bg_color);
                        else
                            drawbuf.FillRect( x0 + doc_x, y0 + doc_y, x0 + doc_x+fmt.getWidth(), y0+doc_y+fmt.getHeight(), bg_color );
                    }
                    if ( draw_bg_image )
                        DrawBackgroundImage(enode, drawbuf, x0, y0, doc_x, doc_y, fmt.getWidth(), fmt.getHeight());
                        // (Commented identical calls below as they seem redundant with what was just done here)
                }

// Fill a rounded rectangle with potentially elliptical radii per corner
static void fillRoundedRect(LVDrawBuf & drawbuf, int x0, int y0, int x1, int y1, const int rx[4], const int ry[4], lUInt32 color) {
    if (!(rx[0]||rx[1]||rx[2]||rx[3]||ry[0]||ry[1]||ry[2]||ry[3])) {
        drawbuf.FillRect(x0, y0, x1, y1, color);
        return;
    }
    int cx_tl = x0 + rx[0]; int cy_tl = y0 + ry[0];
    int cx_tr = x1 - rx[1]; int cy_tr = y0 + ry[1];
    int cx_br = x1 - rx[2]; int cy_br = y1 - ry[2];
    int cx_bl = x0 + rx[3]; int cy_bl = y1 - ry[3];

    for (int y = y0; y < y1; y++) {
        int xl = x0;
        int xr = x1;
        if (y < y0 + ry[0] && rx[0] && ry[0]) {
            double dy = (double)(cy_tl - y - 0.5);
            double val = 1.0 - (dy*dy) / (double)(ry[0]*ry[0]);
            int dx = (val <= 0.0) ? rx[0] : (int)floor((double)rx[0] * sqrt(val));
            int cand = cx_tl - dx;
            xl = (xl > cand ? xl : cand);
        } else if (y >= y1 - ry[3] && rx[3] && ry[3]) {
            double dy = (double)(y - cy_bl + 0.5);
            double val = 1.0 - (dy*dy) / (double)(ry[3]*ry[3]);
            int dx = (val <= 0.0) ? rx[3] : (int)floor((double)rx[3] * sqrt(val));
            int cand = cx_bl - dx;
            xl = (xl > cand ? xl : cand);
        }
        if (y < y0 + ry[1] && rx[1] && ry[1]) {
            double dy = (double)(cy_tr - y - 0.5);
            double val = 1.0 - (dy*dy) / (double)(ry[1]*ry[1]);
            int dx = (val <= 0.0) ? rx[1] : (int)floor((double)rx[1] * sqrt(val));
            int cand = cx_tr + dx;
            xr = (xr < cand ? xr : cand);
        } else if (y >= y1 - ry[2] && rx[2] && ry[2]) {
            double dy = (double)(y - cy_br + 0.5);
            double val = 1.0 - (dy*dy) / (double)(ry[2]*ry[2]);
            int dx = (val <= 0.0) ? rx[2] : (int)floor((double)rx[2] * sqrt(val));
            int cand = cx_br + dx;
            xr = (xr < cand ? xr : cand);
        }
        if (xl < xr)
            drawbuf.FillRect(xl, y, xr, y+1, color);
    }
}

[Frenzie]

Well @#$@# me, I told it to adapt the algorithm so it could be used on background-image with ClipRect and it one-shotted this:

Details

diff --git a/crengine/include/lvrend.h b/crengine/include/lvrend.h
index 55d746b7..88e8f897 100644
--- a/crengine/include/lvrend.h
+++ b/crengine/include/lvrend.h
@@ -124,6 +124,11 @@ typedef struct {
     bool draw_body_background;
     lvRect body_background_clip;
     lvRect content_overflow_clip;
+    // Optional rounded clipping (for background images honoring border-radius)
+    bool rounded_clip_active;
+    lvRect rounded_clip_rect; // absolute coords in drawbuf space
+    int rounded_rx[4];        // per-corner horizontal radii (TL, TR, BR, BL)
+    int rounded_ry[4];        // per-corner vertical radii (TL, TR, BR, BL)
 } draw_extra_info_t;
 
 /// returns true if styles are identical
diff --git a/crengine/src/lvdrawbuf.cpp b/crengine/src/lvdrawbuf.cpp
index e95b886e..811fa157 100644
--- a/crengine/src/lvdrawbuf.cpp
+++ b/crengine/src/lvdrawbuf.cpp
@@ -15,13 +15,18 @@
 #include <stdlib.h>
 #include <stdio.h>
 #include <string.h>
+#include <math.h>
 #include "../include/lvdrawbuf.h"
 
 #define GUARD_BYTE 0xa5
 #define CHECK_GUARD_BYTE \
        { \
-        if (_bpp != 1 && _bpp != 2 && _bpp !=3 && _bpp != 4 && _bpp != 8 && _bpp != 16 && _bpp != 32) crFatalError(-5, "wrong bpp"); \
-        if (_ownData && _data && _data[_rowsize * _dy] != GUARD_BYTE) crFatalError(-5, "corrupted bitmap buffer"); \
+        if (_data && _ownData) { \
+            if (_rowsize >= 0 && _dy >= 0) { \
+                if (_data[_rowsize * _dy] != GUARD_BYTE) \
+                    crFatalError(-5, "buffer guard byte corrupted"); \
+            } \
+        } \
     }
 
 void LVDrawBuf::RoundRect( int x0, int y0, int x1, int y1, int borderWidth, int radius, lUInt32 color, int cornerFlags )
@@ -603,24 +608,85 @@ public:
 //        }
         lvRect clip;
         dst->GetClipRect( &clip );
+        // Optional rounded per-scanline clipping
+        lvRect rounded_clip;
+        int rrx[4] = {0,0,0,0};
+        int rry[4] = {0,0,0,0};
+        bool use_rounded_clip = false;
+        void *dei = dst->GetDrawExtraInfo();
+        if (dei) {
+            // draw_extra_info_t is declared in lvrend.h; avoid including it here to keep coupling low.
+            // We know its layout: first fields then a bool rounded_clip_active followed by rect and radii.
+            struct RoundedClipShim {
+                // Keep the same prefix layout as draw_extra_info_t up to content_overflow_clip
+                bool is_page_mode; bool is_left_page; bool is_right_page; bool draw_body_background;
+                lvRect body_background_clip; lvRect content_overflow_clip;
+                bool rounded_clip_active; lvRect rounded_clip_rect; int rounded_rx[4]; int rounded_ry[4];
+            } *info = (RoundedClipShim*)dei;
+            if (info->rounded_clip_active) {
+                rounded_clip = info->rounded_clip_rect;
+                for (int i=0;i<4;i++){ rrx[i]=info->rounded_rx[i]; rry[i]=info->rounded_ry[i]; }
+                use_rounded_clip = true;
+            }
+        }
         for ( ;yy<yy2; yy++ )
         {
             if ( yy+dst_y<clip.top || yy+dst_y>=clip.bottom )
                 continue;
+            // Compute per-scanline rounded horizontal mask [xL, xR)
+            int xL = clip.left;
+            int xR = clip.right;
+            if (use_rounded_clip) {
+                const int y_abs = yy + dst_y;
+                if (y_abs < rounded_clip.top || y_abs >= rounded_clip.bottom) {
+                    continue; // outside rounded vertical range
+                }
+                // Outer rect and corner centers
+                const int x0 = rounded_clip.left;
+                const int y0 = rounded_clip.top;
+                const int x1 = rounded_clip.right;
+                const int y1 = rounded_clip.bottom;
+                int xl = x0, xr = x1;
+                const int cx_tl = x0 + rrx[0]; const int cy_tl = y0 + rry[0];
+                const int cx_tr = x1 - rrx[1]; const int cy_tr = y0 + rry[1];
+                const int cx_br = x1 - rrx[2]; const int cy_br = y1 - rry[2];
+                const int cx_bl = x0 + rrx[3]; const int cy_bl = y1 - rry[3];
+                if (y_abs < y0 + rry[0] && rrx[0] && rry[0]) {
+                    const double dy = (double)(cy_tl - y_abs - 0.5);
+                    const double val = 1.0 - (dy*dy) / (double)(rry[0]*rry[0]);
+                    const int dx = (val <= 0.0) ? rrx[0] : (int)floor((double)rrx[0] * sqrt(val));
+                    const int cand = cx_tl - dx; if (xl < cand) xl = cand;
+                } else if (y_abs >= y1 - rry[3] && rrx[3] && rry[3]) {
+                    const double dy = (double)(y_abs - cy_bl + 0.5);
+                    const double val = 1.0 - (dy*dy) / (double)(rry[3]*rry[3]);
+                    const int dx = (val <= 0.0) ? rrx[3] : (int)floor((double)rrx[3] * sqrt(val));
+                    const int cand = cx_bl - dx; if (xl < cand) xl = cand;
+                }
+                if (y_abs < y0 + rry[1] && rrx[1] && rry[1]) {
+                    const double dy = (double)(cy_tr - y_abs - 0.5);
+                    const double val = 1.0 - (dy*dy) / (double)(rry[1]*rry[1]);
+                    const int dx = (val <= 0.0) ? rrx[1] : (int)floor((double)rrx[1] * sqrt(val));
+                    const int cand = cx_tr + dx; if (xr > cand) xr = cand;
+                } else if (y_abs >= y1 - rry[2] && rrx[2] && rry[2]) {
+                    const double dy = (double)(y_abs - cy_br + 0.5);
+                    const double val = 1.0 - (dy*dy) / (double)(rry[2]*rry[2]);
+                    const int dx = (val <= 0.0) ? rrx[2] : (int)floor((double)rrx[2] * sqrt(val));
+                    const int cand = cx_br + dx; if (xr > cand) xr = cand;
+                }
+                // Merge with regular clip
+                if (xl > xL) xL = xl; if (xr < xR) xR = xr;
+                if (!(xL < xR)) continue;
+            }
             const int bpp = dst->GetBitsPerPixel();
             if ( bpp >= 24 )
             {
                 lUInt32 * __restrict row = (lUInt32 *)dst->GetScanLine( yy + dst_y );
-                row += dst_x;
-                for (int x=0; x<dst_dx; x++)
+                row += xL;
+                int ix = 0;
+                for (int x=xL; x<xR; x++, ix++)
                 {
-                    const int xx = x + dst_x;
-                    if ( xx<clip.left || xx>=clip.right ) {
-                        // OOB, don't plot it!
-                        continue;
-                    }
-
-                    const lUInt32 cl = data[xmap ? xmap[x] : x];
+                    const int relx = x - dst_x;
+                    const lUInt32 cl = data[xmap ? xmap[relx] : relx];
                     const lUInt8 alpha = (cl >> 24)&0xFF;
                     // NOTE: Remember that for some mysterious reason, lvimg feeds us inverted alpha
                     //       (i.e., 0 is opaque, 0xFF is transparent)...
@@ -630,22 +696,22 @@ public:
                             // ...unless we're doing night-mode shenanigans, in which case, we need to fake an inverted background
                             // (i.e., a *black* background, so it gets inverted back to white with NightMode, since white is our expected "standard" background color)
                             // c.f., https://github.com/koreader/koreader/issues/4986
-                            row[ x ] = 0x00000000;
+                            row[ ix ] = 0x00000000;
                         } else {
                             continue;
                         }
                     } else if ( alpha == 0 ) {
                         // Fully opaque, plot it as-is
-                        row[ x ] = cl ^ rgba_invert;
+                        row[ ix ] = cl ^ rgba_invert;
                     } else {
-                        if ((row[x] & 0xFF000000) == 0xFF000000) {
+                        if ((row[ix] & 0xFF000000) == 0xFF000000) {
                             // Plot it as-is if *buffer* pixel is transparent
-                            row[ x ] = cl ^ rgba_invert;
+                            row[ ix ] = cl ^ rgba_invert;
                         } else {
                             // NOTE: This *also* has a "fully opaque" shortcut... :/
-                            ApplyAlphaRGB( row[x], cl, alpha );
+                            ApplyAlphaRGB( row[ix], cl, alpha );
                             // Invert post-blending to avoid potential stupidity...
-                            row[ x ] ^= rgba_invert;
+                            row[ ix ] ^= rgba_invert;
                         }
                     }
                 }
@@ -653,16 +719,12 @@ public:
             else if ( bpp == 16 )
             {
                 lUInt16 * __restrict row = (lUInt16 *)dst->GetScanLine( yy + dst_y );
-                row += dst_x;
-                for (int x=0; x<dst_dx; x++)
+                row += xL;
+                int ix = 0;
+                for (int x=xL; x<xR; x++, ix++)
                 {
-                    const int xx = x + dst_x;
-                    if ( xx<clip.left || xx>=clip.right ) {
-                        // OOB, don't plot it!
-                        continue;
-                    }
-
-                    const lUInt32 cl = data[xmap ? xmap[x] : x];
+                    const int relx = x - dst_x;
+                    const lUInt32 cl = data[xmap ? xmap[relx] : relx];
                     const lUInt8 alpha = (cl >> 24)&0xFF;
                     // NOTE: See final branch of the ladder. Not quite sure why some alpha ranges are treated differently...
                     if ( alpha >= 0xF0 ) {
@@ -671,32 +733,28 @@ public:
                             // ...unless we're doing night-mode shenanigans, in which case, we need to fake an inverted background
                             // (i.e., a *black* background, so it gets inverted back to white with NightMode, since white is our expected "standard" background color)
                             // c.f., https://github.com/koreader/koreader/issues/4986
-                            row[ x ] = 0x0000;
+                            row[ ix ] = 0x0000;
                         } else {
                             continue;
                         }
                     } else if ( alpha < 16 ) {
-                        row[ x ] = rgb888to565( cl ^ rgba_invert );
+                        row[ ix ] = rgb888to565( cl ^ rgba_invert );
                     } else if ( alpha < 0xF0 ) {
-                        lUInt32 v = rgb565to888(row[x]);
+                        lUInt32 v = rgb565to888(row[ix]);
                         ApplyAlphaRGB( v, cl, alpha );
-                        row[ x ] = rgb888to565(v ^ rgba_invert);
+                        row[ ix ] = rgb888to565(v ^ rgba_invert);
                     }
                 }
             }
             else if ( bpp > 2 ) // 3,4,8 bpp
             {
                 lUInt8 * __restrict row = (lUInt8 *)dst->GetScanLine( yy + dst_y );
-                row += dst_x;
-                for (int x=0; x<dst_dx; x++)
+                row += xL;
+                int ix = 0;
+                for (int x=xL; x<xR; x++, ix++)
                 {
-                    const int xx = x + dst_x;
-                    if ( xx<clip.left || xx>=clip.right ) {
-                        // OOB, don't plot it!
-                        continue;
-                    }
-
-                    const int srcx = xmap ? xmap[x] : x;
+                    const int relx = x - dst_x;
+                    const int srcx = xmap ? xmap[relx] : relx;
                     lUInt32 cl = data[srcx];
                     const lUInt8 alpha = (cl >> 24)&0xFF;
                     if ( alpha == 0xFF ) {
@@ -708,7 +766,7 @@ public:
                             continue;
                         }
                     } else if ( alpha != 0 ) {
-                        lUInt8 origLuma = row[x];
+                        lUInt8 origLuma = row[ix];
                         // Expand lower bitdepths to Y8
                         if ( bpp == 3 ) {
                             origLuma = origLuma & 0xE0;
@@ -736,7 +794,7 @@ public:
                     } else {
                         dcl = rgbToGray( cl, bpp );
                     }
-                    row[ x ] = dcl ^ gray_invert;
+                    row[ ix ] = dcl ^ gray_invert;
                     // ApplyAlphaGray( row[x], dcl, alpha, bpp );
                 }
             }
@@ -744,20 +802,12 @@ public:
             {
                 //fprintf( stderr, "." );
                 lUInt8 * __restrict row = (lUInt8 *)dst->GetScanLine( yy+dst_y );
-                //row += dst_x;
-                for (int x=0; x<dst_dx; x++)
+                for (int x=xL; x<xR; x++)
                 {
-                    const int xx = x + dst_x;
-                    if ( xx<clip.left || xx>=clip.right ) {
-                        // OOB, don't plot it!
-                        continue;
-                    }
-
-                    const int byteindex = (xx >> 2);
-                    const int bitindex = (3-(xx & 3))<<1;
+                    const int byteindex = (x >> 2);
+                    const int bitindex = (3-(x & 3))<<1;
                     const lUInt8 mask = 0xC0 >> (6 - bitindex);
-
-                    lUInt32 cl = data[xmap ? xmap[x] : x];
+                    lUInt32 cl = data[xmap ? xmap[x - dst_x] : x - dst_x];
                     const lUInt8 alpha = (cl >> 24)&0xFF;
                     if ( alpha == 0xFF ) {
                         // Transparent, don't plot it...
@@ -794,16 +844,9 @@ public:
             {
                 //fprintf( stderr, "." );
                 lUInt8 * __restrict row = (lUInt8 *)dst->GetScanLine( yy+dst_y );
-                //row += dst_x;
-                for (int x=0; x<dst_dx; x++)
+                for (int x=xL; x<xR; x++)
                 {
-                    const int xx = x + dst_x;
-                    if ( xx<clip.left || xx>=clip.right ) {
-                        // OOB, don't plot it!
-                        continue;
-                    }
-
-                    lUInt32 cl = data[xmap ? xmap[x] : x];
+                    lUInt32 cl = data[xmap ? xmap[x - dst_x] : x - dst_x];
                     const lUInt8 alpha = (cl >> 24)&0xFF;
                     if ( alpha & 0x80 ) {
                         // Transparent, don't plot it...
@@ -825,11 +868,11 @@ public:
                     } else {
                         dcl = rgbToGrayMask( cl ^ rgba_invert, 1 ) & 1;
                     }
-                    const int byteindex = (xx >> 3);
-                    const int bitindex = ((xx & 7));
-                    const lUInt8 mask = 0x80 >> (bitindex);
-                    dcl = dcl << (7-bitindex);
-                    row[ byteindex ] = (lUInt8)((row[ byteindex ] & (~mask)) | dcl);
+                    const int byteindex = (x >> 3);
+                    const int bit = 7 - (x & 7);
+                    const lUInt8 mask = (lUInt8)(0x01 << bit);
+                    const lUInt8 dclbit = dcl ? mask : 0x00;
+                    row[ byteindex ] = (lUInt8)((row[ byteindex ] & (~mask)) | dclbit);
                 }
             }
             else
@@ -867,7 +910,8 @@ public:
         // This prints the unscaled decoded buffer, for debugging purposes ;).
         /*
         for (int y=0; y < src_dy; y++) {
-            lUInt8 * row = decoded + (y * (src_dx * 4));
+            if (isNinePatch) {
+                // ignore first and last lines
             this->OnLineDecoded( obj, y, (lUInt32 *) row );
         }
         */
@@ -876,8 +920,6 @@ public:
         free(sdata);
     }
 };
-
-
 int LVBaseDrawBuf::GetWidth() const
 {
     return _dx;
diff --git a/crengine/src/lvrend.cpp b/crengine/src/lvrend.cpp
index 229a4556..cc109485 100644
--- a/crengine/src/lvrend.cpp
+++ b/crengine/src/lvrend.cpp
@@ -10492,8 +10492,37 @@ void DrawBackgroundImage(ldomNode *enode,LVDrawBuf & drawbuf,int x0,int y0,int d
                     target_clip.bottom = orig_clip.bottom;
                 drawbuf.SetClipRect( &target_clip );
             }
-            // Draw
+            // Draw (optionally with rounded clipping, honoring border-radius)
+            // Compute border radii and, if any, enable rounded clip via draw_extra_info
+            draw_extra_info_t * dei = (draw_extra_info_t*)drawbuf.GetDrawExtraInfo();
+            bool restore_rounded = false;
+            lvRect saved_rounded_rect;
+            int saved_rx[4] = {0,0,0,0};
+            int saved_ry[4] = {0,0,0,0};
+            bool saved_active = false;
+            if (dei) {
+                // Save prev state
+                saved_active = dei->rounded_clip_active;
+                saved_rounded_rect = dei->rounded_clip_rect;
+                for (int i=0;i<4;i++){ saved_rx[i]=dei->rounded_rx[i]; saved_ry[i]=dei->rounded_ry[i]; }
+                // Compute radii for this element
+                RenderRectAccessor fmt( enode );
+                int rx[4]={0,0,0,0}, ry[4]={0,0,0,0};
+                computeBorderRadiiPx(enode, enode->getStyle().get(), fmt.getWidth(), fmt.getHeight(), rx, ry);
+                if (rx[0]||rx[1]||rx[2]||rx[3]||ry[0]||ry[1]||ry[2]||ry[3]) {
+                    dei->rounded_clip_active = true;
+                    dei->rounded_clip_rect = lvRect(x0+doc_x, y0+doc_y, x0+doc_x+width, y0+doc_y+height);
+                    for (int i=0;i<4;i++){ dei->rounded_rx[i]=rx[i]; dei->rounded_ry[i]=ry[i]; }
+                    restore_rounded = true;
+                }
+            }
             drawbuf.Draw(transformed, x0+doc_x+draw_x, y0+doc_y+draw_y, transform_w, transform_h);
+            if (restore_rounded) {
+                // Restore original rounded state
+                dei->rounded_clip_active = saved_active;
+                dei->rounded_clip_rect = saved_rounded_rect;
+                for (int i=0;i<4;i++){ dei->rounded_rx[i]=saved_rx[i]; dei->rounded_ry[i]=saved_ry[i]; }
+            }
             if (clip_to_target) {
                 drawbuf.SetClipRect( &orig_clip ); // Restore the original one

It included some awfully suspicious things (why remove the bpp check, what's that if (isNinePatch) { stuff about) but also wow!