;; AUTO-GENERATED from spec/tests/hyperscript-upstream-tests.json
;; DO NOT EDIT — regenerate with:
;;   python3 tests/playwright/generate-sx-tests.py --emit-pages

(defcomp ()
  (~docs/page :title "Hyperscript: transition (23 tests — 15 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream transition tests. 15 of 23 are reproducible in-browser; the remainder show their source for reference.")
    (p :style "color:#78716c;font-size:0.875rem;margin-bottom:1rem"
      "Theme: " (a :href "/sx/(applications.(hyperscript.gallery-reactivity))"
        :style "color:#7c3aed" "reactivity"))
    (div :style "display:flex;flex-direction:column"
      (~hyperscript/hs-test-card
  :name "can transition a single property on current element"
  :html "<div _='on click transition width from 0px to 100px'></div>"
  :action "div.click()"
  :check "div.style.width.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click transition width from 0px to 100px\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-div \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition with parameterized values"
  :html "<div _='on click                                set startWidth to 0                               set endWidth to 100                               transition width from (startWidth)px to (endWidth)px'></div>"
  :action "div.click()"
  :check "div.style.width.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click  set startWidth to 0 then set endWidth to 100 transition width from (startWidth)px to (endWidth)px\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-div \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition a single property on form"
  :html "<form _='on click transition width from 0px to 100px'></form>"
  :action "form.click()"
  :check "form.style.width.should.equal(\"\") && form.style.width.should.equal(\"0px\") && form.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-form (dom-create-element \"form\")))
    (dom-set-attr _el-form \"_\" \"on click transition width from 0px to 100px\")
    (dom-append sandbox _el-form)
    (hs-activate! _el-form)
    (dom-dispatch _el-form \"click\" nil)
    (assert= (dom-get-style _el-form \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition a single property on current element with the my prefix"
  :html "<div _='on click transition my width from 0px to 100px'></div>"
  :action "div.click()"
  :check "div.style.width.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click transition my width from 0px to 100px\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-div \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition two properties on current element"
  :html "<div _='on click transition width from 0px to 100px height from 0px to 100px'></div>"
  :action "div.click()"
  :check "div.style.width.should.equal(\"\") && div.style.height.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.height.should.equal(\"0px\") && div.style.width.should.equal(\"100px\") && div.style.height.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click transition width from 0px to 100px height from 0px to 100px\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-div \"width\") \"100px\")
    (assert= (dom-get-style _el-div \"height\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition on another element"
  :html "<div _='on click transition element #foo width from 0px to 100px'></div> | <div id='foo'></div>"
  :action "div.click()"
  :check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click transition element #foo width from 0px to 100px\")
    (dom-set-attr _el-foo \"id\" \"foo\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-foo)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-foo \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition on another element no element prefix"
  :html "<div _='on click transition #foo width from 0px to 100px'></div> | <div id='foo'></div>"
  :action "div.click()"
  :check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click transition #foo width from 0px to 100px\")
    (dom-set-attr _el-foo \"id\" \"foo\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-foo)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-foo \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition on another element no element prefix + possessive"
  :html "<div _=\"on click transition #foo's width from 0px to 100px\"></div> | <div id='foo'></div>"
  :action "div.click()"
  :check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click transition #foo's width from 0px to 100px\")
    (dom-set-attr _el-foo \"id\" \"foo\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-foo)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-foo \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition on another element no element prefix with it"
  :html "<div _='on click get  #foo then transition its width from 0px to 100px'></div> | <div id='foo'></div>"
  :action "div.click()"
  :check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click get #foo then transition its width from 0px to 100px\")
    (dom-set-attr _el-foo \"id\" \"foo\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-foo)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-foo \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition with a custom transition time"
  :html "<div _='on click transition element #foo width from 0px to 100px using \"width 2s ease-in\"'></div> | <div id='foo'></div>"
  :action "div.click()"
  :check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click transition element #foo width from 0px to 100px using \\\"width 2s ease-in\\\"\")
    (dom-set-attr _el-foo \"id\" \"foo\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-foo)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-foo \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition with a custom transition time via the over syntax"
  :html "<div _='on click transition element #foo width from 0px to 100px over 2s'></div> | <div id='foo'></div>"
  :action "div.click()"
  :check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click transition element #foo width from 0px to 100px over 2s\")
    (dom-set-attr _el-foo \"id\" \"foo\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-foo)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-foo \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition a single property on current element using style ref"
  :html "<div _='on click transition *width from 0px to 100px'></div>"
  :action "div.click()"
  :check "div.style.width.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click transition *width from 0px to 100px\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-div \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition a single property on form  using style ref"
  :html "<form _='on click transition *width from 0px to 100px'></form>"
  :action "form.click()"
  :check "form.style.width.should.equal(\"\") && form.style.width.should.equal(\"0px\") && form.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-form (dom-create-element \"form\")))
    (dom-set-attr _el-form \"_\" \"on click transition *width from 0px to 100px\")
    (dom-append sandbox _el-form)
    (hs-activate! _el-form)
    (dom-dispatch _el-form \"click\" nil)
    (assert= (dom-get-style _el-form \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition a single property on current element with the my prefix  using style ref"
  :html "<div _='on click transition my *width from 0px to 100px'></div>"
  :action "div.click()"
  :check "div.style.width.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.width.should.equal(\"100px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click transition my *width from 0px to 100px\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-div \"width\") \"100px\")
  ))")
(~hyperscript/hs-test-card
  :name "can use initial to transition to original value"
  :html "<div style='width: 10px' _='on click 1 transition my *width to 100px                                               on click 2 transition my *width to initial'></div>"
  :action "div.click(); div.click()"
  :check "div.style.width.should.equal(\"10px\") && div.style.width.should.equal(\"100px\") && div.style.width.should.equal(\"10px\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click 1 transition my *width to 100px on click 2 transition my *width to initial\")
    (dom-set-attr _el-div \"style\" \"width: 10px\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-div \"width\") \"10px\")
  ))")
(~hyperscript/hs-test-card
  :name "can transition on another element with of syntax"
  :html "<div _=\"on click transition *width of #foo from 0px to 100px\"></div><div id=\"foo\"></div>"
  :action ""
  :check "toHaveCSS('width', '100px')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can transition on another element with possessive"
  :html "<div _=\"on click transition #foo\\'s *width from 0px to 100px\"></div><div id=\"foo\"></div>"
  :action ""
  :check "toHaveCSS('width', '100px')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can transition on another element with it"
  :html "<div _='on click get #foo then transition its *width from 0px to 100px'></div><div id='foo'></div>"
  :action ""
  :check "toHaveCSS('width', '100px')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can transition with a custom transition string"
  :html "<div _=\"on click transition #foo\\'s *width from 0px to 100px using &quot;width 2s ease-in&quot;\"></div><div id=\"foo\"></div>"
  :action ""
  :check "toHaveCSS('width', '100px')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can transition a single property on form using style ref"
  :html "<form _='on click transition *width from 0px to 100px'></form>"
  :action ""
  :check "toHaveCSS('width', '100px'); toBe('0px')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can transition a single property on current element with the my prefix using style ref"
  :html "<div _='on click transition my *width from 0px to 100px'></div>"
  :action ""
  :check "toHaveCSS('width', '100px'); toBe('0px')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can transition on query ref with possessive"
  :html ""
  :action "evaluate({...})"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can transition on query ref with of syntax"
  :html "<div _=\\\"on click transition *width of the next &lt;span/> from 0px to 100px\\\"></div><span></span>"
  :action "find('div').dispatchEvent('click')"
  :check "toHaveCSS('width', '100px')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
