Commit graph

370 commits

Author SHA1 Message Date
Andreas Kling
c4826eae4f LibWeb: Rename Layout::BlockBox => BlockContainer
There's a subtle difference here. A "block box" in the spec is a
block-level box, while a "block container" is a box whose children are
either all inline-level boxes in an IFC, or all block-level boxes
participating in a BFC.

Notably, an "inline-block" box is a "block container" but not a "block
box" since it is itself inline-level.
2021-10-06 20:10:36 +02:00
Andreas Kling
2494ce2bab LibWeb: Add CSS/Display.h 2021-10-06 19:30:14 +02:00
Andreas Kling
85a0772147 LibWeb: Start work towards modern CSS "display" values
Until now, we've internally thought of the CSS "display" property as a
single-value property. In practice, "display" is a much more complex
property that comes in a number of configurations.

The most interesting one is the two-part format that describes the
outside and inside behavior of a box. Switching our own internal
representation towards this model will allow for much cleaner
abstractions around layout and the various formatting contexts.

Note that we don't *parse* two-part "display" yet, this is only about
changing the internal representation of the property.

Spec: https://drafts.csswg.org/css-display
2021-10-06 19:12:52 +02:00
Andreas Kling
f2b626daba LibWeb: Add a handful of missing CSS "display" value identifiers 2021-10-06 17:14:22 +02:00
Sam Atkins
050823bea7 LibWeb: Fire MediaQueryListEvents when an MQL's match-state changes
The HTML event loop does a check for MQL match-state changes and
dispatches the events. This requires us to keep a list of MQLs on the
Document.
2021-10-05 18:51:39 +02:00
Sam Atkins
1c829e0417 LibWeb: Implement MediaQuery matching :^)
Currently, `evaluate()` recalculates whether the MediaQuery matches or
not, and stores it in `m_matches`, which users can query using
`matches()`. This allows us to know when the match-state changes, which
is required to fire MediaQueryList's change event.
2021-10-05 18:51:39 +02:00
Sam Atkins
f354fd72f1 LibWeb: Split Length::absolute_length_to_px() out from to_px()
In cases where we know the Length is absolute, we know we don't need to
pass in a Layout::Node or FontMetrics etc, and yet we were required to
before. Splitting it means jumping through less hoops that we don't have
to. :^)
2021-10-05 18:51:39 +02:00
Sam Atkins
de82764f2f LibWeb: Add identifiers used by MEDIAQUERIES-4
To avoid duplicating a lot of functionality, we're using StyleValues for
the values of media-features. So, we need their identifiers added here.
2021-10-05 18:51:39 +02:00
Sam Atkins
341c67453c LibWeb: Add resolved style lookup for border properties
The only one I didn't implement is `border` itself, because there isn't
an obvious sensible value for it if the borders are different.
2021-10-05 18:49:47 +02:00
Sam Atkins
a521c02db2 LibWeb: Add resolved style lookup for margin/padding shorthands 2021-10-05 18:49:47 +02:00
Sam Atkins
fc7af21c7c LibWeb: Make things aware of box-sizing
Of course, we don't actually *use* the box-sizing property yet, but the
value is applied and shows up in the computed style.
2021-10-05 18:49:47 +02:00
Andreas Kling
a31855ae10 LibWeb: Improve resolved style for CSS {min,max}-{width,height}
If the specified value for these properties is "none", we end up storing
it as an "undefined" CSS::Length in the computed values.

We need to convert it back into "none" for getComputedStyle().
2021-10-04 22:54:50 +02:00
Andreas Kling
c4be098b7d LibWeb: Remove pointless brackets from Length::to_string()
Since we expose these strings to web content via LengthStyleValue,
let's not have non-standard brackets in there to confuse anyone trying
to parse these values. :^)
2021-10-03 17:59:15 +02:00
Andreas Kling
956968d4b2 LibWeb: Make ColorStyleValue serialization spec compliant
[CSS Color 4] tells us to use either rgb() or rgba() notation, depending
on the color's alpha value.
2021-10-03 17:59:15 +02:00
Luke Wilde
17e56661db LibWeb: Have CSSStyleRule inherit from CSSRule in IDL
This also allows removing the cssText attribute being on CSSStyleRule.
2021-10-03 16:39:17 +02:00
Andreas Kling
3db847c64a LibWeb: Implement CSSRule and CSSStyleDeclaration serialization
There are a handful of FIXME's here, but this seems generally good.
Note that CSS *values* don't get serialized in a spec-compliant way
since we currently rely on StyleValue::to_string() which is ad-hoc.
2021-10-01 20:17:15 +02:00
Andreas Kling
918b0b4394 LibWeb: Add missing virtual/override/final in CSSStyleRule 2021-10-01 20:17:15 +02:00
Sam Atkins
bd648d082c LibWeb: Parse media queries! :^)
While not complete by any means, we are now compatible with the [level 3
spec](https://www.w3.org/TR/css3-mediaqueries/#syntax) and some parts of
[level 4.](https://www.w3.org/TR/mediaqueries-4#mq-syntax)

Compatibility with level 4+ requires:
- Implementing the range syntax: `(800px <= width <= 1200px)`
- Parsing `<general-enclosed>`, which represents syntax that is not yet
used but they may use in the future.
2021-10-01 20:03:03 +02:00
Sam Atkins
2ed0f880ee LibWeb: Add TokenStream::rewind_to_position()
Parsing media queries sometimes requires significant back-tracking, so
`reconsume_current_input_token()` was not good enough.
`rewind_to_position()` lets you reconsume an erbitrary number of tokens
to return to an earlier point in the stream, which you previously saved
from `TokenStream::position()`.
2021-10-01 20:03:03 +02:00
Sam Atkins
c7cd489689 LibWeb: Parse @media rules into CSSMediaRule objects
This is not yet actually useful, since we only have a stub for parsing
the query part, but now I have a nice way to test that things are
working. :^)
2021-10-01 20:03:03 +02:00
Sam Atkins
9c5430b9ee LibWeb: Make consume_a_qualified_rule() understand block tokens
This now matches the spec, and fixes the situation where if it was given
a TokenStream of StyleComponentValueRules, it would drop any Blocks on
the floor instead of adding them to the result StyleRule.
2021-10-01 20:03:03 +02:00
Sam Atkins
f1af136925 LibWeb: Make MediaQueryList store MediaQueries instead of a String 2021-10-01 20:03:03 +02:00
Sam Atkins
5bbbdb81dc LibWeb: Sketch out media-query parsing
This does everything except actually parse the individual media queries.
2021-10-01 20:03:03 +02:00
Sam Atkins
3e74c194f9 LibWeb: Add CSSMediaRule
This is the class corresponding to a `@media` rule. It contains a list
of media queries and a list of child css rules.
2021-10-01 20:03:03 +02:00
Sam Atkins
8ac622f056 LibWeb: Add MediaList
This is a list of MediaQuery objects. Not to be confused with
`MediaQueryList`, which is concerned with firing events when a media
query's match-state changes.
2021-10-01 20:03:03 +02:00
Sam Atkins
0a4d9c6d31 LibWeb: Partially implement MediaQuery class :^)
The main thing that's missing is the actual matching, but this is enough
to get started.
2021-10-01 20:03:03 +02:00
Luke Wilde
46686f7f94 LibWeb: Implement MediaQueryList.onchange 2021-10-01 01:35:30 +01:00
Nico Weber
6c9bc18a79 Userland: Fix typos 2021-10-01 01:18:52 +01:00
Andreas Kling
198bb322ef LibWeb: Fix null dereference when assigning an ImageStyleValue via JS
When parsing a CSS value in the context of a CSSStyleDeclaration
camelCase property setter, we don't necessarily have a Document to
provide the CSS parser for context.

So the parser can't go assuming that there's always a Document in the
ParsingContext. And ImageStyleValue can't go assuming that there's
always a Document either. This will require some more work to get things
right, I'm just patching up the null dereference for now.
2021-09-30 02:18:30 +02:00
Andreas Kling
d462a6720a LibWeb: Reimplement the <style> element following the spec
We now follow the "update a style block" algorithm from the HTML spec
instead of using the ad-hoc CSSLoader mechanism.

This necessitated improving our StyleSheet and CSSStyleSheet classes as
well, so that's baked into this commit.
2021-09-30 00:00:55 +02:00
Andreas Kling
6cda24097b LibWeb: Add the CSSStyleRule interface with some limited functionality 2021-09-30 00:00:55 +02:00
Andreas Kling
994e33b0f7 LibWeb: Implement most of CSSStyleRule.insertRule() 2021-09-29 21:21:57 +02:00
Andreas Kling
30d710a0a2 LibWeb: Add CSSStyleSheet.{insert,delete,remove}Rule() APIs
Note that insertRule() is really just a big TODO right now.
2021-09-29 21:21:57 +02:00
Andreas Kling
3a4565beec LibWeb: Make CSSRule and CSSRuleList available to JavaScript :^)
This patch makes both of these classes inherit from RefCounted and
Bindings::Wrappable, plus some minimal rejigging to allow us to keep
using them internally while also exposing them to web content.
2021-09-29 21:21:57 +02:00
Sam Atkins
0b23a20ad5 LibWeb: Add CSSConditionRule
https://www.w3.org/TR/css-conditional-3/#the-cssconditionrule-interface

This simply exposes a condition string, which is implemented differently
in each sub-class.
2021-09-29 18:57:48 +02:00
Sam Atkins
06f9395056 LibWeb: Add CSSGroupingRule
This is an abstract base class for CSSRules that hold a CSSRuleList.
2021-09-29 18:57:48 +02:00
Sam Atkins
eb83d2617c LibWeb: Use a CSSRuleList inside CSSStyleSheet
This better matches the spec. :^)
2021-09-29 18:57:48 +02:00
Sam Atkins
97a78cdd28 LibWeb: Add CSSRuleList
"The CSSRuleList interface represents an ordered collection of CSS style
rules." - https://www.w3.org/TR/cssom-1/#the-cssrulelist-interface
2021-09-29 18:57:48 +02:00
Luke Wilde
881e9d1341 LibWeb: Make StyleSheetList.item an IDL getter 2021-09-29 14:57:59 +01:00
Andreas Kling
0ab31d8c84 LibWeb: Support simplest form of CSSStyleDeclaration.setProperty()
This patch adds the setProperty(name, value) API to CSSStyleDeclaration.
Setting an invalid or empty value will cause the property to be removed
from the declaration.

Note that this only works on mutable declarations (i.e element.style)
and not on resolved declarations (i.e window.getComputedStyle(element)).
2021-09-26 19:07:03 +02:00
Andreas Kling
0ee457dfdf LibWeb: Provide a default DOM::EventTarget::dispatch_event()
All EventTarget subclasses except Window do the same exact thing in
their overrides, so let's just share an implementation in the base.
2021-09-25 23:36:43 +02:00
Andreas Kling
71f371f6b1 LibWeb: Ignore font-size: calc(...) for now
This doesn't work correctly in the new world where fonts are resolved
during the CSS cascade. Let's patch it out with a FIXME and get back to
it once everything has fallen into place.
2021-09-24 15:49:04 +02:00
Andreas Kling
f8dd3e14ba LibWeb: Rename CSS::StyleResolver => StyleComputer
Resolved style is a spec concept that refers to the weird mix of
computed style and used style reflected by getComputedStyle().

The purpose of this class is to produce the *computed* style for a given
element, so let's call it StyleComputer.
2021-09-24 15:12:15 +02:00
Andreas Kling
3dc6f0bc47 LibWeb: Absolutize internal lengths in all StyleValues
StyleValue now has a virtual visit_lengths() that allows us to update
all CSS lengths during the absolutization phase.
2021-09-24 15:12:15 +02:00
Andreas Kling
785ace4fc2 LibWeb: Remove on-demand font resolution
Fonts are now resolved as part of the CSS cascade.
2021-09-24 15:12:15 +02:00
Andreas Kling
1ca33598da LibWeb: Give DOM::Document some default style properties
Add StyleResolver::create_document_style() to help in creating an
"empty" style with nothing but default values.
2021-09-24 15:01:49 +02:00
Andreas Kling
23a08fd35a LibWeb: Start absolutizing lengths after performing the CSS cascade
Once we've performed the cascade on a set of values for an element,
we should have enough information to resolve/absolutize some lengths.

Basically, any CSS length that isn't "auto" or a percentage can be
turned into an absolute length (in pixels) as long as we have the
following information:

- The viewport rect
- The parent element's font
- The document element's font
- The element's own font

To ensure that we can absolutize lengths relative to the element's own
font, we now do a separate first pass where font-related properties are
defaulted (in the cascade spec sense of the word) and become usable.

There's a lot more work to do here, but this should open up a lot of
simplification in layout code, since it will no longer need to care
about relative lengths. Layout still needs to resolve percentages, since
we can't do that for some properties until the containing block
dimensions are known.
2021-09-24 15:01:49 +02:00
Andreas Kling
3d36e4d944 LibWeb: Rename "Computed" CSSStyleDeclaration => "Resolved"
The original name was based on the window.getComputedStyle() API.
However, "Computed" in "getComputedStyle" is actually a misnomer that
the platform is stuck with due to backwards compatibility.

What getComputedStyle() returns is actually a mix of computed and used
values. The spec calls it the "resolved" values. So let's call this
declaration subclass "ResolvedCSSStyleDeclaration" to match.
2021-09-24 15:01:49 +02:00
Sam Atkins
058d44dcae LibWeb: Replace last couple of StyleValue casts with as_foo() 2021-09-24 15:01:43 +02:00
Sam Atkins
a83b620fa6 LibWeb: Use new StyleValue API in StyleResolver
Less casts, more readable. :^)
2021-09-24 15:01:43 +02:00