Let's build browser engine! in typescript vol12 Prepare for calculate block width - getStyleNode, toPx, and lookup

test("getStyleNode anonymous block", () => {
  expect(() => {
    LayoutBox.Create(new BoxType.AnonymousBlock()).getStyleNode();
  }).toThrow();
});

test("getStyleNode block node", () => {
  expect(LayoutBox.Create(new BoxType.BlockNode(oneStyledNode)).getStyleNode()).toEqual(
    oneStyledNode
  );
});

test("getStyleNode inline node", () => {
  expect(LayoutBox.Create(new BoxType.InlineNode(oneStyledNode)).getStyleNode()).toEqual(
    oneStyledNode
  );
});

export class LayoutBox {
  (snip)

  getStyleNode(): StyledNode {
    switch (this.boxType.format) {
      case BoxType.Format.AnonymousBlock:
        throw Error("Anonymous block box has no style node");
      case BoxType.Format.BlockNode:
      case BoxType.Format.InlineNode:
        return this.boxType.styledNode;
    }
  }
}

toPx()

test("value to px color", () => {
  expect(new CssValue.ColorValue(new Color(0, 0, 0, 0)).toPx()).toEqual(0.0);
});

test("value to px keyword", () => {
  expect(new CssValue.Keyword("example").toPx()).toEqual(0.0);
});

test("value to px length em", () => {
  expect(new CssValue.Length(1.0, Unit.Em).toPx()).toEqual(0.0);
});

test("value to px length px", () => {
  expect(new CssValue.Length(1.0, Unit.Px).toPx()).toEqual(1.0);
});

export namespace CssValue {
  export class Length {
    (snip)

    toPx(): number {
      switch (this.unit) {
        case Unit.Em:
          return 0.0;
        case Unit.Px:
          return this.length;
      }
    }
  }

lookup

test("lookup target", () => {
  const expected = new CssValue.Keyword("example");
  expect(
    new StyledNode(text("no mean"), new Map([["target", expected]]), []).lookup(
      "target",
      "fallback",
      new CssValue.Keyword("no mean")
    )
  ).toBe(expected);
});

test("lookup fallback", () => {
  const expected = new CssValue.Keyword("example");
  expect(
    new StyledNode(text("no mean"), new Map([["fallback", expected]]), []).lookup(
      "no mean",
      "fallback",
      new CssValue.Keyword("no mean")
    )
  ).toBe(expected);
});

test("lookup none", () => {
  const expected = new CssValue.Keyword("example");
  expect(
    new StyledNode(text("no mean"), new Map([]), []).lookup("no mean", "no mean2", expected)
  ).toBe(expected);
});

export class StyledNode {
  (snip)

  lookup(name: string, fallbackName: string, defaultValue: CssValue): CssValue {
    return this.value(name) || this.value(fallbackName) || defaultValue;
  }

references

• Let's build a browser engine! Part 1: Getting started
• mbrubeck/robinson
• sanemat/js-toy-engine
• sanemat/ts-toy-engine

series

• Let's build browser engine! in typescript vol0 Toy browser engine
• Let's build browser engine! in typescript vol1 Canvas with Color
• Let's build browser engine! in typescript vol2 Display Command
• Let's build browser engine! in typescript vol3 Layout Box, Dimensions
• Let's build browser engine! in typescript vol4 Layout Tree to Display List
• Let's build browser engine! in typescript vol5 DOM Shortcut
• Let's build browser engine! in typescript vol6 CSS Shortcut
• Let's build browser engine! in typescript vol7 Selector matching
• Let's build browser engine! in typescript vol8 Specificity
• Let's build browser engine! in typescript vol9 DOM and Rules to Style tree
• Let's build browser engine! in typescript vol10 style display
• Let's build browser engine! in typescript vol11 Build Layout tree
• Let's build browser engine! in typescript vol12 Prepare for calculate block width - getStyleNode, toPx, and lookup