dom: add some CSSStyleDeclaration functions

3 files changed, 52 insertions, 2 deletions

diff --git a/src/css/cssparser.nim b/src/css/cssparser.nim
index ef167fb2..ea337ab1 100644
--- a/src/css/cssparser.nim
+++ b/src/css/cssparser.nim
@@ -116,10 +116,13 @@ proc `$`*(c: CSSParsedItem): string =
     else:
       result &= $c.tokenType & '\n'
   elif c of CSSDeclaration:
-    result &= CSSDeclaration(c).name
+    let decl = CSSDeclaration(c)
+    result &= decl.name
     result &= ": "
-    for s in CSSDeclaration(c).value:
+    for s in decl.value:
       result &= $s
+    if decl.important:
+      result &= " !important"
     result &= ";\n"
   elif c of CSSFunction:
     result &= CSSFunction(c).name & "("
diff --git a/src/css/values.nim b/src/css/values.nim
index 6fae4737..91911c09 100644
--- a/src/css/values.nim
+++ b/src/css/values.nim
@@ -354,6 +354,9 @@ func propertyType(s: string): CSSPropertyType =
 func valueType(prop: CSSPropertyType): CSSValueType =
   return ValueTypes[prop]
 
+func isSupportedProperty*(s: string): bool =
+  return s in PropertyNames
+
 func `$`*(length: CSSLength): string =
   if length.auto:
     return "auto"
diff --git a/src/html/dom.nim b/src/html/dom.nim
index a70a3ce1..e8fa0071 100644
--- a/src/html/dom.nim
+++ b/src/html/dom.nim
@@ -2273,8 +2273,52 @@ proc delAttr(element: Element, name: string) =
 proc newCSSStyleDeclaration(element: Element, value: string):
     CSSStyleDeclaration =
   let inline_rules = newStringStream(value).parseListOfDeclarations2()
+  var decls: seq[CSSDeclaration]
+  for rule in inline_rules:
+    if rule.name.isSupportedProperty():
+      decls.add(rule)
   return CSSStyleDeclaration(decls: inline_rules, element: element)
 
+proc cssText(this: CSSStyleDeclaration): string {.jsfunc.} =
+  #TODO this is incorrect
+  return $this.decls
+
+func length(this: CSSStyleDeclaration): uint32 =
+  return uint32(this.decls.len)
+
+func item(this: CSSStyleDeclaration, u: uint32): Opt[string] =
+  if u < this.length:
+    return ok(this.decls[int(u)].name)
+  return err()
+
+proc getPropertyValue(this: CSSStyleDeclaration, s: string): string =
+  for decl in this.decls:
+    if decl.name == s:
+      return $decl.value
+  return ""
+
+# https://drafts.csswg.org/cssom/#idl-attribute-to-css-property
+func IDLAttributeToCSSProperty(s: string, dashPrefix = false): string =
+  result = if dashPrefix: "-" else: ""
+  for c in s:
+    if c in AsciiUpperAlpha:
+      result &= '-'
+      result &= c.tolower()
+    else:
+      result &= c
+
+proc getter[T: uint32|string](this: CSSStyleDeclaration, u: T):
+    Opt[string] {.jsgetprop.} =
+  when T is uint32:
+    return this.item(u)
+  else:
+    if u.isSupportedProperty():
+      return ok(this.getPropertyValue(u))
+    let u = IDLAttributeToCSSProperty(u)
+    if u.isSupportedProperty():
+      return ok(this.getPropertyValue(u))
+    return err()
+
 proc style(element: Element): CSSStyleDeclaration {.jsfget.} =
   if element.style_cached == nil:
     element.style_cached = CSSStyleDeclaration(element: element)