diff --git a/src/api.ts b/src/api.ts index 70a24a6..10092f1 100644 --- a/src/api.ts +++ b/src/api.ts @@ -1,5 +1,5 @@ import {HTMLElement, TextNode} from './dom.js'; -import {DeclaredStyle, initialStyle, computeElementStyle} from './style.js'; +import {DeclaredStyle, getOriginStyle, computeElementStyle} from './style.js'; import {registerFont, unregisterFont, getFontUrls, RegisterFontOptions} from './text-font.js'; import {generateBlockContainer, layoutBlockBox, BlockFormattingContext, BlockContainer} from './layout-flow.js'; import HtmlPaintBackend from './paint-html.js'; @@ -18,7 +18,7 @@ export {createDeclaredStyle as style} from './style.js'; export {registerFont, unregisterFont}; export function generate(rootElement: HTMLElement): BlockContainer { - if (rootElement.style === initialStyle) { + if (rootElement.style === getOriginStyle()) { throw new Error( 'To use the hyperscript API, pass the element tree to dom() and use ' + 'the return value as the argument to generate().' diff --git a/src/dom.ts b/src/dom.ts index 32951f4..dc6a82a 100644 --- a/src/dom.ts +++ b/src/dom.ts @@ -1,6 +1,6 @@ import {Box} from './layout-box.js'; import {loggableText} from './util.js'; -import {Style, DeclaredStyle, initialStyle, EMPTY_STYLE} from './style.js'; +import {Style, DeclaredStyle, getOriginStyle, EMPTY_STYLE} from './style.js'; import {query, queryAll, Adapter} from './style-query.js'; export class TextNode { @@ -11,7 +11,7 @@ export class TextNode { constructor(id: string, text: string, parent: HTMLElement | null = null) { this.id = id; - this.style = initialStyle; + this.style = getOriginStyle(); this.text = text; this.parent = parent; } @@ -40,7 +40,7 @@ export class HTMLElement { ) { this.id = id; this.tagName = tagName; - this.style = initialStyle; + this.style = getOriginStyle(); this.declaredStyle = declaredStyle; this.parent = parent; this.attrs = attrs; diff --git a/src/style.ts b/src/style.ts index a8b3a5d..03786b1 100644 --- a/src/style.ts +++ b/src/style.ts @@ -667,7 +667,25 @@ const initialPlainStyle: ComputedStyle = Object.freeze({ overflow: 'visible' }); -export const initialStyle = new Style(initialPlainStyle); +let originStyle = new Style(initialPlainStyle); + +export function getOriginStyle() { + return originStyle; +} + +/** + * Set the style that the style inherits from + * + * Be careful calling this. It makes the inheritance style cache useless for any + * styles created after calling it. Using it incorrectly can hurt performance. + * + * Currently the only legitimately known usage is to set the zoom to a desired + * CSS-to-device pixel density (devicePixelRatio). As such, it should only be + * called when devicePixelRatio actually changes. + */ +export function setOriginStyle(style: Partial) { + originStyle = new Style({...initialPlainStyle, ...style}); +} type InheritedStyleDefinitions = {[K in keyof DeclaredStyleProperties]: boolean}; @@ -964,7 +982,7 @@ export function computeElementStyle(el: HTMLElement | TextNode) { el.style = createStyle(el.parent!.style, EMPTY_STYLE); } else { const styles = el.getDeclaredStyles(); - const parentStyle = el.parent ? el.parent.style : initialStyle; + const parentStyle = el.parent ? el.parent.style : originStyle; const uaDeclaredStyle = uaDeclaredStyles[el.tagName]; if (uaDeclaredStyle) styles.push(uaDeclaredStyle); if (!el.parent) styles.push(rootDeclaredStyle);