diff options
| author | Enver Balalic <balalic.enver@gmail.com> | 2022-03-31 22:11:38 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-04-02 18:40:32 +0200 |
| commit | 58398b1e127f1428261f4b86230c411573fb6426 (patch) | |
| tree | aeac1a6a98a80c64ce8f022ccd6f71ca301056fa /Base/res | |
| parent | 2377344a892b73258dbcb9ebe327e9356216f8bc (diff) | |
| download | serenity-58398b1e127f1428261f4b86230c411573fb6426.zip | |
LibWeb: Implement the flex order CSS property
Adds support for the flex order property and a test page for it
on the browser welcome page.
Diffstat (limited to 'Base/res')
| -rw-r--r-- | Base/res/html/misc/flex-order.html | 99 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 100 insertions, 0 deletions
diff --git a/Base/res/html/misc/flex-order.html b/Base/res/html/misc/flex-order.html new file mode 100644 index 0000000000..c0f328934e --- /dev/null +++ b/Base/res/html/misc/flex-order.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html> + +<head> + <title>Flex</title> + <style> + .my-container { + display: flex; + border: 1px solid salmon; + } + + .box { + width: 100px; + height: 100px; + border: 1px solid black; + } + + .inline { + display: inline-block + } + </style> +</head> + +<body> +<p>2/0/1</p> +<div class="my-container" style="width: 500px;"> + <div class="box" style="order: 2;flex: 80% 0 4;">1</div> + <div class="box" style="order: 0;flex: 80% 0 1;">2</div> + <div class="box" style="order: 1;flex: 80% 0 0;">3</div> +</div> +<p>2/0/1 - reverse</p> +<div class="my-container" style="flex-direction: row-reverse; width: 500px;"> + <div class="box" style="order: 2;flex: 80% 0 4;">1</div> + <div class="box" style="order: 0;flex: 80% 0 1;">2</div> + <div class="box" style="order: 1;flex: 80% 0 0;">3</div> +</div> +<p>2/<>/1</p> +<div class="my-container" style="width: 500px;"> + <div class="box" style="order: 2;flex: 80% 0 4;">1</div> + <div class="box" style="flex: 80% 0 1;">2</div> + <div class="box" style="order: 1;flex: 80% 0 0;">3</div> +</div> +<p>2/<>/1 - reverse</p> +<div class="my-container" style="flex-direction: row-reverse; width: 500px;"> + <div class="box" style="order: 2;flex: 80% 0 4;">1</div> + <div class="box" style="flex: 80% 0 1;">2</div> + <div class="box" style="order: 1;flex: 80% 0 0;">3</div> +</div> +<p>2/0/<></p> +<div class="my-container" style="width: 500px;"> + <div class="box" style="order: 2;flex: 80% 0 4;">1</div> + <div class="box" style="order: 0;flex: 80% 0 1;">2</div> + <div class="box" style="flex: 80% 0 0;">3</div> +</div> +<p><>/0/1</p> +<div class="my-container" style="width: 500px;"> + <div class="box" style="flex: 80% 0 4;">1</div> + <div class="box" style="order: 0;flex: 80% 0 1;">2</div> + <div class="box" style="order: 1;flex: 80% 0 0;">3</div> +</div> +<p><>/1/<></p> +<div class="my-container" style="width: 500px;"> + <div class="box" style="flex: 80% 0 4;">1</div> + <div class="box" style="order: 1;flex: 80% 0 1;">2</div> + <div class="box" style="flex: 80% 0 0;">3</div> +</div> +<p><>/0/<></p> +<div class="my-container" style="width: 500px;"> + <div class="box" style="flex: 80% 0 4;">1</div> + <div class="box" style="order: 0;flex: 80% 0 1;">2</div> + <div class="box" style="flex: 80% 0 0;">3</div> +</div> +<p>1/1/<></p> +<div class="my-container" style="width: 500px;"> + <div class="box" style="order: 1;flex: 80% 0 4;">1</div> + <div class="box" style="order: 1;flex: 80% 0 1;">2</div> + <div class="box" style="flex: 80% 0 0;">3</div> +</div> +<p>3/-1/-2</p> +<div class="my-container" style="width: 500px;"> + <div class="box" style="order: 3;flex: 80% 0 4;">1</div> + <div class="box" style="order: -1;flex: 80% 0 1;">2</div> + <div class="box" style="order: -2;flex: 80% 0 0;">3</div> +</div> +<p>-2/3/<></p> +<div class="my-container" style="width: 500px;"> + <div class="box" style="order: -2;flex: 80% 0 4;">1</div> + <div class="box" style="order: 3;flex: 80% 0 1;">2</div> + <div class="box" style="flex: 80% 0 0;">3</div> +</div> +<p><>/-1/<></p> +<div class="my-container" style="width: 500px;"> + <div class="box" style="flex: 80% 0 4;">1</div> + <div class="box" style="order: -1;flex: 80% 0 1;">2</div> + <div class="box" style="flex: 80% 0 0;">3</div> +</div> +</body> + +</html> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index 318093c6b7..c2bc0319e0 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -117,6 +117,7 @@ <li><a href="border-radius.html">Border-Radius</a></li> <li><a href="lists.html">Lists</a></li> <li><a href="flex.html">Flexboxes</a></li> + <li><a href="flex-order.html">Flexbox order</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> |