Deno Toy Rendering Engine

HTML

<div class="wrapper">
  <div class="inner-1">
    <div class="inner-2">
      <div class="inner-3"></div>
    </div>
  </div>
</div>

CSS

.wrapper {
  background-color: #364F6B;
}
.inner-1 {
  background-color: #3FC1C9;
}
.inner-2 {
  background-color: #F5F5F5;
}
.inner-3 {
  background-color: #FC5185;
}
* {
  padding: 40px;
}
Parse

DOM

Stylesheet

Style calculation

Style node

Layout

Layout box

Rasterization

Painting data