Let's build browser engine! in typescript vol10 style display
Murahashi [Matt] Kenichi
Posted on June 16, 2019
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
💖 💪 🙅 🚩
Murahashi [Matt] Kenichi
Posted on June 16, 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