mirror of https://github.com/sveltejs/svelte
Simon Holthausen
1 year ago
commit
418f4c2381
@ -0,0 +1,18 @@
|
||||
export default {
|
||||
html: `
|
||||
<div style="background-color: rgb(255, 0, 0);"></div>
|
||||
`,
|
||||
|
||||
test({ assert, target, window, component }) {
|
||||
const div = target.querySelector('div');
|
||||
const styles = window.getComputedStyle(div);
|
||||
assert.equal(styles.backgroundColor, 'rgb(255, 0, 0)');
|
||||
|
||||
{
|
||||
component.backgroundColor = 128;
|
||||
const div = target.querySelector('div');
|
||||
const styles = window.getComputedStyle(div);
|
||||
assert.equal(styles.backgroundColor, 'rgb(128, 0, 0)');
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
<script lang="ts">
|
||||
export let backgroundColor = 255;
|
||||
</script>
|
||||
|
||||
<div style:background-color="rgb({backgroundColor}, 0, 0)" {...$$restProps} />
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
html: `
|
||||
<h1>1</h1>
|
||||
<h1>2</h1>
|
||||
<h1>3</h1>
|
||||
<h1>5</h1>
|
||||
<h1>10</h1>
|
||||
<h1>20</h1>
|
||||
<h1>30</h1>
|
||||
<h1>6</h1>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
let [first, second, ...[third, ...[, fifth]]] = [1, 2, 3, 4, 5];
|
||||
let [one, two, ...[three, ...{ length }]] = [10, 20, 30, 40, 50, 60, 70, 80, 90];
|
||||
</script>
|
||||
|
||||
<h1>{first}</h1>
|
||||
<h1>{second}</h1>
|
||||
<h1>{third}</h1>
|
||||
<h1>{fifth}</h1>
|
||||
|
||||
<h1>{one}</h1>
|
||||
<h1>{two}</h1>
|
||||
<h1>{three}</h1>
|
||||
<h1>{length}</h1>
|
||||
|
||||
@ -0,0 +1,69 @@
|
||||
export default {
|
||||
props: {
|
||||
thePromise: new Promise(_ => {})
|
||||
},
|
||||
|
||||
html: `
|
||||
loading...
|
||||
`,
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
await (component.thePromise = Promise.resolve([1, 2, 3, 4, 5, 6, 7, 8]));
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>a: 1</p>
|
||||
<p>b: 2</p>
|
||||
<p>c: 5</p>
|
||||
<p>remaining length: 3</p>
|
||||
`
|
||||
);
|
||||
|
||||
await (component.thePromise = Promise.resolve([9, 10, 11, 12, 13, 14, 15]));
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>a: 9</p>
|
||||
<p>b: 10</p>
|
||||
<p>c: 13</p>
|
||||
<p>remaining length: 2</p>
|
||||
`
|
||||
);
|
||||
|
||||
try {
|
||||
await (component.thePromise = Promise.reject([16, 17, 18, 19, 20, 21, 22]));
|
||||
} catch (e) {
|
||||
// do nothing
|
||||
}
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>c: 16</p>
|
||||
<p>d: 17</p>
|
||||
<p>e: 18</p>
|
||||
<p>f: 19</p>
|
||||
<p>g: 22</p>
|
||||
`
|
||||
);
|
||||
|
||||
try {
|
||||
await (component.thePromise = Promise.reject([23, 24, 25, 26, 27, 28, 29, 30, 31]));
|
||||
} catch (e) {
|
||||
// do nothing
|
||||
}
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>c: 23</p>
|
||||
<p>d: 24</p>
|
||||
<p>e: 25</p>
|
||||
<p>f: 26</p>
|
||||
<p>g: 29</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
export let thePromise;
|
||||
</script>
|
||||
|
||||
{#await thePromise}
|
||||
loading...
|
||||
{:then [ a, b, ...[,, c, ...{ length } ]]}
|
||||
<p>a: {a}</p>
|
||||
<p>b: {b}</p>
|
||||
<p>c: {c}</p>
|
||||
<p>remaining length: {length}</p>
|
||||
{:catch [c, ...[d, e, f, ...[,,g]]]}
|
||||
<p>c: {c}</p>
|
||||
<p>d: {d}</p>
|
||||
<p>e: {e}</p>
|
||||
<p>f: {f}</p>
|
||||
<p>g: {g}</p>
|
||||
{/await}
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
html: '<div>12 120 70, 30+4=34</div>',
|
||||
async test({ component, target, assert }) {
|
||||
component.promise1 = Promise.resolve({width: 5, height: 6});
|
||||
component.promise2 = Promise.reject({width: 6, height: 7});
|
||||
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>30 300 110, 50+6=56</div>
|
||||
<div>42 420 130, 60+7=67</div>
|
||||
`);
|
||||
|
||||
component.constant = 20;
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>30 600 220, 100+6=106</div>
|
||||
<div>42 840 260, 120+7=127</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
export let promise1 = {width: 3, height: 4};
|
||||
export let promise2 = {width: 5, height: 7};
|
||||
export let constant = 10;
|
||||
|
||||
function calculate(width, height, constant) {
|
||||
return { area: width * height, volume: width * height * constant };
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await promise1 then { width, height }}
|
||||
{@const {area, volume} = calculate(width, height, constant)}
|
||||
{@const perimeter = (width + height) * constant}
|
||||
{@const [_width, ...[_height, ...[sum]]] = [width * constant, height, width * constant + height]}
|
||||
<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
|
||||
{/await}
|
||||
|
||||
{#await promise2 catch { width, height }}
|
||||
{@const {area, volume} = calculate(width, height, constant)}
|
||||
{@const perimeter = (width + height) * constant}
|
||||
{@const [_width, ...[_height, ...[sum]]] = [width * constant, height, width * constant + height]}
|
||||
<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
|
||||
{/await}
|
||||
@ -0,0 +1,30 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>12 120 70, 30+4=34</div>
|
||||
<div>35 350 120, 50+7=57</div>
|
||||
<div>48 480 140, 60+8=68</div>
|
||||
`,
|
||||
async test({ component, target, assert }) {
|
||||
component.constant = 20;
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>12 240 140, 60+4=64</div>
|
||||
<div>35 700 240, 100+7=107</div>
|
||||
<div>48 960 280, 120+8=128</div>
|
||||
`);
|
||||
|
||||
component.boxes = [
|
||||
{width: 3, height: 4},
|
||||
{width: 4, height: 5},
|
||||
{width: 5, height: 6},
|
||||
{width: 6, height: 7}
|
||||
];
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>12 240 140, 60+4=64</div>
|
||||
<div>20 400 180, 80+5=85</div>
|
||||
<div>30 600 220, 100+6=106</div>
|
||||
<div>42 840 260, 120+7=127</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
export let boxes = [
|
||||
{width: 3, height: 4},
|
||||
{width: 5, height: 7},
|
||||
{width: 6, height: 8},
|
||||
];
|
||||
export let constant = 10;
|
||||
|
||||
function calculate(width, height, constant) {
|
||||
return { area: width * height, volume: width * height * constant };
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each boxes as { width, height }}
|
||||
{@const {area, volume} = calculate(width, height, constant)}
|
||||
{@const perimeter = (width + height) * constant}
|
||||
{@const [_width, ...[_height, ...[sum]]] = [width * constant, height, width * constant + height]}
|
||||
<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
|
||||
{/each}
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
const THING = { a: 1, b: { c: 2, d: [3, 4, writable(5), 6, 7] }, e: [6], h: 8 };
|
||||
const default_g = 9;
|
||||
|
||||
export let { a, b: { c, d: [d_one, ...[, ...[d_three, ...{ length }]]], f }, e: [e_one], g = default_g } = THING;
|
||||
export const { a: A, b: { c: C } } = THING;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
a: {a},
|
||||
b: {typeof b},
|
||||
c: {c},
|
||||
d_one: {d_one},
|
||||
d_three: {$d_three},
|
||||
length: {length},
|
||||
f: {f},
|
||||
g: {g},
|
||||
e: {typeof e},
|
||||
e_one: {e_one},
|
||||
A: {A},
|
||||
C: {C}
|
||||
</div>
|
||||
<div>{JSON.stringify(THING)}</div>
|
||||
@ -0,0 +1,9 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>a: 1, b: undefined, c: 2, d_one: 3, d_three: 5, length: 2, f: undefined, g: 9, e: undefined, e_one: 6, A: 1, C: 2</div>
|
||||
<div>{"a":1,"b":{"c":2,"d":[3,4,{},6,7]},"e":[6],"h":8}</div>
|
||||
<br>
|
||||
<div>a: a, b: undefined, c: 2, d_one: d_one, d_three: 5, length: 7, f: f, g: g, e: undefined, e_one: 6, A: 1, C: 2</div>
|
||||
<div>{"a":1,"b":{"c":2,"d":[3,4,{},6,7]},"e":[6],"h":8}</div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import A from './A.svelte';
|
||||
</script>
|
||||
|
||||
<A />
|
||||
<br />
|
||||
<A a="a" d_one="d_one" list_one="list_one" f="f" list_two_b="list_two_b" g="g" A="A" C="C" length={7} />
|
||||
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
let default_b = 5;
|
||||
const LIST = [1, 2, 3, { a: 4 }, [5, writable(6), writable(7), 8]];
|
||||
export const [
|
||||
x,
|
||||
,
|
||||
...[, { a: list_two_a, b: list_two_b = default_b }, [, ...{ length: y }]]
|
||||
] = LIST;
|
||||
export let [
|
||||
l,
|
||||
m,
|
||||
,
|
||||
...[{ a: n, b: o = default_b }, [p, q, ...[r, ...{ length: s }]]]
|
||||
] = LIST;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
x: {x}, list_two_a: {list_two_a}, list_two_b: {list_two_b}, y: {y}, l: {l}, m: {m},
|
||||
n: {n}, o: {o}, p: {p}, q: {$q}, r: {$r}, s: {s}
|
||||
</div>
|
||||
<div>{JSON.stringify(LIST)}</div>
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: 1, m: 2, n: 4, o: 5, p: 5, q: 6, r: 7, s: 1</div>
|
||||
<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
|
||||
<br><div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: l, m: m, n: n, o: o, p: p, q: q, r: r, s: s</div>
|
||||
<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
|
||||
`,
|
||||
|
||||
async test({ component, assert, target }) {
|
||||
await component.update();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: 1, m: 2, n: 4, o: 5, p: 5, q: 6, r: 7, s: 1</div>
|
||||
<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
|
||||
<br><div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: LL, m: MM, n: NN, o: OO, p: PP, q: QQ, r: RR, s: SS</div>
|
||||
<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
<script>
|
||||
import A from "./A.svelte";
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
let x = "x",
|
||||
list_two_a = "list_two_a",
|
||||
list_two_b = "list_two_b",
|
||||
y = writable("y"),
|
||||
l = "l",
|
||||
m = "m",
|
||||
n = "n",
|
||||
o = "o",
|
||||
p = "p",
|
||||
q = writable("q"),
|
||||
r = writable("r"),
|
||||
s = "s";
|
||||
|
||||
export function update() {
|
||||
x = "XX";
|
||||
list_two_a = "LIST_TWO_A";
|
||||
list_two_b = "LIST_TWO_B";
|
||||
y = writable("YY");
|
||||
l = "LL";
|
||||
m = "MM";
|
||||
n = "NN";
|
||||
o = "OO";
|
||||
p = "PP";
|
||||
q = writable("QQ");
|
||||
r = writable("RR");
|
||||
s = "SS";
|
||||
}
|
||||
</script>
|
||||
|
||||
<A />
|
||||
<br />
|
||||
<A {x} {list_two_a} {list_two_b} {y} {l} {m} {n} {o} {p} {q} {r} {s} />
|
||||
@ -0,0 +1,31 @@
|
||||
export default {
|
||||
before_test() {
|
||||
Object.defineProperties(window.document, {
|
||||
fullscreenElement: {
|
||||
value: null,
|
||||
configurable: true
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// copied from window-binding
|
||||
// there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
|
||||
skip_if_ssr: true,
|
||||
|
||||
async test({ assert, target, window, component }) {
|
||||
const event = new window.Event('fullscreenchange');
|
||||
|
||||
const div = target.querySelector('div');
|
||||
|
||||
Object.defineProperties(window.document, {
|
||||
fullscreenElement: {
|
||||
value: div,
|
||||
configurable: true
|
||||
}
|
||||
});
|
||||
|
||||
window.document.dispatchEvent(event);
|
||||
|
||||
assert.equal(component.fullscreen, div);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let fullscreen;
|
||||
</script>
|
||||
|
||||
<svelte:document bind:fullscreenElement={fullscreen}/>
|
||||
|
||||
<div />
|
||||
@ -0,0 +1,24 @@
|
||||
export default {
|
||||
props: {
|
||||
array: [
|
||||
[1, 2, 3, 4, 5],
|
||||
[6, 7, 8],
|
||||
[9, 10, 11, 12],
|
||||
[13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
|
||||
]
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>First: 1, Second: 2, Third: 3, Elements remaining: 2</p>
|
||||
<p>First: 6, Second: 7, Third: 8, Elements remaining: 0</p>
|
||||
<p>First: 9, Second: 10, Third: 11, Elements remaining: 1</p>
|
||||
<p>First: 13, Second: 14, Third: 15, Elements remaining: 7</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.array = [[23, 24, 25, 26, 27, 28, 29]];
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<p>First: 23, Second: 24, Third: 25, Elements remaining: 4</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
export let array;
|
||||
</script>
|
||||
|
||||
{#each array as [first, second, ...[third, ...{ length }]]}
|
||||
<p>
|
||||
First: {first}, Second: {second}, Third: {third}, Elements remaining: {length}
|
||||
</p>
|
||||
{/each}
|
||||
@ -0,0 +1,11 @@
|
||||
export default {
|
||||
async test({ assert, target, window }) {
|
||||
const div = target.querySelector('div');
|
||||
const click = new window.MouseEvent('click');
|
||||
|
||||
assert.htmlEqual(target.innerHTML, '<div style="background: red;"></div>');
|
||||
await div.dispatchEvent(click);
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(target.innerHTML, '<div style=""></div>');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
let bg = "red";
|
||||
|
||||
const handle = () => {
|
||||
bg = undefined;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div style:background={bg} on:click={handle}></div>
|
||||
@ -1,8 +1,10 @@
|
||||
<script>
|
||||
export let width;
|
||||
export let height;
|
||||
export let devicePixelRatio;
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth={width} bind:innerHeight={height}/>
|
||||
<svelte:window bind:innerWidth={width} bind:innerHeight={height} bind:devicePixelRatio={devicePixelRatio}/>
|
||||
|
||||
<div>{width}x{height}</div>
|
||||
<div>{width}x{height}</div>
|
||||
<div>{devicePixelRatio}</div>
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
<!-- VALID -->
|
||||
<input type="text" />
|
||||
<input type="text" autocomplete="name" />
|
||||
<input type="text" autocomplete="off" />
|
||||
<input type="text" autocomplete="on" />
|
||||
<input type="text" autocomplete="billing family-name" />
|
||||
<input type="hidden" autocomplete="section-blue shipping street-address" />
|
||||
<input type="text" autocomplete="section-somewhere shipping work email" />
|
||||
<input type="text" autocomplete="section-somewhere shipping work email webauthn" />
|
||||
<input type="text" autocomplete="SECTION-SOMEWHERE SHIPPING WORK EMAIL WEBAUTHN" />
|
||||
<input type="TEXT" autocomplete="ON" />
|
||||
<input type="email" autocomplete="url" />
|
||||
<input type="text" autocomplete="section-blue shipping street-address" />
|
||||
<input type="hidden" autocomplete="off" />
|
||||
<input type="hidden" autocomplete="on" />
|
||||
<input type="text" autocomplete="" />
|
||||
|
||||
<!-- INVALID -->
|
||||
<input type="text" autocomplete />
|
||||
<input type="text" autocomplete="incorrect" />
|
||||
<input type="text" autocomplete="webauthn" />
|
||||
@ -0,0 +1,38 @@
|
||||
[
|
||||
{
|
||||
"code": "a11y-autocomplete-valid",
|
||||
"end": {
|
||||
"column": 31,
|
||||
"line": 19
|
||||
},
|
||||
"message": "A11y: The value 'true' is not supported by the attribute 'autocomplete' on element <input type=\"text\">",
|
||||
"start": {
|
||||
"column": 19,
|
||||
"line": 19
|
||||
}
|
||||
},
|
||||
{
|
||||
"code": "a11y-autocomplete-valid",
|
||||
"end": {
|
||||
"column": 43,
|
||||
"line": 20
|
||||
},
|
||||
"message": "A11y: The value 'incorrect' is not supported by the attribute 'autocomplete' on element <input type=\"text\">",
|
||||
"start": {
|
||||
"column": 19,
|
||||
"line": 20
|
||||
}
|
||||
},
|
||||
{
|
||||
"code": "a11y-autocomplete-valid",
|
||||
"end": {
|
||||
"column": 42,
|
||||
"line": 21
|
||||
},
|
||||
"message": "A11y: The value 'webauthn' is not supported by the attribute 'autocomplete' on element <input type=\"text\">",
|
||||
"start": {
|
||||
"column": 19,
|
||||
"line": 21
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -1,8 +1,8 @@
|
||||
[
|
||||
{
|
||||
"code": "invalid-rest-eachblock-binding",
|
||||
"message": "...rest operator will create a new object and binding propagation with original object will not work",
|
||||
"start": { "line": 8, "column": 24 },
|
||||
"message": "The rest operator (...) will create a new object and binding 'rest' with the original object will not work",
|
||||
"start": { "line": 8, "column": 27 },
|
||||
"end": { "line": 8, "column": 31 }
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
[
|
||||
{
|
||||
"code": "invalid-rest-eachblock-binding",
|
||||
"message": "...rest operator will create a new object and binding propagation with original object will not work",
|
||||
"start": { "line": 5, "column": 32 },
|
||||
"end": { "line": 5, "column": 39 }
|
||||
"message": "The rest operator (...) will create a new object and binding 'rest' with the original object will not work",
|
||||
"start": { "line": 5, "column": 35 },
|
||||
"end": { "line": 5, "column": 39 }
|
||||
}
|
||||
]
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
const a = [[1, 2, 3, 4, 5]];
|
||||
</script>
|
||||
|
||||
{#each a as [first, second, ...[third, ...{ length }]]}
|
||||
<p>{first}, {second}, {length}</p>
|
||||
<input bind:value={third} />
|
||||
<input bind:value={length} />
|
||||
{/each}
|
||||
@ -0,0 +1,26 @@
|
||||
[
|
||||
{
|
||||
"code": "invalid-rest-eachblock-binding",
|
||||
"end": {
|
||||
"column": 37,
|
||||
"line": 5
|
||||
},
|
||||
"message": "The rest operator (...) will create a new object and binding 'third' with the original object will not work",
|
||||
"start": {
|
||||
"column": 32,
|
||||
"line": 5
|
||||
}
|
||||
},
|
||||
{
|
||||
"code": "invalid-rest-eachblock-binding",
|
||||
"end": {
|
||||
"column": 50,
|
||||
"line": 5
|
||||
},
|
||||
"message": "The rest operator (...) will create a new object and binding 'length' with the original object will not work",
|
||||
"start": {
|
||||
"column": 44,
|
||||
"line": 5
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -1,8 +1,8 @@
|
||||
[
|
||||
{
|
||||
"code": "invalid-rest-eachblock-binding",
|
||||
"message": "...rest operator will create a new object and binding propagation with original object will not work",
|
||||
"start": { "line": 5, "column": 25 },
|
||||
"message": "The rest operator (...) will create a new object and binding 'rest' with the original object will not work",
|
||||
"start": { "line": 5, "column": 28 },
|
||||
"end": { "line": 5, "column": 32 }
|
||||
}
|
||||
]
|
||||
|
||||
Loading…
Reference in new issue