Let's build browser engine! in typescript vol12 Prepare for calculate block width - getStyleNode, toPx, and lookup
Murahashi [Matt] Kenichi
Posted on June 28, 2019
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
💖 💪 🙅 🚩
Murahashi [Matt] Kenichi
Posted on June 28, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
webdev Understanding HTTP, Cookies, Email Protocols, and DNS: A Guide to Key Internet Technologies
November 30, 2024
react Axios NPM Package: A Beginner's Guide to Installing and Making HTTP Requests
November 30, 2024
webdev Guide to Cookies, Local Storage, Session Storage, and Other Web Storage Mechanisms
November 30, 2024