Skip to content

Commit 7700390

Browse files
adigubaadiguba
committed
test (to fix)
1 parent 1cd9011 commit 7700390

File tree

4 files changed

+172
-0
lines changed

4 files changed

+172
-0
lines changed

‎packages/svelte/tests/runtime-runes/samples/cssx/_config.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { flushSync } from 'svelte';
2+
import { test } from '../../test';
3+
4+
export default test({
5+
html: `
6+
<div style="font-size:2em;color:red;--my-var:0">style1</div>
7+
<div style="font-size:2em;color:red;--MY-VAR:0">style2</div>
8+
<div style="font-size:2em;color:red;--MyVar:0">style3</div>
9+
<div style="font-size:2em;color:red;--my-var:0">style4</div>
10+
<div style="font-weight: bold;border-width: 3px; border-color: blue;COLOR: red">style5</div>
11+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">style6</div>
12+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">spread</div>
13+
<div style="--bg-color:red;opacity:0.5;font-size:1em"></div>
14+
15+
<div style="font-size:2em;color:red;--my-var:0">child1:style1</div>
16+
<div style="font-size:2em;color:red;--MY-VAR:0">child1:style2</div>
17+
<div style="font-size:2em;color:red;--MyVar:0">child1:style3</div>
18+
<div style="font-size:2em;color:red;--my-var:0">child1:style4</div>
19+
<div style="font-weight: bold;border-width: 3px; border-color: blue;COLOR: red">child1:style5</div>
20+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">child1:style6</div>
21+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">child1:spread</div>
22+
<div style="--bg-color:red;opacity:0.5;font-size:1em">child1:</div>
23+
24+
<div style="font-size:2em;color:red;--my-var:0">child2:style1</div>
25+
<div style="font-size:2em;color:red;--MY-VAR:0">child2:style2</div>
26+
<div style="font-size:2em;color:red;--MyVar:0">child2:style3</div>
27+
<div style="font-size:2em;color:red;--my-var:0">child2:style4</div>
28+
<div style="font-weight: bold;border-width: 3px; border-color: blue;COLOR: red">child2:style5</div>
29+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">child2:style6</div>
30+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">child2:spread</div>
31+
<div style="--bg-color:red;opacity:0.5;font-size:1em">child2:</div>
32+
33+
<applied-to-custom-element style="font-size:2em;color:red;--my-var:0">style1</applied-to-custom-element>
34+
<applied-to-custom-element style="font-size:2em;color:red;--MY-VAR:0">style2</applied-to-custom-element>
35+
<applied-to-custom-element style="font-size:2em;color:red;--MyVar:0">style3</applied-to-custom-element>
36+
<applied-to-custom-element style="font-size:2em;color:red;--my-var:0">style4</applied-to-custom-element>
37+
<applied-to-custom-element style="font-weight: bold;border-width: 3px; border-color: blue;COLOR: red">style5</applied-to-custom-element>
38+
<applied-to-custom-element style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">style6</applied-to-custom-element>
39+
<applied-to-custom-element style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">spread</applied-to-custom-element>
40+
<applied-to-custom-element style="--bg-color:red;opacity:0.5;font-size:1em"></applied-to-custom-element>
41+
42+
<button>update</button>
43+
`,
44+
test({ assert, target }) {
45+
const button = target.querySelector('button');
46+
47+
button?.click();
48+
flushSync();
49+
50+
assert.htmlEqual(
51+
target.innerHTML,
52+
`
53+
<div style="font-size:2em;color:red;--my-var:0">style1</div>
54+
<div style="font-size:2em;color:red;--MY-VAR:0">style2</div>
55+
<div style="font-size:2em;color:red;--MyVar:0">style3</div>
56+
<div style="font-size:2em;color:red;--my-var:0">style4</div>
57+
<div style="font-weight: bold;border-width: 3px; border-color: blue;COLOR: red">style5</div>
58+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">style6</div>
59+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">spread</div>
60+
<div style="--bg-color:blue;display:inline-block;opacity:0.75"></div>
61+
62+
<div style="font-size:2em;color:red;--my-var:0">child1:style1</div>
63+
<div style="font-size:2em;color:red;--MY-VAR:0">child1:style2</div>
64+
<div style="font-size:2em;color:red;--MyVar:0">child1:style3</div>
65+
<div style="font-size:2em;color:red;--my-var:0">child1:style4</div>
66+
<div style="font-weight: bold;border-width: 3px; border-color: blue;COLOR: red">child1:style5</div>
67+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">child1:style6</div>
68+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">child1:spread</div>
69+
<div style="--bg-color:blue;display:inline-block;opacity:0.75">child1:</div>
70+
71+
<div style="font-size:2em;color:red;--my-var:0">child2:style1</div>
72+
<div style="font-size:2em;color:red;--MY-VAR:0">child2:style2</div>
73+
<div style="font-size:2em;color:red;--MyVar:0">child2:style3</div>
74+
<div style="font-size:2em;color:red;--my-var:0">child2:style4</div>
75+
<div style="font-weight: bold;border-width: 3px; border-color: blue;COLOR: red">child2:style5</div>
76+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">child2:style6</div>
77+
<div style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">child2:spread</div>
78+
<div style="--bg-color:blue;display:inline-block;opacity:0.75">child2:</div>
79+
80+
<applied-to-custom-element style="font-size:2em;color:red;--my-var:0">style1</applied-to-custom-element>
81+
<applied-to-custom-element style="font-size:2em;color:red;--MY-VAR:0">style2</applied-to-custom-element>
82+
<applied-to-custom-element style="font-size:2em;color:red;--MyVar:0">style3</applied-to-custom-element>
83+
<applied-to-custom-element style="font-size:2em;color:red;--my-var:0">style4</applied-to-custom-element>
84+
<applied-to-custom-element style="font-weight: bold;border-width: 3px; border-color: blue;COLOR: red">style5</applied-to-custom-element>
85+
<applied-to-custom-element style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">style6</applied-to-custom-element>
86+
<applied-to-custom-element style="font-size:2em;color:red;--my-var:0;font-weight: bold;border-width: 3px; border-color: blue;COLOR: red;opacity: 0">spread</applied-to-custom-element>
87+
<applied-to-custom-element style="--bg-color:blue;display:inline-block;opacity:0.75"></applied-to-custom-element>
88+
89+
<button>update</button>
90+
`
91+
);
92+
}
93+
});

‎packages/svelte/tests/runtime-runes/samples/cssx/child1.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script>
2+
let { children, style } = $props();
3+
</script>
4+
5+
<div {style}>child1:{@render children?.()}</div>

‎packages/svelte/tests/runtime-runes/samples/cssx/child2.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script>
2+
let { children, ...rest } = $props();
3+
</script>
4+
5+
<div {...rest}>child2:{@render children?.()}</div>

‎packages/svelte/tests/runtime-runes/samples/cssx/main.svelte

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script>
2+
import Child1 from "./child1.svelte";
3+
import Child2 from "./child2.svelte";
4+
5+
// font-size:2em; color:red; --my-var: 0
6+
let style1 = {'font-size': '2em', 'background': null, 'color': 'red', '--my-var': 0};
7+
// font-size:2em; color:red; --MY-VAR: 0
8+
let style2 = {'FONT-SIZE': '2em', 'COLOR': 'red', '--MY-VAR': 0};
9+
// font-size:2em; color:red; --MyVar: 0
10+
let style3 = {fontSize: '2em', Color: 'red', '--MyVar': 0};
11+
// font-size:2em; color:red; --my-var: 0
12+
let style4 = {font_size: '2em', color: 'red', __my_var: 0};
13+
// font-weight: bold; border-width: 3px; border-color: blue;COLOR: red
14+
let style5 = ['', 'font-weight: bold', null, 'border-width: 3px; border-color: blue', undefined, 'COLOR: red'];
15+
// font-size:2em; color:red; --my-var: 0; font-weight: bold; border-width: 3px; border-color: blue; COLOR: red; opacity: 0
16+
let style6 = [ style4, [style5, 'opacity: 0']];
17+
// font-size:2em; color:red; --my-var: 0; font-weight: bold; border-width: 3px; border-color: blue; COLOR: red; opacity: 0
18+
let spread = {style: style6};
19+
20+
let __bg_color = $state('red');
21+
let display = $state();
22+
let opacity = $state(0.5);
23+
let font_size = $state('1em');
24+
</script>
25+
26+
<div style={style1}>style1</div>
27+
<div style={style2}>style2</div>
28+
<div style={style3}>style3</div>
29+
<div style={style4}>style4</div>
30+
<div style={style5}>style5</div>
31+
<div style={style6}>style6</div>
32+
<div {...spread}>spread</div>
33+
<div style={{__bg_color,display,opacity,font_size}}></div>
34+
35+
<Child1 style={style1}>style1</Child1>
36+
<Child1 style={style2}>style2</Child1>
37+
<Child1 style={style3}>style3</Child1>
38+
<Child1 style={style4}>style4</Child1>
39+
<Child1 style={style5}>style5</Child1>
40+
<Child1 style={style6}>style6</Child1>
41+
<Child1 {...spread}>spread</Child1>
42+
<Child1 style={{__bg_color,display,opacity,font_size}}></Child1>
43+
44+
<Child2 style={style1}>style1</Child2>
45+
<Child2 style={style2}>style2</Child2>
46+
<Child2 style={style3}>style3</Child2>
47+
<Child2 style={style4}>style4</Child2>
48+
<Child2 style={style5}>style5</Child2>
49+
<Child2 style={style6}>style6</Child2>
50+
<Child2 {...spread}>spread</Child2>
51+
<Child2 style={{__bg_color,display,opacity,font_size}}></Child2>
52+
53+
<applied-to-custom-element style={style1}>style1</applied-to-custom-element>
54+
<applied-to-custom-element style={style2}>style2</applied-to-custom-element>
55+
<applied-to-custom-element style={style3}>style3</applied-to-custom-element>
56+
<applied-to-custom-element style={style4}>style4</applied-to-custom-element>
57+
<applied-to-custom-element style={style5}>style5</applied-to-custom-element>
58+
<applied-to-custom-element style={style6}>style6</applied-to-custom-element>
59+
<applied-to-custom-element {...spread}>spread</applied-to-custom-element>
60+
<applied-to-custom-element style={{__bg_color,display,opacity,font_size}}></applied-to-custom-element>
61+
62+
<button onclick={() => {
63+
__bg_color = 'blue';
64+
display = 'inline-block';
65+
opacity = 0.75;
66+
font_size = null;
67+
}}>update</button>
68+
69+

0 commit comments

Comments
 (0)