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;
  }
}

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