mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.1 KiB
72 lines
2.1 KiB
2 years ago
|
export default {
|
||
|
|
props: {
|
||
|
|
railColor1: 'black',
|
||
|
|
trackColor1: 'red',
|
||
|
|
railColor2: 'green',
|
||
|
|
trackColor2: 'blue',
|
||
|
|
nestRailColor1: 'white',
|
||
|
|
nestTrackColor1: 'gray',
|
||
|
|
nestRailColor2: 'aqua',
|
||
|
|
nestTrackColor2: 'pink'
|
||
|
|
},
|
||
|
|
html: `
|
||
|
|
<div style="display: contents; --rail-color:black; --track-color:red;">
|
||
|
|
<div id="slider-1">
|
||
|
|
<p class="svelte-17ay6rc">Slider</p>
|
||
|
|
<span class="svelte-17ay6rc">Track</span>
|
||
|
|
</div>
|
||
|
|
<div style="display: contents; --rail-color:white; --track-color:gray;">
|
||
|
|
<div id="nest-slider-1">
|
||
|
|
<p class="svelte-17ay6rc">Slider</p>
|
||
|
|
<span class="svelte-17ay6rc">Track</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="display: contents; --rail-color:green; --track-color:blue;">
|
||
|
|
<div id="slider-2">
|
||
|
|
<p class="svelte-17ay6rc">Slider</p>
|
||
|
|
<span class="svelte-17ay6rc">Track</span>
|
||
|
|
</div>
|
||
|
|
<div style="display: contents; --rail-color:aqua; --track-color:pink;">
|
||
|
|
<div id="nest-slider-2">
|
||
|
|
<p class="svelte-17ay6rc">Slider</p>
|
||
|
|
<span class="svelte-17ay6rc">Track</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
test({ component, assert, target }) {
|
||
|
|
component.railColor1 = 'yellow';
|
||
|
|
component.trackColor2 = 'orange';
|
||
|
|
component.nestRailColor1 = 'lime';
|
||
|
|
component.nestTrackColor2 = 'gold';
|
||
|
|
|
||
|
|
assert.htmlEqual(target.innerHTML, `
|
||
|
|
<div style="display: contents; --rail-color:yellow; --track-color:red;">
|
||
|
|
<div id="slider-1">
|
||
|
|
<p class="svelte-17ay6rc">Slider</p>
|
||
|
|
<span class="svelte-17ay6rc">Track</span>
|
||
|
|
</div>
|
||
|
|
<div style="display: contents; --rail-color:lime; --track-color:gray;">
|
||
|
|
<div id="nest-slider-1">
|
||
|
|
<p class="svelte-17ay6rc">Slider</p>
|
||
|
|
<span class="svelte-17ay6rc">Track</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="display: contents; --rail-color:green; --track-color:orange;">
|
||
|
|
<div id="slider-2">
|
||
|
|
<p class="svelte-17ay6rc">Slider</p>
|
||
|
|
<span class="svelte-17ay6rc">Track</span>
|
||
|
|
</div>
|
||
|
|
<div style="display: contents; --rail-color:aqua; --track-color:gold;">
|
||
|
|
<div id="nest-slider-2">
|
||
|
|
<p class="svelte-17ay6rc">Slider</p>
|
||
|
|
<span class="svelte-17ay6rc">Track</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`);
|
||
|
|
}
|
||
|
|
};
|