about summary refs log blame commit diff stats
path: root/src/html/dom.nim
blob: aa6a3d0e9b0e6406f7cadfa9a49931cbf691cdf8 (plain) (tree)
1
2
3
4
5
6
7
8
9
             
             
           
              
           
              
               
             
 
                    
                
                 
                       
                 
                 
                 
                  
               
              
                 
                      
                
                    
                
                          
                 
              
                     

                   
                    
                
                   
                      
                     
                   
 
                            
                            
 
                 
    






                                                                        

































                                                                             



                                         
    

                       
                                     
                            
                               
                                   
                                  
                                 
                     
                                   
                           
                             
                   
                     
                        
                       
 
                         
 
                           
                    
                       


                               

                                   



                                                  
           



                                           
                                              



                           

                                  
                                   
                       
                         
                               
              
                                                                           




                                                                              
                               
                                         
 
                            
                                   


                                    
 
                            
                      
                                
                     
                                            
                              
                     
                                    
                                               
                                             



                                                   

                                             
                   
                                  
                                        
 

                                                     
                                 
                                    
                                   
 
                                     
                           
 
                                     
 
                                        
 

                                                     
                            
 
                                        
                                    






                                    
                                    
                      
                     
                         
                                      
                                
                                       
                
                  
                                      
                                   


                                   
 
                                      
                                   
 
                                                    

                                                         
                                    
                         
                            
                            

                      
 
                                                
                                   
 
                                                          
                                    
 
                                              
 
                                                  
                                                
                   
 
                                                 
                 

                                              
                                               

                                               
                                            
                                   
 
                                               
                         
 
                                              
                         
                                   
 


                                              
                                
                                         
                                   
 








                                                  
                             
                         



                               
 

                                              
                                   
 
                                                          
                                    
                      


                                                            
                            
 
                                               







































                                                           

                                               



                           

























                                 

                            
                               


                               
                          









                                      
                                 
 









                                                       
                                                                 

















































































































































































































































                                                                                        

                                                                           
                                                                 


                                                                   
                                                                             


                                                                               





                                                                                      

                       










                                                                            
                                                      
                               


                  





                                                          
 
                                                                 




                       
 
                                                              
                        
                                                                            
                                      
                                                             
               
                       

                    
 

                                                              















                                                                                     
 



                                                         
                                           
                                     
                                      



                                                                             


                                       





                                     



                                          
                      
                                                          
                                                 
                                      
 
                                 
                                                            
 






















                                                            
                               
                                                                                       

                               
                                           
                              
                                                           
                   
                                  

                                                   
                         
                                   
                                                 


                                                              
       
                                        
 
                                      
                      

                               




                                                     
                                                       

                                      

                                                           


















                                                     
                                             
                      
                          
              
                                               
                                  








                                                                  
 



                                                                       



                                                                     













                                                                            
       
                                           
                 
 
                                                  
                             
                                  
 
                                                                            
                                  
                                    
                                       
                                   
                                     
                                      
 







                                                            

                                               
                                                       
                                                



                                                   
                                   












                                                                   
 

                                                        










                                                     


                                                                        
                   
                         
                 
                           
   
                         
                             
 

                                              

                                      


                                                               


                        








                                                                        
                                                  






                                                     
 
              
                                                         











                                                                                  
                                                       
                                                                
                            
                                                                

                                                                             
                    
                          

                           
             
 
                                                              
                    
                          



                                    
             
 
                                                                        
                                
                          



                                    
                      

                             
                   
 
                                                               
                                
                             
                                    
                    
                              
                 
                            

                                                                            
           
                                                      
                               
                                               

                                                                        








                                                                            
















































                                                                               
          
                                                    


                                                              
                                                        
                      
                               
 

                                                                     






                                                                  
                
                                                            
 
                                                                         
 

                                                                      
 



























                                                                             
 












                                                                                   






                                                                             









                                                            











                                                          
                            









                                             
                                                              
                            
                                                                  
                       
                                                        



                                                                         
                                                   
                                 

                                                    
                                                         
                        


                                         
                                                                       
                     
                                                                        
                     
                                              


                                                 
                                                      
                            
                                                        







                                                                            
                                                        

                                   
                                                    








                                                                
                                                        








                                                                        
                                                    








                                                                
                                                        








                                                                        
                                                      








                                                                    
                                                    








                                                                












                                                                    
                             
                                       
                               

                         
                 
   


                                          
                                           









                                                                                            
 
                                                                             

                                                                


                                    
                                                                                      
                                                                  
                                                                                       

                                                                


                                              
                                                                                                

                                                             
 
                                                                                      


                                             
                                                                                               

                                              
 
                                                   
 
                                                               
                          





                                                                          





                                                                                 












                                                                 
                                                              
 



                                                  
                                                
                                          
 































                                                                                



                                                                                          
                                             
 
                                                        


                                           
 
                                                        


                                           
 




                                                            
                                                         
                              


                                                     
                              
                                  
                 
 






                                                                     










                                                                  












                                                               






















                                                       


                                  
                                                
                                                                  
                                    
                          
 




                                             
              
                                               
                             
              
                          
 
                                              
                             
              
                           
 
                                                         
                                
                
 
                                                        
                                    
                
 















                                                                  
                                                                         
                    
                                                                                                    
                          
                                                                                                                                   




                                                                                           
 
                                                                              

                                                 

                                



                                            

                                    





                                                   
                                 
 




                                                                                                
                                                                 


                                        
                                     
            
                                                             




                                              
            

                                                              
                                                            
                                          
 
                                                         
 


                                                             
 


                                                           
 
                                                
                        

               
                                        
                                                      
                                 
                    
                                                      
                 
                                                        







                                      




                                                                        

                                                                         















                                                                         
 
                                                    
                      

                                 
                                                                 
                                                               
                    
                                                                               





                                     
                         
                                                        
         
                                                                                             
                   

                                                             
                                                
                      
                                                   
                
                       
                                                             
           
                                                    
                      
























                                                                                      
                                 
           
                                                   
                                    
                                                            



                                                                           


                                           
                                                          


                                                                             
 
                                      





                                             
                                                




                                                                          
                                   
                                                        
 
                                                        
                                      
                                                           
                        
 







                                                           









                                                          
                                                         





                                                    
 
                                         
                                 
                                                  


                                

                                                                      
                                                                            
                     
        






                                                     







                                                               

                                                                             








                                                           

                                                                         
         
                                                                          
                           














                                                                                             






                                                                         

                                                      
                                
               
   
                                                          
                                      
 
                                                                      
                                 
                                
               
   
 
                                                                        
                                          
                                
                   
               
   
 

                                                                
                                
             
   
 
                                                                       



                                                            
                                
               
   
                                                                        
                                         
 
                     

                                                          
               
                               
           

                                                                    
                
                                
                  
                                  
                
                                
                                                    
                                 
            
                            
              
                              
            
                               
            
                               
              
                              
            
                            
               
                               
              

                                                                
              

                                                                
                  




                                    
                 
                                 
                
                                                
              
                              
                
                                
                  
                                  
               
                               
                
                                
             
                               
              

                                                                  
       
                          
                                
                                 
                                     
                                                   
                                                                          
                   
                                               

                         
                
                                                                  




                                                 
 

                                                                             
                                                                     
                                
 
                                          
                          
                            
                                   
             
   
                                                                 
                                          


                                                                                                     
                                
                       
                       
   
 











                                                                                                
                                        
                          



                                          
                         
                                              

                                              
                

                                             


                                                            

                                                                      



                                                    
                                                 
                                                                                             







                                                             
                                                           


                                                   

                                             






                                             
 

                                              
                      
 

                                                                      


                                       
                                                                   






















                                                                       
                                













                                                               
                                                               


                                                                






                                                                               

                                                                           
                        







                                                                 
                              
                                               
                                                                 

























                                                                    
 















                                                                 
                                                          
                            
                                                            
 

                                                              
 

                                                                  
                                                                                            
                                
                 
                                    
             
 

                                                               





                                                                                          
                                                                    
                                     
                                                             
                                                
                                                                                         
             
 
                                                                          
                                                                                            
                                
                 

                                                                                   

                                                             
 
                                                             
                                                     
                                       
                                                                                            
                                



                                      
                     
                                  
                    
 



                                              
                                                                 
                
                                                                   
                                                           
                                    
                   
                                 
                                
                          
                    

                                           
                                                                   
                               
 
                                                               
                                


                                     
                   
                                                           
 
                                                                        
                                


                                              
                   
                                                           



                                                  
                                                                       
                                                   
                              
                         
                    


                                                   
                                         
                       
                 
                 

                                                                               
                                                                                    
                                                            
 
                                     
                                        
 
                                            
                                 
                            

                                 
                                       
                                                      
                                           
                         
 
                                      









                                                
                        

                                           
                                           
















                                                                               


                                                










                                                                      


                                           



                                                   



                                                     

                                            
                                                   
                                                              
                    
                                                                                         
                                   

                                              















                                                                                                                           
                                                  



                                                  






                                                                              
                                                                           
                              
                                                   
                                                        
                                                   
                                                                     
                                                                     
                                                     
                                                                     
                                                              
                                                                              
                                                                              



                                                  
                                                                        

                                                                     
                                                                        
                    
                                       
                                                                       
                                                                      
                                                                            
                          

                                                                      
                                                                        
                 
                                    
 





                                                   
                                                       



                                                   
                              
                                





                                                                               
               
                                                                     
                                                                        



                                             
                                               
                                    


                              
                                     
                    
                                    
 
                                                                            





                                            
 
                                                                  
                                       
                                  


                                  
                                                                  
                               
                                                                            
               
                 
 


























































                                                                               
                                     


                                            
                                               
                                            



                            

                                                                         


                                                                
                                            






                                           
 
                                    
                               
                          
 

                                                                 
                                   


                                                                     


                                        
                                                                  

















                                                                                                             

                                                              



                                                      
                             
                                                                                    







                                                            
                                                      
                                                                         















                                                               
                                              
                                                                                    


                                                
                                                                  












                                                                                  
                             










































































                                                                                                
                                                 
































                                                                                               
 
                             
                                                          
                                   
                                         
                                                               
                                        
                            




                                                                                       
                                                          




                                                                              
                                                                             
                                                                     
                                              
                                                                     
                                                                        
 
                                                                      
                                        












                                                                    
 

                                                                         
                                                          
                        
                                                                      
                   
                                                                           
                                            
 
                                                                           
                                   
                                                                           
                                                 
                                                      
                                                                     
                                                             
 







































































                                                                             
                                                          







                                                                        
                                                                      

                               





                                 
                                        























                                                                                              




                                                                   










                                                                                              
                                    







                                         
                                   
                

                                          
                

                                           
                
                                             
                              











                                                              
                                     



                                                                                                         
                                                                             

                         
                                               

                             
                                                                       
                                                                
                                     
                                                                     
                              
                                                                




                                             

















                                                                              















                                                                             






























                                                                     


                                                                         
                                                         

                                                   
                                                           























                                                                                
                                         
                                     
 
                                    
                                                  
                                                               
                                             
                                  
                                                       
                            
                                              
                                     
                                
                                
                                                                          

                                                                    
                                                   
                                          
                                
                                            
                                       
                               
import deques
import macros
import math
import options
import sets
import streams
import strutils
import tables

import css/cssparser
import css/sheet
import css/values
import display/winattrs
import html/enums
import html/event
import img/bitmap
import img/painter
import img/path
import img/png
import js/console
import js/domexception
import js/error
import js/fromjs
import js/javascript
import js/opaque
import js/propertyenumlist
import js/timeout
import js/tojs
import loader/loader
import loader/request
import types/blob
import types/color
import types/matrix
import types/referer
import types/url
import types/vector
import utils/mimeguess
import utils/strwidth
import utils/twtstr

import chakasu/charset
import chakasu/decoderstream
import chakasu/encoderstream

import chame/tags

type
  FormMethod* = enum
    FORM_METHOD_GET, FORM_METHOD_POST, FORM_METHOD_DIALOG

  FormEncodingType* = enum
    FORM_ENCODING_TYPE_URLENCODED = "application/x-www-form-urlencoded",
    FORM_ENCODING_TYPE_MULTIPART = "multipart/form-data",
    FORM_ENCODING_TYPE_TEXT_PLAIN = "text/plain"

  ScriptType = enum
    NO_SCRIPTTYPE, CLASSIC, MODULE, IMPORTMAP

  ParserMetadata = enum
    PARSER_INSERTED, NOT_PARSER_INSERTED

  ScriptResultType = enum
    RESULT_NULL, RESULT_UNINITIALIZED, RESULT_SCRIPT, RESULT_IMPORT_MAP_PARSE

type
  Script = object
    #TODO setings
    baseURL: URL
    options: ScriptOptions
    mutedErrors: bool
    #TODO parse error/error to rethrow
    record: string #TODO should be a record...

  ScriptOptions = object
    nonce: string
    integrity: string
    parserMetadata: ParserMetadata
    credentialsMode: CredentialsMode
    referrerPolicy: Option[ReferrerPolicy]
    renderBlocking: bool

  ScriptResult = object
    case t: ScriptResultType
    of RESULT_NULL, RESULT_UNINITIALIZED:
      discard
    of RESULT_SCRIPT:
      script: Script
    of RESULT_IMPORT_MAP_PARSE:
      discard #TODO

type DocumentReadyState* = enum
  READY_STATE_LOADING = "loading"
  READY_STATE_INTERACTIVE = "interactive"
  READY_STATE_COMPLETE = "complete"

type
  Location = ref object
    window: Window

  Window* = ref object of EventTarget
    attrs*: WindowAttributes
    console* {.jsget.}: Console
    navigator* {.jsget.}: Navigator
    settings*: EnvironmentSettings
    loader*: Option[FileLoader]
    location* {.jsget.}: Location
    jsrt*: JSRuntime
    jsctx*: JSContext
    document* {.jsufget.}: Document
    timeouts*: TimeoutState
    navigate*: proc(url: URL)

  # Navigator stuff
  Navigator* = object
    plugins: PluginArray

  PluginArray* = object

  MimeTypeArray* = object

  NamedNodeMap = ref object
    element: Element
    attrlist: seq[Attr]

  EnvironmentSettings* = object
    scripting*: bool

  Collection = ref CollectionObj
  CollectionObj = object of RootObj
    islive: bool
    childonly: bool
    root: Node
    match: proc(node: Node): bool {.noSideEffect.}
    snapshot: seq[Node]
    livelen: int
    id: int

  NodeList = ref object of Collection

  HTMLCollection = ref object of Collection

  HTMLAllCollection = ref object of Collection

  DOMTokenList = ref object
    toks*: seq[string]
    element: Element
    localName: string

  DOMStringMap = object
    target {.cursor.}: HTMLElement

  Node* = ref object of EventTarget
    nodeType*: NodeType
    childList*: seq[Node]
    parentNode* {.jsget.}: Node
    root: Node
    index*: int # Index in parents children. -1 for nodes without a parent.
    # Live collection cache: ids of live collections are saved in all
    # nodes they refer to. These are removed when the collection is destroyed,
    # and invalidated when the owner node's children or attributes change.
    # (We can't just store pointers, because those may be invalidated by
    # the JavaScript finalizers.)
    liveCollections: HashSet[int]
    childNodes_cached: NodeList
    document_internal: Document # not nil

  Attr* = ref object of Node
    namespaceURI* {.jsget.}: string
    prefix* {.jsget.}: string
    localName* {.jsget.}: string
    value* {.jsget.}: string
    ownerElement* {.jsget.}: Element

  DOMImplementation = object
    document: Document

  Document* = ref object of Node
    charset*: Charset
    window* {.jsget: "defaultView".}: Window
    url* {.jsget: "URL".}: URL
    mode*: QuirksMode
    currentScript: HTMLScriptElement
    isxml*: bool
    implementation {.jsget.}: DOMImplementation
    origin: Origin
    readyState* {.jsget.}: DocumentReadyState

    scriptsToExecSoon*: seq[HTMLScriptElement]
    scriptsToExecInOrder*: Deque[HTMLScriptElement]
    scriptsToExecOnLoad*: Deque[HTMLScriptElement]
    parserBlockingScript*: HTMLScriptElement

    parser_cannot_change_the_mode_flag*: bool
    is_iframe_srcdoc*: bool
    focus*: Element
    contentType* {.jsget.}: string

    renderBlockingElements: seq[Element]

    invalidCollections: HashSet[int] # collection ids
    colln: int

    all_cached: HTMLAllCollection
    cachedSheets: seq[CSSStylesheet]
    cachedSheetsInvalid: bool
    children_cached: HTMLCollection

  CharacterData* = ref object of Node
    data* {.jsget.}: string

  Text* = ref object of CharacterData

  Comment* = ref object of CharacterData

  CDATASection = ref object of CharacterData

  ProcessingInstruction = ref object of CharacterData
    target {.jsget.}: string

  DocumentFragment* = ref object of Node
    host*: Element
    children_cached*: HTMLCollection

  DocumentType* = ref object of Node
    name*: string
    publicId*: string
    systemId*: string

  Element* = ref object of Node
    namespace*: Namespace
    namespacePrefix*: Option[string]
    prefix*: string
    localName*: string
    tagType*: TagType

    id* {.jsget.}: string
    classList* {.jsget.}: DOMTokenList
    attrs: Table[string, string]
    attributes* {.jsget.}: NamedNodeMap
    hover*: bool
    invalid*: bool
    style_cached*: CSSStyleDeclaration
    children_cached: HTMLCollection

  CSSStyleDeclaration* = ref object
    decls*: seq[CSSDeclaration]
    element: Element

  HTMLElement* = ref object of Element
    dataset {.jsget.}: DOMStringMap

  FormAssociatedElement* = ref object of HTMLElement
    parserInserted*: bool

  HTMLInputElement* = ref object of FormAssociatedElement
    form* {.jsget.}: HTMLFormElement
    inputType*: InputType
    value* {.jsget.}: string
    checked* {.jsget.}: bool
    xcoord*: int
    ycoord*: int
    file*: Option[Url]

  HTMLAnchorElement* = ref object of HTMLElement
    relList {.jsget.}: DOMTokenList

  HTMLSelectElement* = ref object of FormAssociatedElement
    form* {.jsget.}: HTMLFormElement

  HTMLSpanElement* = ref object of HTMLElement

  HTMLOptGroupElement* = ref object of HTMLElement

  HTMLOptionElement* = ref object of HTMLElement
    selected*: bool

  HTMLHeadingElement* = ref object of HTMLElement
    rank*: uint16

  HTMLBRElement* = ref object of HTMLElement

  HTMLMenuElement* = ref object of HTMLElement

  HTMLUListElement* = ref object of HTMLElement

  HTMLOListElement* = ref object of HTMLElement
    start*: Option[int]

  HTMLLIElement* = ref object of HTMLElement
    value* {.jsget.}: Option[int32]

  HTMLStyleElement* = ref object of HTMLElement
    sheet*: CSSStylesheet

  HTMLLinkElement* = ref object of HTMLElement
    sheet*: CSSStylesheet
    relList {.jsget.}: DOMTokenList

  HTMLFormElement* = ref object of HTMLElement
    name*: string
    smethod*: string
    enctype*: string
    novalidate*: bool
    constructingentrylist*: bool
    controls*: seq[FormAssociatedElement]
    relList {.jsget.}: DOMTokenList

  HTMLTemplateElement* = ref object of HTMLElement
    content*: DocumentFragment

  HTMLUnknownElement* = ref object of HTMLElement

  HTMLScriptElement* = ref object of HTMLElement
    parserDocument*: Document
    preparationTimeDocument*: Document
    forceAsync*: bool
    fromAnExternalFile*: bool
    readyForParserExec*: bool
    alreadyStarted*: bool
    delayingTheLoadEvent: bool
    ctype: ScriptType
    internalNonce: string
    scriptResult*: ScriptResult
    onReady: (proc())

  HTMLBaseElement* = ref object of HTMLElement

  HTMLAreaElement* = ref object of HTMLElement
    relList {.jsget.}: DOMTokenList

  HTMLButtonElement* = ref object of FormAssociatedElement
    form* {.jsget.}: HTMLFormElement
    ctype*: ButtonType
    value* {.jsget, jsset.}: string

  HTMLTextAreaElement* = ref object of FormAssociatedElement
    form* {.jsget.}: HTMLFormElement
    value* {.jsget.}: string

  HTMLLabelElement* = ref object of HTMLElement

  HTMLCanvasElement* = ref object of HTMLElement
    ctx2d: CanvasRenderingContext2D
    bitmap: Bitmap

  DrawingState = object
    # CanvasTransform
    transformMatrix: Matrix
    # CanvasFillStrokeStyles
    fillStyle: RGBAColor
    strokeStyle: RGBAColor
    # CanvasPathDrawingStyles
    lineWidth: float64
    # CanvasTextDrawingStyles
    textAlign: CSSTextAlign
    # CanvasPath
    path: Path

  RenderingContext = ref object of RootObj

  CanvasRenderingContext2D = ref object of RenderingContext
    canvas {.jsget.}: HTMLCanvasElement
    bitmap: Bitmap
    state: DrawingState
    stateStack: seq[DrawingState]

  TextMetrics = ref object
    # x-direction
    width {.jsget.}: float64
    actualBoundingBoxLeft {.jsget.}: float64
    actualBoundingBoxRight {.jsget.}: float64
    # y-direction
    fontBoundingBoxAscent {.jsget.}: float64
    fontBoundingBoxDescent {.jsget.}: float64
    actualBoundingBoxAscent {.jsget.}: float64
    actualBoundingBoxDescent {.jsget.}: float64
    emHeightAscent {.jsget.}: float64
    emHeightDescent {.jsget.}: float64
    hangingBaseline {.jsget.}: float64
    alphabeticBaseline {.jsget.}: float64
    ideographicBaseline {.jsget.}: float64

  HTMLImageElement* = ref object of HTMLElement
    bitmap*: Bitmap

jsDestructor(Navigator)
jsDestructor(PluginArray)
jsDestructor(MimeTypeArray)
jsDestructor(Window)

jsDestructor(Element)
jsDestructor(HTMLElement)
jsDestructor(HTMLInputElement)
jsDestructor(HTMLAnchorElement)
jsDestructor(HTMLSelectElement)
jsDestructor(HTMLSpanElement)
jsDestructor(HTMLOptGroupElement)
jsDestructor(HTMLOptionElement)
jsDestructor(HTMLHeadingElement)
jsDestructor(HTMLBRElement)
jsDestructor(HTMLMenuElement)
jsDestructor(HTMLUListElement)
jsDestructor(HTMLOListElement)
jsDestructor(HTMLLIElement)
jsDestructor(HTMLStyleElement)
jsDestructor(HTMLLinkElement)
jsDestructor(HTMLFormElement)
jsDestructor(HTMLTemplateElement)
jsDestructor(HTMLUnknownElement)
jsDestructor(HTMLScriptElement)
jsDestructor(HTMLBaseElement)
jsDestructor(HTMLAreaElement)
jsDestructor(HTMLButtonElement)
jsDestructor(HTMLTextAreaElement)
jsDestructor(HTMLLabelElement)
jsDestructor(HTMLCanvasElement)
jsDestructor(HTMLImageElement)
jsDestructor(Node)
jsDestructor(NodeList)
jsDestructor(HTMLCollection)
jsDestructor(HTMLAllCollection)
jsDestructor(Location)
jsDestructor(Document)
jsDestructor(DOMImplementation)
jsDestructor(DOMTokenList)
jsDestructor(DOMStringMap)
jsDestructor(Comment)
jsDestructor(CDATASection)
jsDestructor(DocumentFragment)
jsDestructor(ProcessingInstruction)
jsDestructor(CharacterData)
jsDestructor(Text)
jsDestructor(DocumentType)
jsDestructor(Attr)
jsDestructor(NamedNodeMap)
jsDestructor(CanvasRenderingContext2D)
jsDestructor(TextMetrics)
jsDestructor(CSSStyleDeclaration)

proc parseColor(element: Element, s: string): RGBAColor

proc resetTransform(state: var DrawingState) =
  state.transformMatrix = newIdentityMatrix(3)

proc resetState(state: var DrawingState) =
  state.resetTransform()
  state.fillStyle = rgba(0, 0, 0, 255)
  state.strokeStyle = rgba(0, 0, 0, 255)
  state.path = newPath()

proc create2DContext*(jctx: JSContext, target: HTMLCanvasElement,
    options: Option[JSValue]):
    CanvasRenderingContext2D =
  let ctx = CanvasRenderingContext2D(
    bitmap: target.bitmap,
    canvas: target
  )
  ctx.state.resetState()
  return ctx

# CanvasState
proc save(ctx: CanvasRenderingContext2D) {.jsfunc.} =
  ctx.stateStack.add(ctx.state)

proc restore(ctx: CanvasRenderingContext2D) {.jsfunc.} =
  if ctx.stateStack.len > 0:
    ctx.state = ctx.stateStack.pop()

proc reset(ctx: CanvasRenderingContext2D) {.jsfunc.} =
  ctx.bitmap.clear()
  #TODO empty list of subpaths
  ctx.stateStack.setLen(0)
  ctx.state.resetState()

# CanvasTransform
#TODO scale
proc rotate(ctx: CanvasRenderingContext2D, angle: float64) {.jsfunc.} =
  if classify(angle) in {fcInf, fcNegInf, fcNan}:
    return
  ctx.state.transformMatrix *= newMatrix(
    me = @[
      cos(angle), -sin(angle), 0,
      sin(angle), cos(angle), 0,
      0, 0, 1
    ],
    w = 3,
    h = 3
  )

proc translate(ctx: CanvasRenderingContext2D, x, y: float64) {.jsfunc.} =
  for v in [x, y]:
    if classify(v) in {fcInf, fcNegInf, fcNan}:
      return
  ctx.state.transformMatrix *= newMatrix(
    me = @[
      1f64, 0, x,
      0, 1, y,
      0, 0, 1
    ],
    w = 3,
    h = 3
  )

proc transform(ctx: CanvasRenderingContext2D, a, b, c, d, e, f: float64)
    {.jsfunc.} =
  for v in [a, b, c, d, e, f]:
    if classify(v) in {fcInf, fcNegInf, fcNan}:
      return
  ctx.state.transformMatrix *= newMatrix(
    me = @[
      a, c, e,
      b, d, f,
      0, 0, 1
    ],
    w = 3,
    h = 3
  )

#TODO getTransform, setTransform with DOMMatrix (i.e. we're missing DOMMatrix)
proc setTransform(ctx: CanvasRenderingContext2D, a, b, c, d, e, f: float64)
    {.jsfunc.} =
  for v in [a, b, c, d, e, f]:
    if classify(v) in {fcInf, fcNegInf, fcNan}:
      return
  ctx.state.resetTransform()
  ctx.transform(a, b, c, d, e, f)

proc resetTransform(ctx: CanvasRenderingContext2D) {.jsfunc.} =
  ctx.state.resetTransform()

func transform(ctx: CanvasRenderingContext2D, v: Vector2D): Vector2D =
  let mul = ctx.state.transformMatrix * newMatrix(@[v.x, v.y, 1], 1, 3)
  return Vector2D(x: mul.me[0], y: mul.me[1])

# CanvasFillStrokeStyles
proc fillStyle(ctx: CanvasRenderingContext2D): string {.jsfget.} =
  return ctx.state.fillStyle.serialize()

proc fillStyle(ctx: CanvasRenderingContext2D, s: string) {.jsfset.} =
  #TODO gradient, pattern
  ctx.state.fillStyle = ctx.canvas.parseColor(s)

proc strokeStyle(ctx: CanvasRenderingContext2D): string {.jsfget.} =
  return ctx.state.strokeStyle.serialize()

proc strokeStyle(ctx: CanvasRenderingContext2D, s: string) {.jsfset.} =
  #TODO gradient, pattern
  ctx.state.strokeStyle = ctx.canvas.parseColor(s)

# CanvasRect
proc clearRect(ctx: CanvasRenderingContext2D, x, y, w, h: float64) {.jsfunc.} =
  for v in [x, y, w, h]:
    if classify(v) in {fcInf, fcNegInf, fcNan}:
      return
  #TODO clipping regions (right now we just clip to default)
  let bw = float64(ctx.bitmap.width)
  let bh = float64(ctx.bitmap.height)
  let x0 = uint64(min(max(x, 0), bw))
  let x1 = uint64(min(max(x + w, 0), bw))
  let y0 = uint64(min(max(y, 0), bh))
  let y1 = uint64(min(max(y + h, 0), bh))
  ctx.bitmap.clearRect(x0, x1, y0, y1)

proc fillRect(ctx: CanvasRenderingContext2D, x, y, w, h: float64) {.jsfunc.} =
  for v in [x, y, w, h]:
    if classify(v) in {fcInf, fcNegInf, fcNan}:
      return
  #TODO do we have to clip here?
  if w == 0 or h == 0:
    return
  let bw = float64(ctx.bitmap.width)
  let bh = float64(ctx.bitmap.height)
  let x0 = uint64(min(max(x, 0), bw))
  let x1 = uint64(min(max(x + w, 0), bw))
  let y0 = uint64(min(max(y, 0), bh))
  let y1 = uint64(min(max(y + h, 0), bh))
  ctx.bitmap.fillRect(x0, x1, y0, y1, ctx.state.fillStyle)

proc strokeRect(ctx: CanvasRenderingContext2D, x, y, w, h: float64) {.jsfunc.} =
  for v in [x, y, w, h]:
    if classify(v) in {fcInf, fcNegInf, fcNan}:
      return
  #TODO do we have to clip here?
  if w == 0 or h == 0:
    return
  let bw = float64(ctx.bitmap.width)
  let bh = float64(ctx.bitmap.height)
  let x0 = uint64(min(max(x, 0), bw))
  let x1 = uint64(min(max(x + w, 0), bw))
  let y0 = uint64(min(max(y, 0), bh))
  let y1 = uint64(min(max(y + h, 0), bh))
  ctx.bitmap.strokeRect(x0, x1, y0, y1, ctx.state.strokeStyle)

# CanvasDrawPath
proc beginPath(ctx: CanvasRenderingContext2D) {.jsfunc.} =
  ctx.state.path.beginPath()

proc fill(ctx: CanvasRenderingContext2D,
    fillRule = CanvasFillRule.NON_ZERO) {.jsfunc.} = #TODO path
  ctx.state.path.tempClosePath()
  ctx.bitmap.fillPath(ctx.state.path, ctx.state.fillStyle, fillRule)
  ctx.state.path.tempOpenPath()

proc stroke(ctx: CanvasRenderingContext2D) {.jsfunc.} = #TODO path
  ctx.bitmap.strokePath(ctx.state.path, ctx.state.strokeStyle)

proc clip(ctx: CanvasRenderingContext2D,
    fillRule = CanvasFillRule.NON_ZERO) {.jsfunc.} = #TODO path
  #TODO implement
  discard

#TODO clip, ...

# CanvasUserInterface

# CanvasText
#TODO maxwidth
proc fillText(ctx: CanvasRenderingContext2D, text: string, x, y: float64) {.jsfunc.} =
  for v in [x, y]:
    if classify(v) in {fcInf, fcNegInf, fcNan}:
      return
  let vec = ctx.transform(Vector2D(x: x, y: y))
  ctx.bitmap.fillText(text, vec.x, vec.y, ctx.state.fillStyle, ctx.state.textAlign)

#TODO maxwidth
proc strokeText(ctx: CanvasRenderingContext2D, text: string, x, y: float64) {.jsfunc.} =
  for v in [x, y]:
    if classify(v) in {fcInf, fcNegInf, fcNan}:
      return
  let vec = ctx.transform(Vector2D(x: x, y: y))
  ctx.bitmap.strokeText(text, vec.x, vec.y, ctx.state.strokeStyle, ctx.state.textAlign)

proc measureText(ctx: CanvasRenderingContext2D, text: string): TextMetrics
    {.jsfunc.} =
  let tw = text.width()
  return TextMetrics(
    width: 8 * float64(tw),
    actualBoundingBoxLeft: 0,
    actualBoundingBoxRight: 8 * float64(tw),
    #TODO and the rest...
  )

# CanvasDrawImage

# CanvasImageData

# CanvasPathDrawingStyles
proc lineWidth(ctx: CanvasRenderingContext2D): float64 {.jsfget.} =
  return ctx.state.lineWidth

proc lineWidth(ctx: CanvasRenderingContext2D, f: float64) {.jsfset.} =
  if classify(f) in {fcZero, fcNegZero, fcInf, fcNegInf, fcNan}:
    return
  ctx.state.lineWidth = f

proc setLineDash(ctx: CanvasRenderingContext2D, segments: seq[float64])
    {.jsfunc.} =
  discard #TODO implement

proc getLineDash(ctx: CanvasRenderingContext2D): seq[float64] {.jsfunc.} =
  discard #TODO implement

# CanvasTextDrawingStyles
proc textAlign(ctx: CanvasRenderingContext2D): string {.jsfget.} =
  case ctx.state.textAlign
  of TEXT_ALIGN_START: return "start"
  of TEXT_ALIGN_END: return "end"
  of TEXT_ALIGN_LEFT: return "left"
  of TEXT_ALIGN_RIGHT: return "right"
  of TEXT_ALIGN_CENTER: return "center"
  else: doAssert false

proc textAlign(ctx: CanvasRenderingContext2D, s: string) {.jsfset.} =
  ctx.state.textAlign = case s
  of "start": TEXT_ALIGN_START
  of "end": TEXT_ALIGN_END
  of "left": TEXT_ALIGN_LEFT
  of "right": TEXT_ALIGN_RIGHT
  of "center": TEXT_ALIGN_CENTER
  else: ctx.state.textAlign

# CanvasPath
proc closePath(ctx: CanvasRenderingContext2D) {.jsfunc.} =
  ctx.state.path.closePath()

proc moveTo(ctx: CanvasRenderingContext2D, x, y: float64) {.jsfunc.} =
  ctx.state.path.moveTo(x, y)

proc lineTo(ctx: CanvasRenderingContext2D, x, y: float64) {.jsfunc.} =
  ctx.state.path.lineTo(x, y)

proc quadraticCurveTo(ctx: CanvasRenderingContext2D, cpx, cpy, x,
    y: float64) {.jsfunc.} =
  ctx.state.path.quadraticCurveTo(cpx, cpy, x, y)

proc arcTo(ctx: CanvasRenderingContext2D, x1, y1, x2, y2, radius: float64):
    Err[DOMException] {.jsfunc.} =
  return ctx.state.path.arcTo(x1, y1, x2, y2, radius)

proc arc(ctx: CanvasRenderingContext2D, x, y, radius, startAngle,
    endAngle: float64, counterclockwise = false): Err[DOMException]
    {.jsfunc.} =
  return ctx.state.path.arc(x, y, radius, startAngle, endAngle,
    counterclockwise)

proc ellipse(ctx: CanvasRenderingContext2D, x, y, radiusX, radiusY, rotation,
    startAngle, endAngle: float64, counterclockwise = false): Err[DOMException]
    {.jsfunc.} =
  return ctx.state.path.ellipse(x, y, radiusX, radiusY, rotation, startAngle,
    endAngle, counterclockwise)

proc rect(ctx: CanvasRenderingContext2D, x, y, w, h: float64) {.jsfunc.} =
  ctx.state.path.rect(x, y, w, h)

proc roundRect(ctx: CanvasRenderingContext2D, x, y, w, h, radii: float64) {.jsfunc.} =
  ctx.state.path.roundRect(x, y, w, h, radii)

# Reflected attributes.
type
  ReflectType = enum
    REFLECT_STR, REFLECT_BOOL, REFLECT_LONG, REFLECT_ULONG_GZ, REFLECT_ULONG

  ReflectEntry = object
    attrname: string
    funcname: string
    tags: set[TagType]
    case t: ReflectType
    of REFLECT_LONG:
      i: int32
    of REFLECT_ULONG, REFLECT_ULONG_GZ:
      u: uint32
    else: discard

template toset(ts: openarray[TagType]): set[TagType] =
  var tags: system.set[TagType]
  for tag in ts:
    tags.incl(tag)
  tags

func makes(name: string, ts: set[TagType]): ReflectEntry =
  ReflectEntry(
    attrname: name,
    funcname: name,
    t: REFLECT_STR,
    tags: ts
  )

func makes(attrname: string, funcname: string, ts: set[TagType]):
    ReflectEntry =
  ReflectEntry(
    attrname: attrname,
    funcname: funcname,
    t: REFLECT_STR,
    tags: ts
  )

func makes(name: string, ts: varargs[TagType]): ReflectEntry =
  makes(name, toset(ts))

func makes(attrname, funcname: string, ts: varargs[TagType]): ReflectEntry =
  makes(attrname, funcname, toset(ts))

func makeb(attrname, funcname: string, ts: varargs[TagType]):
    ReflectEntry =
  ReflectEntry(
    attrname: attrname,
    funcname: funcname,
    t: REFLECT_BOOL,
    tags: toset(ts)
  )

func makeb(name: string, ts: varargs[TagType]): ReflectEntry =
  makeb(name, name, ts)

template makeul(name: string, ts: varargs[TagType], default = 0u32): ReflectEntry =
  ReflectEntry(
    attrname: name,
    funcname: name,
    t: REFLECT_ULONG,
    tags: toset(ts),
    u: default
  )

template makeulgz(name: string, ts: varargs[TagType], default = 0u32): ReflectEntry =
  ReflectEntry(
    attrname: name,
    funcname: name,
    t: REFLECT_ULONG_GZ,
    tags: toset(ts),
    u: default
  )

const ReflectTable0 = [
  # non-global attributes
  makes("target", TAG_A, TAG_AREA, TAG_LABEL, TAG_LINK),
  makes("href", TAG_LINK),
  makeb("required", TAG_INPUT, TAG_SELECT, TAG_TEXTAREA),
  makes("rel", TAG_A, TAG_LINK, TAG_LABEL),
  makes("for", "htmlFor", TAG_LABEL),
  makeul("cols", TAG_TEXTAREA, 20u32),
  makeul("rows", TAG_TEXTAREA, 1u32),
# <SELECT>:
#> For historical reasons, the default value of the size IDL attribute does
#> not return the actual size used, which, in the absence of the size content
#> attribute, is either 1 or 4 depending on the presence of the multiple
#> attribute.
  makeulgz("size", TAG_SELECT, 0u32),
  makeulgz("size", TAG_INPUT, 20u32),
  makeul("width", TAG_CANVAS, 300u32),
  makeul("height", TAG_CANVAS, 150u32),
  makes("alt", TAG_IMG),
  makes("src", TAG_IMG, TAG_SCRIPT),
  makes("srcset", TAG_IMG),
  makes("sizes", TAG_IMG),
  #TODO can we add crossOrigin here?
  makes("usemap", "useMap", TAG_IMG),
  makeb("ismap", "isMap", TAG_IMG),
  # "super-global" attributes
  makes("slot", AllTagTypes),
  makes("class", "className", AllTagTypes)
]

# Forward declarations
func attr*(element: Element, s: string): string {.inline.}
func attrb*(element: Element, s: string): bool
proc attr*(element: Element, name, value: string)
func baseURL*(document: Document): URL

proc tostr(ftype: enum): string =
  return ($ftype).split('_')[1..^1].join('-').toLowerAscii()

func escapeText(s: string, attribute_mode = false): string =
  var nbsp_mode = false
  var nbsp_prev: char
  for c in s:
    if nbsp_mode:
      if c == char(0xA0):
        result &= "&nbsp;"
      else:
        result &= nbsp_prev & c
      nbsp_mode = false
    elif c == '&':
      result &= "&amp;"
    elif c == char(0xC2):
      nbsp_mode = true
      nbsp_prev = c
    elif attribute_mode and c == '"':
      result &= "&quot;"
    elif not attribute_mode and c == '<':
      result &= "&lt;"
    elif not attribute_mode and c == '>':
      result &= "&gt;"
    else:
      result &= c

func `$`*(node: Node): string =
  if node == nil: return "null" #TODO this isn't standard compliant but helps debugging
  case node.nodeType
  of ELEMENT_NODE:
    let element = Element(node)
    result = "<" & $element.tagType.tostr()
    for k, v in element.attrs:
      result &= ' ' & k & "=\"" & v.escapeText(true) & "\""
    result &= ">\n"
    for node in element.childList:
      for line in ($node).split('\n'):
        result &= "\t" & line & "\n"
    result &= "</" & $element.tagType.tostr() & ">"
  of TEXT_NODE:
    let text = Text(node)
    result = text.data.escapeText()
  of COMMENT_NODE:
    result = "<!-- " & Comment(node).data & "-->"
  of PROCESSING_INSTRUCTION_NODE:
    result = "" #TODO
  of DOCUMENT_TYPE_NODE:
    result = "<!DOCTYPE" & ' ' & DocumentType(node).name & ">"
  else:
    result = "Node of " & $node.nodeType

func document*(node: Node): Document =
  if node of Document:
    return Document(node)
  return node.document_internal

func parentElement*(node: Node): Element {.jsfget.} =
  let p = node.parentNode
  if p != nil and p of Element:
    return Element(p)
  return nil

iterator elementList*(node: Node): Element {.inline.} =
  for child in node.childList:
    if child.nodeType == ELEMENT_NODE:
      yield Element(child)

iterator elementList_rev*(node: Node): Element {.inline.} =
  for i in countdown(node.childList.high, 0):
    let child = node.childList[i]
    if child.nodeType == ELEMENT_NODE:
      yield Element(child)

# Returns the node's ancestors
iterator ancestors*(node: Node): Element {.inline.} =
  var element = node.parentElement
  while element != nil:
    yield element
    element = element.parentElement

# Returns the node itself and its ancestors
iterator branch*(node: Node): Node {.inline.} =
  var node = node
  while node != nil:
    yield node
    node = node.parentNode

# Returns the node's descendants
iterator descendants*(node: Node): Node {.inline.} =
  var stack: seq[Node]
  for i in countdown(node.childList.high, 0):
    stack.add(node.childList[i])
  while stack.len > 0:
    let node = stack.pop()
    yield node
    for i in countdown(node.childList.high, 0):
      stack.add(node.childList[i])

iterator elements*(node: Node): Element {.inline.} =
  for child in node.descendants:
    if child.nodeType == ELEMENT_NODE:
      yield Element(child)

iterator elements*(node: Node, tag: TagType): Element {.inline.} =
  for desc in node.elements:
    if desc.tagType == tag:
      yield desc

iterator elements*(node: Node, tag: set[TagType]): Element {.inline.} =
  for desc in node.elements:
    if desc.tagType in tag:
      yield desc

iterator inputs(form: HTMLFormElement): HTMLInputElement {.inline.} =
  for control in form.controls:
    if control.tagType == TAG_INPUT:
      yield HTMLInputElement(control)

iterator radiogroup(form: HTMLFormElement): HTMLInputElement {.inline.} =
  for input in form.inputs:
    if input.inputType == INPUT_RADIO:
      yield input

iterator radiogroup(document: Document): HTMLInputElement {.inline.} =
  for input in document.elements(TAG_INPUT):
    let input = HTMLInputElement(input)
    if input.form == nil and input.inputType == INPUT_RADIO:
      yield input

iterator radiogroup*(input: HTMLInputElement): HTMLInputElement {.inline.} =
  if input.form != nil:
    for input in input.form.radiogroup:
      yield input
  else:
    for input in input.document.radiogroup:
      yield input

iterator textNodes*(node: Node): Text {.inline.} =
  for node in node.childList:
    if node.nodeType == TEXT_NODE:
      yield Text(node)

iterator options*(select: HTMLSelectElement): HTMLOptionElement {.inline.} =
  for child in select.elementList:
    if child.tagType == TAG_OPTION:
      yield HTMLOptionElement(child)
    elif child.tagType == TAG_OPTGROUP:
      for opt in child.elementList:
        if opt.tagType == TAG_OPTION:
          yield HTMLOptionElement(opt)

proc populateCollection(collection: Collection) =
  if collection.childonly:
    for child in collection.root.childList:
      if collection.match == nil or collection.match(child):
        collection.snapshot.add(child)
  else:
    for desc in collection.root.descendants:
      if collection.match == nil or collection.match(desc):
        collection.snapshot.add(desc)
  if collection.islive:
    for child in collection.snapshot:
      child.liveCollections.incl(collection.id)
    collection.root.liveCollections.incl(collection.id)

proc refreshCollection(collection: Collection) =
  let document = collection.root.document
  if collection.id in document.invalidCollections:
    for child in collection.snapshot:
      assert collection.id in child.liveCollections
      child.liveCollections.excl(collection.id)
    collection.snapshot.setLen(0)
    collection.populateCollection()
    document.invalidCollections.excl(collection.id)

proc finalize0(collection: Collection) =
  if collection.islive:
    for child in collection.snapshot:
      assert collection.id in child.liveCollections
      child.liveCollections.excl(collection.id)
    collection.root.document.invalidCollections.excl(collection.id)

proc finalize(collection: HTMLCollection) {.jsfin.} =
  collection.finalize0()

proc finalize(collection: NodeList) {.jsfin.} =
  collection.finalize0()

proc finalize(collection: HTMLAllCollection) {.jsfin.} =
  collection.finalize0()

func ownerDocument(node: Node): Document {.jsfget.} =
  if node.nodeType == DOCUMENT_NODE:
    return nil
  return node.document

func hasChildNodes(node: Node): bool {.jsfget.} =
  return node.childList.len > 0

func len(collection: Collection): int =
  collection.refreshCollection()
  return collection.snapshot.len

type CollectionMatchFun = proc(node: Node): bool {.noSideEffect.}

func newCollection[T: Collection](root: Node, match: CollectionMatchFun,
    islive, childonly: bool): T =
  result = T(
    islive: islive,
    childonly: childonly,
    match: match,
    root: root,
    id: root.document.colln
  )
  inc root.document.colln
  result.populateCollection()

func nodeType(node: Node): uint16 {.jsfget.} =
  return uint16(node.nodeType)

func isElement(node: Node): bool =
  return node.nodeType == ELEMENT_NODE

template parentNodeChildrenImpl(parentNode: typed) =
  if parentNode.children_cached == nil:
    parentNode.children_cached = newCollection[HTMLCollection](
      root = parentNode,
      match = isElement,
      islive = true,
      childonly = true
    )
  return parentNode.children_cached

func children(parentNode: Document): HTMLCollection {.jsfget.} =
  parentNodeChildrenImpl(parentNode)

func children(parentNode: DocumentFragment): HTMLCollection {.jsfget.} =
  parentNodeChildrenImpl(parentNode)

func children(parentNode: Element): HTMLCollection {.jsfget.} =
  parentNodeChildrenImpl(parentNode)

func childNodes(node: Node): NodeList {.jsfget.} =
  if node.childNodes_cached == nil:
    node.childNodes_cached = newCollection[NodeList](
      root = node,
      match = nil,
      islive = true,
      childonly = true
    )
  return node.childNodes_cached

# DOMTokenList
func length(tokenList: DOMTokenList): uint32 {.jsfget.} =
  return uint32(tokenList.toks.len)

func item(tokenList: DOMTokenList, i: int): Option[string] {.jsfunc.} =
  if i < tokenList.toks.len:
    return some(tokenList.toks[i])

func contains*(tokenList: DOMTokenList, s: string): bool {.jsfunc.} =
  return s in tokenList.toks

proc update(tokenList: DOMTokenList) =
  if not tokenList.element.attrb(tokenList.localName) and tokenList.toks.len == 0:
    return
  tokenList.element.attr(tokenList.localName, tokenList.toks.join(' '))

func validateDOMToken(tok: string): Err[DOMException] =
  if tok == "":
    return errDOMException("Got an empty string", "SyntaxError")
  if AsciiWhitespace in tok:
    return errDOMException("Got a string containing whitespace",
      "InvalidCharacterError")

proc add(tokenList: DOMTokenList, tokens: varargs[string]): Err[DOMException]
    {.jsfunc.} =
  for tok in tokens:
    ?validateDOMToken(tok)
  for tok in tokens:
    tokenList.toks.add(tok)
  tokenList.update()
  return ok()

proc remove(tokenList: DOMTokenList, tokens: varargs[string]):
    Err[DOMException] {.jsfunc.} =
  for tok in tokens:
    ?validateDOMToken(tok)
  for tok in tokens:
    let i = tokenList.toks.find(tok)
    if i != -1:
      tokenList.toks.delete(i)
  tokenList.update()
  return ok()

proc toggle(tokenList: DOMTokenList, token: string, force = none(bool)):
    DOMResult[bool] {.jsfunc.} =
  ?validateDOMToken(token)
  let i = tokenList.toks.find(token)
  if i != -1:
    if not force.get(false):
      tokenList.toks.delete(i)
      tokenList.update()
      return ok(false)
    return ok(true)
  if force.get(true):
    tokenList.toks.add(token)
    tokenList.update()
    return ok(true)
  return ok(false)

proc replace(tokenList: DOMTokenList, token, newToken: string):
    DOMResult[bool] {.jsfunc.} =
  ?validateDOMToken(token)
  ?validateDOMToken(newToken)
  let i = tokenList.toks.find(token)
  if i == -1:
    return ok(false)
  tokenList.toks[i] = newToken
  tokenList.update()
  return ok(true)

const SupportedTokensMap = {
  "rel": @["alternate", "dns-prefetch", "icon", "manifest", "modulepreload",
    "next", "pingback", "preconnect", "prefetch", "preload", "search",
    "stylesheet"]
}.toTable()

func supports(tokenList: DOMTokenList, token: string):
    JSResult[bool] {.jsfunc.} =
  if tokenList.localName in SupportedTokensMap:
    let lowercase = token.toLowerAscii()
    return ok(lowercase in SupportedTokensMap[tokenList.localName])
  return err(newTypeError("No supported tokens defined for attribute " &
    tokenList.localName))

func `$`(tokenList: DOMTokenList): string {.jsfunc.} =
  return tokenList.toks.join(' ')

func value(tokenList: DOMTokenList): string {.jsfget.} =
  return $tokenList

func getter(tokenList: DOMTokenList, i: int): Option[string] {.jsgetprop.} =
  return tokenList.item(i)

# DOMStringMap
func validateAttributeName(name: string, isq: static bool = false):
    Err[DOMException] =
  when isq:
    if name.matchNameProduction():
      return ok()
  else:
    if name.matchQNameProduction():
      return ok()
  return errDOMException("Invalid character in attribute name",
    "InvalidCharacterError")

func hasprop(map: ptr DOMStringMap, name: string): bool {.jshasprop.} =
  return "data-" & name in map[].target.attrs

proc delete(map: ptr DOMStringMap, name: string): bool {.jsfunc.} =
  let name = "data-" & name.camelToKebabCase()
  let res = name in map[].target.attrs
  map[].target.attrs.del(name)
  return res

func getter(map: ptr DOMStringMap, name: string): Option[string]
    {.jsgetprop.} =
  let name = "data-" & name.camelToKebabCase()
  map[].target.attrs.withValue(name, p):
    return some(p[])
  return none(string)

proc setter(map: ptr DOMStringMap, name, value: string): Err[DOMException]
    {.jssetprop.} =
  var washy = false
  for c in name:
    if not washy or c notin AsciiLowerAlpha:
      washy = c == '-'
      continue
    return errDOMException("Lower case after hyphen is not allowed in dataset",
      "InvalidCharacterError")
  let name = "data-" & name.camelToKebabCase()
  ?name.validateAttributeName()
  map.target.attr(name, value)
  return ok()

func names(ctx: JSContext, map: ptr DOMStringMap): JSPropertyEnumList
    {.jspropnames.} =
  var list = newJSPropertyEnumList(ctx, uint32(map[].target.attrs.len))
  for k, v in map[].target.attrs:
    if k.startsWith("data-") and AsciiUpperAlpha notin k:
      list.add(k["data-".len .. ^1].kebabToCamelCase())
  return list

# NodeList
func length(nodeList: NodeList): uint32 {.jsfget.} =
  return uint32(nodeList.len)

func hasprop(nodeList: NodeList, i: int): bool {.jshasprop.} =
  return i < nodeList.len

func item(nodeList: NodeList, i: int): Node {.jsfunc.} =
  if i < nodeList.len:
    return nodeList.snapshot[i]

func getter(nodeList: NodeList, i: int): Option[Node] {.jsgetprop.} =
  return option(nodeList.item(i))

func names(ctx: JSContext, nodeList: NodeList): JSPropertyEnumList
    {.jspropnames.} =
  let L = nodeList.length
  var list = newJSPropertyEnumList(ctx, L)
  for u in 0 ..< L:
    list.add(u)
  return list

# HTMLCollection
proc length(collection: HTMLCollection): uint32 {.jsfget.} =
  return uint32(collection.len)

func hasprop(collection: HTMLCollection, u: uint32): bool {.jshasprop.} =
  return u < collection.length

func item(collection: HTMLCollection, u: uint32): Element {.jsfunc.} =
  if u < collection.length:
    return Element(collection.snapshot[int(u)])

func namedItem(collection: HTMLCollection, s: string): Element {.jsfunc.} =
  for it in collection.snapshot:
    let it = Element(it)
    if it.id == s or it.namespace == Namespace.HTML and it.attr("name") == s:
      return it

func getter[T: uint32|string](collection: HTMLCollection, u: T):
    Option[Element] {.jsgetprop.} =
  when T is uint32:
    return option(collection.item(u))
  else:
    return option(collection.namedItem(u))

func names(ctx: JSContext, collection: HTMLCollection): JSPropertyEnumList
    {.jspropnames.} =
  let L = collection.length
  var list = newJSPropertyEnumList(ctx, L)
  var ids: OrderedSet[string]
  for u in 0 ..< L:
    list.add(u)
    let elem = collection.item(u)
    if elem.id != "":
      ids.incl(elem.id)
    if elem.namespace == Namespace.HTML:
      let name = elem.attr("name")
      ids.incl(name)
  for id in ids:
    list.add(id)
  return list

# HTMLAllCollection
proc length(collection: HTMLAllCollection): uint32 {.jsfget.} =
  return uint32(collection.len)

func hasprop(collection: HTMLAllCollection, i: int): bool {.jshasprop.} =
  return i < collection.len

func item(collection: HTMLAllCollection, i: int): Element {.jsfunc.} =
  if i < collection.len:
    return Element(collection.snapshot[i])

func getter(collection: HTMLAllCollection, i: int): Option[Element] {.jsgetprop.} =
  return option(collection.item(i))

func names(ctx: JSContext, collection: HTMLAllCollection): JSPropertyEnumList
    {.jspropnames.} =
  let L = collection.length
  var list = newJSPropertyEnumList(ctx, L)
  for u in 0 ..< L:
    list.add(u)
  return list

proc all(document: Document): HTMLAllCollection {.jsfget.} =
  if document.all_cached == nil:
    document.all_cached = newCollection[HTMLAllCollection](
      root = document,
      match = isElement,
      islive = true,
      childonly = false
    )
  return document.all_cached

# Location
proc newLocation*(window: Window): Location =
  let location = Location(window: window)
  let ctx = window.jsctx
  if ctx != nil:
    let val = toJS(ctx, location)
    let valueOf = ctx.getOpaque().Object_prototype_valueOf
    defineProperty(ctx, val, "valueOf", valueOf)
    defineProperty(ctx, val, "toPrimitive", JS_UNDEFINED)
    #TODO [[DefaultProperties]]
    JS_FreeValue(ctx, val)
  return location

func location(document: Document): Location {.jsfget.} =
  if document.window == nil:
    return nil
  return document.window.location

func document(location: Location): Document =
  return location.window.document

func url(location: Location): URL =
  let document = location.document
  if document != nil:
    return document.url
  return newURL("about:blank").get

proc setLocation*(document: Document, s: string): Err[JSError]
    {.jsfset: "location".} =
  if document.location == nil:
    return err(newTypeError("document.location is not an object"))
  let url = parseURL(s)
  if url.isNone:
    return errDOMException("Invalid URL", "SyntaxError")
  document.window.navigate(url.get)
  return ok()

# Note: we do not implement security checks (as documents are in separate
# windows anyway).
func `$`(location: Location): string {.jsuffunc.} =
  return location.url.serialize()

func href(location: Location): string {.jsuffget.} =
  return $location

proc setHref(location: Location, s: string): Err[JSError]
    {.jsfset: "href".} =
  if location.document == nil:
    return ok()
  return location.document.setLocation(s)

proc assign(location: Location, s: string): Err[JSError] {.jsuffunc.} =
  location.setHref(s)

proc replace(location: Location, s: string): Err[JSError] {.jsuffunc.} =
  location.setHref(s)

proc reload(location: Location) {.jsuffunc.} =
  if location.document == nil:
    return
  location.document.window.navigate(location.url)

func origin(location: Location): string {.jsuffget.} =
  return location.url.origin

func protocol(location: Location): string {.jsuffget.} =
  return location.url.protocol

proc protocol(location: Location, s: string): Err[DOMException] {.jsfset.} =
  let document = location.document
  if document == nil:
    return
  let copyURL = newURL(location.url)
  copyURL.setProtocol(s)
  if copyURL.scheme != "http" and copyURL.scheme != "https":
    return errDOMException("Invalid URL", "SyntaxError")
  document.window.navigate(copyURL)
  return ok()

func host(location: Location): string {.jsuffget.} =
  return location.url.host

proc setHost(location: Location, s: string) {.jsfset: "host".} =
  let document = location.document
  if document == nil:
    return
  let copyURL = newURL(location.url)
  copyURL.setHost(s)
  document.window.navigate(copyURL)

proc hostname(location: Location): string {.jsuffget.} =
  return location.url.hostname

proc setHostname(location: Location, s: string) {.jsfset: "hostname".} =
  let document = location.document
  if document == nil:
    return
  let copyURL = newURL(location.url)
  copyURL.setHostname(s)
  document.window.navigate(copyURL)

proc port(location: Location): string {.jsuffget.} =
  return location.url.port

proc setPort(location: Location, s: string) {.jsfset: "port".} =
  let document = location.document
  if document == nil:
    return
  let copyURL = newURL(location.url)
  copyURL.setPort(s)
  document.window.navigate(copyURL)

proc pathname(location: Location): string {.jsuffget.} =
  return location.url.pathname

proc setPathname(location: Location, s: string) {.jsfset: "pathname".} =
  let document = location.document
  if document == nil:
    return
  let copyURL = newURL(location.url)
  copyURL.setPathname(s)
  document.window.navigate(copyURL)

proc search(location: Location): string {.jsuffget.} =
  return location.url.search

proc setSearch(location: Location, s: string) {.jsfset: "search".} =
  let document = location.document
  if document == nil:
    return
  let copyURL = newURL(location.url)
  copyURL.setSearch(s)
  document.window.navigate(copyURL)

proc hash(location: Location): string {.jsuffget.} =
  return location.url.hash

proc setHash(location: Location, s: string) {.jsfset: "hash".} =
  let document = location.document
  if document == nil:
    return
  let copyURL = newURL(location.url)
  copyURL.setHash(s)
  document.window.navigate(copyURL)

func newAttr(document: Document, localName, value, prefix,
    namespaceURI: string): Attr =
  return Attr(
    nodeType: ATTRIBUTE_NODE,
    document_internal: document,
    namespaceURI: namespaceURI,
    localName: localName,
    prefix: prefix,
    value: value,
    index: -1
  )

func newAttr(parent: Element, localName, value: string, prefix = "",
    namespaceURI = ""): Attr =
  return Attr(
    nodeType: ATTRIBUTE_NODE,
    document_internal: parent.document,
    namespaceURI: namespaceURI,
    ownerElement: parent,
    localName: localName,
    prefix: prefix,
    value: value,
    index: -1
  )

func name(attr: Attr): string {.jsfget.} =
  if attr.prefix == "":
    return attr.localName
  return attr.prefix & ':' & attr.localName

func findAttr(map: NamedNodeMap, name: string): int =
  for i in 0 ..< map.attrlist.len:
    if map.attrlist[i].name == name:
      return i
  return -1

func findAttrNS(map: NamedNodeMap, namespace, localName: string): int =
  for i in 0 ..< map.attrlist.len:
    if map.attrlist[i].namespaceURI == namespace and map.attrlist[i].localName == localName:
      return i
  return -1

func hasAttribute(element: Element, qualifiedName: string): bool {.jsfunc.} =
  let qualifiedName = if element.namespace == Namespace.HTML and
      not element.document.isxml:
    qualifiedName.toLowerAscii()
  else:
    qualifiedName
  if qualifiedName in element.attrs:
    return true

func hasAttributeNS(element: Element, namespace, localName: string): bool {.jsfunc.} =
  return element.attributes.findAttrNS(namespace, localName) != -1

func getAttribute(element: Element, qualifiedName: string): Option[string] {.jsfunc.} =
  let qualifiedName = if element.namespace == Namespace.HTML and
      not element.document.isxml:
    qualifiedName.toLowerAscii()
  else:
    qualifiedName
  element.attrs.withValue(qualifiedName, val):
    return some(val[])

func getAttributeNS(element: Element, namespace, localName: string): Option[string] {.jsfunc.} =
  let i = element.attributes.findAttrNS(namespace, localName)
  if i != -1:
    return some(element.attributes.attrlist[i].value)

func getNamedItem(map: NamedNodeMap, qualifiedName: string): Option[Attr] {.jsfunc.} =
  if map.element.hasAttribute(qualifiedName):
    let i = map.findAttr(qualifiedName)
    if i != -1:
      return some(map.attrlist[i])

func getNamedItemNS(map: NamedNodeMap, namespace, localName: string): Option[Attr] {.jsfunc.} =
  let i = map.findAttrNS(namespace, localName)
  if i != -1:
    return some(map.attrlist[i])

func length(map: NamedNodeMap): uint32 {.jsfget.} =
  return uint32(map.element.attrs.len)

func item(map: NamedNodeMap, i: int): Option[Attr] {.jsfunc.} =
  if i < map.attrlist.len:
    return some(map.attrlist[i])

func hasprop[T: int|string](map: NamedNodeMap, i: T): bool {.jshasprop.} =
  when T is int:
    return i < map.attrlist.len
  else:
    return map.getNamedItem(i).isSome

func getter[T: int|string](map: NamedNodeMap, i: T): Option[Attr] {.jsgetprop.} =
  when T is int:
    return map.item(i)
  else:
    return map.getNamedItem(i)

func names(ctx: JSContext, map: NamedNodeMap): JSPropertyEnumList
    {.jspropnames.} =
  let len = if map.element.namespace == Namespace.HTML:
    uint32(map.attrlist.len + map.element.attrs.len)
  else:
    uint32(map.attrlist.len)
  var list = newJSPropertyEnumList(ctx, len)
  for u in 0 ..< len:
    list.add(u)
  if map.element.namespace == Namespace.HTML:
    for name in map.element.attrs.keys:
      list.add(name)
  return list

func length(characterData: CharacterData): uint32 {.jsfget.} =
  return uint32(characterData.data.utf16Len)

func scriptingEnabled*(document: Document): bool =
  if document.window == nil:
    return false
  return document.window.settings.scripting

func scriptingEnabled*(element: Element): bool =
  return element.document.scriptingEnabled

func form*(element: FormAssociatedElement): HTMLFormElement =
  case element.tagType
  of TAG_INPUT: return HTMLInputElement(element).form
  of TAG_SELECT: return HTMLSelectElement(element).form
  of TAG_BUTTON: return HTMLButtonElement(element).form
  of TAG_TEXTAREA: return HTMLTextAreaElement(element).form
  else: assert false

func `form=`*(element: FormAssociatedElement, form: HTMLFormElement) =
  case element.tagType
  of TAG_INPUT: HTMLInputElement(element).form = form
  of TAG_SELECT:  HTMLSelectElement(element).form = form
  of TAG_BUTTON: HTMLButtonElement(element).form = form
  of TAG_TEXTAREA: HTMLTextAreaElement(element).form = form
  else: assert false

func canSubmitImplicitly*(form: HTMLFormElement): bool =
  const BlocksImplicitSubmission = {
    INPUT_TEXT, INPUT_SEARCH, INPUT_URL, INPUT_TEL, INPUT_EMAIL, INPUT_PASSWORD,
    INPUT_DATE, INPUT_MONTH, INPUT_WEEK, INPUT_TIME, INPUT_DATETIME_LOCAL,
    INPUT_NUMBER
  }
  var found = false
  for control in form.controls:
    if control.tagType == TAG_INPUT:
      let input = HTMLInputElement(control)
      if input.inputType in BlocksImplicitSubmission:
        if found:
          return false
        else:
          found = true
  return true

func qualifiedName*(element: Element): string =
  if element.namespacePrefix.issome: element.namespacePrefix.get & ':' & element.localName
  else: element.localName

func html*(document: Document): HTMLElement =
  for element in document.elements(TAG_HTML):
    return HTMLElement(element)

func head*(document: Document): HTMLElement {.jsfget.} =
  let html = document.html
  if html != nil:
    for element in html.elements(TAG_HEAD):
      return HTMLElement(element)

func body*(document: Document): HTMLElement {.jsfget.} =
  let html = document.html
  if html != nil:
    for element in html.elements(TAG_BODY):
      return HTMLElement(element)

func select*(option: HTMLOptionElement): HTMLSelectElement =
  for anc in option.ancestors:
    if anc.tagType == TAG_SELECT:
      return HTMLSelectElement(anc)
  return nil

func countChildren(node: Node, nodeType: NodeType): int =
  for child in node.childList:
    if child.nodeType == nodeType:
      inc result

func hasChild(node: Node, nodeType: NodeType): bool =
  for child in node.childList:
    if child.nodeType == nodeType:
      return true

func hasChildExcept(node: Node, nodeType: NodeType, ex: Node): bool =
  for child in node.childList:
    if child == ex:
      continue
    if child.nodeType == nodeType:
      return true
  return false

func previousSibling*(node: Node): Node {.jsfget.} =
  let i = node.index - 1
  if node.parentNode == nil or i < 0:
    return nil
  return node.parentNode.childList[i]

func nextSibling*(node: Node): Node {.jsfget.} =
  let i = node.index + 1
  if node.parentNode == nil or i >= node.parentNode.childList.len:
    return nil
  return node.parentNode.childList[i]

func hasNextSibling(node: Node, nodeType: NodeType): bool =
  var node = node.nextSibling
  while node != nil:
    if node.nodeType == nodeType: return true
    node = node.nextSibling
  return false

func hasPreviousSibling(node: Node, nodeType: NodeType): bool =
  var node = node.previousSibling
  while node != nil:
    if node.nodeType == nodeType: return true
    node = node.previousSibling
  return false

func nodeValue(node: Node): Option[string] {.jsfget.} =
  case node.nodeType
  of CharacterDataNodes:
    return some(CharacterData(node).data)
  of ATTRIBUTE_NODE:
    return some(Attr(node).value)
  else: discard

func textContent*(node: Node): string {.jsfget.} =
  case node.nodeType
  of DOCUMENT_NODE, DOCUMENT_TYPE_NODE:
    return "" #TODO null
  of CharacterDataNodes:
    return CharacterData(node).data
  else:
    for child in node.childList:
      if child.nodeType != COMMENT_NODE:
        result &= child.textContent

func childTextContent*(node: Node): string =
  for child in node.childList:
    if child.nodeType == TEXT_NODE:
      result &= Text(child).data

func rootNode*(node: Node): Node =
  if node.root == nil: return node
  return node.root

func isConnected*(node: Node): bool {.jsfget.} =
  return node.rootNode.nodeType == DOCUMENT_NODE #TODO shadow root

func inSameTree*(a, b: Node): bool =
  a.rootNode == b.rootNode

# a == b or a in b's ancestors
func contains*(a, b: Node): bool {.jsfunc.} =
  if b != nil:
    for node in b.branch:
      if node == a:
        return true
  return false

func firstChild*(node: Node): Node {.jsfget.} =
  if node.childList.len == 0:
    return nil
  return node.childList[0]

func lastChild*(node: Node): Node {.jsfget.} =
  if node.childList.len == 0:
    return nil
  return node.childList[^1]

func firstElementChild*(node: Node): Element {.jsfget.} =
  for child in node.elementList:
    return child
  return nil

func lastElementChild*(node: Node): Element {.jsfget.} =
  for child in node.elementList_rev:
    return child
  return nil

func findAncestor*(node: Node, tagTypes: set[TagType]): Element =
  for element in node.ancestors:
    if element.tagType in tagTypes:
      return element
  return nil

func getElementById*(node: Node, id: string): Element {.jsfunc.} =
  if id.len == 0:
    return nil
  for child in node.elements:
    if child.id == id:
      return child

func getElementsByTag*(node: Node, tag: TagType): seq[Element] =
  for element in node.elements(tag):
    result.add(element)

func getElementsByTagName0(root: Node, tagName: string): HTMLCollection =
  if tagName == "*":
    return newCollection[HTMLCollection](root, func(node: Node): bool = node.isElement, true, false)
  let t = tagType(tagName)
  if t != TAG_UNKNOWN:
    return newCollection[HTMLCollection](root, func(node: Node): bool = node.isElement and Element(node).tagType == t, true, false)

func getElementsByTagName(document: Document, tagName: string): HTMLCollection {.jsfunc.} =
  return document.getElementsByTagName0(tagName)

func getElementsByTagName(element: Element, tagName: string): HTMLCollection {.jsfunc.} =
  return element.getElementsByTagName0(tagName)

func getElementsByClassName0(node: Node, classNames: string): HTMLCollection =
  var classes = classNames.split(AsciiWhitespace)
  let isquirks = node.document.mode == QUIRKS
  if isquirks:
    for class in classes.mitems:
      for c in class.mitems:
        c = c.toLowerAscii()
  return newCollection[HTMLCollection](node,
    func(node: Node): bool =
      if node.nodeType == ELEMENT_NODE:
        if isquirks:
          var cl = Element(node).classList
          for tok in cl.toks.mitems:
            for c in tok.mitems:
              c = c.toLowerAscii()
          for class in classes:
            if class notin cl:
              return false
        else:
          for class in classes:
            if class notin Element(node).classList:
              return false
        return true, true, false)

func getElementsByClassName(document: Document, classNames: string): HTMLCollection {.jsfunc.} =
  return document.getElementsByClassName0(classNames)

func getElementsByClassName(element: Element, classNames: string): HTMLCollection {.jsfunc.} =
  return element.getElementsByClassName0(classNames)

func previousElementSibling*(elem: Element): Element {.jsfget.} =
  let p = elem.parentNode
  if p == nil: return nil
  for i in countdown(elem.index - 1, 0):
    let node = p.childList[i]
    if node.nodeType == ELEMENT_NODE:
      return Element(node)
  return nil

func nextElementSibling*(elem: Element): Element {.jsfget.} =
  let p = elem.parentNode
  if p == nil: return nil
  for i in elem.index + 1 .. p.childList.high:
    let node = p.childList[i]
    if node.nodeType == ELEMENT_NODE:
      return Element(node)
  return nil

func documentElement(document: Document): Element {.jsfget.} =
  document.firstElementChild()

func attr*(element: Element, s: string): string {.inline.} =
  return element.attrs.getOrDefault(s, "")

func attrl*(element: Element, s: string): Option[int32] =
  return parseInt32(element.attr(s))

func attrulgz*(element: Element, s: string): Option[uint32] =
  let x = parseUInt32(element.attr(s))
  if x.isSome and x.get > 0:
    return x

func attrul*(element: Element, s: string): Option[uint32] =
  let x = parseUInt32(element.attr(s))
  if x.isSome and x.get >= 0:
    return x

func attrb*(element: Element, s: string): bool =
  if s in element.attrs:
    return true
  return false

# Element attribute reflection (getters)
func innerHTML*(element: Element): string {.jsfget.} =
  for child in element.childList:
    result &= $child

func outerHTML*(element: Element): string {.jsfget.} =
  return $element

func crossOrigin0(element: HTMLElement): CORSAttribute =
  if not element.attrb("crossorigin"):
    return NO_CORS
  case element.attr("crossorigin")
  of "anonymous", "":
    return ANONYMOUS
  of "use-credentials":
    return USE_CREDENTIALS
  return ANONYMOUS

func crossOrigin(element: HTMLScriptElement): CORSAttribute {.jsfget.} =
  return element.crossOrigin0

func crossOrigin(element: HTMLImageElement): CORSAttribute {.jsfget.} =
  return element.crossOrigin0

func referrerpolicy(element: HTMLScriptElement): Option[ReferrerPolicy] =
  getReferrerPolicy(element.attr("referrerpolicy"))

proc sheets*(document: Document): seq[CSSStylesheet] =
  if document.cachedSheetsInvalid:
    document.cachedSheets.setLen(0)
    for elem in document.html.elements({TAG_STYLE, TAG_LINK}):
      case elem.tagType
      of TAG_STYLE:
        let style = HTMLStyleElement(elem)
        style.sheet = parseStylesheet(newStringStream(style.textContent))
        if style.sheet != nil:
          document.cachedSheets.add(style.sheet)
      of TAG_LINK:
        let link = HTMLLinkElement(elem)
        if link.sheet != nil:
          document.cachedSheets.add(link.sheet)
      else: discard
    document.cachedSheetsInvalid = false
  return document.cachedSheets

func inputString*(input: HTMLInputElement): string =
  case input.inputType
  of INPUT_CHECKBOX, INPUT_RADIO:
    if input.checked: "*"
    else: " "
  of INPUT_SEARCH, INPUT_TEXT, INPUT_EMAIL, INPUT_URL, INPUT_TEL:
    input.value.padToWidth(int(input.attrulgz("size").get(20)))
  of INPUT_PASSWORD:
    '*'.repeat(input.value.len).padToWidth(int(input.attrulgz("size").get(20)))
  of INPUT_RESET:
    if input.value != "": input.value
    else: "RESET"
  of INPUT_SUBMIT, INPUT_BUTTON:
    if input.value != "": input.value
    else: "SUBMIT"
  of INPUT_FILE:
    if input.file.isnone:
      "".padToWidth(int(input.attrulgz("size").get(20)))
    else:
      input.file.get.path.serialize_unicode().padToWidth(int(input.attrulgz("size").get(20)))
  else: input.value

func textAreaString*(textarea: HTMLTextAreaElement): string =
  let split = textarea.value.split('\n')
  let rows = int(textarea.attrul("rows").get(1))
  for i in 0 ..< rows:
    let cols = int(textarea.attrul("cols").get(20))
    if cols > 2:
      if i < split.len:
        result &= '[' & split[i].padToWidth(cols - 2) & "]\n"
      else:
        result &= '[' & ' '.repeat(cols - 2) & "]\n"
    else:
      result &= "[]\n"

func isButton*(element: Element): bool =
  if element.tagType == TAG_BUTTON:
    return true
  if element.tagType == TAG_INPUT:
    let element = HTMLInputElement(element)
    return element.inputType in {INPUT_SUBMIT, INPUT_BUTTON, INPUT_RESET, INPUT_IMAGE}
  return false

func isSubmitButton*(element: Element): bool =
  if element.tagType == TAG_BUTTON:
    return element.attr("type") == "submit"
  elif element.tagType == TAG_INPUT:
    let element = HTMLInputElement(element)
    return element.inputType in {INPUT_SUBMIT, INPUT_IMAGE}
  return false

func action*(element: Element): string =
  if element.isSubmitButton():
    if element.attrb("formaction"):
      return element.attr("formaction")
  if element.tagType == TAG_INPUT:
    let element = HTMLInputElement(element)
    if element.form != nil:
      if element.form.attrb("action"):
        return element.form.attr("action")
  if element.tagType == TAG_FORM:
    return element.attr("action")
  return ""

func enctype*(element: Element): FormEncodingType =
  if element.isSubmitButton():
    if element.attrb("formenctype"):
      return case element.attr("formenctype").toLowerAscii()
      of "application/x-www-form-urlencoded": FORM_ENCODING_TYPE_URLENCODED
      of "multipart/form-data": FORM_ENCODING_TYPE_MULTIPART
      of "text/plain": FORM_ENCODING_TYPE_TEXT_PLAIN
      else: FORM_ENCODING_TYPE_URLENCODED

  if element.tagType == TAG_INPUT:
    let element = HTMLInputElement(element)
    if element.form != nil:
      if element.form.attrb("enctype"):
        return case element.attr("enctype").toLowerAscii()
        of "application/x-www-form-urlencoded": FORM_ENCODING_TYPE_URLENCODED
        of "multipart/form-data": FORM_ENCODING_TYPE_MULTIPART
        of "text/plain": FORM_ENCODING_TYPE_TEXT_PLAIN
        else: FORM_ENCODING_TYPE_URLENCODED

  return FORM_ENCODING_TYPE_URLENCODED

func parseFormMethod(s: string): FormMethod =
  return case s.toLowerAscii()
  of "get": FORM_METHOD_GET
  of "post": FORM_METHOD_POST
  of "dialog": FORM_METHOD_DIALOG
  else: FORM_METHOD_GET

func formmethod*(element: Element): FormMethod =
  if element.tagType == TAG_FORM:
    # The standard says nothing about this, but this code path is reached
    # on implicit form submission and other browsers seem to agree on this
    # behavior.
    return parseFormMethod(element.attr("method"))

  if element.isSubmitButton():
    if element.attrb("formmethod"):
      return parseFormMethod(element.attr("formmethod"))

  if element.tagType in SupportedFormAssociatedElements:
    let element = FormAssociatedElement(element)
    if element.form != nil:
      if element.form.attrb("method"):
        return parseFormMethod(element.form.attr("method"))

  return FORM_METHOD_GET

func findAnchor*(document: Document, id: string): Element =
  if id.len == 0:
    return nil
  for child in document.elements:
    if child.id == id:
      return child
    if child.tagType == TAG_A and child.attr("name") == id:
      return child

# Forward declaration hack
isDefaultPassive = func (eventTarget: EventTarget): bool =
  if eventTarget of Window:
    return true
  if not (eventTarget of Node):
    return false
  let node = Node(eventTarget)
  return EventTarget(node.document) == eventTarget or
    EventTarget(node.document.html) == eventTarget or
    EventTarget(node.document.body) == eventTarget

proc parseColor(element: Element, s: string): RGBAColor =
  let cval = parseComponentValue(newStringStream(s))
  #TODO TODO TODO return element style
  # For now we just use white.
  let ec = rgb(255, 255, 255)
  if cval.isErr:
    return ec
  return cssColor(cval.get).get(ec)

#TODO ??
func target0*(element: Element): string =
  if element.attrb("target"):
    return element.attr("target")
  for base in element.document.elements(TAG_BASE):
    if base.attrb("target"):
      return base.attr("target")
  return ""

# HTMLHyperlinkElementUtils (for <a> and <area>)
func href0[T: HTMLAnchorElement|HTMLAreaElement](element: T): string =
  if element.attrb("href"):
    let url = parseURL(element.attr("href"), some(element.document.baseURL))
    if url.isSome:
      return $url.get

# <base>
func href(base: HTMLBaseElement): string {.jsfget.} =
  if base.attrb("href"):
    #TODO with fallback base url
    let url = parseUrl(base.attr("href"))
    if url.isSome:
      return $url.get

# <a>
func href*(anchor: HTMLAnchorElement): string {.jsfget.} =
  anchor.href0

proc href(anchor: HTMLAnchorElement, href: string) {.jsfset.} =
  anchor.attr("href", href)

func `$`(anchor: HTMLAnchorElement): string {.jsfunc.} =
  anchor.href

proc setRelList(anchor: HTMLAnchorElement, s: string) {.jsfset: "relList".} =
  anchor.attr("rel", s)

# <area>
func href(area: HTMLAreaElement): string {.jsfget.} =
  area.href0

proc href(area: HTMLAreaElement, href: string) {.jsfset.} =
  area.attr("href", href)

func `$`(area: HTMLAreaElement): string {.jsfunc.} =
  area.href

proc setRelList(area: HTMLAreaElement, s: string) {.jsfset: "relList".} =
  area.attr("rel", s)

# <label>
func control*(label: HTMLLabelElement): FormAssociatedElement {.jsfget.} =
  let f = label.attr("for")
  if f != "":
    let elem = label.document.getElementById(f)
    #TODO the supported check shouldn't be needed, just labelable
    if elem.tagType in SupportedFormAssociatedElements and elem.tagType in LabelableElements:
      return FormAssociatedElement(elem)
    return nil
  for elem in label.elements(LabelableElements):
    if elem.tagType in SupportedFormAssociatedElements: #TODO remove this
      return FormAssociatedElement(elem)
    return nil

func form(label: HTMLLabelElement): HTMLFormElement {.jsfget.} =
  let control = label.control
  if control != nil:
    return control.form

# <link>
proc setRelList(link: HTMLLinkElement, s: string) {.jsfset: "relList".} =
  link.attr("rel", s)

# <form>
proc setRelList(form: HTMLFormElement, s: string) {.jsfset: "relList".} =
  form.attr("rel", s)

func newText(document: Document, data: string): Text =
  return Text(
    nodeType: TEXT_NODE,
    document_internal: document,
    data: data,
    index: -1
  )

func newText(ctx: JSContext, data = ""): Text {.jsctor.} =
  let window = ctx.getGlobalOpaque(Window).get
  return window.document.newText(data)

func newCDATASection(document: Document, data: string): CDATASection =
  return CDATASection(
    nodeType: CDATA_SECTION_NODE,
    document_internal: document,
    data: data,
    index: -1
  )

func newProcessingInstruction(document: Document, target, data: string):
    ProcessingInstruction =
  return ProcessingInstruction(
    nodeType: PROCESSING_INSTRUCTION_NODE,
    document_internal: document,
    target: target,
    data: data,
    index: -1
  )

func newDocumentFragment(document: Document): DocumentFragment =
  return DocumentFragment(
    nodeType: DOCUMENT_FRAGMENT_NODE,
    document_internal: document,
    index: -1
  )

func newDocumentFragment(ctx: JSContext): DocumentFragment {.jsctor.} =
  let window = ctx.getGlobalOpaque(Window).get
  return window.document.newDocumentFragment()

func newComment(document: Document, data: string): Comment =
  return Comment(
    nodeType: COMMENT_NODE,
    document_internal: document,
    data: data,
    index: -1
  )

func newComment(ctx: JSContext, data: string = ""): Comment {.jsctor.} =
  let window = ctx.getGlobalOpaque(Window).get
  return window.document.newComment(data)

#TODO custom elements
func newHTMLElement*(document: Document, tagType: TagType,
    namespace = Namespace.HTML, prefix = none[string](),
    attrs = Table[string, string]()): HTMLElement =
  case tagType
  of TAG_INPUT:
    result = HTMLInputElement()
  of TAG_A:
    let anchor = HTMLAnchorElement()
    anchor.relList = DOMTokenList(element: anchor, localName: "rel")
    result = anchor
  of TAG_SELECT:
    result = HTMLSelectElement()
  of TAG_OPTGROUP:
    result = HTMLOptGroupElement()
  of TAG_OPTION:
    result = HTMLOptionElement()
  of TAG_H1, TAG_H2, TAG_H3, TAG_H4, TAG_H5, TAG_H6:
    result = HTMLHeadingElement()
  of TAG_BR:
    result = HTMLBRElement()
  of TAG_SPAN:
    result = HTMLSpanElement()
  of TAG_OL:
    result = HTMLOListElement()
  of TAG_UL:
    result = HTMLUListElement()
  of TAG_MENU:
    result = HTMLMenuElement()
  of TAG_LI:
    result = HTMLLIElement()
  of TAG_STYLE:
    result = HTMLStyleElement()
  of TAG_LINK:
    let link = HTMLLinkElement()
    link.relList = DOMTokenList(element: link, localName: "rel")
    result = link
  of TAG_FORM:
    let form = HTMLFormElement()
    form.relList = DOMTokenList(element: form, localName: "rel")
    result = form
  of TAG_TEMPLATE:
    result = HTMLTemplateElement(
      content: DocumentFragment(
        document_internal: document,
        host: result
      )
    )
  of TAG_UNKNOWN:
    result = HTMLUnknownElement()
  of TAG_SCRIPT:
    result = HTMLScriptElement(forceAsync: true)
  of TAG_BASE:
    result = HTMLBaseElement()
  of TAG_BUTTON:
    result = HTMLButtonElement()
  of TAG_TEXTAREA:
    result = HTMLTextAreaElement()
  of TAG_LABEL:
    result = HTMLLabelElement()
  of TAG_CANVAS:
    result = HTMLCanvasElement()
  of TAG_IMG:
    result = HTMLImageElement()
  of TAG_AREA:
    let area = HTMLAreaElement()
    area.relList = DOMTokenList(element: result, localName: "rel")
    result = area
  else:
    result = HTMLElement()
  result.nodeType = ELEMENT_NODE
  result.tagType = tagType
  result.namespace = namespace
  result.namespacePrefix = prefix
  result.document_internal = document
  result.attributes = NamedNodeMap(element: result)
  result.classList = DOMTokenList(element: result, localName: "classList")
  result.index = -1
  result.dataset = DOMStringMap(target: result)
  {.cast(noSideEffect).}:
    for k, v in attrs:
      result.attr(k, v)
  case tagType
  of TAG_SCRIPT:
    HTMLScriptElement(result).internalNonce = result.attr("nonce")
  of TAG_CANVAS:
    HTMLCanvasElement(result).bitmap = newBitmap(
      width = result.attrul("width").get(300),
      height = result.attrul("height").get(150)
    )
  else: discard

func newHTMLElement*(document: Document, localName: string,
    namespace = Namespace.HTML, prefix = none[string](),
    tagType = tagType(localName), attrs = Table[string, string]()): Element =
  result = document.newHTMLElement(tagType, namespace, prefix, attrs)
  if tagType == TAG_UNKNOWN:
    result.localName = localName

func newDocument*(): Document {.jsctor.} =
  let document = Document(
    nodeType: DOCUMENT_NODE,
    url: newURL("about:blank").get,
    index: -1
  )
  document.implementation = DOMImplementation(document: document)
  document.contentType = "application/xml"
  return document

func newDocumentType*(document: Document, name: string, publicId = "", systemId = ""): DocumentType =
  return DocumentType(
    nodeType: DOCUMENT_TYPE_NODE,
    document_internal: document,
    name: name,
    publicId: publicId,
    systemId: systemId,
    index: -1
  )

func isResettable*(element: Element): bool =
  return element.tagType in {TAG_INPUT, TAG_OUTPUT, TAG_SELECT, TAG_TEXTAREA}

func isHostIncludingInclusiveAncestor*(a, b: Node): bool =
  for parent in b.branch:
    if parent == a:
      return true
  if b.rootNode.nodeType == DOCUMENT_FRAGMENT_NODE and DocumentFragment(b.rootNode).host != nil:
    for parent in b.rootNode.branch:
      if parent == a:
        return true
  return false

func baseURL*(document: Document): URL =
  #TODO frozen base url...
  var href = ""
  for base in document.elements(TAG_BASE):
    if base.attrb("href"):
      href = base.attr("href")
  if href == "":
    return document.url
  if document.url == nil:
    return newURL("about:blank").get #TODO ???
  let url = parseURL(href, some(document.url))
  if url.isNone:
    return document.url
  return url.get

func baseURI(node: Node): string {.jsfget.} =
  return $node.document.baseURL

func parseURL*(document: Document, s: string): Option[URL] =
  #TODO encodings
  return parseURL(s, some(document.baseURL))

func media*[T: HTMLLinkElement|HTMLStyleElement](element: T): string =
  return element.attr("media")

func title*(document: Document): string =
  for title in document.elements(TAG_TITLE):
    return title.childTextContent.stripAndCollapse()
  return ""

func disabled*(option: HTMLOptionElement): bool =
  if option.parentElement.tagType == TAG_OPTGROUP and option.parentElement.attrb("disabled"):
    return true
  return option.attrb("disabled")

func text*(option: HTMLOptionElement): string =
  for child in option.descendants:
    if child.nodeType == TEXT_NODE:
      let child = Text(child)
      if child.parentElement.tagType != TAG_SCRIPT: #TODO svg
        result &= child.data.stripAndCollapse()

func value*(option: HTMLOptionElement): string {.jsfget.} =
  if option.attrb("value"):
    return option.attr("value")
  return option.childTextContent.stripAndCollapse()

proc invalidateCollections(node: Node) =
  for id in node.liveCollections:
    node.document.invalidCollections.incl(id)

proc delAttr(element: Element, i: int) =
  if i != -1:
    let attr = element.attributes.attrlist[i]
    element.attrs.del(attr.name)
    element.attributes.attrlist.delete(i)
    element.invalidateCollections()
    element.invalid = true

proc delAttr(element: Element, name: string) =
  let i = element.attributes.findAttr(name)
  if i != -1:
    element.delAttr(i)

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.toLowerAscii()
    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)
  return element.style_cached

proc reflectAttrs(element: Element, name, value: string) =
  template reflect_str(element: Element, n: static string, val: untyped) =
    if name == n:
      element.val = value
      return
  template reflect_str(element: Element, n: static string, val, fun: untyped) =
    if name == n:
      element.val = fun(value)
      return
  template reflect_bool(element: Element, n: static string, val: untyped) =
    if name == n:
      element.val = true
      return
  template reflect_domtoklist(element: Element, n: static string,
      val: untyped) =
    if name == n:
      element.val.toks.setLen(0)
      for x in value.split(AsciiWhitespace):
        if x != "" and x notin element.val:
          element.val.toks.add(x)
      return
  element.reflect_str "id", id
  element.reflect_domtoklist "class", classList
  if name == "style":
    element.style_cached = newCSSStyleDeclaration(element, value)
    return
  case element.tagType
  of TAG_INPUT:
    let input = HTMLInputElement(element)
    input.reflect_str "value", value
    input.reflect_str "type", inputType, inputType
    input.reflect_bool "checked", checked
  of TAG_OPTION:
    let option = HTMLOptionElement(element)
    option.reflect_bool "selected", selected
  of TAG_BUTTON:
    let button = HTMLButtonElement(element)
    button.reflect_str "type", ctype, (func(s: string): ButtonType =
      case s.toLowerAscii()
      of "submit": return BUTTON_SUBMIT
      of "reset": return BUTTON_RESET
      of "button": return BUTTON_BUTTON)
  of TAG_LINK:
    let link = HTMLLinkElement(element)
    link.reflect_domtoklist "rel", relList
  of TAG_A:
    let anchor = HTMLAnchorElement(element)
    anchor.reflect_domtoklist "rel", relList
  of TAG_AREA:
    let area = HTMLAnchorElement(element)
    area.reflect_domtoklist "rel", relList
  else: discard

proc attr0(element: Element, name, value: string) =
  element.attrs.withValue(name, val):
    val[] = value
    element.invalidateCollections()
    element.invalid = true
  do: # else
    element.attrs[name] = value
  element.reflectAttrs(name, value)

proc attr*(element: Element, name, value: string) =
  let i = element.attributes.findAttr(name)
  if i != -1:
    element.attributes.attrlist[i].value = value
  else:
    element.attributes.attrlist.add(element.newAttr(name, value))
  element.attr0(name, value)

proc attrl(element: Element, name: string, value: int32) =
  element.attr(name, $value)

proc attrul(element: Element, name: string, value: uint32) =
  element.attr(name, $value)

proc attrulgz(element: Element, name: string, value: uint32) =
  if value > 0:
    element.attrul(name, value)

proc setAttribute(element: Element, qualifiedName, value: string):
    Err[DOMException] {.jsfunc.} =
  ?validateAttributeName(qualifiedName)
  let qualifiedName = if element.namespace == Namespace.HTML and not element.document.isxml:
    qualifiedName.toLowerAscii()
  else:
    qualifiedName
  element.attr(qualifiedName, value)
  return ok()

proc setAttributeNS(element: Element, namespace, qualifiedName,
    value: string): Err[DOMException] {.jsfunc.} =
  ?validateAttributeName(qualifiedName, isq = true)
  let ps = qualifiedName.until(':')
  let prefix = if ps.len < qualifiedName.len: ps else: ""
  let localName = qualifiedName.substr(prefix.len)
  if prefix != "" and namespace == "" or
      prefix == "xml" and namespace != $Namespace.XML or
      (qualifiedName == "xmlns" or prefix == "xmlns") and namespace != $Namespace.XMLNS or
      namespace == $Namespace.XMLNS and qualifiedName != "xmlns" and prefix != "xmlns":
    return errDOMException("Unexpected namespace", "NamespaceError")
  element.attr0(qualifiedName, value)
  let i = element.attributes.findAttrNS(namespace, localName)
  if i != -1:
    element.attributes.attrlist[i].value = value
  else:
    element.attributes.attrlist.add(element.newAttr(localName, value, prefix, namespace))
  return ok()

proc removeAttribute(element: Element, qualifiedName: string) {.jsfunc.} =
  let qualifiedName = if element.namespace == Namespace.HTML and not element.document.isxml:
    qualifiedName.toLowerAscii()
  else:
    qualifiedName
  element.delAttr(qualifiedName)

proc removeAttributeNS(element: Element, namespace, localName: string) {.jsfunc.} =
  let i = element.attributes.findAttrNS(namespace, localName)
  if i != -1:
    element.delAttr(i)

proc toggleAttribute(element: Element, qualifiedName: string,
    force = none(bool)): DOMResult[bool] {.jsfunc.} =
  ?validateAttributeName(qualifiedName)
  let qualifiedName = if element.namespace == Namespace.HTML and not element.document.isxml:
    qualifiedName.toLowerAscii()
  else:
    qualifiedName
  if not element.attrb(qualifiedName):
    if force.get(true):
      element.attr(qualifiedName, "")
      return ok(true)
    return ok(false)
  if not force.get(false):
    element.delAttr(qualifiedName)
    return ok(false)
  return ok(true)

proc value(attr: Attr, s: string) {.jsfset.} =
  attr.value = s
  if attr.ownerElement != nil:
    attr.ownerElement.attr0(attr.name, s)

proc setNamedItem(map: NamedNodeMap, attr: Attr): DOMResult[Attr]
    {.jsfunc.} =
  if attr.ownerElement != nil and attr.ownerElement != map.element:
    return errDOMException("Attribute is currently in use",
      "InUseAttributeError")
  if attr.name in map.element.attrs:
    return ok(attr)
  let i = map.findAttr(attr.name)
  if i != -1:
    result = ok(map.attrlist[i])
    map.attrlist.delete(i)
  else:
    result = ok(nil)
  map.element.attrs[attr.name] = attr.value
  map.attrlist.add(attr)

proc setNamedItemNS(map: NamedNodeMap, attr: Attr): DOMResult[Attr]
    {.jsfunc.} =
  return map.setNamedItem(attr)

proc removeNamedItem(map: NamedNodeMap, qualifiedName: string):
    DOMResult[Attr] {.jsfunc.} =
  let i = map.findAttr(qualifiedName)
  if i != -1:
    let attr = map.attrlist[i]
    map.element.delAttr(i)
    return ok(attr)
  return errDOMException("Item not found", "NotFoundError")

proc removeNamedItemNS(map: NamedNodeMap, namespace, localName: string):
    DOMResult[Attr] {.jsfunc.} =
  let i = map.findAttrNS(namespace, localName)
  if i != -1:
    let attr = map.attrlist[i]
    map.element.delAttr(i)
    return ok(attr)
  return errDOMException("Item not found", "NotFoundError")

proc id(element: Element, id: string) {.jsfset.} =
  element.id = id
  element.attr("id", id)

# Pass an index to avoid searching for the node in parent's child list.
proc remove*(node: Node, suppressObservers: bool) =
  let parent = node.parentNode
  assert parent != nil
  assert node.index != -1
  #TODO live ranges
  #TODO NodeIterator
  for i in node.index ..< parent.childList.len - 1:
    parent.childList[i] = parent.childList[i + 1]
    parent.childList[i].index = i
  parent.childList.setLen(parent.childList.len - 1)
  node.parentNode.invalidateCollections()
  node.parentNode = nil
  node.root = nil
  node.index = -1
  if node.nodeType == ELEMENT_NODE:
    if Element(node).tagType in {TAG_STYLE, TAG_LINK} and node.document != nil:
      node.document.cachedSheetsInvalid = true

  #TODO assigned, shadow root, shadow root again, custom nodes, registered observers
  #TODO not suppress observers => queue tree mutation record

proc remove*(node: Node) {.jsfunc.} =
  node.remove(suppressObservers = false)

proc adopt(document: Document, node: Node) =
  let oldDocument = node.document
  if node.parentNode != nil:
    remove(node)
  if oldDocument != document:
    #TODO shadow root
    for desc in node.descendants:
      desc.document_internal = document
      if desc.nodeType == ELEMENT_NODE:
        for attr in Element(desc).attributes.attrlist:
          attr.document_internal = document
    #TODO custom elements
    #..adopting steps

proc resetElement*(element: Element) =
  case element.tagType
  of TAG_INPUT:
    let input = HTMLInputELement(element)
    case input.inputType
    of INPUT_SEARCH, INPUT_TEXT, INPUT_PASSWORD:
      input.value = input.attr("value")
    of INPUT_CHECKBOX, INPUT_RADIO:
      input.checked = input.attrb("checked")
    of INPUT_FILE:
      input.file = none(Url)
    else: discard
    input.invalid = true
  of TAG_SELECT:
    let select = HTMLSelectElement(element)
    if not select.attrb("multiple"):
      if select.attrul("size").get(1) == 1:
        var i = 0
        var firstOption: HTMLOptionElement
        for option in select.options:
          if firstOption == nil:
            firstOption = option
          if option.selected:
            inc i
        if i == 0 and firstOption != nil:
          firstOption.selected = true
        elif i > 2:
          # Set the selectedness of all but the last selected option element to
          # false.
          var j = 0
          for option in select.options:
            if j == i: break
            if option.selected:
              option.selected = false
              inc j
  of TAG_TEXTAREA:
    let textarea = HTMLTextAreaElement(element)
    textarea.value = textarea.childTextContent()
    textarea.invalid = true
  else: discard

proc setForm*(element: FormAssociatedElement, form: HTMLFormElement) =
  case element.tagType
  of TAG_INPUT:
    let input = HTMLInputElement(element)
    input.form = form
    form.controls.add(input)
  of TAG_SELECT:
    let select = HTMLSelectElement(element)
    select.form = form
    form.controls.add(select)
  of TAG_BUTTON:
    let button = HTMLButtonElement(element)
    button.form = form
    form.controls.add(button)
  of TAG_TEXTAREA:
    let textarea = HTMLTextAreaElement(element)
    textarea.form = form
    form.controls.add(textarea)
  of TAG_FIELDSET, TAG_OBJECT, TAG_OUTPUT, TAG_IMG:
    discard #TODO
  else: assert false

proc resetFormOwner(element: FormAssociatedElement) =
  element.parserInserted = false
  if element.form != nil:
    if element.tagType notin ListedElements:
      return
    let lastForm = element.findAncestor({TAG_FORM})
    if not element.attrb("form") and lastForm == element.form:
      return
  element.form = nil
  if element.tagType in ListedElements and element.attrb("form") and element.isConnected:
    let form = element.attr("form")
    for desc in element.elements(TAG_FORM):
      if desc.id == form:
        element.setForm(HTMLFormElement(desc))

proc insertionSteps(insertedNode: Node) =
  if insertedNode.nodeType == ELEMENT_NODE:
    let element = Element(insertedNode)
    let tagType = element.tagType
    case tagType
    of TAG_OPTION:
      if element.parentElement != nil:
        let parent = element.parentElement
        var select: HTMLSelectElement
        if parent.tagType == TAG_SELECT:
          select = HTMLSelectElement(parent)
        elif parent.tagType == TAG_OPTGROUP and parent.parentElement != nil and parent.parentElement.tagType == TAG_SELECT:
          select = HTMLSelectElement(parent.parentElement)
        if select != nil:
          select.resetElement()
    else: discard
    if tagType in SupportedFormAssociatedElements:
      let element = FormAssociatedElement(element)
      if element.parserInserted:
        return
      element.resetFormOwner()

func checkParentValidity(parent: Node): Err[DOMException] =
  if parent.nodeType in {DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE, ELEMENT_NODE}:
    return ok()
  const msg = "Parent must be a document, a document fragment, or an element."
  return errDOMException(msg, "HierarchyRequestError")

# WARNING the ordering of the arguments in the standard is whack so this
# doesn't match that
func preInsertionValidity*(parent, node, before: Node): Err[DOMException] =
  ?checkParentValidity(parent)
  if node.isHostIncludingInclusiveAncestor(parent):
    return errDOMException("Parent must be an ancestor",
      "HierarchyRequestError")
  if before != nil and before.parentNode != parent:
    return errDOMException("Reference node is not a child of parent",
      "NotFoundError")
  if node.nodeType notin {DOCUMENT_FRAGMENT_NODE, DOCUMENT_TYPE_NODE,
      ELEMENT_NODE} + CharacterDataNodes:
    return errDOMException("Cannot insert node type",
      "HierarchyRequestError")
  if node.nodeType == TEXT_NODE and parent.nodeType == DOCUMENT_NODE:
    return errDOMException("Cannot insert text into document",
      "HierarchyRequestError")
  if node.nodeType == DOCUMENT_TYPE_NODE and parent.nodeType != DOCUMENT_NODE:
    return errDOMException("Document type can only be inserted into document",
      "HierarchyRequestError")
  if parent.nodeType == DOCUMENT_NODE:
    case node.nodeType
    of DOCUMENT_FRAGMENT_NODE:
      let elems = node.countChildren(ELEMENT_NODE)
      if elems > 1 or node.hasChild(TEXT_NODE):
        return errDOMException("Document fragment has invalid children",
          "HierarchyRequestError")
      elif elems == 1 and (parent.hasChild(ELEMENT_NODE) or
          before != nil and (before.nodeType == DOCUMENT_TYPE_NODE or
          before.hasNextSibling(DOCUMENT_TYPE_NODE))):
        return errDOMException("Document fragment has invalid children",
          "HierarchyRequestError")
    of ELEMENT_NODE:
      if parent.hasChild(ELEMENT_NODE):
        return errDOMException("Document already has an element child",
          "HierarchyRequestError")
      elif before != nil and (before.nodeType == DOCUMENT_TYPE_NODE or
            before.hasNextSibling(DOCUMENT_TYPE_NODE)):
        return errDOMException("Cannot insert element before document type",
          "HierarchyRequestError")
    of DOCUMENT_TYPE_NODE:
      if parent.hasChild(DOCUMENT_TYPE_NODE) or
          before != nil and before.hasPreviousSibling(ELEMENT_NODE) or
          before == nil and parent.hasChild(ELEMENT_NODE):
        const msg = "Cannot insert document type before an element node"
        return errDOMException(msg, "HierarchyRequestError")
    else: discard
  return ok() # no exception reached

proc insertNode(parent, node, before: Node) =
  parent.document.adopt(node)
  parent.childList.setLen(parent.childList.len + 1)
  if before == nil:
    node.index = parent.childList.high
  else:
    node.index = before.index
    for i in before.index ..< parent.childList.len - 1:
      parent.childList[i + 1] = parent.childList[i]
      parent.childList[i + 1].index = i + 1
  parent.childList[node.index] = node
  node.root = parent.rootNode
  node.parentNode = parent
  node.invalidateCollections()
  parent.invalidateCollections()
  if node.nodeType == ELEMENT_NODE:
    if Element(node).tagType in {TAG_STYLE, TAG_LINK} and node.document != nil:
      node.document.cachedSheetsInvalid = true
  if node.nodeType == ELEMENT_NODE:
    #TODO shadow root
    insertionSteps(node)

# WARNING ditto
proc insert*(parent, node, before: Node, suppressObservers = false) =
  let nodes = if node.nodeType == DOCUMENT_FRAGMENT_NODE: node.childList
  else: @[node]
  let count = nodes.len
  if count == 0:
    return
  if node.nodeType == DOCUMENT_FRAGMENT_NODE:
    for i in countdown(node.childList.high, 0):
      node.childList[i].remove(true)
    #TODO tree mutation record
  if before != nil:
    #TODO live ranges
    discard
  if parent.nodeType == ELEMENT_NODE:
    Element(parent).invalid = true
  for node in nodes:
    insertNode(parent, node, before)

proc insertBefore*(parent, node, before: Node): DOMResult[Node] {.jsfunc.} =
  ?parent.preInsertionValidity(node, before)
  let referenceChild = if before == node:
    node.nextSibling
  else:
    before
  parent.insert(node, referenceChild)
  return ok(node)

proc appendChild(parent, node: Node): DOMResult[Node] {.jsfunc.} =
  return parent.insertBefore(node, nil)

proc append*(parent, node: Node) =
  discard parent.appendChild(node)

#TODO replaceChild

proc removeChild(parent, node: Node): DOMResult[Node] {.jsfunc.} =
  if node.parentNode != parent:
    return errDOMException("Node is not a child of parent", "NotFoundError")
  node.remove()
  return ok(node)

# WARNING the ordering of the arguments in the standard is whack so this
# doesn't match that
# Note: the standard returns child if not err. We don't, it's just a
# pointless copy.
proc replace(parent, child, node: Node): Err[DOMException] =
  ?checkParentValidity(parent)
  if node.isHostIncludingInclusiveAncestor(parent):
    return errDOMException("Parent must be an ancestor",
      "HierarchyRequestError")
  if child.parentNode != parent:
    return errDOMException("Node to replace is not a child of parent",
      "NotFoundError")
  if node.nodeType notin {DOCUMENT_NODE, DOCUMENT_TYPE_NODE, ELEMENT_NODE} +
      CharacterDataNodes:
    return errDOMException("Replacement is not a valid replacement node type",
      "HierarchyRequesError")
  if node.nodeType == TEXT_NODE and parent.nodeType == DOCUMENT_NODE or
      node.nodeType == DOCUMENT_TYPE_NODE and parent.nodeType != DOCUMENT_NODE:
    return errDOMException("Replacement cannot be placed in parent",
      "HierarchyRequesError")
  let childNextSibling = child.nextSibling
  let childPreviousSibling = child.previousSibling
  if parent.nodeType == DOCUMENT_NODE:
    case node.nodeType
    of DOCUMENT_FRAGMENT_NODE:
      let elems = node.countChildren(ELEMENT_NODE)
      if elems > 1 or node.hasChild(TEXT_NODE):
        return errDOMException("Document fragment has invalid children",
          "HierarchyRequestError")
      elif elems == 1 and (parent.hasChildExcept(ELEMENT_NODE, child) or
          childNextSibling != nil and
          childNextSibling.nodeType == DOCUMENT_TYPE_NODE):
        return errDOMException("Document fragment has invalid children",
          "HierarchyRequestError")
    of ELEMENT_NODE:
      if parent.hasChildExcept(ELEMENT_NODE, child):
        return errDOMException("Document already has an element child",
          "HierarchyRequestError")
      elif childNextSibling != nil and
          childNextSibling.nodeType == DOCUMENT_TYPE_NODE:
        return errDOMException("Cannot insert element before document type ",
          "HierarchyRequestError")
    of DOCUMENT_TYPE_NODE:
      if parent.hasChildExcept(DOCUMENT_TYPE_NODE, child) or
          childPreviousSibling != nil and
          childPreviousSibling.nodeType == DOCUMENT_TYPE_NODE:
        const msg = "Cannot insert document type before an element node"
        return errDOMException(msg, "HierarchyRequestError")
    else: discard
  let referenceChild = if childNextSibling == node:
    node.nextSibling
  else:
    childNextSibling
  #NOTE the standard says "if parent is not null", but the adoption step
  # that made it necessary has been removed.
  child.remove(suppressObservers = true)
  parent.insert(node, referenceChild, suppressObservers = true)
  #TODO tree mutation record
  return ok()

proc replaceAll(parent, node: Node) =
  var removedNodes = parent.childList # copy
  for child in removedNodes:
    child.remove(true)
  assert parent != node
  if node != nil:
    if node.nodeType == DOCUMENT_FRAGMENT_NODE:
      var addedNodes = node.childList # copy
      for child in addedNodes:
        parent.append(child)
    else:
      parent.append(node)
  #TODO tree mutation record

proc createTextNode*(document: Document, data: string): Text {.jsfunc.} =
  return newText(document, data)

proc textContent*(node: Node, data: Option[string]) {.jsfset.} =
  case node.nodeType
  of DOCUMENT_FRAGMENT_NODE, ELEMENT_NODE:
    let x = if data.isSome:
      node.document.createTextNode(data.get)
    else:
      nil
    node.replaceAll(x)
  of ATTRIBUTE_NODE:
    value(Attr(node), data.get(""))
  of TEXT_NODE, COMMENT_NODE:
    CharacterData(node).data = data.get("")
  else: discard

proc reset*(form: HTMLFormElement) =
  for control in form.controls:
    control.resetElement()
    control.invalid = true

proc renderBlocking*(element: Element): bool =
  if "render" in element.attr("blocking").split(AsciiWhitespace):
    return true
  if element.tagType == TAG_SCRIPT:
    let element = HTMLScriptElement(element)
    if element.ctype == CLASSIC and element.parserDocument != nil and
        not element.attrb("async") and not element.attrb("defer"):
      return true
  return false

proc blockRendering*(element: Element) =
  let document = element.document
  if document.contentType == "text/html" and document.body == nil:
    element.document.renderBlockingElements.add(element)

proc markAsReady(element: HTMLScriptElement, res: ScriptResult) =
  element.scriptResult = res
  if element.onReady != nil:
    element.onReady()
    element.onReady = nil
  element.delayingTheLoadEvent = false

proc createClassicScript(source: string, baseURL: URL, options: ScriptOptions, mutedErrors = false): Script =
  return Script(
    record: source,
    baseURL: baseURL,
    options: options,
    mutedErrors: mutedErrors
  )

#TODO settings object
proc fetchClassicScript(element: HTMLScriptElement, url: URL,
    options: ScriptOptions, cors: CORSAttribute,
    cs: Charset, onComplete: (proc(element: HTMLScriptElement,
                                   res: ScriptResult))) =
  if not element.scriptingEnabled:
      element.onComplete(ScriptResult(t: RESULT_NULL))
  else:
    let loader = element.document.window.loader
    if loader.isSome:
      let loader = loader.get
      let request = createPotentialCORSRequest(url, RequestDestination.SCRIPT, cors)
      let response = loader.doRequest(request)
      if response.res != 0:
        element.onComplete(ScriptResult(t: RESULT_NULL))
        return
      let cs = if cs == CHARSET_UNKNOWN:
        CHARSET_UTF_8
      else:
        cs
      let decoder = newDecoderStream(response.body, cs = cs)
      let source = newEncoderStream(decoder).readAll()
      let script = createClassicScript(source, url, options, false)
      element.markAsReady(ScriptResult(t: RESULT_SCRIPT, script: script))

proc execute*(element: HTMLScriptElement) =
  let document = element.document
  if document != element.preparationTimeDocument:
    return
  let i = document.renderBlockingElements.find(element)
  if i != -1:
    document.renderBlockingElements.delete(i)
  if element.scriptResult.t == RESULT_NULL:
    #TODO fire error event
    return
  case element.ctype
  of CLASSIC:
    let oldCurrentScript = document.currentScript
    #TODO not if shadow root
    document.currentScript = element
    if document.window != nil and document.window.jsctx != nil:
      let script = element.scriptResult.script
      let urls = script.baseURL.serialize(excludepassword = true)
      let ret = document.window.jsctx.eval(script.record, urls, JS_EVAL_TYPE_GLOBAL)
      if JS_IsException(ret):
        let ss = newStringStream()
        document.window.jsctx.writeException(ss)
        ss.setPosition(0)
        document.window.console.log("Exception in document", urls,
          ss.readAll())
    document.currentScript = oldCurrentScript
  else: discard #TODO

# https://html.spec.whatwg.org/multipage/scripting.html#prepare-the-script-element
proc prepare*(element: HTMLScriptElement) =
  if element.alreadyStarted:
    return
  let parserDocument = element.parserDocument
  element.parserDocument = nil
  if parserDocument != nil and not element.attrb("async"):
    element.forceAsync = true
  let sourceText = element.childTextContent
  if not element.attrb("src") and sourceText == "":
    return
  if not element.isConnected:
    return
  let typeString = if element.attr("type") != "":
    element.attr("type").strip(chars = AsciiWhitespace).toLowerAscii()
  elif element.attr("language") != "":
    "text/" & element.attr("language").toLowerAscii()
  else:
    "text/javascript"
  if typeString.isJavaScriptType():
    element.ctype = CLASSIC
  elif typeString == "module":
    element.ctype = MODULE
  elif typeString == "importmap":
    element.ctype = IMPORTMAP
  else:
    return
  if parserDocument != nil:
    element.parserDocument = parserDocument
    element.forceAsync = false
  element.alreadyStarted = true
  element.preparationTimeDocument = element.document
  if parserDocument != nil and parserDocument != element.preparationTimeDocument:
    return
  if not element.scriptingEnabled:
    return
  if element.attrb("nomodule") and element.ctype == CLASSIC:
    return
  #TODO content security policy
  if element.ctype == CLASSIC and element.attrb("event") and element.attrb("for"):
    let f = element.attr("for").strip(chars = AsciiWhitespace)
    let event = element.attr("event").strip(chars = AsciiWhitespace)
    if not f.equalsIgnoreCase("window"):
      return
    if not event.equalsIgnoreCase("onload") and not event.equalsIgnoreCase("onload()"):
      return
  let cs = getCharset(element.attr("charset"))
  let encoding = if cs != CHARSET_UNKNOWN: cs else: element.document.charset
  let classicCORS = element.crossorigin
  var options = ScriptOptions(
    nonce: element.internalNonce,
    integrity: element.attr("integrity"),
    parserMetadata: if element.parserDocument != nil: PARSER_INSERTED else: NOT_PARSER_INSERTED,
    referrerpolicy: element.referrerpolicy
  )
  #TODO settings object
  if element.attrb("src"):
    if element.ctype == IMPORTMAP:
      #TODO fire error event
      return
    let src = element.attr("src")
    if src == "":
      #TODO fire error event
      return
    element.fromAnExternalFile = true
    let url = element.document.parseURL(src)
    if url.isNone:
      #TODO fire error event
      return
    if element.renderBlocking:
      element.blockRendering()
    element.delayingTheLoadEvent = true
    if element in element.document.renderBlockingElements:
      options.renderBlocking = true
    if element.ctype == CLASSIC:
      element.fetchClassicScript(url.get, options, classicCORS, encoding, markAsReady)
    else:
      #TODO MODULE
      element.markAsReady(ScriptResult(t: RESULT_NULL))
  else:
    let baseURL = element.document.baseURL
    if element.ctype == CLASSIC:
      let script = createClassicScript(sourceText, baseURL, options)
      element.markAsReady(ScriptResult(t: RESULT_SCRIPT, script: script))
    else:
      #TODO MODULE, IMPORTMAP
      element.markAsReady(ScriptResult(t: RESULT_NULL))
  if element.ctype == CLASSIC and element.attrb("src") or element.ctype == MODULE:
    let prepdoc = element.preparationTimeDocument
    if element.attrb("async"):
      prepdoc.scriptsToExecSoon.add(element)
      element.onReady = (proc() =
        element.execute()
        let i = prepdoc.scriptsToExecSoon.find(element)
        element.preparationTimeDocument.scriptsToExecSoon.delete(i)
      )
    elif element.parserDocument == nil:
      prepdoc.scriptsToExecInOrder.addFirst(element)
      element.onReady = (proc() =
        if prepdoc.scriptsToExecInOrder.len > 0 and prepdoc.scriptsToExecInOrder[0] != element:
          while prepdoc.scriptsToExecInOrder.len > 0:
            let script = prepdoc.scriptsToExecInOrder[0]
            if script.scriptResult.t == RESULT_UNINITIALIZED:
              break
            script.execute()
            prepdoc.scriptsToExecInOrder.shrink(1)
      )
    elif element.ctype == MODULE or element.attrb("defer"):
      element.parserDocument.scriptsToExecOnLoad.addFirst(element)
      element.onReady = (proc() =
        element.readyForParserExec = true
      )
    else:
      element.parserDocument.parserBlockingScript = element
      element.blockRendering()
      element.onReady = (proc() =
        element.readyForParserExec = true
      )
  else:
    #TODO if CLASSIC, parserDocument != nil, parserDocument has a style sheet
    # that is blocking scripts, either the parser is an XML parser or a HTML
    # parser with a script level <= 1
    element.execute()

#TODO options/custom elements
proc createElement(document: Document, localName: string):
    DOMResult[Element] {.jsfunc.} =
  if not localName.matchNameProduction():
    return errDOMException("Invalid character in element name",
      "InvalidCharacterError")
  let localName = if not document.isxml:
    localName.toLowerAscii()
  else:
    localName
  let namespace = if not document.isxml: #TODO or content type is application/xhtml+xml
    Namespace.HTML
  else:
    NO_NAMESPACE
  return ok(document.newHTMLElement(localName, namespace))

#TODO createElementNS

proc createDocumentFragment(document: Document): DocumentFragment {.jsfunc.} =
  return newDocumentFragment(document)

proc createDocumentType(implementation: ptr DOMImplementation, qualifiedName,
    publicId, systemId: string): DOMResult[DocumentType] {.jsfunc.} =
  if not qualifiedName.matchQNameProduction():
    return errDOMException("Invalid character in document type name",
      "InvalidCharacterError")
  let document = implementation.document
  return ok(document.newDocumentType(qualifiedName, publicId, systemId))

proc createHTMLDocument(implementation: ptr DOMImplementation, title =
    none(string)): Document {.jsfunc.} =
  let doc = newDocument()
  doc.contentType = "text/html"
  doc.append(doc.newDocumentType("html"))
  let html = doc.newHTMLElement(TAG_HTML, Namespace.HTML)
  doc.append(html)
  let head = doc.newHTMLElement(TAG_HEAD, Namespace.HTML)
  html.append(head)
  if title.isSome:
    let titleElement = doc.newHTMLElement(TAG_TITLE, Namespace.HTML)
    titleElement.append(doc.newText(title.get))
    head.append(titleElement)
  html.append(doc.newHTMLElement(TAG_BODY, Namespace.HTML))
  #TODO set origin
  return doc

proc hasFeature(implementation: ptr DOMImplementation): bool {.jsfunc.} =
  return true

proc createCDATASection(document: Document, data: string):
    DOMResult[CDATASection] {.jsfunc.} =
  if not document.isxml:
    return errDOMException("CDATA sections are not supported in HTML",
      "NotSupportedError")
  if "]]>" in data:
    return errDOMException("CDATA sections may not contain the string ]]>",
      "InvalidCharacterError")
  return ok(newCDATASection(document, data))

proc createComment*(document: Document, data: string): Comment {.jsfunc.} =
  return newComment(document, data)

proc createProcessingInstruction(document: Document, target, data: string):
    DOMResult[ProcessingInstruction] {.jsfunc.} =
  if not target.matchNameProduction() or "?>" in data:
    return errDOMException("Invalid data for processing instruction",
      "InvalidCharacterError")
  return ok(newProcessingInstruction(document, target, data))

func clone(node: Node, document = none(Document), deep = false): Node =
  let document = document.get(node.document)
  let copy = case node.nodeType
  of ELEMENT_NODE:
    #TODO is value
    let element = Element(node)
    let x = document.newHTMLElement(element.localName, element.namespace,
      element.namespacePrefix, element.tagType, element.attrs)
    #TODO namespaced attrs?
    # Cloning steps
    if x.tagType == TAG_SCRIPT:
      let x = HTMLScriptElement(x)
      let element = HTMLScriptElement(element)
      x.alreadyStarted = element.alreadyStarted
    elif x.tagType == TAG_INPUT:
      let x = HTMLInputElement(x)
      let element = HTMLInputElement(element)
      x.value = element.value
      #TODO dirty value flag
      x.checked = element.checked
      #TODO dirty checkedness flag
    Node(x)
  of ATTRIBUTE_NODE:
    let attr = Attr(node)
    let x = document.newAttr(attr.localName, attr.value, attr.prefix,
      attr.namespaceURI)
    Node(x)
  of TEXT_NODE:
    let text = Text(node)
    let x = document.newText(text.data)
    Node(x)
  of CDATA_SECTION_NODE:
    let x = document.newCDATASection("")
    #TODO is this really correct??
    # really, I don't know. only relevant with xhtml anyway...
    Node(x)
  of COMMENT_NODE:
    let comment = Comment(node)
    let x = document.newComment(comment.data)
    Node(x)
  of PROCESSING_INSTRUCTION_NODE:
    let procinst = ProcessingInstruction(node)
    let x = document.newProcessingInstruction(procinst.target, procinst.data)
    Node(x)
  of DOCUMENT_NODE:
    let document = Document(node)
    let x = newDocument()
    x.charset = document.charset
    x.contentType = document.contentType
    x.url = document.url
    x.isxml = document.isxml
    x.mode = document.mode
    Node(x)
  of DOCUMENT_TYPE_NODE:
    let doctype = DocumentType(node)
    let x = document.newDocumentType(doctype.name, doctype.publicId,
      doctype.systemId)
    Node(x)
  of DOCUMENT_FRAGMENT_NODE:
    let x = document.newDocumentFragment()
    Node(x)
  else:
    assert false
    Node(nil)
  if deep:
    for child in node.childList:
      copy.append(child.clone(deep = true))
  return copy

func cloneNode(node: Node, deep = false): Node {.jsfunc.} =
  #TODO shadow root
  return node.clone(deep = deep)

# Forward definition hack (these are set in selectors.nim)
var doqsa*: proc (node: Node, q: string): seq[Element]
var doqs*: proc (node: Node, q: string): Element

proc querySelectorAll*(node: Node, q: string): seq[Element] {.jsfunc.} =
  return doqsa(node, q)

proc querySelector*(node: Node, q: string): Element {.jsfunc.} =
  return doqs(node, q)

const (ReflectTable, TagReflectMap, ReflectAllStartIndex) = (func(): (
    seq[ReflectEntry],
    Table[TagType, seq[int16]],
    int16) =
  var i: int16 = 0
  while i < ReflectTable0.len:
    let x = ReflectTable0[i]
    result[0].add(x)
    if x.tags == AllTagTypes:
      break
    for tag in result[0][i].tags:
      if tag notin result[1]:
        result[1][tag] = newSeq[int16]()
      result[1][tag].add(i)
    assert result[0][i].tags.len != 0
    inc i
  result[2] = i
  while i < ReflectTable0.len:
    let x = ReflectTable0[i]
    assert x.tags == AllTagTypes
    result[0].add(x)
    inc i
)()

proc jsReflectGet(ctx: JSContext, this: JSValue, magic: cint): JSValue {.cdecl.} =
  let entry = ReflectTable[uint16(magic)]
  let op = getOpaque0(this)
  if unlikely(not ctx.isInstanceOf(this, "Element") or op == nil):
    return JS_ThrowTypeError(ctx, "Reflected getter called on a value that is not an element")
  let element = cast[Element](op)
  if element.tagType notin entry.tags:
    return JS_ThrowTypeError(ctx, "Invalid tag type %s", element.tagType)
  case entry.t
  of REFLECT_STR:
    let x = toJS(ctx, element.attr(entry.attrname))
    return x
  of REFLECT_BOOl:
    return toJS(ctx, element.attrb(entry.attrname))
  of REFLECT_LONG:
    return toJS(ctx, element.attrl(entry.attrname).get(entry.i))
  of REFLECT_ULONG:
    return toJS(ctx, element.attrul(entry.attrname).get(entry.u))
  of REFLECT_ULONG_GZ:
    return toJS(ctx, element.attrulgz(entry.attrname).get(entry.u))

proc jsReflectSet(ctx: JSContext, this, val: JSValue, magic: cint): JSValue {.cdecl.} =
  if unlikely(not ctx.isInstanceOf(this, "Element")):
    return JS_ThrowTypeError(ctx, "Reflected getter called on a value that is not an element")
  let entry = ReflectTable[uint16(magic)]
  let op = getOpaque0(this)
  assert op != nil
  let element = cast[Element](op)
  if element.tagType notin entry.tags:
    return JS_ThrowTypeError(ctx, "Invalid tag type %s", element.tagType)
  case entry.t
  of REFLECT_STR:
    let x = fromJS[string](ctx, val)
    if x.isSome:
      element.attr(entry.attrname, x.get)
  of REFLECT_BOOL:
    let x = fromJS[bool](ctx, val)
    if x.isSome:
      if x.get:
        element.attr(entry.attrname, "")
      else:
        element.delAttr(entry.attrname)
  of REFLECT_LONG:
    let x = fromJS[int32](ctx, val)
    if x.isSome:
      element.attrl(entry.attrname, x.get)
  of REFLECT_ULONG:
    let x = fromJS[uint32](ctx, val)
    if x.isSome:
      element.attrul(entry.attrname, x.get)
  of REFLECT_ULONG_GZ:
    let x = fromJS[uint32](ctx, val)
    if x.isSome:
      element.attrulgz(entry.attrname, x.get)
  return JS_DupValue(ctx, val)

func getReflectFunctions(tags: set[TagType]): seq[TabGetSet] =
  for tag in tags:
    if tag in TagReflectMap:
      for i in TagReflectMap[tag]:
        result.add(TabGetSet(
          name: ReflectTable[i].funcname,
          get: jsReflectGet,
          set: jsReflectSet,
          magic: i
        ))
  return result

func getElementReflectFunctions(): seq[TabGetSet] =
  var i: int16 = ReflectAllStartIndex
  while i < int16(ReflectTable.len):
    let entry = ReflectTable[i]
    assert entry.tags == AllTagTypes
    result.add(TabGetSet(name: ReflectTable[i].funcname, get: jsReflectGet, set: jsReflectSet, magic: i))
    inc i

proc getContext*(jctx: JSContext, this: HTMLCanvasElement, contextId: string,
    options = none(JSValue)): RenderingContext {.jsfunc.} =
  if contextId == "2d":
    if this.ctx2d != nil:
      return this.ctx2d
    return create2DContext(jctx, this, options)
  return nil

#TODO quality should be `any'
proc toBlob(ctx: JSContext, this: HTMLCanvasElement, callback: JSValue,
    s = "image/png", quality: float64 = 1): JSValue {.jsfunc.} =
  var outlen: int
  let buf = this.bitmap.toPNG(outlen)
  let blob = newBlob(buf, outlen, "image/png", proc() = dealloc(buf))
  var jsBlob = toJS(ctx, blob)
  let res = JS_Call(ctx, callback, JS_UNDEFINED, 1, addr jsBlob)
  # Hack. TODO: implement JSValue to callback
  if res == JS_EXCEPTION:
    return JS_EXCEPTION
  JS_FreeValue(ctx, res)
  return JS_UNDEFINED

import html/chadombuilder
# https://w3c.github.io/DOM-Parsing/#dfn-fragment-parsing-algorithm
proc fragmentParsingAlgorithm(element: Element, s: string): DocumentFragment =
  #TODO xml
  let newChildren = parseHTMLFragment(element, s)
  let fragment = element.document.newDocumentFragment()
  for child in newChildren:
    fragment.append(child)
  return fragment

proc innerHTML(element: Element, s: string) {.jsfset.} =
  #TODO shadow root
  let fragment = fragmentParsingAlgorithm(element, s)
  let ctx = if element.tagType == TAG_TEMPLATE:
    HTMLTemplateElement(element).content
  else:
    element
  ctx.replaceAll(fragment)

proc outerHTML(element: Element, s: string): Err[DOMException] {.jsfset.} =
  let parent0 = element.parentNode
  if parent0 == nil:
    return ok()
  if parent0.nodeType == DOCUMENT_NODE:
    let ex = newDOMException("outerHTML is disallowed for Document children",
      "NoModificationAllowedError")
    return err(ex)
  let parent = if parent0.nodeType == DOCUMENT_FRAGMENT_NODE:
    element.document.newHTMLElement(TAG_BODY)
  else:
    # neither a document, nor a document fragment => parent must be an
    # element node
    Element(parent0)
  let fragment = fragmentParsingAlgorithm(parent, s)
  return parent.replace(element, fragment)

# https://w3c.github.io/DOM-Parsing/#dom-element-insertadjacenthtml
proc insertAdjacentHTML(element: Element, position, text: string):
    Err[DOMException] {.jsfunc.} =
  #TODO enumize position
  let ctx0 = case position
  of "beforebegin", "afterend":
    if element.parentNode.nodeType == DOCUMENT_NODE or
        element.parentNode == nil:
      return errDOMException("Parent is not a valid element",
        "NoModificationAllowedError")
    element.parentNode
  of "afterbegin", "beforeend":
    Node(element)
  else:
    return errDOMException("Invalid position", "SyntaxError")
  let document = ctx0.document
  let ctx = if ctx0.nodeType != ELEMENT_NODE or not document.isxml or
      Element(ctx0).namespace == Namespace.HTML:
    document.newHTMLElement(TAG_BODY)
  else:
    Element(ctx0)
  let fragment = ctx.fragmentParsingAlgorithm(text)
  case position
  of "beforebegin":
    ctx.parentNode.insert(fragment, ctx)
  of "afterbegin":
    ctx.insert(fragment, ctx.firstChild)
  of "beforeend":
    ctx.append(fragment)
  of "afterend":
    ctx.parentNode.insert(fragment, ctx.nextSibling)

proc registerElements(ctx: JSContext, nodeCID: JSClassID) =
  let elementCID = ctx.registerType(Element, parent = nodeCID)
  const extra_getset = getElementReflectFunctions()
  let htmlElementCID = ctx.registerType(HTMLElement, parent = elementCID,
    has_extra_getset = true, extra_getset = extra_getset)
  template register(t: typed, tags: set[TagType]) =
    const extra_getset = getReflectFunctions(tags)
    ctx.registerType(t, parent = htmlElementCID,
      has_extra_getset = true, extra_getset = extra_getset)
  template register(t: typed, tag: TagType) =
    register(t, {tag})
  register(HTMLInputElement, TAG_INPUT)
  register(HTMLAnchorElement, TAG_A)
  register(HTMLSelectElement, TAG_SELECT)
  register(HTMLSpanElement, TAG_SPAN)
  register(HTMLOptGroupElement, TAG_OPTGROUP)
  register(HTMLOptionElement, TAG_OPTION)
  register(HTMLHeadingElement, {TAG_H1, TAG_H2, TAG_H3, TAG_H4, TAG_H5, TAG_H6})
  register(HTMLBRElement, TAG_BR)
  register(HTMLMenuElement, TAG_MENU)
  register(HTMLUListElement, TAG_UL)
  register(HTMLOListElement, TAG_OL)
  register(HTMLLIElement, TAG_LI)
  register(HTMLStyleElement, TAG_STYLE)
  register(HTMLLinkElement, TAG_LINK)
  register(HTMLFormElement, TAG_FORM)
  register(HTMLTemplateElement, TAG_TEMPLATE)
  register(HTMLUnknownElement, TAG_UNKNOWN)
  register(HTMLScriptElement, TAG_SCRIPT)
  register(HTMLBaseElement, TAG_BASE)
  register(HTMLAreaElement, TAG_AREA)
  register(HTMLButtonElement, TAG_BUTTON)
  register(HTMLTextAreaElement, TAG_TEXTAREA)
  register(HTMLLabelElement, TAG_LABEL)
  register(HTMLCanvasElement, TAG_CANVAS)
  register(HTMLImageElement, TAG_IMG)

proc addDOMModule*(ctx: JSContext) =
  let eventTargetCID = ctx.getClass("EventTarget")
  let nodeCID = ctx.registerType(Node, parent = eventTargetCID)
  ctx.defineConsts(nodeCID, NodeType, uint16)
  ctx.registerType(NodeList)
  ctx.registerType(HTMLCollection)
  ctx.registerType(HTMLAllCollection, ishtmldda = true)
  ctx.registerType(Location)
  ctx.registerType(Document, parent = nodeCID)
  ctx.registerType(DOMImplementation)
  ctx.registerType(DOMTokenList)
  ctx.registerType(DOMStringMap)
  let characterDataCID = ctx.registerType(CharacterData, parent = nodeCID)
  ctx.registerType(Comment, parent = characterDataCID)
  ctx.registerType(CDATASection, parent = characterDataCID)
  ctx.registerType(DocumentFragment, parent = nodeCID)
  ctx.registerType(ProcessingInstruction, parent = characterDataCID)
  ctx.registerType(Text, parent = characterDataCID)
  ctx.registerType(DocumentType, parent = nodeCID)
  ctx.registerType(Attr, parent = nodeCID)
  ctx.registerType(NamedNodeMap)
  ctx.registerType(CanvasRenderingContext2D)
  ctx.registerType(TextMetrics)
  ctx.registerType(CSSStyleDeclaration)
  ctx.registerElements(nodeCID)