diff options
author | bptato <nincsnevem662@gmail.com> | 2025-01-19 14:40:26 +0100 |
---|---|---|
committer | bptato <nincsnevem662@gmail.com> | 2025-01-19 14:43:01 +0100 |
commit | ad119c9a299458b4beca9fe8da85f74a33a8d91b (patch) | |
tree | 207bcec7e1a43db4754e97898146e0ff491390c7 /src | |
parent | 30e3ff6d8d77adc05db79ace1ed54beb609eb84d (diff) | |
download | chawan-ad119c9a299458b4beca9fe8da85f74a33a8d91b.tar.gz |
dom: CSSStyleDeclaration improvements
Now getComputedStyle works with pseudo-elements too.
Diffstat (limited to 'src')
-rw-r--r-- | src/css/cascade.nim | 2 | ||||
-rw-r--r-- | src/css/cssparser.nim | 6 | ||||
-rw-r--r-- | src/html/dom.nim | 37 | ||||
-rw-r--r-- | src/html/env.nim | 6 | ||||
-rw-r--r-- | src/types/color.nim | 5 |
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. |