simplify tests

pull/680/head
Rich Harris 7 years ago
parent 6f01d5f62f
commit 2c9fb31a9e

@ -47,7 +47,7 @@ describe("css", () => {
css: read(`test/css/samples/${dir}/expected.css`)
};
assert.equal(dom.css.trim(), expected.css.trim());
assert.equal(dom.css.replace(/svelte-\d+/g, 'svelte-xyz').trim(), expected.css.trim());
// verify that the right elements have scoping selectors
if (expected.html !== null) {
@ -62,7 +62,7 @@ describe("css", () => {
// dom
assert.equal(
normalizeHtml(window, html),
normalizeHtml(window, html).replace(/svelte-\d+/g, 'svelte-xyz'),
normalizeHtml(window, expected.html)
);
@ -70,7 +70,7 @@ describe("css", () => {
const component = eval(`(function () { ${ssr.code}; return SvelteComponent; }())`);
assert.equal(
normalizeHtml(window, component.render(config.data)),
normalizeHtml(window, component.render(config.data)).replace(/svelte-\d+/g, 'svelte-xyz'),
normalizeHtml(window, expected.html)
);
});

@ -1,4 +1,4 @@
div[svelte-2278551596], [svelte-2278551596] div {
div[svelte-xyz], [svelte-xyz] div {
color: red;
}

@ -4,10 +4,10 @@
100% { color: blue; }
}
.animated[svelte-90785995] {
.animated[svelte-xyz] {
animation: why 2s;
}
.also-animated[svelte-90785995] {
.also-animated[svelte-xyz] {
animation: not-defined-here 2s;
}

@ -6,7 +6,7 @@
color: red;
}
:global(div.foo) {
:global(div).foo {
color: blue;
}

@ -1,13 +1,13 @@
@keyframes svelte-1647166666-why {
@keyframes svelte-xyz-why {
0% { color: red; }
100% { color: blue; }
}
.animated[svelte-1647166666] {
animation: svelte-1647166666-why 2s;
.animated[svelte-xyz] {
animation: svelte-xyz-why 2s;
}
.also-animated[svelte-1647166666] {
.also-animated[svelte-xyz] {
animation: not-defined-here 2s;
}

@ -1,12 +1,12 @@
span[svelte-2146001331]::after {
span[svelte-xyz]::after {
content: 'i am a pseudo-element';
}
span[svelte-2146001331]:first-child {
span[svelte-xyz]:first-child {
color: red;
}
span[svelte-2146001331]:last-child::after {
span[svelte-xyz]:last-child::after {
color: blue;
}

@ -1,4 +1,4 @@
[svelte-2950902288] {
[svelte-xyz] {
color: red;
}

@ -1 +1 @@
<div svelte-2950902288=""></div>
<div svelte-xyz=""></div>

@ -1,12 +1,12 @@
div[svelte-781920915] {
div[svelte-xyz] {
color: red;
}
div.foo[svelte-781920915] {
div.foo[svelte-xyz] {
color: blue;
}
.foo[svelte-781920915] {
.foo[svelte-xyz] {
font-weight: bold;
}

@ -1,9 +1,9 @@
@keyframes svelte-2931302006-why {
@keyframes svelte-xyz-why {
0% { color: red; }
100% { color: blue; }
}
[svelte-2931302006].animated, [svelte-2931302006] .animated {
animation: svelte-2931302006-why 2s;
[svelte-xyz].animated, [svelte-xyz] .animated {
animation: svelte-xyz-why 2s;
}

@ -1,6 +1,6 @@
@media (min-width: 400px) {
[svelte-411199634].large-screen, [svelte-411199634] .large-screen {
[svelte-xyz].large-screen, [svelte-xyz] .large-screen {
display: block;
}
}

@ -1,4 +1,4 @@
[data-foo*='bar'][svelte-4224841812] {
[data-foo*='bar'][svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<div><p svelte-4224841812="" data-foo="foobarbaz">this is styled</p>
<div><p svelte-xyz="" data-foo="foobarbaz">this is styled</p>
<p data-foo="fooBARbaz">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo='bar' i][svelte-4191913977] {
[data-foo='bar' i][svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<div><p svelte-4191913977="" data-foo="BAR">this is styled</p>
<div><p svelte-xyz="" data-foo="BAR">this is styled</p>
<p data-foo="BAZ">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo='bar'][svelte-1339732946] {
[data-foo='bar'][svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<div><p svelte-1339732946="" data-foo="whatever">this is styled</p>
<div><p svelte-xyz="" data-foo="whatever">this is styled</p>
<p data-foo="baz">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo='bar'][svelte-2543760126] {
[data-foo='bar'][svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<div><p svelte-2543760126="" data-foo="bar">this is styled</p>
<div><p svelte-xyz="" data-foo="bar">this is styled</p>
<p data-foo="baz">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo|='bar'][svelte-1225676040] {
[data-foo|='bar'][svelte-xyz] {
color: red;
}

@ -1,3 +1,3 @@
<div><p svelte-1225676040="" data-foo="bar">this is styled</p>
<p svelte-1225676040="" data-foo="bar-baz">this is styled</p>
<div><p svelte-xyz="" data-foo="bar">this is styled</p>
<p svelte-xyz="" data-foo="bar-baz">this is styled</p>
<p data-foo="baz-bar">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo^='bar'][svelte-3106767242] {
[data-foo^='bar'][svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<div><p svelte-3106767242="" data-foo="barbaz">this is styled</p>
<div><p svelte-xyz="" data-foo="barbaz">this is styled</p>
<p data-foo="bazbar">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo$='bar'][svelte-207782622] {
[data-foo$='bar'][svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<div><p data-foo="barbaz">this is unstyled</p>
<p svelte-207782622="" data-foo="bazbar">this is styled</p></div>
<p svelte-xyz="" data-foo="bazbar">this is styled</p></div>

@ -1,4 +1,4 @@
[data-foo~='bar'][svelte-1786044856] {
[data-foo~='bar'][svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<div><p svelte-1786044856="" data-foo="qux bar">this is styled</p>
<div><p svelte-xyz="" data-foo="qux bar">this is styled</p>
<p data-foo="qux baz">this is unstyled</p></div>

@ -1,4 +1,4 @@
[autoplay][svelte-240005720] {
[autoplay][svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<div><video svelte-240005720 autoplay></video>
<div><video svelte-xyz autoplay></video>
<video></video></div>

@ -1,4 +1,4 @@
.foo[svelte-2643270928] {
.foo[svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<p svelte-2643270928="" class="whatever">this is styled</p>
<p svelte-xyz="" class="whatever">this is styled</p>
<p class="bar">this is unstyled</p>

@ -1,4 +1,4 @@
.foo[svelte-633959357] {
.foo[svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<p svelte-633959357="" class="foo">this is styled</p>
<p svelte-xyz="" class="foo">this is styled</p>
<p class="bar">this is unstyled</p>

@ -1,4 +1,4 @@
.foo[svelte-2122726581] .bar {
.foo[svelte-xyz] .bar {
color: red;
}

@ -1 +1 @@
<div svelte-2122726581="" class="foo"></div>
<div svelte-xyz="" class="foo"></div>

@ -1,4 +1,4 @@
div[svelte-3386191472] > p > em {
div[svelte-xyz] > p > em {
color: red;
}

@ -1 +1 @@
<div svelte-3386191472=""></div>
<div svelte-xyz=""></div>

@ -1,4 +1,4 @@
div[svelte-3744486606] > p {
div[svelte-xyz] > p {
color: red;
}

@ -1 +1 @@
<div svelte-3744486606=""></div>
<div svelte-xyz=""></div>

@ -1,4 +1,4 @@
div > section > p[svelte-3390623146] {
div > section > p[svelte-xyz] {
color: red;
}

@ -1 +1 @@
<p svelte-3390623146="">this may or may not be styled</p>
<p svelte-xyz="">this may or may not be styled</p>

@ -1,4 +1,4 @@
div > p[svelte-794545435] {
div > p[svelte-xyz] {
color: red;
}

@ -1 +1 @@
<p svelte-794545435="">this may or may not be styled</p>
<p svelte-xyz="">this may or may not be styled</p>

@ -1,4 +1,4 @@
div[svelte-2557028325] > p[svelte-2557028325] {
div[svelte-xyz] > p[svelte-xyz] {
color: red;
}

@ -1,4 +1,4 @@
#foo[svelte-2727164615] {
#foo[svelte-xyz] {
color: red;
}

@ -1,2 +1,2 @@
<div svelte-2727164615="" id="foo"></div>
<div svelte-xyz="" id="foo"></div>
<div id="bar"></div>

@ -1,4 +1,4 @@
div[svelte-4032668709] section p[svelte-4032668709] {
div[svelte-xyz] section p[svelte-xyz] {
color: red;
}

@ -1 +1 @@
<div svelte-4032668709=""><section><p svelte-4032668709="">this is styled</p></section></div>
<div svelte-xyz=""><section><p svelte-xyz="">this is styled</p></section></div>

@ -1,4 +1,4 @@
div[svelte-4240344240] p[svelte-4240344240] {
div[svelte-xyz] p[svelte-xyz] {
color: red;
}

@ -1 +1 @@
<div svelte-4240344240=""><section><p svelte-4240344240="">this is styled</p></section></div>
<div svelte-xyz=""><section><p svelte-xyz="">this is styled</p></section></div>

@ -1,4 +1,4 @@
p[svelte-1997768937] {
p[svelte-xyz] {
color: red;
}

@ -1 +1 @@
<div><p svelte-1997768937="">this is styled</p></div>
<div><p svelte-xyz="">this is styled</p></div>

@ -1,4 +1,4 @@
[svelte-2950902288], [svelte-2950902288] * {
[svelte-xyz], [svelte-xyz] * {
color: red;
}

@ -1,8 +1,8 @@
[{
"message": ":global(...) cannot be mixed with non-global selectors",
"message": ":global(...) must be the first element in a compound selector",
"loc": {
"line": 2,
"column": 1
"column": 5
},
"pos": 9
"pos": 13
}]

@ -1,5 +1,5 @@
<style>
:global(.foo).bar {
.foo:global(.bar) {
color: red;
}
</style>
Loading…
Cancel
Save