nehan/dist/computed-style.js

Html layout engine for paged-media written in Typescript

import { Config, LogicalEdgeDirections, CssCascade, LogicalBorderRadius, CssLength, } from "./public-api";
export class ComputedStyle {
    static setComputedValue(element) {
        this.setValue(element, "display");
        if (element.computedStyle.getPropertyValue("display") === "none") {
            return;
        }
        if (Config.nonLayoutTags.indexOf(element.tagName) >= 0) {
            return;
        }
        element.computedStyle.setProperty("font-size", this.getFontSize(element) + "px");
        element.computedStyle.setProperty("line-height", this.getLineHeightString(element));
        if (Config.fontSizeOnlyTags.indexOf(element.tagName) >= 0) {
            return;
        }
        if (Config.edgeSkipTags.indexOf(element.tagName) < 0) {
            this.setPadding(element);
            this.setBorderWidth(element);
            this.setBorderStyle(element);
            this.setBorderColor(element);
            this.setBorderRadius(element);
        }
        if (Config.boxSizeSkipTags.indexOf(element.tagName) < 0) {
            this.setMargin(element);
            this.setMeasure(element);
            this.setExtent(element);
            this.setPosition(element);
        }
        this.setValue(element, "box-sizing");
        this.setValue(element, "font-family");
        this.setValue(element, "font-style");
        this.setValue(element, "font-weight");
        this.setValue(element, "font-variant");
        this.setValue(element, "font-stretch");
        this.setValue(element, "writing-mode");
        this.setValue(element, "float");
        this.setValue(element, "text-orientation");
        this.setValue(element, "text-combine-upright");
        this.setValue(element, "text-emphasis-style");
        this.setValue(element, "text-emphasis-color");
        this.setValue(element, "text-align");
        this.setValue(element, "vertical-align");
        this.setValue(element, "list-style-type");
        this.setValue(element, "list-style-position");
        this.setValue(element, "list-style-image");
        this.setValue(element, "content");
        this.setValue(element, "word-break");
        this.setValue(element, "overflow-wrap");
        this.setValue(element, "white-space");
        this.setValue(element, "page-break-before");
        this.setValue(element, "background-position");
    }
    static setValue(element, prop) {
        const value = CssCascade.getValue(element, prop);
        element.computedStyle.setProperty(prop, value);
    }
    static getFontSize(element) {
        return CssLength.computeFontSize(element);
    }
    static getLineHeightString(element) {
        return CssLength.computeLineHeight(element);
    }
    static getEdgeSize(element, prop) {
        return CssLength.computeBoxLength(element, prop);
    }
    static getBorderWidth(element, prop) {
        return CssLength.computeBoxLength(element, prop);
    }
    static setPadding(element) {
        LogicalEdgeDirections.forEach(direction => {
            const prop = `padding-${direction}`;
            const size = CssLength.computeBoxLength(element, prop);
            element.computedStyle.setProperty(prop, size + "px");
        });
    }
    static setBorderWidth(element) {
        LogicalEdgeDirections.forEach(direction => {
            const prop = `border-${direction}-width`;
            const size = CssLength.computeBorderWidth(element, prop);
            element.computedStyle.setProperty(prop, size + "px");
        });
    }
    static setBorderStyle(element) {
        LogicalEdgeDirections.forEach(direction => {
            const prop = `border-${direction}-style`;
            const value = CssCascade.getValue(element, prop);
            element.computedStyle.setProperty(prop, value);
        });
    }
    static setBorderColor(element) {
        LogicalEdgeDirections.forEach(direction => {
            const prop = `border-${direction}-color`;
            const value = CssCascade.getValue(element, prop);
            element.computedStyle.setProperty(prop, value);
        });
    }
    static setBorderRadius(element) {
        LogicalBorderRadius.corners.forEach((corner) => {
            const prop = `border-${corner}-radius`;
            const size = CssLength.computeBoxLength(element, prop);
            element.computedStyle.setProperty(prop, size + "px");
        });
    }
    static setMargin(element) {
        LogicalEdgeDirections.forEach(direction => {
            const prop = `margin-${direction}`;
            const computedValue = CssLength.computeAutableBoxLength(element, prop);
            element.computedStyle.setProperty(prop, computedValue === "auto" ? "0" : computedValue + "px");
        });
    }
    static setMeasure(element) {
        const size = CssLength.computeAutableBoxLength(element, "measure");
        if (size !== "auto") {
            element.computedStyle.setProperty("measure", size + "px");
        }
    }
    static setExtent(element) {
        const size = CssLength.computeAutableBoxLength(element, "extent");
        if (size !== "auto") {
            element.computedStyle.setProperty("extent", size + "px");
        }
    }
    static setPosition(element) {
        LogicalEdgeDirections.forEach(direction => {
            const value = CssLength.computeAutableBoxLength(element, direction);
            if (value !== "auto") {
                element.computedStyle.setProperty(direction, value + "px");
            }
        });
    }
}
//# sourceMappingURL=computed-style.js.map