import {multiline} from '../../support/test-utils';
import type {StyleExpectations} from '../globals';
async function expectStyles(styles: StyleExpectations) {
await expectPageStyles(expect, styles);
}
describe('Custom HTML elements', () => {
it('Asynchronous define', async () => {
// Temporarily disable this test on Firefox
if (product === 'firefox') {
expect(true);
return;
}
await loadTestPage({
'/': multiline(
'',
'',
'',
'',
'',
'',
),
});
await pageUtils.evaluateScript(async () => {
class ElementWitAsync extends HTMLElement {
constructor() {
super();
const root = this.attachShadow({mode: 'open'});
setTimeout(() => root.innerHTML =
'\
\
Should be red initially and then change to green.\
'
);
}
}
customElements.define('elem-with-async', ElementWitAsync);
const elem = document.createElement('elem-with-async');
document.body.appendChild(elem);
});
await expectStyles([
[['elem-with-async', 'p'], 'color', 'rgb(255, 26, 26)'],
]);
await devtoolsUtils.paste(multiline(
'*',
'',
'CSS',
'p {',
' color: green !important;',
'}',
));
await expectStyles([
[['elem-with-async', 'p'], 'color', 'rgb(0, 128, 0)'],
]);
await devtoolsUtils.reset();
});
});