mirror of https://github.com/sveltejs/svelte
pull/8136/head
Yuichiro Yamashita
4 years ago
commit
5522a357b0
@ -1,81 +1,63 @@
|
|||||||
<script>
|
<script>
|
||||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
export let showModal; // boolean
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
let dialog; // HTMLDialogElement
|
||||||
const close = () => dispatch('close');
|
|
||||||
|
|
||||||
let modal;
|
$: if (dialog && showModal) dialog.showModal();
|
||||||
|
|
||||||
const handle_keydown = e => {
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.key === 'Tab') {
|
|
||||||
// trap focus
|
|
||||||
const nodes = modal.querySelectorAll('*');
|
|
||||||
const tabbable = Array.from(nodes).filter(n => n.tabIndex >= 0);
|
|
||||||
|
|
||||||
let index = tabbable.indexOf(document.activeElement);
|
|
||||||
if (index === -1 && e.shiftKey) index = 0;
|
|
||||||
|
|
||||||
index += tabbable.length + (e.shiftKey ? -1 : 1);
|
|
||||||
index %= tabbable.length;
|
|
||||||
|
|
||||||
tabbable[index].focus();
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
|
||||||
|
|
||||||
if (previously_focused) {
|
|
||||||
onDestroy(() => {
|
|
||||||
previously_focused.focus();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window on:keydown={handle_keydown}/>
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
|
<dialog
|
||||||
<div class="modal-background" on:click={close}></div>
|
bind:this={dialog}
|
||||||
|
on:close={() => (showModal = false)}
|
||||||
<div class="modal" role="dialog" aria-modal="true" bind:this={modal}>
|
on:click|self={() => dialog.close()}
|
||||||
<slot name="header"></slot>
|
>
|
||||||
<hr>
|
<div on:click|stopPropagation>
|
||||||
<slot></slot>
|
<slot name="header" />
|
||||||
<hr>
|
<hr />
|
||||||
|
<slot />
|
||||||
<!-- svelte-ignore a11y-autofocus -->
|
<hr />
|
||||||
<button autofocus on:click={close}>close modal</button>
|
<!-- svelte-ignore a11y-autofocus -->
|
||||||
</div>
|
<button autofocus on:click={() => dialog.close()}>close modal</button>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.modal-background {
|
dialog {
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
width: calc(100vw - 4em);
|
|
||||||
max-width: 32em;
|
max-width: 32em;
|
||||||
max-height: calc(100vh - 4em);
|
|
||||||
overflow: auto;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
padding: 1em;
|
|
||||||
border-radius: 0.2em;
|
border-radius: 0.2em;
|
||||||
background: white;
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
dialog::backdrop {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
dialog > div {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
dialog[open] {
|
||||||
|
animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
|
@keyframes zoom {
|
||||||
|
from {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dialog[open]::backdrop {
|
||||||
|
animation: fade 0.2s ease-out;
|
||||||
|
}
|
||||||
|
@keyframes fade {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"title": "Debugging"
|
|
||||||
}
|
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Special tags"
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [{
|
||||||
|
filename: 'SvelteComponent.svelte',
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector "img[alt=""]"',
|
||||||
|
start: {
|
||||||
|
character: 87,
|
||||||
|
column: 1,
|
||||||
|
line: 8
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
character: 98,
|
||||||
|
column: 12,
|
||||||
|
line: 8
|
||||||
|
},
|
||||||
|
pos: 87,
|
||||||
|
frame: `
|
||||||
|
6: }
|
||||||
|
7:
|
||||||
|
8: img[alt=""] {
|
||||||
|
^
|
||||||
|
9: border: 1px solid red;
|
||||||
|
10: }`
|
||||||
|
}]
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
img[alt].svelte-xyz{border:1px solid green}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<img alt="a foo" class="svelte-xyz" src="foo.jpg">
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<img src="foo.jpg" alt="a foo" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
img[alt] {
|
||||||
|
border: 1px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
img[alt=""] {
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
noop,
|
||||||
|
safe_not_equal,
|
||||||
|
set_data,
|
||||||
|
space,
|
||||||
|
text
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let h1;
|
||||||
|
let t3;
|
||||||
|
let t4;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
h1 = element("h1");
|
||||||
|
h1.textContent = `Hello ${name}!`;
|
||||||
|
t3 = space();
|
||||||
|
t4 = text(/*foo*/ ctx[0]);
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, h1, anchor);
|
||||||
|
insert(target, t3, anchor);
|
||||||
|
insert(target, t4, anchor);
|
||||||
|
},
|
||||||
|
p(ctx, [dirty]) {
|
||||||
|
if (dirty & /*foo*/ 1) set_data(t4, /*foo*/ ctx[0]);
|
||||||
|
},
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(h1);
|
||||||
|
if (detaching) detach(t3);
|
||||||
|
if (detaching) detach(t4);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let name = 'world';
|
||||||
|
|
||||||
|
function instance($$self) {
|
||||||
|
let foo;
|
||||||
|
$: foo = name + name;
|
||||||
|
return [foo];
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let name = 'world';
|
||||||
|
$: foo = name + name;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>Hello {name}!</h1>
|
||||||
|
{foo}
|
||||||
@ -0,0 +1,171 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
append,
|
||||||
|
assign,
|
||||||
|
bubble,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
empty,
|
||||||
|
get_spread_update,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
listen,
|
||||||
|
noop,
|
||||||
|
run_all,
|
||||||
|
safe_not_equal,
|
||||||
|
set_attributes,
|
||||||
|
set_custom_element_data_map
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_dynamic_element(ctx) {
|
||||||
|
let svelte_element1;
|
||||||
|
let svelte_element0;
|
||||||
|
let mounted;
|
||||||
|
let dispose;
|
||||||
|
let svelte_element0_levels = [{ class: "inner" }];
|
||||||
|
let svelte_element0_data = {};
|
||||||
|
|
||||||
|
for (let i = 0; i < svelte_element0_levels.length; i += 1) {
|
||||||
|
svelte_element0_data = assign(svelte_element0_data, svelte_element0_levels[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
let svelte_element1_levels = [{ class: "outer" }];
|
||||||
|
let svelte_element1_data = {};
|
||||||
|
|
||||||
|
for (let i = 0; i < svelte_element1_levels.length; i += 1) {
|
||||||
|
svelte_element1_data = assign(svelte_element1_data, svelte_element1_levels[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
svelte_element1 = element(a);
|
||||||
|
svelte_element0 = element(span);
|
||||||
|
|
||||||
|
if ((/-/).test(span)) {
|
||||||
|
set_custom_element_data_map(svelte_element0, svelte_element0_data);
|
||||||
|
} else {
|
||||||
|
set_attributes(svelte_element0, svelte_element0_data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((/-/).test(a)) {
|
||||||
|
set_custom_element_data_map(svelte_element1, svelte_element1_data);
|
||||||
|
} else {
|
||||||
|
set_attributes(svelte_element1, svelte_element1_data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, svelte_element1, anchor);
|
||||||
|
append(svelte_element1, svelte_element0);
|
||||||
|
|
||||||
|
if (!mounted) {
|
||||||
|
dispose = [
|
||||||
|
listen(svelte_element0, "keydown", /*keydown_handler_1*/ ctx[2]),
|
||||||
|
listen(svelte_element0, "keyup", /*keyup_handler_1*/ ctx[3]),
|
||||||
|
listen(svelte_element1, "keydown", /*keydown_handler*/ ctx[0]),
|
||||||
|
listen(svelte_element1, "keyup", /*keyup_handler*/ ctx[1])
|
||||||
|
];
|
||||||
|
|
||||||
|
mounted = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
p(ctx, dirty) {
|
||||||
|
svelte_element0_data = get_spread_update(svelte_element0_levels, [{ class: "inner" }]);
|
||||||
|
|
||||||
|
if ((/-/).test(span)) {
|
||||||
|
set_custom_element_data_map(svelte_element0, svelte_element0_data);
|
||||||
|
} else {
|
||||||
|
set_attributes(svelte_element0, svelte_element0_data);
|
||||||
|
}
|
||||||
|
|
||||||
|
svelte_element1_data = get_spread_update(svelte_element1_levels, [{ class: "outer" }]);
|
||||||
|
|
||||||
|
if ((/-/).test(a)) {
|
||||||
|
set_custom_element_data_map(svelte_element1, svelte_element1_data);
|
||||||
|
} else {
|
||||||
|
set_attributes(svelte_element1, svelte_element1_data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(svelte_element1);
|
||||||
|
mounted = false;
|
||||||
|
run_all(dispose);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let previous_tag = a;
|
||||||
|
let svelte_element_anchor;
|
||||||
|
let svelte_element = a && create_dynamic_element(ctx);
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
if (svelte_element) svelte_element.c();
|
||||||
|
svelte_element_anchor = empty();
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
if (svelte_element) svelte_element.m(target, anchor);
|
||||||
|
insert(target, svelte_element_anchor, anchor);
|
||||||
|
},
|
||||||
|
p(ctx, [dirty]) {
|
||||||
|
if (a) {
|
||||||
|
if (!previous_tag) {
|
||||||
|
svelte_element = create_dynamic_element(ctx);
|
||||||
|
svelte_element.c();
|
||||||
|
svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
|
||||||
|
} else if (safe_not_equal(previous_tag, a)) {
|
||||||
|
svelte_element.d(1);
|
||||||
|
svelte_element = create_dynamic_element(ctx);
|
||||||
|
svelte_element.c();
|
||||||
|
svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
|
||||||
|
} else {
|
||||||
|
svelte_element.p(ctx, dirty);
|
||||||
|
}
|
||||||
|
} else if (previous_tag) {
|
||||||
|
svelte_element.d(1);
|
||||||
|
svelte_element = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
previous_tag = a;
|
||||||
|
},
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(svelte_element_anchor);
|
||||||
|
if (svelte_element) svelte_element.d(detaching);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const a = 'a';
|
||||||
|
const span = 'span';
|
||||||
|
|
||||||
|
function instance($$self) {
|
||||||
|
function keydown_handler(event) {
|
||||||
|
bubble.call(this, $$self, event);
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyup_handler(event) {
|
||||||
|
bubble.call(this, $$self, event);
|
||||||
|
}
|
||||||
|
|
||||||
|
function keydown_handler_1(event) {
|
||||||
|
bubble.call(this, $$self, event);
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyup_handler_1(event) {
|
||||||
|
bubble.call(this, $$self, event);
|
||||||
|
}
|
||||||
|
|
||||||
|
return [keydown_handler, keyup_handler, keydown_handler_1, keyup_handler_1];
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<script>
|
||||||
|
const a = 'a';
|
||||||
|
const span = 'span';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:element this={a} class='outer' on:keydown on:keyup>
|
||||||
|
<svelte:element this={span} class='inner' on:keydown on:keyup />
|
||||||
|
</svelte:element>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
attr,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
noop,
|
||||||
|
safe_not_equal
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let a;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
a = element("a");
|
||||||
|
a.innerHTML = `<span class="inner"></span>`;
|
||||||
|
attr(a, "class", "outer");
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, a, anchor);
|
||||||
|
},
|
||||||
|
p: noop,
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(a);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, null, create_fragment, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<svelte:element this='a' class='outer'>
|
||||||
|
<svelte:element this='span' class='inner' />
|
||||||
|
</svelte:element>
|
||||||
@ -1,3 +1,7 @@
|
|||||||
<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
|
<script>
|
||||||
<svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element>
|
const tag = { svg: 'svg', path: 'path' };
|
||||||
</svelte:element>
|
</script>
|
||||||
|
|
||||||
|
<svelte:element this={tag.svg} xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<svelte:element this={tag.path} xmlns="http://www.w3.org/2000/svg" />
|
||||||
|
</svelte:element>
|
||||||
|
|||||||
@ -0,0 +1,27 @@
|
|||||||
|
<script>
|
||||||
|
import { afterUpdate, onDestroy } from "svelte";
|
||||||
|
|
||||||
|
export let id;
|
||||||
|
export let items;
|
||||||
|
|
||||||
|
let item = $items[id];
|
||||||
|
let selected = true;
|
||||||
|
|
||||||
|
function onClick() {
|
||||||
|
selected = !selected;
|
||||||
|
items.set({});
|
||||||
|
}
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
console.log("onDestroy");
|
||||||
|
});
|
||||||
|
|
||||||
|
afterUpdate(() => {
|
||||||
|
console.log("afterUpdate");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click="{onClick}">Click Me</button>
|
||||||
|
{#if selected}
|
||||||
|
<div>{item.id}</div>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>Click Me</button>
|
||||||
|
<div>1</div>
|
||||||
|
`,
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
const event = new window.MouseEvent('click');
|
||||||
|
const messages = [];
|
||||||
|
const log = console.log;
|
||||||
|
console.log = msg => messages.push(msg);
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
console.log = log;
|
||||||
|
assert.deepEqual(messages, ['afterUpdate', 'onDestroy']);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import Component from "./Component.svelte";
|
||||||
|
|
||||||
|
let items = writable({ 1: { id: 1 } });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each Object.values($items) as item (item.id)}
|
||||||
|
<Component id="{item.id}" {items} />
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
const realPromise = Promise.resolve(42);
|
||||||
|
|
||||||
|
const promise = () => {};
|
||||||
|
promise.then = realPromise.then.bind(realPromise);
|
||||||
|
promise.catch = realPromise.catch.bind(realPromise);
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
promise
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, target }) {
|
||||||
|
return promise.then(() => {
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>42</p>
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export let promise;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#await promise then value}
|
||||||
|
<p>{JSON.stringify(value)}</p>
|
||||||
|
{/await}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
export let value;
|
||||||
|
value = "bar";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
Child component "{value}"<br />
|
||||||
@ -1,7 +1,8 @@
|
|||||||
export default {
|
export default {
|
||||||
async test({ assert, target }) {
|
async test({ assert, target }) {
|
||||||
assert.htmlEqual(target.innerHTML, `
|
assert.htmlEqual(target.innerHTML, `
|
||||||
<p>0</p>
|
Parent component "bar"<br />
|
||||||
|
Child component "bar"<br />
|
||||||
`);
|
`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<script>
|
||||||
|
import Component from "./Component.svelte";
|
||||||
|
|
||||||
|
let value = "foo";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
Parent component "{value}"<br />
|
||||||
|
<Component bind:value />
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
// this test currently fails because the fix that made it pass broke other tests,
|
||||||
|
// see https://github.com/sveltejs/svelte/pull/8114 for more context.
|
||||||
|
export default {
|
||||||
|
skip: true,
|
||||||
|
async test({ assert, target }) {
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>0</p>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
const obj = {
|
||||||
|
x: 1,
|
||||||
|
y: 2,
|
||||||
|
z: 3
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
obj
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert }) {
|
||||||
|
assert.deepEqual(obj, { x: 1, y: 2, z: 3 });
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import Widget from './Widget.svelte';
|
||||||
|
|
||||||
|
export let obj;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Widget {...obj} x={2} />
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, target }) {
|
||||||
|
const p = target.querySelector('p');
|
||||||
|
|
||||||
|
assert.notEqual(p, undefined);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<div>
|
||||||
|
<svelte:element this="p" />
|
||||||
|
</div>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, target }) {
|
||||||
|
const p = target.querySelector('p');
|
||||||
|
|
||||||
|
assert.notEqual(p, undefined);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
const p = 'p';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<svelte:element this={p} />
|
||||||
|
</div>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<a href="/foo" aria-label="baz"></a>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
[]
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!-- VALID -->
|
||||||
|
<input />
|
||||||
|
<input tabindex="0" />
|
||||||
|
<input aria-activedescendant="some-id" />
|
||||||
|
<input aria-activedescendant="some-id" tabindex={0} />
|
||||||
|
<input aria-activedescendant="some-id" tabindex={1} />
|
||||||
|
<input aria-activedescendant="some-id" tabindex="0" />
|
||||||
|
<input aria-activedescendant="some-id" tabindex={-1} />
|
||||||
|
<input aria-activedescendant="some-id" tabindex="-1" />
|
||||||
|
|
||||||
|
<div />
|
||||||
|
<div aria-activedescendant="some-id" role="tablist" tabindex={-1} />
|
||||||
|
<div aria-activedescendant="some-id" role="tablist" tabindex="-1" />
|
||||||
|
|
||||||
|
<!-- INVALID -->
|
||||||
|
<div aria-activedescendant="some-id" />
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "a11y-aria-activedescendant-has-tabindex",
|
||||||
|
"end": {
|
||||||
|
"character": 568,
|
||||||
|
"column": 36,
|
||||||
|
"line": 16
|
||||||
|
},
|
||||||
|
"message": "A11y: Elements with attribute aria-activedescendant should have tabindex value",
|
||||||
|
"pos": 537,
|
||||||
|
"start": {
|
||||||
|
"character": 537,
|
||||||
|
"column": 5,
|
||||||
|
"line": 16
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue