Let's build browser engine! in typescript vol10 style display 
Tags: browser
Published: 2019-06-16 08:37:24

---
title: Let's build browser engine! in typescript vol10 style display 
published: true
description: Understand browser step by step. Let's build browser engine! in typescript vol10 style display.
tags: browser
---

```typescript
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);
});
```

```typescript

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](https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html)
- [mbrubeck/robinson](https://github.com/mbrubeck/robinson)
- [sanemat/js-toy-engine](https://github.com/sanemat/js-toy-engine)
- [sanemat/ts-toy-engine](https://github.com/sanemat/ts-toy-engine)

## series

- [Let's build browser engine! in typescript vol0 Toy browser engine](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol0-toy-browser-engine-egm)
- [Let's build browser engine! in typescript vol1 Canvas with Color](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol1-canvas-with-color-2nd7)
- [Let's build browser engine! in typescript vol2 Display Command](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol2-display-command-3466)
- [Let's build browser engine! in typescript vol3 Layout Box, Dimensions](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol3-layout-box-dimensions-4613)
- [Let's build browser engine! in typescript vol4 Layout Tree to Display List](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol4-layout-tree-to-display-list-c54)
- [Let's build browser engine! in typescript vol5 DOM Shortcut](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol5-dom-shortcut-2l81)
- [Let's build browser engine! in typescript vol6 CSS Shortcut](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol6-css-shortcut-1958)
- [Let's build browser engine! in typescript vol7 Selector matching](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol7-selector-matching-1faf)
- [Let's build browser engine! in typescript vol8 Specificity](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol8-specificity-1c4c)
- [Let's build browser engine! in typescript vol9 DOM and Rules to Style tree](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol9-dom-and-rules-to-style-tree-18kp)
- [Let's build browser engine! in typescript vol10 style display](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol10-style-display-45ii)