diff options
| author | Andreas Kling <kling@serenityos.org> | 2020-05-05 16:06:22 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2020-05-05 16:18:28 +0200 |
| commit | e73ad78ba6097884003cafd626063551c390cb68 (patch) | |
| tree | 3887f0a7370118d0e822a9d801ff0f302c0dceac /Base/home/anon | |
| parent | 0a1ecbec48185af09ceca220f0ae4a73385b06cf (diff) | |
| download | serenity-e73ad78ba6097884003cafd626063551c390cb68.zip | |
LibWeb: Add support for "display: inline-block"
This display type is implemented using a LayoutBlock that is_inline().
Basically it behaves like a block internally, and its children are laid
out in the normal block layout fashion. Externally however, it behaves
like an atomic inline-level box.
Layout of inline-block boxes happens in three stages:
1. The outer dimensions of the block are computed during the recursive
normal layout pass. We skip positioning, but lay out children.
2. Later on, during line layout in the *containing block*, the inline
block now contributes a linebox fragment. When linebox fragments are
positioned, we learn the final position of the inline block. That's
when we set the inline block's position.
3. We re-layout the inline block's children once again. This is done to
make sure they end up in the right position. The layout tree doesn't
use relative offsets, so after we position the inline block in (2),
its children will not have its positions updated. Relayout moves
all children of inline blocks to the right place.
This is a rather naive approach but it does get the basic behavior into
place so we can iterate on it. :^)
Diffstat (limited to 'Base/home/anon')
| -rw-r--r-- | Base/home/anon/www/inline-block.html | 20 | ||||
| -rw-r--r-- | Base/home/anon/www/welcome.html | 1 |
2 files changed, 21 insertions, 0 deletions
diff --git a/Base/home/anon/www/inline-block.html b/Base/home/anon/www/inline-block.html new file mode 100644 index 0000000000..72ecf0d099 --- /dev/null +++ b/Base/home/anon/www/inline-block.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>display: inline-block</title> +<style> +div { + display: inline-block; + width: 200px; + height: 100px; + margin: 20px; + border: 1px solid black; +} +</style> + </head> + <body> + <div>Hello friends! This <b>div</b> has <b>display: inline-block</b> :^)</div> + <div>Hello friends! That means its laid out like a block on the inside.</div> + <div>Hello friends! But it acts like an atomic inline box on the outside!</div> + </body> +</html> diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html index d9ed0eb87a..2fffcb8f6c 100644 --- a/Base/home/anon/www/welcome.html +++ b/Base/home/anon/www/welcome.html @@ -28,6 +28,7 @@ span#ua { <p>Your user agent is: <b><span id="ua"></span></b></p> <p>Some small test pages:</p> <ul> + <li><a href="inline-block.html">display: inline-block; test</a></li> <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li> <li><a href="pngsuite_siz_png.html">pngsuite odd sizes test</a></li> <li><a href="pngsuite_bas_png.html">pngsuite basic formats test</a></li> |