Let's build browser engine! in typescript vol10 style display

test("style node display inline default", () => {
  expect(new StyledNode(elem("no mean", new Map([]), []), new Map([]), []).display()).toBe(
    Display.Inline
  );
});

test("style node display none", () => {
  expect(
    new StyledNode(
      elem("no mean", new Map([["id", "target"]]), []),
      new Map([["display", new CssValue.Keyword("none")]]),
      []
    ).display()
  ).toBe(Display.None);
});

test("style node display block", () => {
  expect(
    new StyledNode(
      elem("no mean", new Map([["id", "target"]]), []),
      new Map([["display", new CssValue.Keyword("block")]]),
      []
    ).display()
  ).toBe(Display.Block);
});

test("style node display inline", () => {
  expect(
    new StyledNode(
      elem("no mean", new Map([["id", "target"]]), []),
      new Map([["display", new CssValue.Keyword("no mean")]]),
      []
    ).display()
  ).toBe(Display.Inline);
});

test("style node display inline2", () => {
  expect(
    new StyledNode(
      elem("no mean", new Map([["id", "target"]]), []),
      new Map([["display", new CssValue.ColorValue(new Color(0, 0, 0, 0))]]),
      []
    ).display()
  ).toBe(Display.Inline);
});

export enum Display {
  Inline,
  Block,
  None
}

export class StyledNode {
  (snip)

  display(): Display {
    const displayValue = this.value("display");
    if (displayValue === null) {
      return Display.Inline;
    }
    switch (displayValue.format) {
      case CssValue.Format.Keyword:
        switch (displayValue.keyword) {
          case "block":
            return Display.Block;
          case "none":
            return Display.None;
          default:
            return Display.Inline;
        }
    }
    return Display.Inline;
  }
}