32 lines
1.3 KiB
JavaScript
32 lines
1.3 KiB
JavaScript
import { beforeEach, expect, test } from 'vitest'
|
|
import '../../demo/examples/constructed-styles/index.js'
|
|
|
|
beforeEach(() => {
|
|
document.body.innerHTML = ''
|
|
})
|
|
|
|
test('applies a constructable stylesheet via adoptedStyleSheets in the shadow root', () => {
|
|
document.body.innerHTML = '<styled-elements></styled-elements>'
|
|
const el = document.querySelector('styled-elements')
|
|
|
|
expect(el.shadowRoot).toBeTruthy()
|
|
expect(el.shadowRoot.adoptedStyleSheets.length).toBeGreaterThan(0)
|
|
expect(el.shadowRoot.querySelector('p').textContent.trim()).toBe('Wow!?')
|
|
})
|
|
|
|
test('adopts an array of styles in order, and the composed CSS actually applies', () => {
|
|
document.body.innerHTML = '<composed-styles></composed-styles>'
|
|
const el = document.querySelector('composed-styles')
|
|
|
|
// tokens, a shared CSSStyleSheet, then local styles
|
|
expect(el.shadowRoot.adoptedStyleSheets).toHaveLength(3)
|
|
|
|
// the real proof: a custom property declared in sheet 1 resolves inside
|
|
// sheet 2's rule, and sheet 3's own rule applies — computed, not asserted
|
|
// against the source text
|
|
const div = el.shadowRoot.querySelector('div')
|
|
const p = el.shadowRoot.querySelector('p')
|
|
expect(getComputedStyle(div).borderRadius).toBe('6px')
|
|
expect(getComputedStyle(div).borderTopWidth).toBe('2px')
|
|
expect(getComputedStyle(p).fontWeight).toBe('600')
|
|
})
|