mirror of https://github.com/sveltejs/svelte
adiguba
2 years ago
parent
2b3fb8e04d
commit
1cbb44bf63
@ -0,0 +1,145 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<div class="svelte-tza1s0"></div>
|
||||
<span></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="foo svelte-tza1s0"></div>
|
||||
<span class="foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
|
||||
|
||||
|
||||
<div class="foo svelte-tza1s0 bar"></div>
|
||||
<span class="foo bar"></span>
|
||||
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0 bar"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0"></div>
|
||||
<span></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0 bar"></div>
|
||||
<span class="bar"></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar"></span></div>
|
||||
|
||||
<div class="football svelte-tza1s0 bar"></div>
|
||||
<span class="football bar"></span>
|
||||
<div class="svelte-tza1s0"><span class="football svelte-tza1s0 bar"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0 bar not-foo"></div>
|
||||
<span class="bar not-foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar not-foo"></span></div>
|
||||
|
||||
`,
|
||||
test({ assert, target, component }) {
|
||||
component.foo = true;
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div class="svelte-tza1s0"></div>
|
||||
<span></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="foo svelte-tza1s0"></div>
|
||||
<span class="foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="foo svelte-tza1s0 bar"></div>
|
||||
<span class="foo bar"></span>
|
||||
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0 bar"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0 foo"></div>
|
||||
<span class="foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0 bar foo"></div>
|
||||
<span class="bar foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar foo"></span></div>
|
||||
|
||||
<div class="football svelte-tza1s0 bar foo"></div>
|
||||
<span class="football bar foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="football svelte-tza1s0 bar foo"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0 bar foo"></div>
|
||||
<span class="bar foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar foo"></span></div>
|
||||
`
|
||||
);
|
||||
|
||||
component.bar = false;
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div class="svelte-tza1s0"></div>
|
||||
<span></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="foo svelte-tza1s0"></div>
|
||||
<span class="foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="foo svelte-tza1s0"></div>
|
||||
<span class="foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0 foo"></div>
|
||||
<span class="foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0 foo"></div>
|
||||
<span class="foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
|
||||
|
||||
<div class="football svelte-tza1s0 foo"></div>
|
||||
<span class="football foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="football svelte-tza1s0 foo"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0 foo"></div>
|
||||
<span class="foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
|
||||
`
|
||||
);
|
||||
|
||||
component.foo = false;
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div class="svelte-tza1s0"></div>
|
||||
<span></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="foo svelte-tza1s0"></div>
|
||||
<span class="foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="foo svelte-tza1s0"></div>
|
||||
<span class="foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0"></div>
|
||||
<span class=""></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0"></div>
|
||||
<span class=""></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="football svelte-tza1s0"></div>
|
||||
<span class="football"></span>
|
||||
<div class="svelte-tza1s0"><span class="football svelte-tza1s0"></span></div>
|
||||
|
||||
<div class="svelte-tza1s0 not-foo"></div>
|
||||
<span class="not-foo"></span>
|
||||
<div class="svelte-tza1s0"><span class="svelte-tza1s0 not-foo"></span></div>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,42 @@
|
||||
<script>
|
||||
let { foo = false, bar = true } = $props();
|
||||
</script>
|
||||
|
||||
|
||||
<div></div>
|
||||
<span></span>
|
||||
<div><span></span></div>
|
||||
|
||||
<div class="foo"></div>
|
||||
<span class="foo"></span>
|
||||
<div><span class="foo"></span></div>
|
||||
|
||||
|
||||
<div class="foo" class:bar></div>
|
||||
<span class="foo" class:bar></span>
|
||||
<div><span class="foo" class:bar></span></div>
|
||||
|
||||
<div class="foo" class:foo></div>
|
||||
<span class="foo" class:foo></span>
|
||||
<div><span class="foo" class:foo></span></div>
|
||||
|
||||
<div class="foo" class:bar class:foo></div>
|
||||
<span class="foo" class:bar class:foo></span>
|
||||
<div><span class="foo" class:bar class:foo></span></div>
|
||||
|
||||
<div class="football" class:bar class:foo></div>
|
||||
<span class="football" class:bar class:foo></span>
|
||||
<div><span class="football" class:bar class:foo></span></div>
|
||||
|
||||
<div class="foo" class:bar class:foo class:not-foo={!foo}></div>
|
||||
<span class="foo" class:bar class:foo class:not-foo={!foo}></span>
|
||||
<div><span class="foo" class:bar class:foo class:not-foo={!foo}></span></div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
div > span {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue