Merge pull request #31101 from Yavanosta/w3c-css-typed-object-model-level-1

Typings for CSS Typed OM Level 1

types/w3c-css-typed-object-model-level-1/index.d.ts

@@ -0,0 +1,289 @@
+// Type definitions for css-typed-object-model-level-1 20180410.0
+// Project: https://www.w3.org/TR/css-typed-om-1/
+// Definitions by: Dmitry Guketlev <https://github.com/yavanosta>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.0
+
+declare class CSSStyleValue {
+    static parse(property: string, cssText: string): CSSStyleValue;
+    static parseAll(property: string, cssText: string): CSSStyleValue[];
+    toString(): string;
+}
+
+declare class CSSVariableReferenceValue {
+    constructor(variable: string, fallback?: CSSUnparsedValue)
+    variable: string;
+    readonly fallback?: CSSUnparsedValue;
+}
+
+type CSSUnparsedSegment = string | CSSVariableReferenceValue;
+
+declare class CSSUnparsedValue extends CSSStyleValue {
+    constructor(members: CSSUnparsedSegment[]);
+    [Symbol.iterator](): IterableIterator<CSSUnparsedSegment>;
+    readonly length: number;
+    [idx: number]: CSSUnparsedSegment;
+}
+
+declare class CSSKeywordValue extends CSSStyleValue {
+    constructor(value: string);
+    value: string;
+}
+
+type CSSNumberish = number | CSSNumericValue;
+
+declare enum CSSNumericBaseType {
+    'length',
+    'angle',
+    'time',
+    'frequency',
+    'resolution',
+    'flex',
+    'percent',
+}
+
+interface CSSNumericType {
+    length: number;
+    angle: number;
+    time: number;
+    frequency: number;
+    resolution: number;
+    flex: number;
+    percent: number;
+    percentHint: CSSNumericBaseType;
+}
+
+declare class CSSNumericValue extends CSSStyleValue {
+    add(...values: CSSNumberish[]): CSSNumericValue;
+    sub(...values: CSSNumberish[]): CSSNumericValue;
+    mul(...values: CSSNumberish[]): CSSNumericValue;
+    div(...values: CSSNumberish[]): CSSNumericValue;
+    min(...values: CSSNumberish[]): CSSNumericValue;
+    max(...values: CSSNumberish[]): CSSNumericValue;
+
+    equals(...values: CSSNumberish[]): boolean;
+
+    to(unit: string): CSSUnitValue;
+    toSum(...units: string[]): CSSMathSum;
+    type(): CSSNumericType;
+
+    static parse(cssText: string): CSSNumericValue;
+}
+
+declare class CSSUnitValue extends CSSNumericValue {
+    constructor(value: number, unit: string);
+    value: number;
+    readonly unit: string;
+}
+
+declare class CSSMathValue extends CSSNumericValue {
+    readonly operator: CSSMathOperator;
+}
+
+declare class CSSMathSum extends CSSMathValue {
+    constructor(...args: CSSNumberish[]);
+    readonly values: CSSNumericArray;
+}
+
+declare class CSSMathProduct extends CSSMathValue {
+    constructor(...args: CSSNumberish[])
+    readonly values: CSSNumericArray;
+}
+
+declare class CSSMathNegate extends CSSMathValue {
+    constructor(arg: CSSNumberish)
+    readonly value: CSSNumericValue;
+}
+
+declare class CSSMathInvert extends CSSMathValue {
+    constructor(arg: CSSNumberish)
+    readonly value: CSSNumericValue;
+}
+
+declare class CSSMathMin extends CSSMathValue {
+    constructor(...args: CSSNumberish[])
+    readonly values: CSSNumericArray;
+}
+
+declare class CSSMathMax extends CSSMathValue {
+    constructor(...args: CSSNumberish[])
+    readonly values: CSSNumericArray;
+}
+
+// TODO(yavanosta): conflict with base class properties
+// Since there is no support for this class in any browser, it's better
+// wait for the implementation.
+// declare class CSSMathClamp extends CSSMathValue {
+// constructor(min: CSSNumberish, val: CSSNumberish, max: CSSNumberish);
+//     readonly min: CSSNumericValue;
+//     readonly val: CSSNumericValue;
+//     readonly max: CSSNumericValue;
+// };
+
+declare class CSSNumericArray {
+    [Symbol.iterator](): IterableIterator<CSSNumericValue>;
+    readonly length: number;
+    readonly [index: number]: CSSNumericValue;
+}
+
+declare enum CSSMathOperator {
+    'sum',
+    'product',
+    'negate',
+    'invert',
+    'min',
+    'max',
+    'clamp',
+}
+
+declare class CSSTransformValue extends CSSStyleValue {
+    constructor(transforms: CSSTransformComponent[]);
+    [Symbol.iterator](): IterableIterator<CSSTransformComponent>;
+    readonly length: number;
+    [index: number]: CSSTransformComponent;
+    readonly is2D: boolean;
+    toMatrix(): DOMMatrix;
+}
+
+declare class CSSTransformComponent {
+    is2D: boolean;
+    toMatrix(): DOMMatrix;
+    toString(): string;
+}
+
+declare class CSSTranslate extends CSSTransformComponent {
+    constructor(x: CSSNumericValue, y: CSSNumericValue, z?: CSSNumericValue);
+    x: CSSNumericValue;
+    y: CSSNumericValue;
+    z: CSSNumericValue;
+}
+
+declare class CSSRotate extends CSSTransformComponent {
+    constructor(angle: CSSNumericValue);
+    constructor(x: CSSNumberish, y: CSSNumberish, z: CSSNumberish, angle: CSSNumericValue)
+    x: CSSNumberish;
+    y: CSSNumberish;
+    z: CSSNumberish;
+    angle: CSSNumericValue;
+}
+
+declare class CSSScale extends CSSTransformComponent {
+    constructor(x: CSSNumberish, y: CSSNumberish, z?: CSSNumberish)
+    x: CSSNumberish;
+    y: CSSNumberish;
+    z: CSSNumberish;
+}
+
+declare class CSSSkew extends CSSTransformComponent {
+    constructor(ax: CSSNumericValue, ay: CSSNumericValue)
+    ax: CSSNumericValue;
+    ay: CSSNumericValue;
+}
+
+declare class CSSSkewX extends CSSTransformComponent {
+    constructor(ax: CSSNumericValue)
+    ax: CSSNumericValue;
+}
+
+declare class CSSSkewY extends CSSTransformComponent {
+    constructor(ay: CSSNumericValue)
+    ay: CSSNumericValue;
+}
+
+/* Note that skew(x,y) is *not* the same as skewX(x) skewY(y),
+     thus the separate interfaces for all three. */
+
+declare class CSSPerspective extends CSSTransformComponent {
+    constructor(length: CSSNumericValue)
+    length: CSSNumericValue;
+}
+
+declare class CSSMatrixComponent extends CSSTransformComponent {
+    constructor(matrix: DOMMatrixReadOnly, options?: CSSMatrixComponentOptions)
+    matrix: DOMMatrix;
+}
+
+interface CSSMatrixComponentOptions {
+    is2D: boolean;
+}
+
+declare class CSSImageValue extends CSSStyleValue {
+}
+
+declare class StylePropertyMapReadOnly {
+    [Symbol.iterator](): IterableIterator<[string, CSSStyleValue[]]>;
+
+    get(property: string): CSSStyleValue | undefined;
+    getAll(property: string): CSSStyleValue[];
+    has(property: string): boolean;
+    readonly size: number;
+}
+
+declare class StylePropertyMap extends StylePropertyMapReadOnly {
+    set(property: string, ...values: Array<CSSStyleValue | string>): void;
+    append(property: string, ...values: Array<CSSStyleValue | string>): void;
+    delete(property: string): void;
+    clear(): void;
+}
+
+interface Element {
+    computedStyleMap(): StylePropertyMapReadOnly;
+}
+
+interface CSSStyleRule {
+    readonly styleMap: StylePropertyMap;
+}
+
+interface ElementCSSInlineStyle {
+    readonly attributeStyleMap: StylePropertyMap;
+}
+
+interface CSS {
+    number(value: number): CSSUnitValue;
+    percent(value: number): CSSUnitValue;
+
+    // <length>
+    em(value: number): CSSUnitValue;
+    ex(value: number): CSSUnitValue;
+    ch(value: number): CSSUnitValue;
+    ic(value: number): CSSUnitValue;
+    rem(value: number): CSSUnitValue;
+    lh(value: number): CSSUnitValue;
+    rlh(value: number): CSSUnitValue;
+    vw(value: number): CSSUnitValue;
+    vh(value: number): CSSUnitValue;
+    vi(value: number): CSSUnitValue;
+    vb(value: number): CSSUnitValue;
+    vmin(value: number): CSSUnitValue;
+    vmax(value: number): CSSUnitValue;
+    cm(value: number): CSSUnitValue;
+    mm(value: number): CSSUnitValue;
+    Q(value: number): CSSUnitValue;
+    in(value: number): CSSUnitValue;
+    pt(value: number): CSSUnitValue;
+    pc(value: number): CSSUnitValue;
+    px(value: number): CSSUnitValue;
+
+    // <angle>
+    deg(value: number): CSSUnitValue;
+    grad(value: number): CSSUnitValue;
+    rad(value: number): CSSUnitValue;
+    turn(value: number): CSSUnitValue;
+
+    // <time>
+    s(value: number): CSSUnitValue;
+    ms(value: number): CSSUnitValue;
+
+    // <frequency>
+    Hz(value: number): CSSUnitValue;
+    kHz(value: number): CSSUnitValue;
+
+    // <resolution>
+    dpi(value: number): CSSUnitValue;
+    dpcm(value: number): CSSUnitValue;
+    dppx(value: number): CSSUnitValue;
+
+    // <flex>
+    fr(value: number): CSSUnitValue;
+}
+declare var CSS: CSS;

types/w3c-css-typed-object-model-level-1/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "w3c-css-typed-object-model-level-1-tests.ts"
+    ]
+}

types/w3c-css-typed-object-model-level-1/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

types/w3c-css-typed-object-model-level-1/w3c-css-typed-object-model-level-1-tests.ts

@@ -0,0 +1,278 @@
+() => {
+    const v: CSSStyleValue = CSSStyleValue.parse('padding', '10px');
+    const vArray: CSSStyleValue = CSSStyleValue.parseAll('padding', '10px 10px');
+};
+
+() => {
+    const v1: CSSVariableReferenceValue = new CSSVariableReferenceValue(
+        'v1', new CSSUnparsedValue([]));
+    const vVariable: string = v1.variable;
+    v1.variable = 'v3';
+    const vFalback: CSSUnparsedValue | undefined = v1.fallback;
+};
+
+() => {
+    const u = new CSSUnparsedValue(['x', new CSSVariableReferenceValue('v2')]);
+    const s = u[1];
+    u[2] = 'hellow';
+    u[3] = new CSSVariableReferenceValue('world');
+    for (const v of Array.from(u)) {
+        const x: CSSUnparsedSegment = v;
+    }
+};
+
+() => {
+    const k: CSSKeywordValue = new CSSKeywordValue('inline');
+    const keyword = k.value;
+    k.value = 'block';
+};
+
+() => {
+    const v: CSSNumericValue = CSSNumericValue.parse('10px');
+    const em1 = CSSNumericValue.parse('1em');
+    const vw2 = CSSNumericValue.parse('2vw');
+
+    const addRes: CSSNumericValue = v.add(1).add(em1).add(2, vw2);
+    const subRes: CSSNumericValue = v.sub(1).sub(em1).sub(2, vw2);
+    const mulRes: CSSNumericValue = v.mul(1).mul(em1).mul(2, vw2);
+    const divRes: CSSNumericValue = v.div(1).div(em1).div(2, vw2);
+    const minRes: CSSNumericValue = v.min(1).min(em1).min(2, vw2);
+    const maxRes: CSSNumericValue = v.max(1).max(em1).max(2, vw2);
+
+    const resEquals1 = v.equals(20);
+    const resEquals2 = v.equals(em1);
+    const resEquals3 = v.equals(30, vw2);
+
+    const vw: CSSUnitValue = v.to('vw');
+    const sum: CSSMathSum = v.toSum('px', 'vw');
+    const type: CSSNumericType = v.type();
+};
+
+() => {
+    const u = new CSSUnitValue(10, 'px');
+    const value = u.value;
+    u.value = 20;
+    const unit = u.unit;
+};
+
+() => {
+    const math: CSSMathSum = new CSSMathSum(10, CSS.px(10));
+    const operator: CSSMathOperator = math.operator;
+    const values: CSSNumericArray = math.values;
+};
+
+() => {
+    const math: CSSMathProduct = new CSSMathProduct(10, CSS.px(10));
+    const operator: CSSMathOperator = math.operator;
+    const values: CSSNumericArray = math.values;
+};
+
+() => {
+    const math1: CSSMathNegate = new CSSMathNegate(10);
+    const math2: CSSMathNegate = new CSSMathNegate(CSS.px(10));
+    const operator: CSSMathOperator = math1.operator;
+    const value: CSSNumericValue = math1.value;
+};
+
+() => {
+    const math1: CSSMathInvert = new CSSMathInvert(10);
+    const math2: CSSMathInvert = new CSSMathInvert(CSS.px(10));
+    const operator: CSSMathOperator = math1.operator;
+    const value: CSSNumericValue = math1.value;
+};
+
+() => {
+    const math: CSSMathMin = new CSSMathMin(10, CSS.px(10));
+    const operator: CSSMathOperator = math.operator;
+    const values: CSSNumericArray = math.values;
+};
+
+() => {
+    const math: CSSMathMax = new CSSMathMax(10, CSS.px(10));
+    const operator: CSSMathOperator = math.operator;
+    const values: CSSNumericArray = math.values;
+};
+
+() => {
+    const a: CSSNumericArray = new CSSMathSum().values;
+    const l = a.length;
+    const v = a[10];
+    for (const v of Array.from(a)) {
+        const x: CSSNumericValue = v;
+    }
+};
+
+() => {
+    const t: CSSTransformValue = new CSSTransformValue([
+        new CSSTranslate(CSS.deg(10), CSS.rad(20)),
+        new CSSRotate(CSS.deg(13)),
+        new CSSScale(1, 2),
+        new CSSSkew(CSS.deg(7), CSS.rad(15)),
+        new CSSSkewX(CSS.deg(10)),
+        new CSSSkewY(CSS.rad(10)),
+    ]);
+    const l = t.length;
+    const c = t[0];
+    t[1] = new CSSScale(20, 30);
+    const is2d: boolean = t.is2D;
+    const matix: DOMMatrix = t.toMatrix();
+    for (const v of Array.from(t)) {
+        const x: CSSTransformComponent = v;
+    }
+};
+
+() => {
+    const c: CSSTransformComponent = new CSSTransformValue([])[0];
+    const is2d: boolean = c.is2D;
+    const matix: DOMMatrix = c.toMatrix();
+};
+
+() => {
+    const t1: CSSTranslate = new CSSTranslate(CSS.px(20), CSS.px(20));
+    const t2: CSSTranslate = new CSSTranslate(CSS.px(20), CSS.px(20), CSS.px(30));
+    const is2d: boolean = t1.is2D;
+    const matix: DOMMatrix = t1.toMatrix();
+    const x: CSSNumericValue = t1.x;
+    const y: CSSNumericValue = t1.y;
+    const z: CSSNumericValue = t1.z;
+};
+
+() => {
+    const r1: CSSRotate = new CSSRotate(CSS.deg(1));
+    const r2: CSSRotate = new CSSRotate(CSS.px(20), 20, 30, CSS.deg(30));
+    const is2d: boolean = r1.is2D;
+    const matix: DOMMatrix = r1.toMatrix();
+    const x: CSSNumberish = r1.x;
+    const y: CSSNumberish = r1.y;
+    const z: CSSNumberish = r1.z;
+    const a: CSSNumericValue = r1.angle;
+};
+
+() => {
+    const s1: CSSScale = new CSSScale(20, CSS.number(30));
+    const s2: CSSScale = new CSSScale(CSS.px(20), 2, 3);
+    const is2d: boolean = s1.is2D;
+    const matix: DOMMatrix = s1.toMatrix();
+    const x: CSSNumberish = s1.x;
+    const y: CSSNumberish = s1.y;
+    const z: CSSNumberish = s1.z;
+};
+
+() => {
+    const s: CSSSkewX = new CSSSkewX(CSS.rad(20));
+    const is2d: boolean = s.is2D;
+    const matix: DOMMatrix = s.toMatrix();
+    const x: CSSNumericValue = s.ax;
+};
+
+() => {
+    const s: CSSSkewY = new CSSSkewY(CSS.rad(20));
+    const is2d: boolean = s.is2D;
+    const matix: DOMMatrix = s.toMatrix();
+    const y: CSSNumericValue = s.ay;
+};
+
+() => {
+    const p: CSSPerspective = new CSSPerspective(CSS.px(20));
+    const is2d: boolean = p.is2D;
+    const matix: DOMMatrix = p.toMatrix();
+    const length: CSSNumericValue = p.length;
+};
+
+() => {
+    const m1: CSSMatrixComponent = new CSSMatrixComponent(new CSSScale(1, 1).toMatrix());
+    const m2: CSSMatrixComponent = new CSSMatrixComponent(new CSSScale(1, 1).toMatrix(), {
+        is2D: true,
+    });
+    const m: DOMMatrix = m1.matrix;
+};
+
+() => {
+    const m: StylePropertyMapReadOnly = document.body.computedStyleMap();
+    const v: CSSStyleValue | undefined = m.get('padding');
+    const vArray: CSSStyleValue[] = m.getAll('padding');
+    const has: boolean = m.has('padding');
+    const size: number = m.size;
+    for (const v of Array.from(m)) {
+        const x: CSSStyleValue = v;
+    }
+};
+
+() => {
+    const m: StylePropertyMap = document.body.attributeStyleMap;
+    m.set('padding-top', CSS.px(10));
+    m.set('background-image', 'url()', 'url()');
+    m.append('background-image', 'url()');
+    m.delete('margin');
+    m.clear();
+    const v: CSSStyleValue | undefined = m.get('padding');
+    const vArray: CSSStyleValue[] = m.getAll('padding');
+    const has: boolean = m.has('padding');
+    const size: number = m.size;
+    for (const v of Array.from(m)) {
+        const x: CSSStyleValue = v;
+    }
+};
+
+() => {
+    const x: CSSRule = window.getMatchedCSSRules(document.body)[0];
+    if (!(x instanceof CSSStyleRule)) {
+        return;
+    }
+    const s: StylePropertyMap = x.styleMap;
+};
+
+() => {
+    const e: HTMLElement = document.createElement('div');
+    const m: StylePropertyMap = e.attributeStyleMap;
+    const c: StylePropertyMapReadOnly = e.computedStyleMap();
+};
+
+() => {
+    const numberVar: CSSUnitValue = CSS.number(1);
+    const percentVar: CSSUnitValue = CSS.percent(1);
+
+    // <length>
+    const emVar: CSSUnitValue = CSS.em(1);
+    const exVar: CSSUnitValue = CSS.ex(1);
+    const chVar: CSSUnitValue = CSS.ch(1);
+    const icVar: CSSUnitValue = CSS.ic(1);
+    const remVar: CSSUnitValue = CSS.rem(1);
+    const lhVar: CSSUnitValue = CSS.lh(1);
+    const rlhVar: CSSUnitValue = CSS.rlh(1);
+    const vwVar: CSSUnitValue = CSS.vw(1);
+    const vhVar: CSSUnitValue = CSS.vh(1);
+    const viVar: CSSUnitValue = CSS.vi(1);
+    const vbVar: CSSUnitValue = CSS.vb(1);
+    const vminVar: CSSUnitValue = CSS.vmin(1);
+    const vmaxVar: CSSUnitValue = CSS.vmax(1);
+    const cmVar: CSSUnitValue = CSS.cm(1);
+    const mmVar: CSSUnitValue = CSS.mm(1);
+    const QVar: CSSUnitValue = CSS.Q(1);
+    const inVar: CSSUnitValue = CSS.in(1);
+    const ptVar: CSSUnitValue = CSS.pt(1);
+    const pcVar: CSSUnitValue = CSS.pc(1);
+    const pxVar: CSSUnitValue = CSS.px(1);
+
+    // <angle>
+    const degVar: CSSUnitValue = CSS.deg(1);
+    const gradVar: CSSUnitValue = CSS.grad(1);
+    const radVar: CSSUnitValue = CSS.rad(1);
+    const turnVar: CSSUnitValue = CSS.turn(1);
+
+    // <time>
+    const sVar: CSSUnitValue = CSS.s(1);
+    const msVar: CSSUnitValue = CSS.ms(1);
+
+    // <frequency>
+    const HzVar: CSSUnitValue = CSS.Hz(1);
+    const kHzVar: CSSUnitValue = CSS.kHz(1);
+
+    // <resolution>
+    const dpiVar: CSSUnitValue = CSS.dpi(1);
+    const dpcmVar: CSSUnitValue = CSS.dpcm(1);
+    const dppxVar: CSSUnitValue = CSS.dppx(1);
+
+    // <flex>
+    const frVar: CSSUnitValue = CSS.fr(1);
+};