RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 06:47:34 +00:00
Code Issues Activity Actions

LibWeb: Implement and use FlexStyleValue

Browse source 
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:
Sam Atkins 2021-08-04 17:48:08 +01:00 • committed by Andreas Kling
parent 44a082391b
commit 2644d2c221
5 changed files with 208 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

62
Base/res/html/misc/flex.html
View file

@ -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>