diff options
| author | Sam Atkins <atkinssj@serenityos.org> | 2021-09-15 11:46:01 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2021-09-15 13:55:25 +0200 |
| commit | e80396e04405af875330d024d10c8346cfd6f063 (patch) | |
| tree | 80ecf4714ee6403b1786bb8b3bc43973029408a8 | |
| parent | 741886a4c46fc02672da40bf9057b43454ad52cc (diff) | |
| download | serenity-e80396e04405af875330d024d10c8346cfd6f063.zip | |
Base: Add test page for testing weird flexbox combinations
Specifically, this is to help fix a bug with `position: absolute`
children of a flex-box still taking up space, when they should not.
| -rw-r--r-- | Base/res/html/misc/flex-2.html | 125 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 126 insertions, 0 deletions
diff --git a/Base/res/html/misc/flex-2.html b/Base/res/html/misc/flex-2.html new file mode 100644 index 0000000000..87e0ed8146 --- /dev/null +++ b/Base/res/html/misc/flex-2.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html> + +<head> + <title>Flex 2: Electric Boogaloo</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; + } + + .exception { + background: rgba(255, 0, 255, 0.5); + left: 50px; + top: 50px; + } + + .width-constrained .exception { + background: rgba(0, 255, 0, 0.5); + left: 200px; + } + </style> +</head> + +<body> + <h1>FlexBox Tests</h1> + <p>This tests whether flex-box behaves well with unusual children.</p> + <p>The boxes are width and height 100px.</p> + <h2>Row</h2> + <h3>Width unconstrained</h3> + <p>With a <code>position: absolute;</code> child</p> + <div class="my-container"> + <div class="box">1</div> + <div class="box exception" style="position: absolute;">Absolute</div> + <div class="box">2</div> + <div class="box">3</div> + </div> + <p>With a <code>position: fixed;</code> child</p> + <div class="my-container"> + <div class="box">1</div> + <div class="box exception" style="position: fixed;">Fixed</div> + <div class="box">2</div> + <div class="box">3</div> + </div> + <p>With a <code>position: relative;</code> child</p> + <div class="my-container"> + <div class="box">1</div> + <div class="box exception" style="position: relative;">Relative</div> + <div class="box">2</div> + <div class="box">3</div> + </div> + <p>With a <code>position: static;</code> child</p> + <div class="my-container"> + <div class="box">1</div> + <div class="box exception" style="position: static;">Static</div> + <div class="box">2</div> + <div class="box">3</div> + </div> + <p>With a <code>position: sticky;</code> child</p> + <div class="my-container"> + <div class="box">1</div> + <div class="box exception" style="position: sticky;">Sticky</div> + <div class="box">2</div> + <div class="box">3</div> + </div> + + <h3>Width constrained</h3> + <p>With a <code>position: absolute;</code> child</p> + <div class="my-container width-constrained"> + <div class="box">1</div> + <div class="box exception" style="position: absolute;">Absolute</div> + <div class="box">2</div> + <div class="box">3</div> + </div> + <p>With a <code>position: fixed;</code> child</p> + <div class="my-container width-constrained"> + <div class="box">1</div> + <div class="box exception" style="position: fixed;">Fixed</div> + <div class="box">2</div> + <div class="box">3</div> + </div> + <p>With a <code>position: relative;</code> child</p> + <div class="my-container width-constrained"> + <div class="box">1</div> + <div class="box exception" style="position: relative;">Relative</div> + <div class="box">2</div> + <div class="box">3</div> + </div> + <p>With a <code>position: static;</code> child</p> + <div class="my-container width-constrained"> + <div class="box">1</div> + <div class="box exception" style="position: static;">Static</div> + <div class="box">2</div> + <div class="box">3</div> + </div> + <p>With a <code>position: sticky;</code> child</p> + <div class="my-container width-constrained"> + <div class="box">1</div> + <div class="box exception" style="position: sticky;">Sticky</div> + <div class="box">2</div> + <div class="box">3</div> + </div> + + <div style="height: 2000px"></div> +</body> + +</html> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index 836a65012a..c6f410b2bd 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -100,6 +100,7 @@ <li><a href="lists.html">Lists</a></li> <li><a href="flex.html">Flexboxes</a></li> <li><a href="justify-content.html">Flexbox justify-content</a></li> + <li><a href="flex-2.html">Flexboxes with unusual children</a></li> <li><a href="inline-block.html">display: inline-block;</a></li> <li><a href="inline-block-link.html">link inside display: inline-block</a></li> <li><a href="padding-inline.html">inline elements with padding</a></li> |