Css batching (#3326)
* tracker: initial css inlining functionality * tracker: add tests, adjust sheet id, stagger rule sending * ui: rereoute custom html component fragments * removed sorting --------- Co-authored-by: nick-delirium <nikita@openreplay.com>
This commit is contained in:
Andrey Babushkin
Delirium
parent
85e30b3692
commit
f8ba3f6d89
6 changed files with 103 additions and 340 deletions
|
|
@ -1,5 +1,4 @@
|
|||
import logger from 'App/logger';
|
||||
import { resolveCSS } from '../../messages/rewriter/urlResolve';
|
||||
|
||||
import type Screen from '../../Screen/Screen';
|
||||
import type { Message, SetNodeScroll } from '../../messages';
|
||||
|
|
@ -450,8 +449,9 @@ export default class DOMManager extends ListWalker<Message> {
|
|||
logger.error('CreateIFrameDocument: Node not found', msg);
|
||||
return;
|
||||
}
|
||||
// shadow DOM for a custom element + SALESFORCE (<slot>)
|
||||
const isCustomElement = vElem.tagName.includes('-') || vElem.tagName === 'SLOT';
|
||||
|
||||
// shadow DOM for a custom element
|
||||
const isCustomElement = vElem.tagName.includes('-');
|
||||
const isNotActualIframe = !["IFRAME", "FRAME"].includes(vElem.tagName.toUpperCase());
|
||||
const isLikelyShadowRoot = isCustomElement && isNotActualIframe;
|
||||
|
||||
|
|
|
|||
|
|
@ -272,6 +272,7 @@ export default class App {
|
|||
'feature-flags': true,
|
||||
'usability-test': true,
|
||||
}
|
||||
private emptyBatchCounter = 0
|
||||
|
||||
constructor(
|
||||
projectKey: string,
|
||||
|
|
@ -318,14 +319,16 @@ export default class App {
|
|||
__save_canvas_locally: false,
|
||||
localStorage: null,
|
||||
sessionStorage: null,
|
||||
disableStringDict: true,
|
||||
forceSingleTab: false,
|
||||
assistSocketHost: '',
|
||||
fixedCanvasScaling: false,
|
||||
disableCanvas: false,
|
||||
captureIFrames: true,
|
||||
obscureTextEmails: false,
|
||||
disableSprites: false,
|
||||
inlineRemoteCss: true,
|
||||
obscureTextEmails: true,
|
||||
obscureTextNumbers: false,
|
||||
disableStringDict: false,
|
||||
crossdomain: {
|
||||
parentDomain: '*',
|
||||
},
|
||||
|
|
@ -336,12 +339,6 @@ export default class App {
|
|||
useAnimationFrame: false,
|
||||
},
|
||||
forceNgOff: false,
|
||||
inlineRemoteCss: false,
|
||||
disableSprites: false,
|
||||
inlinerOptions: {
|
||||
forceFetch: false,
|
||||
forcePlain: false,
|
||||
}
|
||||
}
|
||||
this.options = simpleMerge(defaultOptions, options)
|
||||
|
||||
|
|
@ -436,6 +433,7 @@ export default class App {
|
|||
if (ev.data.context === this.contextId) {
|
||||
return
|
||||
}
|
||||
this.debug.log(ev)
|
||||
if (ev.data.line === proto.resp) {
|
||||
const sessionToken = ev.data.token
|
||||
this.session.setSessionToken(sessionToken)
|
||||
|
|
@ -853,8 +851,7 @@ export default class App {
|
|||
* */
|
||||
private _nCommit(): void {
|
||||
if (this.socketMode) {
|
||||
this.messages.unshift(TabData(this.session.getTabId()))
|
||||
this.messages.unshift(Timestamp(this.timestamp()))
|
||||
this.messages.unshift(Timestamp(this.timestamp()), TabData(this.session.getTabId()))
|
||||
this.commitCallbacks.forEach((cb) => cb(this.messages))
|
||||
this.messages.length = 0
|
||||
return
|
||||
|
|
@ -877,10 +874,19 @@ export default class App {
|
|||
return
|
||||
}
|
||||
|
||||
if (!this.messages.length) {
|
||||
// Release empty batches every 30 secs (1000 * 30ms)
|
||||
if (this.emptyBatchCounter < 1000) {
|
||||
this.emptyBatchCounter++;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.emptyBatchCounter = 0
|
||||
|
||||
try {
|
||||
requestIdleCb(() => {
|
||||
this.messages.unshift(TabData(this.session.getTabId()))
|
||||
this.messages.unshift(Timestamp(this.timestamp()))
|
||||
this.messages.unshift(Timestamp(this.timestamp()), TabData(this.session.getTabId()))
|
||||
this.worker?.postMessage(this.messages)
|
||||
this.commitCallbacks.forEach((cb) => cb(this.messages))
|
||||
this.messages.length = 0
|
||||
|
|
@ -905,10 +911,9 @@ export default class App {
|
|||
private _cStartCommit(): void {
|
||||
this.coldStartCommitN += 1
|
||||
if (this.coldStartCommitN === 2) {
|
||||
this.bufferedMessages1.push(Timestamp(this.timestamp()))
|
||||
this.bufferedMessages1.push(TabData(this.session.getTabId()))
|
||||
this.bufferedMessages2.push(Timestamp(this.timestamp()))
|
||||
this.bufferedMessages2.push(TabData(this.session.getTabId()))
|
||||
const payload = [Timestamp(this.timestamp()), TabData(this.session.getTabId())]
|
||||
this.bufferedMessages1.push(...payload)
|
||||
this.bufferedMessages2.push(...payload)
|
||||
this.coldStartCommitN = 0
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
let fakeIdHolder = 1000000 * 99;
|
||||
|
||||
export function inlineRemoteCss(
|
||||
node: HTMLLinkElement,
|
||||
id: number,
|
||||
|
|
@ -7,286 +5,83 @@ export function inlineRemoteCss(
|
|||
getNextID: () => number,
|
||||
insertRule: (id: number, cssText: string, index: number, baseHref: string) => any[],
|
||||
addOwner: (sheetId: number, ownerId: number) => any[],
|
||||
forceFetch?: boolean,
|
||||
sendPlain?: boolean,
|
||||
onPlain?: (cssText: string, id: number) => void,
|
||||
) {
|
||||
const sheetId = getNextID();
|
||||
const sheet = node.sheet;
|
||||
const sheetId = getNextID()
|
||||
addOwner(sheetId, id);
|
||||
|
||||
const sheet = node.sheet;
|
||||
|
||||
if (sheet && !forceFetch) {
|
||||
try {
|
||||
const cssText = stringifyStylesheet(sheet);
|
||||
|
||||
if (cssText) {
|
||||
processCssText(cssText);
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("Could not stringify sheet, falling back to fetch:", e);
|
||||
const processRules = (rules: CSSRuleList) => {
|
||||
if (rules.length) {
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < rules.length; i++) {
|
||||
const rule = rules[i];
|
||||
insertRule(sheetId, rule.cssText, i, baseHref);
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Fall back to fetching if we couldn't get or stringify the sheet
|
||||
if (node.href) {
|
||||
const processCssText = (cssText: string) => {
|
||||
cssText = cssText.replace(/\/\*[\s\S]*?\*\//g, '');
|
||||
|
||||
const ruleTexts: string[] = [];
|
||||
let depth = 0;
|
||||
let currentRule = '';
|
||||
|
||||
for (let i = 0; i < cssText.length; i++) {
|
||||
const char = cssText[i];
|
||||
|
||||
if (char === '{') {
|
||||
depth++;
|
||||
} else if (char === '}') {
|
||||
depth--;
|
||||
if (depth === 0) {
|
||||
currentRule += char;
|
||||
ruleTexts.push(currentRule.trim());
|
||||
currentRule = '';
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
currentRule += char;
|
||||
}
|
||||
|
||||
for (let i = 0; i < ruleTexts.length; i++) {
|
||||
const ruleText = ruleTexts[i];
|
||||
insertRule(sheetId, ruleText, i, baseHref);
|
||||
}
|
||||
};
|
||||
|
||||
if (sheet) {
|
||||
try {
|
||||
const rules = sheet.cssRules;
|
||||
processRules(rules);
|
||||
} catch (e) {
|
||||
const href = node.href;
|
||||
if (href) {
|
||||
fetch(href)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch CSS: ${response.status}`);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(cssText => {
|
||||
processCssText(cssText);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(`Failed to fetch or process CSS from ${href}:`, error);
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (node.href) {
|
||||
fetch(node.href)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch CSS: ${response.status}`);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(cssText => {
|
||||
if (sendPlain && onPlain) {
|
||||
onPlain(cssText, fakeIdHolder++);
|
||||
}
|
||||
processCssText(cssText);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(`Failed to fetch CSS from ${node.href}:`, error);
|
||||
});
|
||||
}
|
||||
|
||||
function processCssText(cssText: string) {
|
||||
// Remove comments
|
||||
cssText = cssText.replace(/\/\*[\s\S]*?\*\//g, '');
|
||||
|
||||
// Parse and process the CSS text to extract rules
|
||||
const ruleTexts = parseCSS(cssText);
|
||||
|
||||
for (let i = 0; i < ruleTexts.length; i++) {
|
||||
insertRule(sheetId, ruleTexts[i], i, baseHref);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function parseCSS(cssText: string): string[] {
|
||||
const rules: string[] = [];
|
||||
let inComment = false;
|
||||
let inString = false;
|
||||
let stringChar = '';
|
||||
let braceLevel = 0;
|
||||
let currentRule = '';
|
||||
|
||||
for (let i = 0; i < cssText.length; i++) {
|
||||
const char = cssText[i];
|
||||
const nextChar = cssText[i + 1] || '';
|
||||
|
||||
// comments
|
||||
if (!inString && char === '/' && nextChar === '*') {
|
||||
inComment = true;
|
||||
i++; // Skip the next character
|
||||
continue;
|
||||
}
|
||||
|
||||
if (inComment) {
|
||||
if (char === '*' && nextChar === '/') {
|
||||
inComment = false;
|
||||
i++; // Skip the next character
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
if (!inString && (char === '"' || char === "'")) {
|
||||
inString = true;
|
||||
stringChar = char;
|
||||
currentRule += char;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (inString) {
|
||||
currentRule += char;
|
||||
if (char === stringChar && cssText[i - 1] !== '\\') {
|
||||
inString = false;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
currentRule += char;
|
||||
|
||||
if (char === '{') {
|
||||
braceLevel++;
|
||||
} else if (char === '}') {
|
||||
braceLevel--;
|
||||
|
||||
if (braceLevel === 0) {
|
||||
// End of a top-level rule
|
||||
rules.push(currentRule.trim());
|
||||
currentRule = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle any remaining text (should be rare)
|
||||
if (currentRule.trim()) {
|
||||
rules.push(currentRule.trim());
|
||||
}
|
||||
|
||||
return rules;
|
||||
}
|
||||
|
||||
|
||||
function stringifyStylesheet(s: CSSStyleSheet): string | null {
|
||||
try {
|
||||
const rules = s.rules || s.cssRules;
|
||||
if (!rules) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let sheetHref = s.href;
|
||||
if (!sheetHref && s.ownerNode && (s.ownerNode as HTMLElement).ownerDocument) {
|
||||
// an inline <style> element
|
||||
sheetHref = (s.ownerNode as HTMLElement).ownerDocument.location.href;
|
||||
}
|
||||
|
||||
const stringifiedRules = Array.from(rules, (rule: CSSRule) =>
|
||||
stringifyRule(rule, sheetHref)
|
||||
).join('');
|
||||
|
||||
return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
function stringifyRule(rule: CSSRule, sheetHref: string | null): string {
|
||||
if (isCSSImportRule(rule)) {
|
||||
let importStringified;
|
||||
try {
|
||||
importStringified =
|
||||
// for same-origin stylesheets,
|
||||
// we can access the imported stylesheet rules directly
|
||||
stringifyStylesheet((rule as any).styleSheet) ||
|
||||
// work around browser issues with the raw string `@import url(...)` statement
|
||||
escapeImportStatement(rule as any);
|
||||
} catch (error) {
|
||||
importStringified = rule.cssText;
|
||||
}
|
||||
if ((rule as any).styleSheet.href) {
|
||||
// url()s within the imported stylesheet are relative to _that_ sheet's href
|
||||
return absolutifyURLs(importStringified, (rule as any).styleSheet.href);
|
||||
}
|
||||
return importStringified;
|
||||
} else {
|
||||
let ruleStringified = rule.cssText;
|
||||
if (isCSSStyleRule(rule) && (rule as any).selectorText.includes(':')) {
|
||||
// Safari does not escape selectors with : properly
|
||||
ruleStringified = fixSafariColons(ruleStringified);
|
||||
}
|
||||
if (sheetHref) {
|
||||
return absolutifyURLs(ruleStringified, sheetHref);
|
||||
}
|
||||
return ruleStringified;
|
||||
}
|
||||
}
|
||||
function fixBrowserCompatibilityIssuesInCSS(cssText: string): string {
|
||||
// Fix for Chrome's handling of webkit-background-clip
|
||||
if (
|
||||
cssText.includes(' background-clip: text;') &&
|
||||
!cssText.includes(' -webkit-background-clip: text;')
|
||||
) {
|
||||
cssText = cssText.replace(
|
||||
/\sbackground-clip:\s*text;/g,
|
||||
' -webkit-background-clip: text; background-clip: text;',
|
||||
);
|
||||
}
|
||||
return cssText;
|
||||
}
|
||||
|
||||
function escapeImportStatement(rule: any): string {
|
||||
const { cssText } = rule;
|
||||
if (cssText.split('"').length < 3) return cssText;
|
||||
|
||||
const statement = ['@import', `url(${JSON.stringify(rule.href)})`];
|
||||
if (rule.layerName === '') {
|
||||
statement.push(`layer`);
|
||||
} else if (rule.layerName) {
|
||||
statement.push(`layer(${rule.layerName})`);
|
||||
}
|
||||
if (rule.supportsText) {
|
||||
statement.push(`supports(${rule.supportsText})`);
|
||||
}
|
||||
if (rule.media.length) {
|
||||
statement.push(rule.media.mediaText);
|
||||
}
|
||||
return statement.join(' ') + ';';
|
||||
}
|
||||
|
||||
function fixSafariColons(cssStringified: string): string {
|
||||
const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
|
||||
return cssStringified.replace(regex, '$1\\$2');
|
||||
}
|
||||
|
||||
function isCSSImportRule(rule: CSSRule): boolean {
|
||||
return 'styleSheet' in rule;
|
||||
}
|
||||
|
||||
function isCSSStyleRule(rule: CSSRule): boolean {
|
||||
return 'selectorText' in rule;
|
||||
}
|
||||
|
||||
function absolutifyURLs(cssText: string | null, href: string): string {
|
||||
if (!cssText) return '';
|
||||
|
||||
const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
|
||||
const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i;
|
||||
const URL_WWW_MATCH = /^www\..*/i;
|
||||
const DATA_URI = /^(data:)([^,]*),(.*)/i;
|
||||
|
||||
return cssText.replace(
|
||||
URL_IN_CSS_REF,
|
||||
(
|
||||
origin: string,
|
||||
quote1: string,
|
||||
path1: string,
|
||||
quote2: string,
|
||||
path2: string,
|
||||
path3: string,
|
||||
) => {
|
||||
const filePath = path1 || path2 || path3;
|
||||
const maybeQuote = quote1 || quote2 || '';
|
||||
if (!filePath) {
|
||||
return origin;
|
||||
}
|
||||
if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {
|
||||
return `url(${maybeQuote}${filePath}${maybeQuote})`;
|
||||
}
|
||||
if (DATA_URI.test(filePath)) {
|
||||
return `url(${maybeQuote}${filePath}${maybeQuote})`;
|
||||
}
|
||||
if (filePath[0] === '/') {
|
||||
return `url(${maybeQuote}${
|
||||
extractOrigin(href) + filePath
|
||||
}${maybeQuote})`;
|
||||
}
|
||||
const stack = href.split('/');
|
||||
const parts = filePath.split('/');
|
||||
stack.pop();
|
||||
for (const part of parts) {
|
||||
if (part === '.') {
|
||||
continue;
|
||||
} else if (part === '..') {
|
||||
stack.pop();
|
||||
} else {
|
||||
stack.push(part);
|
||||
}
|
||||
}
|
||||
return `url(${maybeQuote}${stack.join('/')}${maybeQuote})`;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function extractOrigin(url: string): string {
|
||||
let origin = '';
|
||||
if (url.indexOf('//') > -1) {
|
||||
origin = url.split('/').slice(0, 3).join('/');
|
||||
} else {
|
||||
origin = url.split('/')[0];
|
||||
}
|
||||
origin = origin.split('?')[0];
|
||||
return origin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -184,15 +184,6 @@ enum RecentsType {
|
|||
Changed,
|
||||
}
|
||||
|
||||
interface Options {
|
||||
inlineRemoteCss?: boolean,
|
||||
disableSprites?: boolean,
|
||||
inlinerOptions?: {
|
||||
forceFetch?: boolean,
|
||||
forcePlain?: boolean,
|
||||
}
|
||||
}
|
||||
|
||||
export default abstract class Observer {
|
||||
private readonly observer: MutationObserver
|
||||
private readonly commited: Array<boolean | undefined> = []
|
||||
|
|
@ -207,16 +198,14 @@ export default abstract class Observer {
|
|||
* can (and will) affect performance
|
||||
* */
|
||||
private readonly inlineRemoteCss: boolean = false
|
||||
private readonly inlinerOptions: Options['inlinerOptions'] = undefined
|
||||
private readonly domParser = new DOMParser()
|
||||
constructor(
|
||||
protected readonly app: App,
|
||||
protected readonly isTopContext: boolean = false,
|
||||
options: Options = {},
|
||||
protected readonly isTopContext = false,
|
||||
options: { disableSprites: boolean, inlineRemoteCss: boolean } = { disableSprites: false, inlineRemoteCss: false },
|
||||
) {
|
||||
this.disableSprites = Boolean(options.disableSprites)
|
||||
this.inlineRemoteCss = Boolean(options.inlineRemoteCss)
|
||||
this.inlinerOptions = options.inlinerOptions
|
||||
this.disableSprites = options.disableSprites
|
||||
this.inlineRemoteCss = options.inlineRemoteCss
|
||||
this.observer = createMutationObserver(
|
||||
this.app.safe((mutations) => {
|
||||
for (const mutation of mutations) {
|
||||
|
|
@ -379,23 +368,15 @@ export default abstract class Observer {
|
|||
setTimeout(() => {
|
||||
inlineRemoteCss(
|
||||
// @ts-ignore
|
||||
node,
|
||||
id,
|
||||
this.app.getBaseHref(),
|
||||
nextID,
|
||||
node,
|
||||
id,
|
||||
this.app.getBaseHref(),
|
||||
nextID,
|
||||
(id: number, cssText: string, index: number, baseHref: string) => {
|
||||
this.app.send(AdoptedSSInsertRuleURLBased(id, cssText, index, baseHref))
|
||||
},
|
||||
(sheetId: number, ownerId: number) => {
|
||||
this.app.send(AdoptedSSAddOwner(sheetId, ownerId))
|
||||
},
|
||||
this.inlinerOptions?.forceFetch,
|
||||
this.inlinerOptions?.forcePlain,
|
||||
(cssText: string, fakeTextId: number) => {
|
||||
this.app.send(CreateTextNode(fakeTextId, id, 0))
|
||||
setTimeout(() => {
|
||||
this.app.send(SetNodeData(fakeTextId, cssText))
|
||||
}, 10)
|
||||
}
|
||||
)
|
||||
}, 0)
|
||||
|
|
|
|||
|
|
@ -20,10 +20,6 @@ export interface Options {
|
|||
* @default false
|
||||
* */
|
||||
inlineRemoteCss: boolean
|
||||
inlinerOptions?: {
|
||||
forceFetch?: boolean,
|
||||
forcePlain?: boolean,
|
||||
}
|
||||
}
|
||||
|
||||
type Context = Window & typeof globalThis
|
||||
|
|
@ -99,7 +95,7 @@ export default class TopObserver extends Observer {
|
|||
this.app.debug.info('doc already observed for', id)
|
||||
return
|
||||
}
|
||||
const observer = new IFrameObserver(this.app, false, {})
|
||||
const observer = new IFrameObserver(this.app)
|
||||
this.iframeObservers.set(iframe, observer)
|
||||
this.docObservers.set(currentDoc, observer)
|
||||
this.iframeObserversArr.push(observer)
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ describe('inlineRemoteCss', () => {
|
|||
jest.runAllTimers();
|
||||
expect(mockNextID).toHaveBeenCalled();
|
||||
expect(mockAdoptedSSAddOwner).toHaveBeenCalledWith(123, 456);
|
||||
expect(mockAdoptedSSInsertRuleURLBased).toHaveBeenCalledWith(123, 'body { color: red; }', 0, 'http://example.com');
|
||||
expect(mockAdoptedSSInsertRuleURLBased).toHaveBeenCalledWith(456, 'body { color: red; }', 0, 'http://example.com');
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
|
|
@ -73,12 +73,6 @@ describe('inlineRemoteCss', () => {
|
|||
test('should handle successful fetch and process CSS text', async () => {
|
||||
mockNode.href = 'http://example.com/style.css';
|
||||
const mockSheet = {};
|
||||
global.fetch.mockImplementationOnce(() =>
|
||||
Promise.resolve({
|
||||
ok: true,
|
||||
text: () => Promise.resolve('body { color: red; }')
|
||||
})
|
||||
);
|
||||
Object.defineProperty(mockSheet, 'cssRules', {
|
||||
get: () => { throw new Error('CORS error'); }
|
||||
});
|
||||
|
|
@ -86,26 +80,18 @@ describe('inlineRemoteCss', () => {
|
|||
get: () => mockSheet
|
||||
});
|
||||
inlineRemoteCss(mockNode, 456, 'http://example.com',mockNextID,mockAdoptedSSInsertRuleURLBased, mockAdoptedSSAddOwner);
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
await new Promise(process.nextTick);
|
||||
expect(mockNextID).toHaveBeenCalled();
|
||||
expect(mockAdoptedSSAddOwner).toHaveBeenCalledWith(123, 456);
|
||||
expect(mockAdoptedSSInsertRuleURLBased).toHaveBeenCalledWith(123, 'body { color: red; }', 0, 'http://example.com');
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
test('should fetch CSS if node has no sheet but has href', async () => {
|
||||
test('should fetch CSS if node has no sheet but has href', () => {
|
||||
Object.defineProperty(mockNode, 'sheet', {
|
||||
get: () => null
|
||||
});
|
||||
global.fetch.mockImplementationOnce(() =>
|
||||
Promise.resolve({
|
||||
ok: true,
|
||||
text: () => Promise.resolve('body { color: red; }')
|
||||
})
|
||||
);
|
||||
mockNode.href = 'http://example.com/style.css';
|
||||
inlineRemoteCss(mockNode, 456, 'http://example.com',mockNextID,mockAdoptedSSInsertRuleURLBased, mockAdoptedSSAddOwner);
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
expect(global.fetch).toHaveBeenCalledWith('http://example.com/style.css');
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue