mirror of https://github.com/sveltejs/svelte
Conduitry
5 years ago
commit
aa616cba9b
|
After Width: | Height: | Size: 185 KiB |
@ -1,2 +1,2 @@
|
|||||||
<div><video class="svelte-xyz" autoplay></video>
|
<div><video class="svelte-xyz" autoplay muted></video>
|
||||||
<video></video></div>
|
<video muted></video></div>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<div>
|
<div>
|
||||||
<video autoplay></video>
|
<video autoplay muted></video>
|
||||||
<video></video>
|
<video muted></video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
[autoplay] {
|
[autoplay] {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"code": "invalid-closing-tag",
|
||||||
|
"message": "</p> attempted to close an element that was not open",
|
||||||
|
"pos": 38,
|
||||||
|
"start": {
|
||||||
|
"character": 38,
|
||||||
|
"column": 0,
|
||||||
|
"line": 5
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<pre>pre tag</pre>
|
||||||
|
</div>
|
||||||
|
</p>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"code": "invalid-closing-tag",
|
||||||
|
"message": "</p> attempted to close <p> that was already automatically closed by <pre>",
|
||||||
|
"pos": 24,
|
||||||
|
"start": {
|
||||||
|
"character": 24,
|
||||||
|
"column": 0,
|
||||||
|
"line": 3
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<p>
|
||||||
|
<pre>pre tag</pre>
|
||||||
|
</p>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p></p>
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p></p>
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p></p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const inputs = target.querySelectorAll('input');
|
||||||
|
assert.equal(inputs[0].checked, false);
|
||||||
|
assert.equal(inputs[1].checked, false);
|
||||||
|
assert.equal(inputs[2].checked, false);
|
||||||
|
|
||||||
|
assert.equal(inputs[3].checked, false);
|
||||||
|
assert.equal(inputs[4].checked, false);
|
||||||
|
assert.equal(inputs[5].checked, false);
|
||||||
|
|
||||||
|
assert.equal(inputs[6].checked, false);
|
||||||
|
assert.equal(inputs[7].checked, false);
|
||||||
|
assert.equal(inputs[8].checked, false);
|
||||||
|
|
||||||
|
const event = new window.Event('change');
|
||||||
|
|
||||||
|
inputs[2].checked = true;
|
||||||
|
await inputs[2].dispatchEvent(event);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p>z</p>
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p></p>
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p></p>
|
||||||
|
`);
|
||||||
|
|
||||||
|
inputs[4].checked = true;
|
||||||
|
await inputs[4].dispatchEvent(event);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p>z</p>
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p>y</p>
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p></p>
|
||||||
|
`);
|
||||||
|
|
||||||
|
inputs[5].checked = true;
|
||||||
|
await inputs[5].dispatchEvent(event);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p>z</p>
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p>y, z</p>
|
||||||
|
<label><input type="checkbox" value="x"> x</label>
|
||||||
|
<label><input type="checkbox" value="y"> y</label>
|
||||||
|
<label><input type="checkbox" value="z"> z</label>
|
||||||
|
<p></p>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<script>
|
||||||
|
const values = ['x', 'y', 'z'];
|
||||||
|
const list = {
|
||||||
|
a: [],
|
||||||
|
b: [],
|
||||||
|
c: [],
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each Object.keys(list) as key}
|
||||||
|
{#each values as value}
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type='checkbox'
|
||||||
|
bind:group={list[key]}
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
{value}
|
||||||
|
</label>
|
||||||
|
{/each}
|
||||||
|
<p>{list[key].join(', ')}</p>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
export let value = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value />
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
<div></div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
let count = 0;
|
||||||
|
component.callback = () => {
|
||||||
|
count++;
|
||||||
|
};
|
||||||
|
|
||||||
|
const [input1, input2] = target.querySelectorAll("input");
|
||||||
|
|
||||||
|
input1.value = "1";
|
||||||
|
await input1.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
<div>1</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
assert.equal(input1.value, "1");
|
||||||
|
assert.equal(input2.value, "1");
|
||||||
|
assert.equal(count, 1);
|
||||||
|
|
||||||
|
input2.value = "123";
|
||||||
|
await input2.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
<div>123</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
assert.equal(input1.value, "123");
|
||||||
|
assert.equal(input2.value, "123");
|
||||||
|
assert.equal(count, 2);
|
||||||
|
|
||||||
|
input1.value = "456";
|
||||||
|
await input1.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
<div>456</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
assert.equal(input1.value, "456");
|
||||||
|
assert.equal(input2.value, "456");
|
||||||
|
assert.equal(count, 3);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import Input from './Input.svelte';
|
||||||
|
|
||||||
|
let value = writable({ value: '' });
|
||||||
|
|
||||||
|
export let callback = () => {};
|
||||||
|
|
||||||
|
value.subscribe(() => {
|
||||||
|
callback();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={$value.value} />
|
||||||
|
|
||||||
|
<Input bind:value={$value.value}/>
|
||||||
|
|
||||||
|
<div>{$value.value}</div>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
export let id;
|
||||||
|
export let callback;
|
||||||
|
|
||||||
|
$: $$props, callback(id);
|
||||||
|
</script>
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
let callbacks = [];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
callback: (value) => callbacks.push(value),
|
||||||
|
val1: "1",
|
||||||
|
val2: "2",
|
||||||
|
},
|
||||||
|
|
||||||
|
before_test() {
|
||||||
|
callbacks = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
async test({ assert, component, target }) {
|
||||||
|
assert.equal(callbacks.length, 2);
|
||||||
|
assert.equal(JSON.stringify(callbacks), '["1","2"]');
|
||||||
|
|
||||||
|
component.val1 = "3";
|
||||||
|
assert.equal(callbacks.length, 3);
|
||||||
|
assert.equal(JSON.stringify(callbacks), '["1","2","1"]');
|
||||||
|
|
||||||
|
component.val1 = "4";
|
||||||
|
assert.equal(callbacks.length, 4);
|
||||||
|
assert.equal(JSON.stringify(callbacks), '["1","2","1","1"]');
|
||||||
|
|
||||||
|
component.val2 = "5";
|
||||||
|
assert.equal(callbacks.length, 5);
|
||||||
|
assert.equal(JSON.stringify(callbacks), '["1","2","1","1","2"]');
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<script>
|
||||||
|
import Comp from './Comp.svelte';
|
||||||
|
export let callback;
|
||||||
|
export let val1, val2;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Comp id="1" {callback} value={val1} />
|
||||||
|
<Comp id="2" {callback} value={val2} />
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<h1>Hello world!</h1>
|
||||||
|
`,
|
||||||
|
};
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
$: user = {};
|
||||||
|
$: user.name = 'world';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>Hello {user.name}!</h1>
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
things: ['a', 'b', 'c']
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, component, target, window, raf }) {
|
||||||
|
component.things = [];
|
||||||
|
let div = target.querySelector('div');
|
||||||
|
assert.equal(div.foo, 0);
|
||||||
|
|
||||||
|
raf.tick(200);
|
||||||
|
assert.equal(div.foo, 0.5);
|
||||||
|
|
||||||
|
raf.tick(300);
|
||||||
|
assert.equal(div.foo, 0.75);
|
||||||
|
|
||||||
|
raf.tick(400);
|
||||||
|
assert.equal(div.foo, 1);
|
||||||
|
|
||||||
|
raf.tick(600);
|
||||||
|
component.things = ['a', 'b', 'c'];
|
||||||
|
|
||||||
|
raf.tick(700);
|
||||||
|
assert.equal(div.foo, 1);
|
||||||
|
assert.equal(div.bar, 0.75);
|
||||||
|
|
||||||
|
raf.tick(800);
|
||||||
|
assert.equal(div.foo, 1);
|
||||||
|
assert.equal(div.bar, 0.5);
|
||||||
|
|
||||||
|
raf.tick(900);
|
||||||
|
assert.equal(div.foo, 1);
|
||||||
|
assert.equal(div.bar, 0.25);
|
||||||
|
|
||||||
|
// test outro before intro complete
|
||||||
|
raf.tick(1000);
|
||||||
|
component.things = [];
|
||||||
|
div = target.querySelector('div');
|
||||||
|
|
||||||
|
raf.tick(1200);
|
||||||
|
assert.equal(div.foo, 0.5);
|
||||||
|
|
||||||
|
component.things = ['a', 'b', 'c'];
|
||||||
|
raf.tick(1300);
|
||||||
|
assert.equal(div.foo, 0.75);
|
||||||
|
assert.equal(div.bar, 0.75);
|
||||||
|
|
||||||
|
raf.tick(1400);
|
||||||
|
assert.equal(div.foo, 1);
|
||||||
|
assert.equal(div.bar, 0.5);
|
||||||
|
|
||||||
|
raf.tick(2000);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
<script>
|
||||||
|
export let things;
|
||||||
|
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 400,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function bar(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 400,
|
||||||
|
tick: t => {
|
||||||
|
node.bar = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each things as thing}
|
||||||
|
<p>{thing}</p>
|
||||||
|
{:else}
|
||||||
|
<div in:foo out:bar>else</div>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
things: ['a', 'b', 'c']
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, component, target, window, raf }) {
|
||||||
|
component.things = [];
|
||||||
|
const div = target.querySelector('div');
|
||||||
|
assert.equal(div.foo, 0);
|
||||||
|
|
||||||
|
raf.tick(200);
|
||||||
|
assert.equal(div.foo, 0.5);
|
||||||
|
|
||||||
|
raf.tick(300);
|
||||||
|
assert.equal(div.foo, 0.75);
|
||||||
|
|
||||||
|
raf.tick(400);
|
||||||
|
assert.equal(div.foo, 1);
|
||||||
|
|
||||||
|
raf.tick(500);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
export let things;
|
||||||
|
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 400,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each things as thing}
|
||||||
|
<p>{thing}</p>
|
||||||
|
{:else}
|
||||||
|
<div in:foo>else</div>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
things: []
|
||||||
|
},
|
||||||
|
test({ assert, component, target, window, raf }) {
|
||||||
|
const div = target.querySelector('div');
|
||||||
|
component.things = ['a', 'b', 'c'];
|
||||||
|
|
||||||
|
raf.tick(200);
|
||||||
|
assert.equal(div.foo, 0.5);
|
||||||
|
|
||||||
|
raf.tick(300);
|
||||||
|
assert.equal(div.foo, 0.25);
|
||||||
|
|
||||||
|
raf.tick(400);
|
||||||
|
assert.equal(div.foo, 0);
|
||||||
|
|
||||||
|
raf.tick(500);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
export let things;
|
||||||
|
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 400,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each things as thing}
|
||||||
|
<p>{thing}</p>
|
||||||
|
{:else}
|
||||||
|
<div out:foo>else</div>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<label>A</label>
|
||||||
|
<label for="id">B</label>
|
||||||
|
|
||||||
|
<label>C <input type="text" /></label>
|
||||||
|
<label>D <button>D</button></label>
|
||||||
|
<label>E <span></span></label>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "a11y-label-has-associated-control",
|
||||||
|
"end": {
|
||||||
|
"character": 16,
|
||||||
|
"column": 16,
|
||||||
|
"line": 1
|
||||||
|
},
|
||||||
|
"message": "A11y: A form label must be associated with a control.",
|
||||||
|
"pos": 0,
|
||||||
|
"start": {
|
||||||
|
"character": 0,
|
||||||
|
"column": 0,
|
||||||
|
"line": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "a11y-label-has-associated-control",
|
||||||
|
"end": {
|
||||||
|
"character": 149,
|
||||||
|
"column": 30,
|
||||||
|
"line": 6
|
||||||
|
},
|
||||||
|
"message": "A11y: A form label must be associated with a control.",
|
||||||
|
"pos": 119,
|
||||||
|
"start": {
|
||||||
|
"character": 119,
|
||||||
|
"column": 0,
|
||||||
|
"line": 6
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<video><track kind="captions"/></video>
|
||||||
|
<video></video>
|
||||||
|
<video><track /></video>
|
||||||
|
<audio muted></audio>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "a11y-media-has-caption",
|
||||||
|
"end": {
|
||||||
|
"character": 55,
|
||||||
|
"column": 15,
|
||||||
|
"line": 2
|
||||||
|
},
|
||||||
|
"message": "A11y: Media elements must have a <track kind=\"captions\">",
|
||||||
|
"pos": 40,
|
||||||
|
"start": {
|
||||||
|
"character": 40,
|
||||||
|
"column": 0,
|
||||||
|
"line": 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "a11y-media-has-caption",
|
||||||
|
"end": {
|
||||||
|
"character": 80,
|
||||||
|
"column": 24,
|
||||||
|
"line": 3
|
||||||
|
},
|
||||||
|
"message": "A11y: Media elements must have a <track kind=\"captions\">",
|
||||||
|
"pos": 56,
|
||||||
|
"start": {
|
||||||
|
"character": 56,
|
||||||
|
"column": 0,
|
||||||
|
"line": 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
Loading…
Reference in new issue