;; 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: hide (14 tests — 13 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream hide tests. 13 of 14 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 hide element with no target"
  :html "<div _='on click hide'></div>"
  :action "div.click()"
  :check "getComputedStyle(div).display.should.equal(\"none\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.display
  ))")
(~hyperscript/hs-test-card
  :name "hide element then show element retains original display"
  :html "<div _='on click 1 hide                          on click 2 show'></div>"
  :action "div.click(); div.click()"
  :check "div.style.display.should.equal(\"none\") && getComputedStyle(div).display.should.equal(\"none\") && div.style.display.should.equal(\"\") && getComputedStyle(div).display.should.equal(\"block\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click 1 hide on click 2 show\")
    (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 hide element with no target followed by command"
  :html "<div _='on click hide add .foo'></div>"
  :action "div.click()"
  :check "getComputedStyle(div).display.should.equal(\"block\") && div.classList.contains(\"foo\").should.equal(false) && getComputedStyle(div).display.should.equal(\"none\") && div.classList.contains(\"foo\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide add .foo\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.display
    (assert (dom-has-class? _el-div \"foo\"))
  ))")
(~hyperscript/hs-test-card
  :name "can hide element with no target followed by then"
  :html "<div _='on click hide then add .foo'></div>"
  :action "div.click()"
  :check "getComputedStyle(div).display.should.equal(\"block\") && div.classList.contains(\"foo\").should.equal(false) && getComputedStyle(div).display.should.equal(\"none\") && div.classList.contains(\"foo\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide then add .foo\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.display
    (assert (dom-has-class? _el-div \"foo\"))
  ))")
(~hyperscript/hs-test-card
  :name "can hide element with no target with a with"
  :html "<div _='on click hide with display then add .foo'></div>"
  :action "div.click()"
  :check "getComputedStyle(div).display.should.equal(\"block\") && div.classList.contains(\"foo\").should.equal(false) && getComputedStyle(div).display.should.equal(\"none\") && div.classList.contains(\"foo\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide with display then add .foo\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.display
    (assert (dom-has-class? _el-div \"foo\"))
  ))")
(~hyperscript/hs-test-card
  :name "can hide element, with display:none by default"
  :html "<div _='on click hide me'></div>"
  :action "div.click()"
  :check "getComputedStyle(div).display.should.equal(\"block\") && getComputedStyle(div).display.should.equal(\"none\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide me\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.display
  ))")
(~hyperscript/hs-test-card
  :name "can hide element with display:none explicitly"
  :html "<div _='on click hide me with display'></div>"
  :action "div.click()"
  :check "getComputedStyle(div).display.should.equal(\"block\") && getComputedStyle(div).display.should.equal(\"none\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide me with display\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.display
  ))")
(~hyperscript/hs-test-card
  :name "can hide element with opacity:0"
  :html "<div _='on click hide me with opacity'></div>"
  :action "div.click()"
  :check "getComputedStyle(div).opacity.should.equal(\"1\") && getComputedStyle(div).opacity.should.equal(\"0\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide me with opacity\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.opacity
  ))")
(~hyperscript/hs-test-card
  :name "can hide element with opacity style literal"
  :html "<div _='on click hide me with *opacity'></div>"
  :action "div.click()"
  :check "getComputedStyle(div).opacity.should.equal(\"1\") && getComputedStyle(div).opacity.should.equal(\"0\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide me with *opacity\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.opacity
  ))")
(~hyperscript/hs-test-card
  :name "can hide element, with visibility:hidden"
  :html "<div _='on click hide me with visibility'></div>"
  :action "div.click()"
  :check "getComputedStyle(div).visibility.should.equal(\"visible\") && getComputedStyle(div).visibility.should.equal(\"hidden\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide me with visibility\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: div.visibility
  ))")
(~hyperscript/hs-test-card
  :name "can hide other elements"
  :html "<div class=hideme></div> | <div _='on click hide .hideme'></div>"
  :action "div.click()"
  :check "getComputedStyle(hideme).display.should.equal(\"block\") && getComputedStyle(hideme).display.should.equal(\"none\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")))
    (dom-add-class _el-div \"hideme\")
    (dom-set-attr _el-div1 \"_\" \"on click hide .hideme\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (hs-activate! _el-div1)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP computed style: hideme.display
  ))")
(~hyperscript/hs-test-card
  :name "can hide with custom strategy"
  :html "<div _='on click hide with myHide'></div>"
  :action "classList.remove(\"foo\"); div.click()"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide with myHide\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    ;; SKIP action: classList.remove__foo__
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-div \"foo\"))
  ))")
(~hyperscript/hs-test-card
  :name "can set default to custom strategy"
  :html "<div _='on click hide'></div>"
  :action "classList.remove(\"foo\"); div.click()"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click hide\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    ;; SKIP action: classList.remove__foo__
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-div \"foo\"))
  ))")
(~hyperscript/hs-test-card
  :name "can filter hide via the when clause"
  :html "<div id='trigger' _='on click hide <div/> in me when it matches .hideable'>  <div id='d1' class='hideable'></div>  <div id='d2'></div></div>"
  :action "find('#trigger').dispatchEvent('click')"
  :check "toHaveCSS('display', 'none'); toHaveCSS('display', 'block')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
