mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 11:22:45 +00:00
2644d2c221
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.
221 lines
7.3 KiB
HTML
221 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Flex</title>
|
|
<style>
|
|
.my-container {
|
|
display: flex;
|
|
border: 1px solid salmon;
|
|
}
|
|
|
|
.width-constrained {
|
|
width: 250px;
|
|
}
|
|
|
|
.height-constrained {
|
|
height: 250px;
|
|
}
|
|
|
|
.column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.box {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>FlexBox Tests</h1>
|
|
<p>The boxes are width and height 100px.</p>
|
|
<h2>Row</h2>
|
|
<h3>Width unconstrained</h3>
|
|
<p>Default</p>
|
|
<div class="my-container">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
<h3>Width 250px</h3>
|
|
<p>Default</p>
|
|
<div class="my-container width-constrained">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
<p>Flex-wrap: nowrap</p>
|
|
<div class="my-container width-constrained" style="flex-wrap: nowrap;">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
<p>Flex-wrap: wrap</p>
|
|
<div class="my-container width-constrained" style="flex-wrap: wrap;">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
<p>Flex-wrap: wrap-reverse</p>
|
|
<div class="my-container width-constrained" style="flex-wrap: wrap-reverse;">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
|
|
<h4>Flex-flow shorthand</h4>
|
|
|
|
<p>flex-flow: row nowrap;</p>
|
|
<div class="my-container width-constrained" style="flex-flow: row nowrap;">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
|
|
<p>flex-flow: row wrap;</p>
|
|
<div class="my-container width-constrained" style="flex-flow: row wrap;">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
|
|
<h2>Column</h2>
|
|
<h3>Height/Width unconstrained</h3>
|
|
<p>Default</p>
|
|
<div class="my-container column">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
<h3>Height 250px</h3>
|
|
<p>Default</p>
|
|
<div class="my-container column height-constrained">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
<h4>Also Width 250px</h4>
|
|
<p>Default</p>
|
|
<div class="my-container width-constrained column height-constrained">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
<p>Flex-wrap: nowrap</p>
|
|
<div class="my-container column width-constrained height-constrained" style="flex-wrap: nowrap;">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
<p>Flex-wrap: wrap</p>
|
|
<div class="my-container column width-constrained height-constrained" style="flex-wrap: wrap;">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
<p>Flex-wrap: wrap-reverse</p>
|
|
<div class="my-container column width-constrained height-constrained" style="flex-wrap: wrap-reverse;">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
|
|
<h4>Flex-flow shorthand</h4>
|
|
|
|
<p>flex-flow: column nowrap;</p>
|
|
<div class="my-container width-constrained height-constrained" style="flex-flow: column nowrap;">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
|
|
<p>flex-flow: column wrap;</p>
|
|
<div class="my-container width-constrained height-constrained" style="flex-flow: column wrap;">
|
|
<div class="box">1</div>
|
|
<div class="box">2</div>
|
|
<div class="box">3</div>
|
|
</div>
|
|
|
|
<h2>Grow/Shrink</h2>
|
|
<p>Container has width of 500px</p>
|
|
<p>flex-grow: 4/2/0</p>
|
|
<div class="my-container" style="flex-flow: row nowrap; width: 500px;">
|
|
<div class="box" style="flex-grow: 4;">1 I grow the most</div>
|
|
<div class="box" style="flex-grow: 2;">2 I grow</div>
|
|
<div class="box" style="flex-grow: 0;">3 I don't</div>
|
|
</div>
|
|
<p>Container has width of 250px</p>
|
|
<p>flex-shrink: 4/1/0</p>
|
|
<div class="my-container" style="flex-flow: row nowrap; width: 250px;">
|
|
<div class="box" style="flex-shrink: 4;">1 I shrink the most</div>
|
|
<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>
|