mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 06:47:34 +00:00
LibWeb: Implement and use FlexStyleValue
This is not just moving the code from StyleResolver to Parser. The logic has changed to allow for the `flex-basis` to come before or after the `flex-grow/shrink` values, as well as handle the special one-value cases. Also added test cases to flex.html to check the parsing. It does parse correctly, but elements with `flex-basis: auto` do not calculate their width correctly.
This commit is contained in:
parent
44a082391b
commit
2644d2c221
5 changed files with 208 additions and 77 deletions
|
@ -154,6 +154,68 @@
|
|||
<div class="box" style="flex-shrink: 1;">2 I shrink</div>
|
||||
<div class="box" style="flex-shrink: 0;">3 I don't</div>
|
||||
</div>
|
||||
|
||||
<h2>Flex shorthand</h2>
|
||||
<p>flex: initial;</p>
|
||||
<div class="my-container" style="width: 500px;">
|
||||
<div class="box" style="flex: initial;">1</div>
|
||||
<div class="box" style="flex: initial;">2</div>
|
||||
<div class="box" style="flex: initial;">3</div>
|
||||
</div>
|
||||
<p>flex: auto;</p>
|
||||
<div class="my-container" style="width: 500px;">
|
||||
<div class="box" style="flex: auto;">1</div>
|
||||
<div class="box" style="flex: auto;">2</div>
|
||||
<div class="box" style="flex: auto;">3</div>
|
||||
</div>
|
||||
<p>flex: none;</p>
|
||||
<div class="my-container" style="width: 500px;">
|
||||
<div class="box" style="flex: none;">1</div>
|
||||
<div class="box" style="flex: none;">2</div>
|
||||
<div class="box" style="flex: none;">3</div>
|
||||
</div>
|
||||
<p>flex: 1/2/3;</p>
|
||||
<div class="my-container" style="width: 500px;">
|
||||
<div class="box" style="flex: 1;">1</div>
|
||||
<div class="box" style="flex: 2;">2</div>
|
||||
<div class="box" style="flex: 3;">3</div>
|
||||
</div>
|
||||
<p>flex: 0 0 0;</p>
|
||||
<div class="my-container" style="width: 500px;">
|
||||
<div class="box" style="flex: 0 0 0;">1</div>
|
||||
<div class="box" style="flex: 0 0 0;">2</div>
|
||||
<div class="box" style="flex: 0 0 0;">3</div>
|
||||
</div>
|
||||
<p>flex: 1 2 0;</p>
|
||||
<div class="my-container" style="width: 500px;">
|
||||
<div class="box" style="flex: 1 2 0;">1</div>
|
||||
<div class="box" style="flex: 1 2 0;">2</div>
|
||||
<div class="box" style="flex: 1 2 0;">3</div>
|
||||
</div>
|
||||
<p>flex: 0 1 2; <span style="color: red;">(Invalid)</span></p>
|
||||
<div class="my-container" style="width: 500px;">
|
||||
<div class="box" style="flex: 0 1 2;">1</div>
|
||||
<div class="box" style="flex: 0 1 2;">2</div>
|
||||
<div class="box" style="flex: 0 1 2;">3</div>
|
||||
</div>
|
||||
<p>flex: 4/1/0 0 50px;</p>
|
||||
<div class="my-container" style="width: 500px;">
|
||||
<div class="box" style="flex: 4 0 50px;">1</div>
|
||||
<div class="box" style="flex: 1 0 50px;">2</div>
|
||||
<div class="box" style="flex: 0 0 50px;">3</div>
|
||||
</div>
|
||||
<p>flex: 80% 0 4/1/0;</p>
|
||||
<div class="my-container" style="width: 500px;">
|
||||
<div class="box" style="flex: 80% 0 4;">1</div>
|
||||
<div class="box" style="flex: 80% 0 1;">2</div>
|
||||
<div class="box" style="flex: 80% 0 0;">3</div>
|
||||
</div>
|
||||
<p>flex: auto 0 4/1/0;</p>
|
||||
<div class="my-container" style="width: 500px;">
|
||||
<div class="box" style="flex: auto 0 4;">1</div>
|
||||
<div class="box" style="flex: auto 0 1;">2</div>
|
||||
<div class="box" style="flex: auto 0 0;">3</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue