;; 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: take (12 tests — 12 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream take tests. 12 of 12 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 take a class from other elements"
  :html "<div class='div foo'></div> | <div class='div' _='on click take .foo from .div'></div> | <div class='div'></div>"
  :action "d2.click()"
  :check "d1.classList.contains(\"foo\").should.equal(true) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"foo\").should.equal(false) && d2.classList.contains(\"foo\").should.equal(true) && d3.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
    (dom-add-class _el-div \"div\")
    (dom-add-class _el-div \"foo\")
    (dom-add-class _el-div1 \"div\")
    (dom-set-attr _el-div1 \"_\" \"on click take .foo from .div\")
    (dom-add-class _el-div2 \"div\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-div2)
    (hs-activate! _el-div1)
    (dom-dispatch _el-div1 \"click\" nil)
    (assert (not (dom-has-class? _el-div \"foo\")))
    (assert (dom-has-class? _el-div1 \"foo\"))
    (assert (not (dom-has-class? _el-div2 \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can take a class from other forms"
  :html "<form class='div foo'></form> | <form class='div' _='on click take .foo from .div'></form> | <form class='div'></form>"
  :action "f2.click()"
  :check "f1.classList.contains(\"foo\").should.equal(true) && f2.classList.contains(\"foo\").should.equal(false) && f3.classList.contains(\"foo\").should.equal(false) && f1.classList.contains(\"foo\").should.equal(false) && f2.classList.contains(\"foo\").should.equal(true) && f3.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-form (dom-create-element \"form\")) (_el-form1 (dom-create-element \"form\")) (_el-form2 (dom-create-element \"form\")))
    (dom-add-class _el-form \"div\")
    (dom-add-class _el-form \"foo\")
    (dom-add-class _el-form1 \"div\")
    (dom-set-attr _el-form1 \"_\" \"on click take .foo from .div\")
    (dom-add-class _el-form2 \"div\")
    (dom-append sandbox _el-form)
    (dom-append sandbox _el-form1)
    (dom-append sandbox _el-form2)
    (hs-activate! _el-form1)
    (dom-dispatch (dom-query-by-id \"f2\") \"click\" nil)
    (assert (not (dom-has-class? (dom-query-by-id \"f1\") \"foo\")))
    (assert (dom-has-class? (dom-query-by-id \"f2\") \"foo\"))
    (assert (not (dom-has-class? (dom-query-by-id \"f3\") \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can take a class for other elements"
  :html "<div class='div foo'></div> | <div class='div' _='on click take .foo from .div for #d3'></div> | <div id='d3' class='div'></div>"
  :action "d2.click()"
  :check "d1.classList.contains(\"foo\").should.equal(true) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"foo\").should.equal(false) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-d3 (dom-create-element \"div\")))
    (dom-add-class _el-div \"div\")
    (dom-add-class _el-div \"foo\")
    (dom-add-class _el-div1 \"div\")
    (dom-set-attr _el-div1 \"_\" \"on click take .foo from .div for #d3\")
    (dom-set-attr _el-d3 \"id\" \"d3\")
    (dom-add-class _el-d3 \"div\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-d3)
    (hs-activate! _el-div1)
    (dom-dispatch _el-div1 \"click\" nil)
    (assert (not (dom-has-class? _el-div \"foo\")))
    (assert (not (dom-has-class? _el-div1 \"foo\")))
    (assert (dom-has-class? _el-d3 \"foo\"))
  ))")
(~hyperscript/hs-test-card
  :name "a parent can take a class for other elements"
  :html "<div _='on click take .foo from .div for event.target'><div id='d1' class='div foo'></div><div id='d2' class='div'></div><div id='d3' class='div'></div></div>"
  :action "d2.click()"
  :check "d1.classList.contains(\"foo\").should.equal(true) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"foo\").should.equal(false) && d2.classList.contains(\"foo\").should.equal(true) && d3.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")) (_el-d3 (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click take .foo from .div for event.target\")
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-add-class _el-d1 \"div\")
    (dom-add-class _el-d1 \"foo\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-add-class _el-d2 \"div\")
    (dom-set-attr _el-d3 \"id\" \"d3\")
    (dom-add-class _el-d3 \"div\")
    (dom-append sandbox _el-div)
    (dom-append _el-div _el-d1)
    (dom-append _el-div _el-d2)
    (dom-append _el-div _el-d3)
    (hs-activate! _el-div)
    (dom-dispatch _el-d2 \"click\" nil)
    (assert (not (dom-has-class? _el-d1 \"foo\")))
    (assert (dom-has-class? _el-d2 \"foo\"))
    (assert (not (dom-has-class? _el-d3 \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can take an attribute from other elements"
  :html "<div class='div' data-foo='bar'></div> | <div class='div' _='on click take @data-foo from .div'></div> | <div class='div'></div>"
  :action "d2.click()"
  :check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d2.getAttribute(\"data-foo\").should.equal(\"\") && assert.isNull(d2.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\") && assert.isNull(d1.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
    (dom-add-class _el-div \"div\")
    (dom-set-attr _el-div \"data-foo\" \"bar\")
    (dom-add-class _el-div1 \"div\")
    (dom-set-attr _el-div1 \"_\" \"on click take @data-foo from .div\")
    (dom-add-class _el-div2 \"div\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-div2)
    (hs-activate! _el-div1)
    (dom-dispatch _el-div1 \"click\" nil)
    (assert= (dom-get-attr _el-div \"data-foo\") \"bar\")
    (assert= (dom-get-attr _el-div1 \"data-foo\") \"\")
    ;; SKIP check: skip assert.isNull(d2.getAttribute(\"data-foo\")
    ;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
    ;; SKIP check: skip assert.isNull(d1.getAttribute(\"data-foo\")
  ))")
(~hyperscript/hs-test-card
  :name "can take an attribute with specific value from other elements"
  :html "<div class='div' data-foo='bar'></div> | <div class='div' _='on click take @data-foo=baz from .div'></div> | <div class='div'></div>"
  :action "d2.click()"
  :check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d2.getAttribute(\"data-foo\").should.equal(\"baz\") && assert.isNull(d2.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\") && assert.isNull(d1.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
    (dom-add-class _el-div \"div\")
    (dom-set-attr _el-div \"data-foo\" \"bar\")
    (dom-add-class _el-div1 \"div\")
    (dom-set-attr _el-div1 \"_\" \"on click take @data-foo=baz from .div\")
    (dom-add-class _el-div2 \"div\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-div2)
    (hs-activate! _el-div1)
    (dom-dispatch _el-div1 \"click\" nil)
    (assert= (dom-get-attr _el-div \"data-foo\") \"bar\")
    (assert= (dom-get-attr _el-div1 \"data-foo\") \"baz\")
    ;; SKIP check: skip assert.isNull(d2.getAttribute(\"data-foo\")
    ;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
    ;; SKIP check: skip assert.isNull(d1.getAttribute(\"data-foo\")
  ))")
(~hyperscript/hs-test-card
  :name "can take an attribute value from other elements and set specific values instead"
  :html "<div class='div' data-foo='bar'></div> | <div class='div' _='on click take @data-foo=baz with \"qux\" from .div'></div> | <div class='div'></div>"
  :action "d2.click()"
  :check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d1.getAttribute(\"data-foo\").should.equal(\"qux\") && d2.getAttribute(\"data-foo\").should.equal(\"baz\") && d3.getAttribute(\"data-foo\").should.equal(\"qux\") && assert.isNull(d2.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
    (dom-add-class _el-div \"div\")
    (dom-set-attr _el-div \"data-foo\" \"bar\")
    (dom-add-class _el-div1 \"div\")
    (dom-set-attr _el-div1 \"_\" \"on click take @data-foo=baz with \\\"qux\\\" from .div\")
    (dom-add-class _el-div2 \"div\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-div2)
    (hs-activate! _el-div1)
    (dom-dispatch _el-div1 \"click\" nil)
    (assert= (dom-get-attr _el-div \"data-foo\") \"qux\")
    (assert= (dom-get-attr _el-div1 \"data-foo\") \"baz\")
    (assert= (dom-get-attr _el-div2 \"data-foo\") \"qux\")
    ;; SKIP check: skip assert.isNull(d2.getAttribute(\"data-foo\")
    ;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
  ))")
(~hyperscript/hs-test-card
  :name "can take an attribute value from other elements and set value from an expression instead"
  :html "<div class='div' data-foo='bar'></div> | <div class='div' data-foo='qux' _='on click take @data-foo=baz with my @data-foo from .div'></div> | <div class='div'></div>"
  :action "d2.click()"
  :check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d2.getAttribute(\"data-foo\").should.equal(\"qux\") && d1.getAttribute(\"data-foo\").should.equal(\"qux\") && d2.getAttribute(\"data-foo\").should.equal(\"baz\") && d3.getAttribute(\"data-foo\").should.equal(\"qux\") && assert.isNull(d3.getAttribute(\"data-foo\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
    (dom-add-class _el-div \"div\")
    (dom-set-attr _el-div \"data-foo\" \"bar\")
    (dom-add-class _el-div1 \"div\")
    (dom-set-attr _el-div1 \"_\" \"on click take @data-foo=baz with my @data-foo from .div\")
    (dom-set-attr _el-div1 \"data-foo\" \"qux\")
    (dom-add-class _el-div2 \"div\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-div2)
    (hs-activate! _el-div1)
    (dom-dispatch _el-div1 \"click\" nil)
    (assert= (dom-get-attr _el-div \"data-foo\") \"qux\")
    (assert= (dom-get-attr _el-div1 \"data-foo\") \"baz\")
    (assert= (dom-get-attr _el-div2 \"data-foo\") \"qux\")
    ;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
  ))")
(~hyperscript/hs-test-card
  :name "can take an attribute for other elements"
  :html "<div class='div' data-foo='bar'></div> | <div class='div' _='on click take @data-foo from .div for #d3'></div> | <div id='d3' class='div'></div>"
  :action "d2.click()"
  :check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d3.getAttribute(\"data-foo\").should.equal(\"\") && assert.isNull(d2.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\") && assert.isNull(d1.getAttribute(\"data-foo\") && assert.isNull(d2.getAttribute(\"data-foo\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-d3 (dom-create-element \"div\")))
    (dom-add-class _el-div \"div\")
    (dom-set-attr _el-div \"data-foo\" \"bar\")
    (dom-add-class _el-div1 \"div\")
    (dom-set-attr _el-div1 \"_\" \"on click take @data-foo from .div for #d3\")
    (dom-set-attr _el-d3 \"id\" \"d3\")
    (dom-add-class _el-d3 \"div\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-d3)
    (hs-activate! _el-div1)
    (dom-dispatch _el-div1 \"click\" nil)
    (assert= (dom-get-attr _el-div \"data-foo\") \"bar\")
    (assert= (dom-get-attr _el-d3 \"data-foo\") \"\")
    ;; SKIP check: skip assert.isNull(d2.getAttribute(\"data-foo\")
    ;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
    ;; SKIP check: skip assert.isNull(d1.getAttribute(\"data-foo\")
  ))")
(~hyperscript/hs-test-card
  :name "a parent can take an attribute for other elements"
  :html "<div _='on click take @data-foo from .div for event.target'><div id='d1' class='div' data-foo='bar'></div><div id='d2' class='div'></div><div id='d3' class='div'></div></div>"
  :action "d2.click()"
  :check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d2.getAttribute(\"data-foo\").should.equal(\"\") && assert.isNull(d2.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\") && assert.isNull(d1.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")) (_el-d3 (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click take @data-foo from .div for event.target\")
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-add-class _el-d1 \"div\")
    (dom-set-attr _el-d1 \"data-foo\" \"bar\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-add-class _el-d2 \"div\")
    (dom-set-attr _el-d3 \"id\" \"d3\")
    (dom-add-class _el-d3 \"div\")
    (dom-append sandbox _el-div)
    (dom-append _el-div _el-d1)
    (dom-append _el-div _el-d2)
    (dom-append _el-div _el-d3)
    (hs-activate! _el-div)
    (dom-dispatch _el-d2 \"click\" nil)
    (assert= (dom-get-attr _el-d1 \"data-foo\") \"bar\")
    (assert= (dom-get-attr _el-d2 \"data-foo\") \"\")
    ;; SKIP check: skip assert.isNull(d2.getAttribute(\"data-foo\")
    ;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
    ;; SKIP check: skip assert.isNull(d1.getAttribute(\"data-foo\")
  ))")
(~hyperscript/hs-test-card
  :name "can take multiple classes from other elements"
  :html "<div class='div foo'></div> | <div class='div' _='on click take .foo .bar'></div> | <div class='div bar'></div>"
  :action "d2.click()"
  :check "d1.classList.contains(\"foo\").should.equal(true) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"bar\").should.equal(false) && d2.classList.contains(\"bar\").should.equal(false) && d3.classList.contains(\"bar\").should.equal(true) && d1.classList.contains(\"foo\").should.equal(false) && d2.classList.contains(\"foo\").should.equal(true) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"bar\").should.equal(false) && d2.classList.contains(\"bar\").should.equal(true) && d3.classList.contains(\"bar\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
    (dom-add-class _el-div \"div\")
    (dom-add-class _el-div \"foo\")
    (dom-add-class _el-div1 \"div\")
    (dom-set-attr _el-div1 \"_\" \"on click take .foo .bar\")
    (dom-add-class _el-div2 \"div\")
    (dom-add-class _el-div2 \"bar\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-div2)
    (hs-activate! _el-div1)
    (dom-dispatch _el-div1 \"click\" nil)
    (assert (not (dom-has-class? _el-div \"foo\")))
    (assert (dom-has-class? _el-div1 \"foo\"))
    (assert (not (dom-has-class? _el-div2 \"foo\")))
    (assert (not (dom-has-class? _el-div \"bar\")))
    (assert (dom-has-class? _el-div1 \"bar\"))
    (assert (not (dom-has-class? _el-div2 \"bar\")))
  ))")
(~hyperscript/hs-test-card
  :name "can take multiple classes from specific element"
  :html "<div class='div1 foo bar'></div> | <div class='div' _='on click take .foo .bar from .div1'></div> | <div class='div bar'></div>"
  :action "d2.click()"
  :check "d1.classList.contains(\"foo\").should.equal(true) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"bar\").should.equal(true) && d2.classList.contains(\"bar\").should.equal(false) && d3.classList.contains(\"bar\").should.equal(true) && d1.classList.contains(\"foo\").should.equal(false) && d2.classList.contains(\"foo\").should.equal(true) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"bar\").should.equal(false) && d2.classList.contains(\"bar\").should.equal(true) && d3.classList.contains(\"bar\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
    (dom-add-class _el-div \"div1\")
    (dom-add-class _el-div \"foo\")
    (dom-add-class _el-div \"bar\")
    (dom-add-class _el-div1 \"div\")
    (dom-set-attr _el-div1 \"_\" \"on click take .foo .bar from .div1\")
    (dom-add-class _el-div2 \"div\")
    (dom-add-class _el-div2 \"bar\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-div2)
    (hs-activate! _el-div1)
    (dom-dispatch _el-div1 \"click\" nil)
    (assert (not (dom-has-class? _el-div \"foo\")))
    (assert (dom-has-class? _el-div1 \"foo\"))
    (assert (not (dom-has-class? _el-div2 \"foo\")))
    (assert (not (dom-has-class? _el-div \"bar\")))
    (assert (dom-has-class? _el-div1 \"bar\"))
    (assert (dom-has-class? _el-div2 \"bar\"))
  ))"))))
