From e80396e04405af875330d024d10c8346cfd6f063 Mon Sep 17 00:00:00 2001 From: Sam Atkins Date: Wed, 15 Sep 2021 11:46:01 +0100 Subject: [PATCH] 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. --- Base/res/html/misc/flex-2.html | 125 ++++++++++++++++++++++++++++++++ Base/res/html/misc/welcome.html | 1 + 2 files changed, 126 insertions(+) create mode 100644 Base/res/html/misc/flex-2.html 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 @@ + + + + + Flex 2: Electric Boogaloo + + + + +

FlexBox Tests

+

This tests whether flex-box behaves well with unusual children.

+

The boxes are width and height 100px.

+

Row

+

Width unconstrained

+

With a position: absolute; child

+
+
1
+
Absolute
+
2
+
3
+
+

With a position: fixed; child

+
+
1
+
Fixed
+
2
+
3
+
+

With a position: relative; child

+
+
1
+
Relative
+
2
+
3
+
+

With a position: static; child

+
+
1
+
Static
+
2
+
3
+
+

With a position: sticky; child

+
+
1
+
Sticky
+
2
+
3
+
+ +

Width constrained

+

With a position: absolute; child

+
+
1
+
Absolute
+
2
+
3
+
+

With a position: fixed; child

+
+
1
+
Fixed
+
2
+
3
+
+

With a position: relative; child

+
+
1
+
Relative
+
2
+
3
+
+

With a position: static; child

+
+
1
+
Static
+
2
+
3
+
+

With a position: sticky; child

+
+
1
+
Sticky
+
2
+
3
+
+ +
+ + + 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 @@
  • Lists
  • Flexboxes
  • Flexbox justify-content
    • +
  • Flexboxes with unusual children
  • display: inline-block;
  • link inside display: inline-block
  • inline elements with padding