dom: CSSStyleDeclaration improvements

Now getComputedStyle works with pseudo-elements too.

5 files changed, 35 insertions, 21 deletions

diff --git a/src/css/cascade.nim b/src/css/cascade.nim
index b461e4cb..0b4369df 100644
--- a/src/css/cascade.nim
+++ b/src/css/cascade.nim
@@ -384,7 +384,7 @@ proc applyDeclarations(styledNode: StyledNode; parent: Element;
   element.computedMap[peNone] = map[peNone].applyDeclarations0(parent, element,
     window)
   for pseudo in peBefore..peAfter:
-    if map[pseudo].hasValues():
+    if map[pseudo].hasValues() or window.settings.scripting == smApp:
       let computed = map[pseudo].applyDeclarations0(element, nil, window)
       element.computedMap[pseudo] = computed
 
diff --git a/src/css/cssparser.nim b/src/css/cssparser.nim
index 94067d24..29ef455c 100644
--- a/src/css/cssparser.nim
+++ b/src/css/cssparser.nim
@@ -100,8 +100,10 @@ proc `$`*(c: CSSComponentValue): string =
         result &= c.cvalue
       else:
         result &= "<UNICODE>"
-    of cttDimension, cttNumber, cttINumber, cttIDimension:
+    of cttDimension, cttNumber:
       result &= $c.nvalue & c.unit
+    of cttINumber, cttIDimension:
+      result &= $int32(c.nvalue) & c.unit
     of cttPercentage:
       result &= $c.nvalue & "%"
     of cttColon:
@@ -122,7 +124,7 @@ proc `$`*(c: CSSComponentValue): string =
       result &= $s
     if decl.important:
       result &= " !important"
-    result &= ";\n"
+    result &= ";"
   elif c of CSSFunction:
     result &= $CSSFunction(c).name & "("
     for s in CSSFunction(c).value:
diff --git a/src/html/dom.nim b/src/html/dom.nim
index 7155d28c..6da73aad 100644
--- a/src/html/dom.nim
+++ b/src/html/dom.nim
@@ -3829,9 +3829,14 @@ proc newCSSStyleDeclaration(element: Element; value: string; computed = false;
     readonly: readonly
   )
 
-proc cssText(this: CSSStyleDeclaration): string {.jsfunc.} =
-  #TODO this is incorrect
-  return $this.decls
+proc cssText(this: CSSStyleDeclaration): string {.jsfget.} =
+  if this.computed:
+    return ""
+  result = ""
+  for it in this.decls:
+    if result.len > 0:
+      result &= ' '
+    result &= $it
 
 func length(this: CSSStyleDeclaration): uint32 =
   return uint32(this.decls.len)
@@ -3896,11 +3901,15 @@ proc removeProperty(this: CSSStyleDeclaration; name: string): DOMResult[string]
     this.decls.delete(i)
   return ok(value)
 
-proc setProperty(this: CSSStyleDeclaration; name, value: string):
-    DOMResult[void] {.jsfunc.} =
+proc checkReadOnly(this: CSSStyleDeclaration): DOMResult[void] =
   if this.readonly:
     return errDOMException("Cannot modify read-only declaration",
       "NoModificationAllowedError")
+  ok()
+
+proc setProperty(this: CSSStyleDeclaration; name, value: string):
+    DOMResult[void] {.jsfunc.} =
+  ?this.checkReadOnly()
   let name = name.toLowerAscii()
   if not name.isSupportedProperty():
     return ok()
@@ -3924,9 +3933,7 @@ proc setProperty(this: CSSStyleDeclaration; name, value: string):
 
 proc setter(ctx: JSContext; this: CSSStyleDeclaration; atom: JSAtom;
     value: string): DOMResult[void] {.jssetprop.} =
-  if this.computed:
-    return errDOMException("Cannot modify computed value",
-      "NoModificationAllowedError")
+  ?this.checkReadOnly()
   var u: uint32
   if ctx.fromJS(atom, u).isSome:
     let cvals = parseComponentValues(value)
@@ -3941,17 +3948,23 @@ proc setter(ctx: JSContext; this: CSSStyleDeclaration; atom: JSAtom;
 
 proc style*(element: Element): CSSStyleDeclaration {.jsfget.} =
   if element.cachedStyle == nil:
-    element.cachedStyle = CSSStyleDeclaration(element: element)
+    element.cachedStyle = newCSSStyleDeclaration(element, "")
   return element.cachedStyle
 
-proc getComputedStyle*(element: Element; pseudoElt: Option[string]):
-    CSSStyleDeclaration =
+proc getComputedStyle0*(window: Window; element: Element;
+    pseudoElt: Option[string]): CSSStyleDeclaration =
   let pseudo = case pseudoElt.get("")
   of ":before", "::before": peBefore
   of ":after", "::after": peAfter
   of "": peNone
   else: return newCSSStyleDeclaration(nil, "")
-  return newCSSStyleDeclaration(element, $element.computedMap[pseudo],
+  if element.document.window.settings.scripting == smApp:
+    window.maybeRestyle()
+    return newCSSStyleDeclaration(element, $element.computedMap[pseudo],
+      computed = true, readonly = true)
+  # In lite mode, we just parse the "style" attribute and hope for
+  # the best.
+  return newCSSStyleDeclaration(element, element.attr(satStyle),
     computed = true, readonly = true)
 
 proc corsFetch(window: Window; input: Request): FetchPromise =
diff --git a/src/html/env.nim b/src/html/env.nim
index b202fe43..54b21482 100644
--- a/src/html/env.nim
+++ b/src/html/env.nim
@@ -301,11 +301,7 @@ callback(new Event("").timeStamp);
 
 proc getComputedStyle(window: Window; element: Element;
     pseudoElt = none(string)): CSSStyleDeclaration {.jsfunc.} =
-  if window.settings.scripting == smApp:
-    window.maybeRestyle()
-    return element.getComputedStyle(pseudoElt)
-  # Maybe it works.
-  return element.style
+  return window.getComputedStyle0(element, pseudoElt)
 
 type MediaQueryList = ref object
   media: string
diff --git a/src/types/color.nim b/src/types/color.nim
index 7f49aa74..4dda7619 100644
--- a/src/types/color.nim
+++ b/src/types/color.nim
@@ -293,7 +293,10 @@ func `$`*(c: ARGBColor): string =
 func `$`*(c: CSSColor): string =
   if c.isCell:
     return "-cha-ansi(" & $c.n & ")"
-  return c.argb().serialize()
+  let c = c.argb()
+  if c.a != 255:
+    return c.serialize()
+  return "rgb(" & $c.r & ", " & $c.g & ", " & $c.b & ")"
 
 # Divide each component by 255, multiply them by n, and discard the fractions.
 # See https://arxiv.org/pdf/2202.02864.pdf for details.