;; 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: dom-scope (25 tests — 0 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream dom-scope tests. 0 of 25 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-language))"
        :style "color:#7c3aed" "language"))
    (div :style "display:flex;flex-direction:column"
      (~hyperscript/hs-test-card
  :name "isolated stops ^var resolution"
  :html "
			<div _=\"init set ^color to 'red'\">
				<div dom-scope=\"isolated\">
					<span _=\"init if ^color is not undefined put 'leaked' into me else put 'blocked' into me\">waiting</span>
				</div>
			</div>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "closest jumps to matching ancestor"
  :html "
			<div class=\"outer\" _=\"init set ^val to 'from-outer'\">
				<div dom-scope=\"isolated\" _=\"init set ^val to 'from-inner'\">
					<span dom-scope=\"closest .outer\" _=\"init put ^val into me\">none</span>
				</div>
			</div>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "closest with no match stops resolution"
  :html "
			<div _=\"init set ^val to 'found'\">
				<span dom-scope=\"closest .nonexistent\" _=\"init if ^val is not undefined put 'leaked' into me else put 'blocked' into me\">waiting</span>
			</div>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "parent of jumps past matching ancestor to its parent"
  :html "
			<div class=\"outer\" _=\"init set ^val to 'from-outer'\">
				<div class=\"middle\" dom-scope=\"isolated\" _=\"init set ^val to 'from-middle'\">
					<span dom-scope=\"parent of .middle\" _=\"init put ^val into me\">none</span>
				</div>
			</div>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "isolated allows setting ^var on the isolated element itself"
  :html "
			<div _=\"init set ^outer to 'leaked'\">
				<div dom-scope=\"isolated\" _=\"init set ^inner to 'contained'\">
					<span _=\"init put ^inner into me\">none</span>
				</div>
			</div>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "child reads ^var set by parent"
  :html "<div _=\"init set ^count to 42\">  <span _=\"on click put ^count into me\">0</span></div>"
  :action "find('span').click()"
  :check "toHaveText('42')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "child writes ^var and parent sees it"
  :html "<div _=\"init set ^count to 0\">  <button _=\"on click set ^count to 99\">set</button>  <span _=\"on click put ^count into me\">0</span></div>"
  :action "find('button').click(); find('span').click()"
  :check "toHaveText('99')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "deeply nested child reads ^var from grandparent"
  :html "<div _=\"init set ^name to 'alice'\">  <div>    <div>      <span _=\"on click put ^name into me\">empty</span>    </div>  </div></div>"
  :action "find('span').click()"
  :check "toHaveText('alice')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "closest ancestor wins (shadowing)"
  :html "<div _=\"init set ^color to 'red'\">  <div _=\"init set ^color to 'blue'\">    <span _=\"on click put ^color into me\">empty</span>  </div></div>"
  :action "find('span').click()"
  :check "toHaveText('blue')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "sibling subtrees have independent ^vars"
  :html "<div id=\"a\" _=\"init set ^val to 'A'\">  <span _=\"on click put ^val into me\">empty</span></div><div id=\"b\" _=\"init set ^val to 'B'\">  <span _=\"on click put ^val into me\">empty</span></div>"
  :action "find('#a span').click(); find('#b span').click()"
  :check "toHaveText('A'); toHaveText('B')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "write to ^var not found anywhere creates on current element"
  :html "<div>  <button _=\"on click set ^newvar to 'created' then put ^newvar into next <span/>\">go</button>  <span>empty</span></div>"
  :action "find('button').click()"
  :check "toHaveText('created')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "child write updates the ancestor, not a local copy"
  :html "<div _=\"init set ^shared to 0\">  <button _=\"on click set ^shared to 10\">set</button>  <span _=\"on click put ^shared into me\">0</span></div>"
  :action "find('button').click(); find('span').click()"
  :check "toHaveText('10')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "increment works on inherited var"
  :html "<div _=\"init set ^count to 0\">  <button _=\"on click increment ^count\"  <span _=\"on click put ^count into me\">0</span></div>"
  :action "find('button').click(); find('button').click(); find('button').click(); find('span').click()"
  :check "toHaveText('3')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "dom keyword works as scope modifier"
  :html "<div _=\"init set dom count to 42\">  <span _=\"on click put dom count into me\">0</span></div>"
  :action "find('span').click()"
  :check "toHaveText('42')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "set ^var on explicit element"
  :html "<div class=\"store\">  <button _=\"on click set ^data on closest .store to 'hello'\">set</button>  <span _=\"on click put ^data on closest .store into me\">read</span></div>"
  :action "find('button').click(); find('span').click()"
  :check "toHaveText('hello')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "on clause targets a specific ancestor"
  :html "<div class=\"outer\" _=\"init set ^outerVal to 'outer'\">  <div class=\"inner\" _=\"init set ^innerVal to 'inner'\">    <span _=\"on click put ^outerVal on closest .outer into me\">read</span>  </div></div>"
  :action "find('span').click()"
  :check "toHaveText('outer')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "on clause with id reference"
  :html "<div id=\"state-holder\"></div><button _=\"on click set ^count on #state-holder to 99\">set</button><span _=\"on click put ^count on #state-holder into me\">read</span>"
  :action "find('button').click(); find('span').click()"
  :check "toHaveText('99')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "when reacts to ^var changes"
  :html "<div _=\"init set ^count to 0\">  <button _=\"on click increment ^count\"  <output _=\"when ^count changes put it into me\">0</output></div>"
  :action "find('button').click(); find('button').click()"
  :check "toHaveText('0'); toHaveText('1'); toHaveText('2')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "always reacts to ^var changes"
  :html "<div _=\"init set ^name to 'alice'\">  <button _=\"on click set ^name to 'bob'\">rename</button>  <output _=\"live put 'Hello </div>"
  :action "find('button').click()"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "multiple children react to same ^var"
  :html "<div _=\"init set ^color to 'red'\">  <button _=\"on click set ^color to 'blue'\">change</button>  <span id=\"a\" _=\"when ^color changes put it into me\"></span>  <span id=\"b\" _=\"when ^color changes put it into me\"></span></div>"
  :action "find('button').click()"
  :check "toHaveText('red'); toHaveText('red'); toHaveText('blue'); toHaveText('blue')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "sibling subtrees react independently with ^var"
  :html "<div id=\"a\" _=\"init set ^val to 0\">  <button _=\"on click increment ^val\"  <output _=\"when ^val changes put it into me\">0</output></div><div id=\"b\" _=\"init set ^val to 0\">  <button _=\"on click increment ^val\"  <output _=\"when ^val changes put it into me\">0</output></div>"
  :action "find('#a button').click(); find('#a button').click(); find('#b button').click()"
  :check "toHaveText('0'); toHaveText('0'); toHaveText('2'); toHaveText('0'); toHaveText('1'); toHaveText('2')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "bind works with ^var"
  :html "<div _=\"init set ^search to ''\">  <input type=\"text\" _=\"bind ^search and my value\" />  <output _=\"when ^search changes put it into me\"></output></div>"
  :action "find('input').fill('hello')"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "derived ^var chains reactively"
  :html "<div _=\"init set ^price to 10 then set ^qty to 2 then set ^total to 20\">  <span _=\"when ^price changes set ^total to (^price * ^qty)\"></span>  <span _=\"when ^qty changes set ^total to (^price * ^qty)\"></span>  <output _=\"when ^total changes put it into me\"></output>  <button id=\"price-btn\" _=\"on click set ^price to 25\">set price</button>  <button id=\"qty-btn\" _=\"on click set ^qty to 5\">set qty</button></div>"
  :action "find('#price-btn').click(); find('#qty-btn').click()"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "effect stops when element is removed"
  :html "<div _=\"init set ^msg to 'hello'\">  <output _=\"when ^msg changes put it into me\"></output>  <button _=\"on click set ^msg to 'updated'\">update</button></div>"
  :action "find('button').click()"
  :check "toHaveText('hello')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "dedup prevents re-fire on same ^var value"
  :html "<div _=\"init set ^val to 'same'\">  <output _=\"when ^val changes increment :runs then put :runs into me\"></output>  <button _=\"on click set ^val to 'same'\">same</button>  <button id=\"diff\" _=\"on click set ^val to 'different'\">diff</button></div>"
  :action "find('#diff').click()"
  :check "toHaveText('1'); toHaveText('1'); toHaveText('2')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
