;; 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: toggle (30 tests — 19 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream toggle tests. 19 of 30 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-dom))"
        :style "color:#7c3aed" "dom"))
    (div :style "display:flex;flex-direction:column"
      (~hyperscript/hs-test-card
  :name "can toggle class ref on a single div"
  :html "<div _='on click toggle .foo'></div>"
  :action "div.click(); div.click()"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle .foo\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    (assert (not (dom-has-class? _el-div \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can toggle class ref on a single form"
  :html "<form _='on click toggle .foo'></form>"
  :action "form.click(); form.click()"
  :check "form.classList.contains(\"foo\").should.equal(false) && form.classList.contains(\"foo\").should.equal(true) && form.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-form (dom-create-element \"form\")))
    (dom-set-attr _el-form \"_\" \"on click toggle .foo\")
    (dom-append sandbox _el-form)
    (hs-activate! _el-form)
    (dom-dispatch _el-form \"click\" nil)
    (dom-dispatch _el-form \"click\" nil)
    (assert (not (dom-has-class? _el-form \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can target another div for class ref toggle"
  :html "<div id='bar'></div> | <div _='on click toggle .foo on #bar'></div>"
  :action "div.click(); div.click()"
  :check "bar.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(false) && bar.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false) && bar.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-bar (dom-create-element \"div\")) (_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-div \"_\" \"on click toggle .foo on #bar\")
    (dom-append sandbox _el-bar)
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    (assert (not (dom-has-class? _el-bar \"foo\")))
    (assert (not (dom-has-class? _el-div \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can toggle non-class attributes"
  :html "<div _='on click toggle [@foo=\"bar\"]'></div>"
  :action "div.click(); div.click()"
  :check "div.hasAttribute(\"foo\").should.equal(false) && div.getAttribute(\"foo\").should.equal(\"bar\") && div.hasAttribute(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle [@foo=\\\"bar\\\"]\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    (assert (not (dom-has-attr? _el-div \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can toggle non-class attributes on selects"
  :html "<select _='on click toggle [@foo=\"bar\"]'></select>"
  :action "select.click(); select.click()"
  :check "select.hasAttribute(\"foo\").should.equal(false) && select.getAttribute(\"foo\").should.equal(\"bar\") && select.hasAttribute(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-select (dom-create-element \"select\")))
    (dom-set-attr _el-select \"_\" \"on click toggle [@foo=\\\"bar\\\"]\")
    (dom-append sandbox _el-select)
    (hs-activate! _el-select)
    (dom-dispatch _el-select \"click\" nil)
    (dom-dispatch _el-select \"click\" nil)
    (assert (not (dom-has-attr? _el-select \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can toggle for a fixed amount of time"
  :html "<div _='on click toggle .foo for 10ms'></div>"
  :action "div.click()"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle .foo for 10ms\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert (not (dom-has-class? _el-div \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can toggle until an event on another element"
  :html "<div id='d1'></div> | <div _='on click toggle .foo until foo from #d1'></div>"
  :action "div.click(); d1.dispatchEvent(new CustomEvent(\"foo\")"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-div \"_\" \"on click toggle .foo until foo from #d1\")
    (dom-append sandbox _el-d1)
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-d1 \"foo\" nil)
    (assert (not (dom-has-class? _el-div \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can toggle between two classes"
  :html "<div class='foo' _='on click toggle between .foo and .bar'></div>"
  :action "div.click(); div.click()"
  :check "div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(true) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-add-class _el-div \"foo\")
    (dom-set-attr _el-div \"_\" \"on click toggle between .foo and .bar\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-div \"foo\"))
    (assert (not (dom-has-class? _el-div \"bar\")))
  ))")
(~hyperscript/hs-test-card
  :name "can toggle multiple class refs"
  :html "<div class='bar' _='on click toggle .foo .bar'></div>"
  :action "div.click(); div.click()"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(true) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-add-class _el-div \"bar\")
    (dom-set-attr _el-div \"_\" \"on click toggle .foo .bar\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    (assert (not (dom-has-class? _el-div \"foo\")))
    (assert (dom-has-class? _el-div \"bar\"))
  ))")
(~hyperscript/hs-test-card
  :name "can toggle display"
  :html "<div _='on click toggle *display'></div>"
  :action "div.click(); div.click()"
  :check "getComputedStyle(div).display.should.equal(\"block\") && getComputedStyle(div).display.should.equal(\"none\") && getComputedStyle(div).display.should.equal(\"block\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle *display\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.display
  ))")
(~hyperscript/hs-test-card
  :name "can toggle opacity"
  :html "<div _='on click toggle *opacity'></div>"
  :action "div.click(); div.click()"
  :check "getComputedStyle(div).opacity.should.equal(\"1\") && getComputedStyle(div).opacity.should.equal(\"0\") && getComputedStyle(div).opacity.should.equal(\"1\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle *opacity\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.opacity
  ))")
(~hyperscript/hs-test-card
  :name "can toggle opacity"
  :html "<div _='on click toggle *visibility'></div>"
  :action "div.click(); div.click()"
  :check "getComputedStyle(div).visibility.should.equal(\"visible\") && getComputedStyle(div).visibility.should.equal(\"hidden\") && getComputedStyle(div).visibility.should.equal(\"visible\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle *visibility\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.visibility
  ))")
(~hyperscript/hs-test-card
  :name "can toggle display w/ my"
  :html "<div _='on click toggle my *display'></div>"
  :action "div.click(); div.click()"
  :check "getComputedStyle(div).display.should.equal(\"block\") && getComputedStyle(div).display.should.equal(\"none\") && getComputedStyle(div).display.should.equal(\"block\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle my *display\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.display
  ))")
(~hyperscript/hs-test-card
  :name "can toggle display w/ my"
  :html "<div _='on click toggle my *opacity'></div>"
  :action "div.click(); div.click()"
  :check "getComputedStyle(div).opacity.should.equal(\"1\") && getComputedStyle(div).opacity.should.equal(\"0\") && getComputedStyle(div).opacity.should.equal(\"1\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle my *opacity\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.opacity
  ))")
(~hyperscript/hs-test-card
  :name "can toggle display w/ my"
  :html "<div _='on click toggle my *visibility'></div>"
  :action "div.click(); div.click()"
  :check "getComputedStyle(div).visibility.should.equal(\"visible\") && getComputedStyle(div).visibility.should.equal(\"hidden\") && getComputedStyle(div).visibility.should.equal(\"visible\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle my *visibility\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.visibility
  ))")
(~hyperscript/hs-test-card
  :name "can toggle display on other elt"
  :html "<div _='on click toggle the *display of #d2'></div> | <div id='d2'></div>"
  :action "div.click(); div.click()"
  :check "getComputedStyle(div2).display.should.equal(\"block\") && getComputedStyle(div2).display.should.equal(\"none\") && getComputedStyle(div2).display.should.equal(\"block\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle the *display of #d2\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-d2)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div2.display
  ))")
(~hyperscript/hs-test-card
  :name "can toggle display on other elt"
  :html "<div _='on click toggle the *opacity of #d2'></div> | <div id='d2'></div>"
  :action "div.click(); div.click()"
  :check "getComputedStyle(div2).opacity.should.equal(\"1\") && getComputedStyle(div2).opacity.should.equal(\"0\") && getComputedStyle(div2).opacity.should.equal(\"1\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle the *opacity of #d2\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-d2)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div2.opacity
  ))")
(~hyperscript/hs-test-card
  :name "can toggle display on other elt"
  :html "<div _='on click toggle the *visibility of #d2'></div> | <div id='d2'></div>"
  :action "div.click(); div.click()"
  :check "getComputedStyle(div2).visibility.should.equal(\"visible\") && getComputedStyle(div2).visibility.should.equal(\"hidden\") && getComputedStyle(div2).visibility.should.equal(\"visible\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click toggle the *visibility of #d2\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-d2)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div2.visibility
  ))")
(~hyperscript/hs-test-card
  :name "can toggle crazy tailwinds class ref on a single form"
  :html "<form _='on click toggle .group-\\\\[:nth-of-type\\\\(3\\\\)_\\\\&\\\\]:block'></form>"
  :action "form.click(); form.click()"
  :check "form.classList.contains(\"group-[:nth-of-type(3)_&]:block\").should.equal(false) && form.classList.contains(\"group-[:nth-of-type(3)_&]:block\").should.equal(true) && form.classList.contains(\"group-[:nth-of-type(3)_&]:block\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-form (dom-create-element \"form\")))
    (dom-set-attr _el-form \"_\" \"on click toggle .group-[:nth-of-type(3)_&]:block\")
    (dom-append sandbox _el-form)
    (hs-activate! _el-form)
    (dom-dispatch _el-form \"click\" nil)
    (dom-dispatch _el-form \"click\" nil)
    (assert (not (dom-has-class? _el-form \"group-[:nth-of-type(3)_&]:block\")))
  ))")
(~hyperscript/hs-test-card
  :name "can toggle between two attribute values"
  :html "<div data-state='active' _=\\\"on click toggle between [@data-state='active'] and [@data-state='inactive']\\\"></div>"
  :action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
  :check "toHaveAttribute('data-state', 'active'); toHaveAttribute('data-state', 'inactive'); toHaveAttribute('data-state', 'active')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can toggle between different attributes"
  :html "<div enabled='true' _=\\\"on click toggle between [@enabled='true'] and [@disabled='true']\\\"></div>"
  :action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
  :check "toHaveAttribute('enabled', 'true'); toHaveAttribute('disabled', 'true'); toHaveAttribute('enabled', 'true')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can toggle visibility"
  :html "<div _='on click toggle *visibility'></div>"
  :action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
  :check "toHaveCSS('visibility', 'visible'); toHaveCSS('visibility', 'hidden'); toHaveCSS('visibility', 'visible')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can toggle opacity w/ my"
  :html "<div _='on click toggle my *opacity'></div>"
  :action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
  :check "toHaveCSS('opacity', '1'); toHaveCSS('opacity', '0'); toHaveCSS('opacity', '1')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can toggle visibility w/ my"
  :html "<div _='on click toggle my *visibility'></div>"
  :action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
  :check "toHaveCSS('visibility', 'visible'); toHaveCSS('visibility', 'hidden'); toHaveCSS('visibility', 'visible')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can toggle opacity on other elt"
  :html "<div _='on click toggle the *opacity of #d2'></div><div id='d2'></div>"
  :action ""
  :check "toHaveCSS('opacity', '1'); toHaveCSS('opacity', '0'); toHaveCSS('opacity', '1')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can toggle visibility on other elt"
  :html "<div _='on click toggle the *visibility of #d2'></div><div id='d2'></div>"
  :action ""
  :check "toHaveCSS('visibility', 'visible'); toHaveCSS('visibility', 'hidden'); toHaveCSS('visibility', 'visible')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can toggle *display between two values"
  :html "<div style='display:none' _=\\\"on click toggle *display of me between 'none' and 'flex'\\\"></div>"
  :action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
  :check "toHaveCSS('display', 'none'); toHaveCSS('display', 'flex'); toHaveCSS('display', 'none')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can toggle *opacity between three values"
  :html "<div style='opacity:0' _=\\\"on click toggle *opacity of me between '0', '0.5' and '1'\\\"></div>"
  :action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
  :check "toHaveCSS('opacity', '0'); toHaveCSS('opacity', '0.5'); toHaveCSS('opacity', '1'); toHaveCSS('opacity', '0')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can toggle a global variable between two values"
  :html "<div _=\\\"on click toggle $mode between 'edit' and 'preview'\\\"></div>"
  :action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
  :check "toBe('edit'); toBe('preview'); toBe('edit')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can toggle a global variable between three values"
  :html "<div _=\\\"on click toggle $state between 'a', 'b' and 'c'\\\"></div>"
  :action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click'); find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
  :check "toBe('a'); toBe('b'); toBe('c'); toBe('a')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
