Pseudo elements and inline layout

[SpinyOwl]

As the title says currently in trying to implement these two huge features.
First of all I already added support for ::before and ::after pseudo elements and now I have to implement inline layout.
After that I can start working on scrollbars which would probably need to change layout service implementation.

So far, I've found an issue with the layout engine that's causing it to handle mixed content incorrectly. As well there could be a potential issue in FontServiceImpl which requires additional verification.

If you have some ideas on how layout engine should work to add scrollbar support - please left some comments. I'll share my thoughts on how to implement it in the next post.

P.S. I'll add more examples of what was done next day.

[SpinyOwl]

At the screenshot below, you can see the current state.

Currently, generated pseudo-elements created with "display: block" style, as at the moment "display: inline" is not supported.

Layout code:

<winframe>
  <div class="wrapper" style="border-color:cyan">
    <div class="c1">c1
      <div class="c11" id='c11'>c11 Cfjg</div>
      <div class="c12">c12</div>
    </div>
    <div class="text">
      Hello world. Lorem ipsum dolor.
      Hello world. Lorem ipsum dolor.
      Hello world. Lorem ipsum dolor.s
      Hello World
    </div>

    <div class='twrapper' style="border-color: pink">
      <div class='twrapper' style="border-color: blue">
        <div class="text" id='t2' style="border-color: black">
          Hello world. Lorem ipsum dolor. Hello world A. Lorem ipsum dolor. Hello world. Lorem ipsum dolor. Hello world A. Lorem ipsum dolor.
          <div>Hello world B. Lorem ipsum dolor.</div>
          Hello world. Lorem ipsum dolor. Hello world A. Lorem ipsum dolor. Hello world. Lorem ipsum dolor. Hello world A. Lorem ipsum dolor.
        </div>
      </div>
    </div>
    <div class="c2">
      <div class="s">s1</div>
      <div class="s">s2</div>
    </div>
  </div>
</winframe>

styles:

winframe,
winframe * {
  border: 8px solid #8c8c8c;
  box-sizing: border-box; /* default behaviour */
  overflow: hidden; /* default behaviour */
}
winframe::scrollbar {
  width: 8px;
  height: 8px;
  background-color: orange;
}
winframe::scrollbar:hover {
  background-color: red;
}
winframe:hover,
winframe *:hover {
  border: 8px solid #fc3131;
}
#t2 {
  width: 500px;
}
#t2::before {
  content: "Before #t2 text!";
  background-color: yellow;
}
#t2::after {
  content: "After #t2 text!";
  background-color: orange;
}