Let's build browser engine! in typescript vol12 Prepare for calculate block width - getStyleNode, toPx, and lookup
Tags: browser
Published: 2019-06-28 02:22:18

---
title: Let's build browser engine! in typescript vol12 Prepare for calculate block width - getStyleNode, toPx, and lookup
published: true
description: Understand browser step by step. Let's build browser engine! in typescript vol12 Prepare for calculate block width - getStyleNode, toPx, and lookup
tags: browser
---

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

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

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

```typescript
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](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)
- [Let's build browser engine! in typescript vol11 Build Layout tree](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol11-build-layout-tree-3gom)
- [Let's build browser engine! in typescript vol12 Prepare for calculate block width - getStyleNode, toPx, and lookup](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol12-prepare-for-calculate-block-width-getstylenode-topx-and-lookup-n0e)