|
@@ -21,3 +21,25 @@ test('style attribute object bindings are merged with existing styles',
|
|
get('span').should(haveAttribute('style', 'display: block; color: red;'))
|
|
get('span').should(haveAttribute('style', 'display: block; color: red;'))
|
|
}
|
|
}
|
|
)
|
|
)
|
|
|
|
+
|
|
|
|
+test('CSS custom properties are set',
|
|
|
|
+ html`
|
|
|
|
+ <div x-data="{custom_color: '#f00'}">
|
|
|
|
+ <span style="color: var(--custom-prop)" x-bind:style="{ '--custom-prop': custom_color }">I should be red</span>
|
|
|
|
+ </div>
|
|
|
|
+ `,
|
|
|
|
+ ({ get }) => {
|
|
|
|
+ get('span').should(haveAttribute('style', 'color: var(--custom-prop); --custom-prop:#f00;'))
|
|
|
|
+ }
|
|
|
|
+)
|
|
|
|
+
|
|
|
|
+test('existing CSS custom properties are preserved',
|
|
|
|
+ html`
|
|
|
|
+ <div x-data="{link: 'var(--custom-prop-a)'}">
|
|
|
|
+ <span style="color: var(--custom-prop-b); --custom-prop-a: red" x-bind:style="{ '--custom-prop-b': link }">I should be red</span>
|
|
|
|
+ </div>
|
|
|
|
+ `,
|
|
|
|
+ ({ get }) => {
|
|
|
|
+ get('span').should(haveAttribute('style', 'color: var(--custom-prop-b); --custom-prop-a: red; --custom-prop-b:var(--custom-prop-a);'))
|
|
|
|
+ }
|
|
|
|
+)
|