Browser Rendering

[00:00:00]
>> Evgenii Ray: So now let's become browser, part two. So now we are slightly complicate the exercise. We are going to build all the formatting context. Also we are gonna detect all the elements outside of normal flow. And we're also going to build stacking context DOM, RenderObject tree, RenderLayer tree and the GraphicLayer trees.

[00:00:20]
So we can see how everything works together. The HTML is pretty simple and we're gonna render it line by line. So let's start with the step one. So we render the HTML element. So when we render HTML element so the DOM tree is updated. So we added this element to the tree, also the RenderObject is created.

[00:00:45]
Because we create 100 objects for every DOM element, then the root GraphicLayer is initiated. And the root RenderLayer is initiated. And we start with a default stacking context and default blocks formatting context because we use the root element. So let's continue and render the body. When to render the body, the DOM tree is updated.

[00:01:07]
The RenderObject tree is updated, but rest is untouched.
>> Evgenii Ray: So next we render the section tag with a few flex items. So we updated our DOM tree. And we updated our RenderObject tree. Now, no position absolute apply to our any CSS transformation, we keep our single RenderLayer and we also keep our single GraphicLayer.

[00:01:33]
But now we need to update our formatting context tree. So since the display flex is assigned, we're creating a new flex formatting context. And one thing interesting is usually the div doesn't create the block formatting context. But because now it's a flex item and we are within different formatting context, this means that this instructs the browser that now the div element should initiate the block formatting context.

[00:02:00]
So we get to two more contexts here. Okay, now let's render the absolutely position item with a span with some text. So we updated the DOM tree. We added two more rendering objects, and since the element has the position absolute assign to that, so we update our render layer tree.

[00:02:24]
And now we have two layers. So the next thing that we do is because the span or sorry, actually because we have the position absolute assign, we also move out the element from the default stacking context. So now we have a separate realm where we put all our elements.

[00:02:44]
So we create a new stacking context. And within this stacking context, we created a new default block formatting context and initiated the inline formatting context. Yeah, I hope it's clear. [LAUGH] So now we are rendering the new div element and since this div element has the display inline block assigned, so this means we need to update the DOM tree, we also update the RenderObject tree.

[00:03:14]
GraphicLayer is untouched, RenderLayer tree is also untouched because we don't play with the staking context here. And now we're updating our root stacking context and creating a new block formatting context because the display inline block is assigned, okay? Let's render the last one. So here, we assigned the absolute positioning, but we also assigned the 3D transformation.

[00:03:39]
So this means that we need to update the DOM tree. We also update the RenderObject tree. Then we create a new RenderLayer. But the difference is, this RenderLayer will be assigned to the different GraphicLayer. So because we initiated a 3D transformation. So we promoted this layer to the new GraphicLayer.

[00:04:00]
And we also initiated a new stacking context, where we placed the new formatting context initiated by the div tag.
>> Speaker 2: So the stacking context that we end up with at the end, if you were actually to view this in a browser, basically you'd have the root context. And then the stacking context one would be right on top of that, and the stacking context two.

[00:04:19]
>> Evgenii Ray: Yeah, it will be on top of the next one.
>> Speaker 2: Perfect, that was all I wanted to clarify, thank you.
>> Evgenii Ray: And we're done. So we initially started with the very simple concepts, just some box model margins and bottings. When we overused what are the painting layers and how they work together, and now we can call ourselves Jedai of reflow.