Commit graph

45 commits

Author SHA1 Message Date
MacDue 4c5d48f861 LibWeb: Support transforms, stroking, gradients, etc for SVG <text>
This makes use of the new Gfx::Path::text() to handle SVG text elements,
with this text is just a regular path, and can be manipulated like any
other graphics element.

This removes the SVGTextPaintable and makes both <text> and geometry
elements use a new (shared) SVGPathPaintable. This is identical to the
old SVGGeometryPaintable. This simplifies painting as once something is
resolved to a Gfx::Path, the painting logic is the same.
2023-11-05 02:46:46 +01:00
Tobias Christiansen 3c41ac5ae4 Tests/LibWeb: Add object-{fit,position} test 2023-10-31 07:03:05 +01:00
MacDue dc9cb449b1 LibWeb: Store computed SVG path data/transforms in LayoutState
This removes the awkward hack to recompute the layout transform at paint
time, and makes it possible for path sizes to be computed during layout.

For example, it's possible to use relative units in SVG shapes (e.g.
<rect>), which can be resolved during layout, but would be hard to
resolve again during painting.
2023-10-30 19:44:54 +01:00
MacDue 3659149888 LibWeb: Fix stroke-opacity for stroked paths that use PaintStyles
Ref test included :)
2023-10-28 19:06:12 +02:00
Aliaksandr Kalenik 9f1e0209e8 Tests/LibWeb: Add missing test-shadow.html
Missing input file for e48b3b39cf
2023-10-26 10:56:30 +02:00
Aliaksandr Kalenik e48b3b39cf Tests/LibWeb: Add ref test for text-shadow
Based on Base/res/html/misc/text-shadow.html demo page.
2023-10-26 08:38:16 +02:00
MacDue 8eab44896a Tests/LibWeb: Add outer box-shadow ref test
This is a screenshot test based on a cut-down version of the box-shadow
demo page.
2023-10-22 18:38:22 +02:00
MacDue f0be812fc2 Tests/LibWeb: Add border-radius ref test
This is based on the border-radius.html demo page with text and most
assets removed. This has to be a screenshot based test as there's not
really something else that can be used for comparison.

This also makes the test a little incomplete as things like text
overflow clipping are not tested, but I'd like to avoid this test being
too brittle.
2023-10-21 23:16:17 +02:00
Bastiaan van der Plaat b640747116 LibWeb: Add canvas context2d roundRect 2023-10-20 07:20:29 +02:00
MacDue 43177fd2a1 Tests/LibWeb: Add a ref test for SVG mask with maskUnits=userSpaceOnUse 2023-10-09 07:28:18 +02:00
MacDue e9fd7c96af Tests/LibWeb: Add ref test for an SVG mask with mask-type: alpha 2023-10-09 07:28:18 +02:00
MacDue 8270b9ab7e LibWeb: Add simple ref test for SVG masking 2023-09-19 10:46:05 +02:00
Andreas Kling 1f69e9cddf LibWeb: Remove Layout::Node::m_visible and compute it on the fly
This fixes an issue where the value would be out of sync with reality
in anonymous wrapper block boxes, since we forgot to compute m_visible
after assigning the computed values to them.

Fixes #21106
2023-09-18 14:45:20 +02:00
Sam Atkins f0a4baabc7 LibWeb: Support quotes in content values
This adds initial support for `open-quote`, `close-quote`,
`no-open-quote` and `no-close-quote`. We don't yet track the "nesting
level" so we always use the first pair of quotes from the `quotes`
property.
2023-09-17 15:45:52 -06:00
Zaggy1024 4cc3c41269 LibWeb: Allow calculated values for background-size dimensions
This fixes the sizing of the arrow icons displayed to the left of
parent sections on a table of contents on Wikipedia articles, which
are sized using the equation `calc(max(0.75em, 12px))`. Now, the icon
will not expand past the edges of the box they are within, avoiding
clipping the edges of the arrows.
2023-09-15 08:40:10 +02:00
Sam Atkins 6bf107fc16 LibWeb: Implement the :open and :closed pseudo-classes
These apply to any elements that have some kind of open/closed state.
The spec suggests `<details>`, `<dialog>`, and `<select>`, so that's
what I've supported here. Only `<details>` is fleshed out right now,
but once the others are, these pseudo-classes should work
automatically. :^)
2023-09-13 19:55:22 +02:00
Sam Atkins e0fe77d012 LibWeb+headless-browser: Replace ref-test manifest with link tags
Each ref test now links to its reference page with a link tag, in the
same format as WPT:

`<link rel="match" href="reference-page.html" />`

The reference pages have all been moved into a separate `reference/` dir
so that we can just treat every file in `ref/` as a test. There's no
filter to only look at .html files, because we also have a .svg file in
there, and there may be other formats we want to use too. But it's not
too hard to add one if we need it.
2023-09-13 08:48:19 +02:00
Sam Atkins 07039af982 LibWeb: Implement attr() types :^)
Support the optional `<attr-type>` parameter to the `attr()` function,
which allows parsing the attribute's value as a variety of types,
instead of always as a string.
2023-09-05 14:27:23 +02:00
Sam Atkins bf8aa33b68 LibWeb: Add tests for basic attr() behavior and fallback values 2023-09-05 14:27:23 +02:00
Zaggy1024 50bb785306 Tests/LibWeb: Add a test for clipping text with CSS clip 2023-09-01 09:40:14 +02:00
MacDue 720c27efbd LibWeb: Ensure transform of SVG <use> updates with x and y attributes
Rather than modify the transform of the parent (which could change
independently), this adds a new override element_transform() where
element specific tranfroms can be applied. This will always stay in
sync with the attributes.

A ref test comparing a .svg and .html version of the same file is
added as due to differences in attribute parsing order, the .svg version
was previously drawn incorrectly.

Fixes #20859
2023-08-31 11:10:30 +02:00
MacDue e8342a5b79 Tests/LibWeb: Add ref test for border-radius shrink of zero sized box 2023-08-30 20:36:27 +02:00
Sam Atkins 240ec9aeed LibWeb: Treat invalid StyleValues that included var() as unset
This means StyleComputer::resolve_unresolved_style_value() always
returns a value, so we can change its return type.

However, it does still return an UnresolvedStyleValue sometimes, so we
can't remove those checks from the user code.
2023-08-26 15:33:45 +01:00
Sam Atkins 6b66e80fb8 LibWeb: Sort Ref/mainfest.json entries 2023-08-26 15:33:45 +01:00
Aliaksandr Kalenik c3f38c6cb8 Tests/LibWeb: Adjust "clip-abspos-children" ref-test to actually pass
Fixed the "clip-abspos-children" test which previously passed due to
black backgrounds on CI blending with the test's black borders.
2023-08-24 15:48:34 +02:00
Sam Atkins 82ccc49b52 LibWeb: Adjust ref-tests to reduce flakiness
These two ref-tests involve two boxes positioned in the same place, with
outlines. Outlines always have a border-radius, meaning that the corner
pixels are not 100% opaque. (It seems to be 254 instead of 255.) With
the test files painting two outlines, and the ref test only painting
one, slight changes in the background color of the page would make that
slight variation visible sometimes. So, let's avoid that inconsistency
by always painting one outline instead of two.
2023-08-24 13:46:28 +01:00
Aliaksandr Kalenik d06d4eb388 LibWeb: Apply "clip" property in apply_clip_overflow_rect()
Fixes bug when "clip" property does not affect abspos children.
This change makes "clip" property to be applied together with
"overflow: hidden" in `apply_clip_overflow_rect()` that already
handles abspos children correctly.
2023-08-23 15:49:06 +02:00
Sam Atkins 7bc5949e35 LibWeb: Implement the :placeholder-shown pseudo-class
This matches if the element has a placeholder, and that placeholder is
currently visible. This applies to `<input>` and `<textarea>` elements,
but our `<textarea>` is very limited so does not support placeholders.
2023-08-23 05:30:59 +02:00
Sam Atkins 9f5b1e6614 LibWeb: Implement the :read-only and :read-write pseudo-classes 2023-08-23 05:30:59 +02:00
Sam Atkins 3af8b491b4 LibWeb: Implement :any-link and :local-link pseudo-class selectors
`:any-link` matches links, whether they have been visited or not.

`:local-link` matches links to the current URL.
2023-08-23 05:30:59 +02:00
MacDue a98201f889 LibGfx: Nudge points away from the start point in radial gradients
Avoids a division by zero, and an incorrect pixel in some repeating
radial gradient cases.

(Ref tests updated)
2023-08-23 05:27:19 +02:00
MacDue f3a6fe256f Tests/LibWeb: Add a ref test for many wacky SVG radialGradients
Believe it or not, these are all correct (± a pixel), there meant to
look like that!
2023-08-22 20:25:57 +02:00
MacDue 4ad0ac465e Tests/LibWeb: Update reference for svg-gradient-spreadMethod.html 2023-08-22 20:25:57 +02:00
Aliaksandr Kalenik cca779e7f6 LibWeb: Treat grid items with z-index != auto as positioned elements 2023-08-22 11:33:24 +02:00
Aliaksandr Kalenik 95a8dec373 LibWeb: Treat grid item as it creates stacking context during painting
Grid specification https://www.w3.org/TR/css-grid-2/#z-order defines
special painting order for grid items which should be the same as for
defined for inline-blocks in CSS2.
2023-08-22 11:33:24 +02:00
Andreas Kling 0103940cee LibWeb: Resolve viewport-relative <img sizes> values
We still don't know how to resolve font-relative lengths in <img sizes>
since we don't always have font size information available at this stage
in the pipeline, but we can at least handle viewport-relative lengths.

This fixes an issue on many websites where low-resolution images were
loaded (appropriate for a small viewport) even when the viewport is big.
2023-08-21 13:56:18 +02:00
MacDue 8cef2f7be8 Tests/LibWeb: Add ref test for SVG gradients with various spreadMethods
Note: The final three gradients in this test are currently incorrectly
rendered.
2023-08-20 20:04:10 +02:00
0GreenClover0 f6c3ec3742 LibWeb: Add Base::apply_presentational_hints call to <symbol> element 2023-08-20 05:03:27 +02:00
MacDue 3a42ef4118 Tests/LibWeb: Add ref test for CSS gradients
This has to cheat and use a screenshot but thanks to the "Take Full
Screenshot" feature of Ladybird, it is very easy to update this test.

The steps are documented in the test.
2023-08-18 05:26:04 +02:00
Sam Atkins 12a2750d1e LibWeb: Support multiple values in :lang() selector
Parse them, and also don't give up completely if the first language
listed doesn't match an element.
2023-08-16 18:05:26 +02:00
Sam Atkins 631a988a57 LibWeb: Allow any valid <color> in CSS gradients
We now keep the color value as a StyleValue up until we go to paint the
gradient, which makes `currentColor` work, along with any other color
values that can't be immediately converted into a `Gfx::Color` while
parsing.
2023-08-16 14:51:12 +02:00
MacDue 4e49aee545 Tests/LibWeb: Add opacity-stacking.html test to manifest.json
(Also explicitly set the background color)
2023-08-14 23:52:53 +02:00
MacDue 9006c7aece LibWeb: Add ref test for opacity (stacking context) paint order
Now that we can test this, let's add a test, as mentioned in:
https://github.com/SerenityOS/serenity/pull/20559#issuecomment-1677126697

(I confirmed this test failed before #20559)
2023-08-14 22:42:25 +02:00
Andi Gallo a18500c78c LibWeb: Paint separate borders for inline tables 2023-08-14 15:12:19 +02:00
Aliaksandr Kalenik 0d66a80a0f headless-browser: Add ref tests support
The ref tests runner takes screenshots of both the input page and the
expected page, then compares them. Ref testing allows us to catch
painting bugs, which cannot be detected with the layout and text tests
we already have.

With ref tests, we'll likely want to reuse the same expectation page
for multiple inputs. Therefore, there's a `manifest.json` file that
describes the relationship between inputs and expected outputs.
2023-08-14 07:28:22 +02:00