Commit graph

41 commits

Author SHA1 Message Date
Andreas Kling
847b232680 LibHTML: Divide the "line spacing" evenly between lines of text
Before this patch, all of the excess spacing caused by line-height was
"padding" the line boxes below the text.

To fix this, we make line box fragments use the font height as their
height, and then let the inline layout algorithm adjust the Y positions
to distribute the vertical space.
2019-11-25 18:14:52 +01:00
Andreas Kling
c628ebda0f LibHTML: Use floating point numbers throughout the layout tree 2019-11-18 16:30:18 +01:00
Andreas Kling
b08de46480 LibHTML: Implement basic 'max-width' and 'min-width' support
These CSS properties constrain the computed width of a block-level box
to a maximum, followed by a minimum value.

This makes the "better mother fricken website" look more like it's
intended to (which helps makes the author's point, I suppose.)
2019-11-18 12:26:08 +01:00
Andreas Kling
f3f0b08d43 LibHTML: Build some foundation for text selection
Add LayoutPosition and LayoutRange classes. The layout tree root node
now has a selection() LayoutRange. It's essentially a start and end
LayoutPosition.

A LayoutPosition is a LayoutNode, and an optional index into that node.
The index is only relevant for text nodes, where it's the character
index into the rendered text.

HtmlView now updates the selection start/end of the LayoutDocument when
clicking and dragging with the left mouse button.

We don't paint the selection yet, and there's no way to copy what's
selected. It only exists as a LayoutRange.
2019-11-05 22:13:26 +01:00
Andreas Kling
3bd29ad98c LibHTML: Remove trailing whitespace in line boxes
After the splitting-into-lines pass, remove any trailing whitespace
from all of a block's line boxes.

This improves the appearance of text-align: justify/right :^)
2019-10-20 17:20:20 +02:00
Andreas Kling
eb77e680ed LibHTML: Implement "text-align: justify"
In order for this to work nicely, I made the line box classes use float
instead of int for its geometry information.

Justification works by distributing all of the whitespace on the line
(including the trailing whitespace before the line break) evenly across
the spaces in-between words.

We should probably use floating point (or maybe fixed point?) for all
the layout metrics stuff. But one thing at a time. :^)
2019-10-20 12:55:55 +02:00
Andreas Kling
5e29238a49 LibHTML: Make "children are inline" flag imperative
Instead of computing whether a block's children are inline based on the
first child, make it an imperatively-set flag.

This gives us some flexibility to ignore things like text nodes inside
a <table>, for example. I'm still unsure what the "correct" way to deal
with those will be. We'll find out sooner or later. :^)
2019-10-17 23:39:31 +02:00
Andreas Kling
6dbba6ad85 LibHTML: Implement CSS text-align: left/center/right
This was easier than I imagined; we just shift each line box to the
left based on the alignment and the remaining space on each line. :^)
2019-10-16 20:32:17 +02:00
Andreas Kling
38b55ee067 LibHTML: LayoutBlock::hit_test() was calling the wrong parent class
Oops, we now need to call LayoutBox instead of LayoutNode for blocks
with non-inline children.
2019-10-15 22:02:58 +02:00
Andreas Kling
110b2d52f2 LibHTML: Fix missing backgrounds an borders after LayoutBox refactoring
The render() implementation in both LayoutBlock and LayoutBox need to
be calling the immediate parent class. :^)
2019-10-15 19:12:56 +02:00
Andreas Kling
4814253589 LibHTML: Introduce LayoutBox and LayoutNodeWithStyleAndBoxModelMetrics
To streamline the layout tree and remove irrelevant data from classes
that don't need it, this patch adds two new LayoutNode subclasses.

LayoutNodeWithStyleAndBoxModelMetrics should be inherited by any layout
node that cares about box model metrics (margin, border, and padding.)
LayoutBox should be inherited by any layout node that can have a rect.

This makes LayoutText significantly smaller (from 140 to 40 bytes) and
clarifies a lot of things about the layout tree.

I'm also adding next_sibling() and previous_sibling() overloads to
LayoutBlock that return a LayoutBlock*. This is okay since blocks only
ever have block siblings.

Do also note that the semantics of is<T> slightly change in this patch:
is<T>(nullptr) now returns true, to facilitate allowing to<T>(nullptr).
2019-10-15 16:48:38 +02:00
Andreas Kling
3309bdf722 LibHTML: Add some convenient geometry getters on LayoutNode
Add x(), y(), size() and position() and use them around the codebase.
2019-10-13 18:47:16 +02:00
Andreas Kling
44979ad7a5 LibHTML: Fix broken line splitting behavior in LayoutReplaced
Replaced elements will now properly create line breaks when they use up
the available horizontal space.

This fixes an issue with <img>'s lining up instead of breaking.
2019-10-13 18:47:16 +02:00
Andreas Kling
2530378f59 LibHTML+Browser: Add debug option to draw borders around line boxes
This will be very useful when debugging line layout.
2019-10-12 15:02:53 +02:00
Andreas Kling
6242459c0f LibHTML: Implement the <br> element for line breaking
The <br> element will produce a special LayoutBreak node in the layout
tree, which forces a break in the line layout whenever encountered.

This patch also makes LayoutBlock use the current line-height as the
minimum effective height for each line box. This ensures that having
multiple <br> elements in a row doesn't create 0-height line boxes.
2019-10-12 13:47:49 +02:00
Andreas Kling
724754e39a LibHTML: LayoutBlock::children_are_inline() should check is_inline()
Instead of asking if the first child is not a block, ask if it thinks
it's inline.
2019-10-11 23:23:48 +02:00
Andreas Kling
f5bf8f6380 LibHTML: Add LayoutNode classes for "display: list-item" and its marker
This patch removes the hard-coded hack for "display: list-item" from
LayoutBlock and adds LayoutListItem and LayoutListItemMarker.

Elements with "display: list-item" now generate a LayoutListItem, which
may then also generate a LayoutListItemMarker if appropriate. :^)
2019-10-11 23:16:53 +02:00
Andreas Kling
fdbad6284c LibHTML: Implement the <blink> element
Just in time for Serenity's 1st birthday, here is the <blink> element!

This patch adds a bunch of different mechanisms to enable partial
repaints of the layout tree (LayoutNode::set_needs_display()))
It also adds LayoutNode::is_visible(), which can be toggled to prevent
a LayoutNode from rendering anything (it still takes up space though.)
2019-10-09 21:25:29 +02:00
Andreas Kling
31ac19543a LibHTML: Use an enum for CSS property ID's
Instead of using string everywhere, have the CSS parser produce enum
values, since they are a lot nicer to work with.

In the future we should generate most of this code based on a list of
supported CSS properties.
2019-10-08 15:35:05 +02:00
Andreas Kling
749e3f0f30 LibHTML: Add LayoutNodeWithStyle class, make LayoutText style-less
Since LayoutText always inherits style, it shouldn't store any style of
its own. This patch adds a LayoutNodeWithStyle class to sit between
LayoutNode and everyone who wants to inherit from LayoutNode except
LayoutText :^)

Since LayoutText can never have children, we also know that the parent
of any LayoutNode is always going to be a LayoutNodeWithStyle.
So this patch makes LayoutNode::parent() return LayoutNodeWithStyle*.
2019-10-07 10:56:44 +02:00
Andreas Kling
15f3e64862 LibHTML: Rename "style_properties" to "style" everywhere 2019-10-07 10:56:44 +02:00
Andreas Kling
847072c2b1 LibHTML: Respect the link color set via <body link>
The default style for "a" tags now has { color: -libhtml-link; }.
We implement this vendor-specific property by querying the containing
document for the appropriate link color.

Currently we only use the basic link color, but in the future this can
be extended to remember visited links, etc.
2019-10-06 10:25:08 +02:00
Andreas Kling
48f43a7429 LibHTML: Anonymous blocks *should* inherit some properties
Okay, I got that a bit wrong. Here's what CSS 2.1 says:

"The properties of anonymous boxes are inherited from the enclosing
non-anonymous box. Non-inherited properties have their initial value."

This patch implements a better behavior by only copying the inherited
properties from the parent style.
2019-10-05 23:47:06 +02:00
Andreas Kling
9858e2632c LibHTML: Let's not have anonymous blocks inherit their parent's style
This was introducing a bunch of unwanted margins.
2019-10-05 23:29:01 +02:00
Andreas Kling
ee567cdc3d LibHTML: Implement basic layout for inline <img alt>
LayoutReplaced objects can now participate in inline layout.

It's very hackish, but basically LayoutReplaced will just add itself to
the last line in the containing block.

This patch gets rid of the idea that only LayoutInline subclasses can
be split into lines, by moving the split_into_lines() virtual up to
LayoutNode and overriding it in LayoutReplaced.
2019-10-05 23:29:01 +02:00
Andreas Kling
319f0d2d18 LibHTML: Render list markers in the same color as text 2019-10-05 10:27:59 +02:00
Andreas Kling
a7ca719c4e LibHTML: Rename LayoutNode::style_properties() to LayoutNode::style() 2019-10-04 15:56:36 +02:00
Andreas Kling
9c0e9a1a20 LibHTML: Rename ComputedStyle to BoxModelMetrics
There was nothing left in ComputedStyle except the box model metrics,
so this patch gives it a more representative name.

Note that style information is fetched directly from StyleProperties,
which is basically the CSS property name/value pairs that apply to
an element.
2019-10-04 15:50:50 +02:00
Andreas Kling
4e35bbffdd LibHTML: LayoutText should always use parent's style properties
This patch makes StyleProperties heap-allocated and ref-counted so that
a LayoutNode can be without one. The ref-counting also allows anonymous
blocks to share style with their parent block.

LayoutText never needs a StyleProperties, since text always inherits
style from its parent element. This is handled by style_properties().
2019-10-04 12:12:39 +02:00
Andreas Kling
1d65cf367f LibHTML: Rewrite inline and text layout
Inline layout is now done by LayoutBlock. Blocks with inline children
will split them into line boxes during layout.

A LayoutBlock can have zero or more LineBox objects. Each LineBox
represents one visual line.

A LineBox can have any number of LineBoxFragment children. A fragment
is an offset+length into a specific LayoutNode.

To paint a LayoutBlock with inline children, we walk its line boxes,
and walk their fragments, painting each fragment at a time by calling
LineBoxFragment::render(), which in turn calls the LayoutNode via
LayoutText::render_fragment(). Hit testing works similarly.

This is very incomplete and has many bugs, but should make it easier
for us to move forward with this code.
2019-10-03 15:20:13 +02:00
Sergey Bugaev
6491493e26 LibHTML: Hide debugging output unless HTML_DEBUG is defined 2019-09-28 18:29:42 +02:00
Sergey Bugaev
235dee8c42 LibHTML: Implement rendering 2019-09-28 18:29:42 +02:00
Sergey Bugaev
fa876320eb LibHTML: Fix LayoutBlock vertical position & height computations 2019-09-28 18:29:42 +02:00
Sergey Bugaev
756bdb2a42 LibHTML: Fix moving inline elements to unrelated block elements
LayoutBlock::inline_wrapper() is supposed to return an inline wrapper,
a special anonymous block element intended to wrap inline children of
a block element that also has block children. Add a check for whether
the existing block child element is anonymous (refers to a DOM node),
and if it's not create a new anonymous wrapper.
2019-09-28 18:29:42 +02:00
Sergey Bugaev
fd0aa5dd43 LibHTML: Get rid of the style tree
We now create a layout tree directly from the DOM tree.
This way we don't actually lose text nodes ^)
2019-09-28 18:29:42 +02:00
Andreas Kling
fc43cf929d LibHTML: Implement basic block height computation
..and add vertical box properties to the layout tree dumps.
2019-08-18 08:39:52 +02:00
Andreas Kling
70eca3b500 LibHTML: Finish the block width calculation
Also add horizontal box values to the layout tree dump.
2019-08-18 08:39:52 +02:00
Andreas Kling
e423bb4901 LibHTML: A tiny bit of work towards block layout. 2019-07-26 08:05:14 +02:00
Andreas Kling
f88c5860df LibHTML: Fetch the box edge values needed for block width computation. 2019-07-24 07:34:07 +02:00
Andreas Kling
fc127eb769 LibHTML: Create anonymous blocks around inline children of blocks. 2019-07-08 17:42:23 +02:00
Andreas Kling
04b9dc2d30 Libraries: Create top level directory for libraries.
Things were getting a little crowded in the project root, so this patch
moves the Lib*/ directories into Libraries/.
2019-07-04 16:16:50 +02:00
Renamed from LibHTML/Layout/LayoutBlock.cpp (Browse further)