render, pager: fix canvas background painting order

We were painting the background box in render for dump mode, but this
conflicted with the standard requirement that the canvas be painted
before other elements.  So now we handle this directly in the pager.

Conveniently enough, this also fixes the issue of canvas color adding
pointless spacing to pages (which often made the selection feature less
useful.)

9 files changed, 51 insertions, 19 deletions

diff --git a/src/css/render.nim b/src/css/render.nim
index 565b7c9e..d613fb9c 100644
--- a/src/css/render.nim
+++ b/src/css/render.nim
@@ -450,13 +450,14 @@ proc renderBlock(grid: var FlexibleGrid; state: var RenderState;
         #TODO bgimage
         # note: this eats the alpha
         state.bgcolor = bgcolor
-      let ix = toInt(offset.x)
-      let iy = toInt(offset.y)
-      let e = offset + box.state.size
-      let iex = toInt(e.x)
-      let iey = toInt(e.y)
-      grid.paintBackground(state, bgcolor, ix, iy, iex, iey, box.element,
-        bgcolor0.a, box.render.clipBox)
+      else:
+        let ix = toInt(offset.x)
+        let iy = toInt(offset.y)
+        let e = offset + box.state.size
+        let iex = toInt(e.x)
+        let iey = toInt(e.y)
+        grid.paintBackground(state, bgcolor, ix, iy, iex, iey, box.element,
+          bgcolor0.a, box.render.clipBox)
     if box.computed{"background-image"} != nil:
       # ugly hack for background-image display... TODO actually display images
       const s = "[img]"
diff --git a/src/local/container.nim b/src/local/container.nim
index d52d4159..0039197d 100644
--- a/src/local/container.nim
+++ b/src/local/container.nim
@@ -141,7 +141,7 @@ type
     config*: BufferConfig
     loaderConfig*: LoaderClientConfig
     iface*: BufferInterface
-    width {.jsget.}: int
+    width* {.jsget.}: int
     height {.jsget.}: int
     title: string # used in status msg
     hoverText: array[HoverType, string]
@@ -524,7 +524,7 @@ proc requestLines(container: Container): EmptyPromise {.discardable.} =
     container.lineshift = w.a
     for y in 0 ..< min(res.lines.len, w.len):
       container.lines[y] = res.lines[y]
-    var isBgNew = container.bgcolor != res.bgcolor
+    let isBgNew = container.bgcolor != res.bgcolor
     if isBgNew:
       container.bgcolor = res.bgcolor
     if res.numLines != container.numLines:
@@ -1739,6 +1739,7 @@ proc setCloneStream*(container: Container; stream: BufStream) =
 proc onReadLine(container: Container; w: Slice[int];
     handle: (proc(line: SimpleFlexibleLine)); res: GetLinesResult):
     EmptyPromise =
+  container.bgcolor = res.bgcolor
   for line in res.lines:
     handle(line)
   if res.numLines > w.b + 1:
@@ -1761,6 +1762,8 @@ proc readLines*(container: Container; handle: proc(line: SimpleFlexibleLine)) =
     return container.onReadLine(w, handle, res)
   ).then(proc() =
     if container.config.markLinks:
+      # avoid coloring link markers
+      container.bgcolor = defaultColor
       container.iface.getLinks.then(proc(res: seq[string]) =
         handle(SimpleFlexibleLine())
         for i, link in res.mypairs:
diff --git a/src/local/pager.nim b/src/local/pager.nim
index 0da33a65..22dbc5ef 100644
--- a/src/local/pager.nim
+++ b/src/local/pager.nim
@@ -952,7 +952,7 @@ proc drawBufferAdvance(s: openArray[char]; bgcolor: CellColor; oi, ox: var int;
         ls &= s[i]
   oi = i
   ox = x
-  return ls
+  return move(ls)
 
 proc drawBuffer*(pager: Pager; container: Container; ofile: File) =
   var format = Format()
@@ -961,13 +961,24 @@ proc drawBuffer*(pager: Pager; container: Container; ofile: File) =
     var w = -1
     var i = 0
     var s = ""
+    if container.bgcolor != defaultColor and
+        (line.formats.len == 0 or line.formats[0].pos > 0):
+      s.processFormat(pager.term, format, Format(bgcolor: container.bgcolor))
     for f in line.formats:
+      var ff = f.format
+      if ff.bgcolor == defaultColor:
+        ff.bgcolor = container.bgcolor
       let ls = line.str.drawBufferAdvance(format.bgcolor, i, x, f.pos)
       s.processOutputString(pager.term, ls, w)
-      s.processFormat(pager.term, format, f.format)
+      if i < line.str.len:
+        s.processFormat(pager.term, format, ff)
     if i < line.str.len:
       let ls = line.str.drawBufferAdvance(format.bgcolor, i, x, int.high)
       s.processOutputString(pager.term, ls, w)
+    if container.bgcolor != defaultColor and x < container.width:
+      s.processFormat(pager.term, format, Format(bgcolor: container.bgcolor))
+      let spaces = ' '.repeat(container.width - x)
+      s.processOutputString(pager.term, spaces, w)
     s.processFormat(pager.term, format, Format())
     ofile.writeLine(s)
   )
diff --git a/src/types/color.nim b/src/types/color.nim
index 719a0fad..65eace0e 100644
--- a/src/types/color.nim
+++ b/src/types/color.nim
@@ -2,7 +2,6 @@ import std/algorithm
 import std/math
 import std/options
 import std/strutils
-import std/tables
 
 import utils/twtstr
 
@@ -302,6 +301,9 @@ func serialize*(color: ARGBColor): string =
 func `$`*(c: ARGBColor): string =
   return c.serialize()
 
+func `$`*(c: RGBColor): string =
+  return c.argb().serialize()
+
 func `$`*(c: CSSColor): string =
   if c.isCell:
     return "-cha-ansi(" & $c.n & ")"
@@ -310,6 +312,12 @@ func `$`*(c: CSSColor): string =
     return c.serialize()
   return "rgb(" & $c.r & ", " & $c.g & ", " & $c.b & ")"
 
+func `$`*(color: CellColor): string =
+  case color.t
+  of ctNone: "none"
+  of ctRGB: $color.rgb
+  of ctANSI: "-cha-ansi(" & $uint8(color.ansi()) & ")"
+
 # Divide each component by 255, multiply them by n, and discard the fractions.
 # See https://arxiv.org/pdf/2202.02864.pdf for details.
 func fastmul*(c: ARGBColor; n: uint32): ARGBColor =
@@ -468,12 +476,6 @@ func toEightBit*(c: RGBColor): ANSIColor =
   return ANSIColor(uint8(16 + 36 * (r * 5 div 255) + 6 * (g * 5 div 255) +
     (b * 5 div 255)))
 
-template `$`*(color: CellColor): string =
-  case color.t
-  of ctNone: "none"
-  of ctRGB: $color.rgb
-  of ctANSI: "ansi" & $color.n
-
 func parseHexColor*(s: openArray[char]): Option[ARGBColor] =
   for c in s:
     if c notin AsciiHexDigit:
diff --git a/test/layout/negative-z-index-with-bgcolor-body-and-html.color.expected b/test/layout/negative-z-index-with-bgcolor-body-and-html.color.expected
new file mode 100644
index 00000000..e10d6b58
--- /dev/null
+++ b/test/layout/negative-z-index-with-bgcolor-body-and-html.color.expected
@@ -0,0 +1,2 @@
+                                                                                
+                                                                                
diff --git a/test/layout/negative-z-index-with-bgcolor-body-and-html.html b/test/layout/negative-z-index-with-bgcolor-body-and-html.html
new file mode 100644
index 00000000..eaab9b49
--- /dev/null
+++ b/test/layout/negative-z-index-with-bgcolor-body-and-html.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html style="background: purple">
+<body style="background: red; height: 2em; width: 2em">
+<div style="position: absolute; background: blue; z-index: -1">
+test
+</div>
diff --git a/test/layout/negative-z-index-with-bgcolor.color.expected b/test/layout/negative-z-index-with-bgcolor.color.expected
new file mode 100644
index 00000000..a99ca3a6
--- /dev/null
+++ b/test/layout/negative-z-index-with-bgcolor.color.expected
@@ -0,0 +1 @@
+test                                                                            
diff --git a/test/layout/negative-z-index-with-bgcolor.html b/test/layout/negative-z-index-with-bgcolor.html
new file mode 100644
index 00000000..49f98be2
--- /dev/null
+++ b/test/layout/negative-z-index-with-bgcolor.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body style="background: red; height: 2em; width: 2em">
+<div style="position: absolute; background: blue; z-index: -1">
+test
+</div>
diff --git a/test/layout/nth-child.color.expected b/test/layout/nth-child.color.expected
index b97a9239..a1b45a15 100644
--- a/test/layout/nth-child.color.expected
+++ b/test/layout/nth-child.color.expected
@@ -1,4 +1,4 @@
-
+                                                                                
   • test                                                                        
   • test                                                                        
   • test