Commit graph

204 commits

Author SHA1 Message Date
davidot
ba5bcb67a5 LibWeb: Implement the HostEnsureCanAddPrivateElement JS hook
Also added a local test for ensuring this behavior since it is unique to
browsers. Since we don't actually use WindowProxy anywhere yet we just
test on location for now.
2022-08-27 20:33:27 +01:00
martinfalisse
a7f5b6b15b Base: Add display grid test page 2022-08-25 13:47:48 +02:00
MacDue
be9d3f9aa4 Base: Add an example linear-gradient with double-position color stops 2022-08-23 01:02:49 +02:00
MacDue
d26203ff90 Base: Add some repeating-linear-gradient() examples 2022-08-18 15:58:05 +02:00
Sam Atkins
9075dea3a8 Base: Add a test page for Path2D
Neither of the tests here actually passes properly right now. It's a
little more aspirational...

In the first one, the circle draws in the wrong place due apparently to
existing bugs in `CanvasRenderingContext2D::ellipse()`.

In the second, I just haven't yet implemented creating a Path2D from an
SVG path string, because that's going to take a fair bit of untangling
first.
2022-08-14 11:30:40 +02:00
martinfalisse
eef0edae7a Base: Clean up Clip test page after absolutely positioned divs fix
Clean up the Clip test page after adding the logic necessary so that
absolutely positioned divs are correctly positioned.
2022-08-14 11:22:52 +02:00
MacDue
c5d1cf7a5a Base: Add some more linear-gradient() transition hint demos
This adds a demo of making a 'rainbow' with hard edges using
transition hints, along with an animated demo of moving the
transition hint.
2022-08-12 12:24:15 +02:00
MacDue
4f83b70c7f Base: Remove modifications from fancy progress bar demo
This restores the demo to being the same as on css-tricks.com.
2022-08-12 12:24:15 +02:00
MacDue
613feb1854 Base: Replace linear-gradient() pattern demo with cooler one
The previous demo didn't work that well, not due to any LibWeb
issue (same in other browsers), it just was a broken demo.

This demo shows the neat tricks you can do with linear-gradient()s
much better.
2022-08-08 21:56:08 -04:00
MacDue
ff6f56ef7a Base: Add linear-gradient + background-size demo 2022-08-08 22:39:06 +02:00
MacDue
4b9c0aac7a Base: Add linear-gradient list-marker demo 2022-08-08 22:39:06 +02:00
MacDue
da79883b60 Base: Add the styled progress bar demo from css-tricks.com
See: https://css-tricks.com/html5-progress-element/ this is a neat
demo of a pure CSS progress bar that makes use of linear-gradients,
background-repeat, and background-size. All of which now work :^)
2022-08-08 22:39:06 +02:00
Tom
4d1ceaaa43 Base: Add test page for CSS clip property 2022-08-07 22:40:11 +02:00
MacDue
6dd854faec Base: Add an example -webkit-linear-gradient() 2022-08-07 20:47:31 +02:00
MacDue
43ebe5ca75 Base: Add some more border-radius test cases
* A border-radius + a border on a <img> tag
   - The border-radius on the <img> should shrink to line up with
     the border.
* A border-radius + a border on a div with overflow: hidden
   - The clipping border-radius should shrink (same as the image).
2022-07-26 23:56:29 +01:00
MacDue
a75d5e1b77 Base: Remove some unnecessary styling from progressbar.html
The button color here now just creates issues on dark themes,
and the margin on the progress bar does nothing.
2022-07-24 13:31:01 +01:00
MacDue
bc29161bac Base: Add some more progress bar demos
This adds an example of a progress bar with just `appearance none`,
and one with `appearance none` and some custom styling.
2022-07-23 01:45:49 +02:00
MacDue
c12c9eed38 Base: Add some more border-radius test cases
This adds a test for overflow: hidden + border-radius clipping
child positioned elements, and child backgrounds.
2022-07-19 15:00:59 +02:00
MacDue
4978f388c2 Base: Add some more fun gradient demos
Adds tests for:
- Multi-stop gradient at arbitrary angles (CPU brr)
- Default/calculated color stops
- to <corner>
- Pre-multiplied alpha mixing
2022-07-18 10:10:22 +01:00
MacDue
452dc544bc Base: Add simple gradients test page 2022-07-17 20:11:38 +01:00
MacDue
b6f2ba6917 Base: Example of border-radius on iframe and canvas elements 2022-07-04 23:09:06 +02:00
MacDue
304e0966aa Base: Add some border-radius + overflow: hidden HTML examples 2022-07-04 23:09:06 +02:00
MacDue
b21d95bbe3 Base: Move fun canvas demo JavaScript to seperate file
This will allow this demo to be reused for other tests.
2022-07-04 23:09:06 +02:00
MacDue
2ee7c44036 Base: Add some background-clip + border-radius HTML examples 2022-07-04 11:12:44 +02:00
Linus Groh
3c9bf1e161 Base: Add example for calc(<percentage> - <length>) to calc.html
`calc(<percentage> + -<length>)` did work before, but a direct
`calc(<percentage> - <length>)` was broken. Let's have a test for both.
2022-06-30 12:11:57 +01:00
Linus Groh
b3a22c97cd Base: Fix label/actual style mismatches in calc.html 2022-06-30 12:11:57 +01:00
Luke Wilde
62491cda0b LibWeb: Use CSO if running script is null in HostPromiseRejectionTracker 2022-06-29 21:21:50 +01:00
Xexxa
b691269912 Base+Browser+BrowserSettings: Add default page for new tab 2022-06-26 22:18:30 +01:00
MacDue
f807fe6f6c Base: Add box-shadow + border-radius HTML examples
This now also shows the same box-shadows on the right on top of a
background to test the clipping underneath the content.
2022-06-23 19:13:24 +01:00
kleines Filmröllchen
bca0e31cba Base: Optimize a bunch of PNGs
These all save at least a couple of kilobytes.
2022-06-18 21:58:43 +04:30
MacDue
68bc742d9e Base: Add <img> tag + border-radius HTML example 2022-06-16 10:28:07 +01:00
MacDue
51899751d7 Base: Add background-image + border-radius HTML examples 2022-06-16 10:28:07 +01:00
Thomas Fach-Pedersen
626e7a5c7f LibWeb: Test parsing of CSS Level 4 rgb and hsl syntax 2022-06-15 19:10:43 +01:00
MacDue
4e21835e70 Base: Add an elliptical outline border HTML example 2022-06-14 00:25:12 +01:00
Luke Wilde
076c9772a4 LibWeb: Add ability to present LibGL framebuffer and add clearing 2022-06-13 21:45:27 +01:00
MacDue
16c4b606f6 Base: Add some elliptical border radius HTML examples 2022-06-13 09:43:45 +01:00
kleines Filmröllchen
a7a5721149 LibWeb: Dispatch mouse events to topmost element instead of hit target
This improves our spec compliance by allowing the user to click
non-element nodes (like text) and having the click be registered with
the parent element (like a div or button). This makes Fandom's cookie
accept button work if you click the text. Additionally, the events test
page contains a test to check the target element, which would previously
not exist when we fired the event at a non-element.
2022-06-05 22:31:06 +01:00
Karol Kosek
a232395b77 LibWeb: Check recursively if CSS functions contain var() or attr()
Previously, `var()` inside functions like `rgb()` wasn't resolved.

This will set the background color for badges in the New category on
https://ports.serenityos.net. :^)
2022-06-02 22:31:41 +02:00
Rafał Babiarz
4fcdbd57e9 Base: Add test page for Web Storage API 2022-05-28 23:54:06 +01:00
Sam Atkins
7c91fda088 LibWeb: Allow multiple text-decoration-lines
The spec grammar for `text-decoration-line` is:

`none | [ underline || overline || line-through || blink ]`

Which means that it's either `none`, or any combination of the other
values. This patch makes that parse for `text-decoration-line` and
`text-decoration`, stores the results as a Vector, and adjusts
`paint_text_decoration()` to run as a loop over all the values that are
provided.

As noted, storing a Vector of values is a bit wasteful, as they could be
stored as flags in a single `u8`. But I was getting too confused trying
to do that in a nice way.
2022-04-14 21:54:10 +02:00
Simon Wanner
5ebcb15c92 Base: Add a test page for CSS font-face 2022-04-09 23:48:18 +02:00
Enver Balalic
747f347b75 LibWeb: Implement flex reverse layouts
This builds on the work done by implementing the flex order CSS
property and implements flex reverse layouts by just reversing
the order and the items within each order bucket.
2022-04-02 19:01:14 +02:00
Enver Balalic
58398b1e12 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.
2022-04-02 18:40:32 +02:00
Linus Groh
b64080a913 Base: Add a <noscript> test page 2022-03-31 17:08:38 +02:00
Enver Balalic
8b4d09932a LibWeb: Fix sizing of flex child that has flex-basis 0
Before if an element didn't have a main min size we would clamp
it to a literal zero. If that element also had a flex-basis 0
it's width would end up being 0.
This patch adds a determine_min_main_size_of_child function that
will calculate the minimum main size for the box based on the
content of the box.
We use the result of that function now instead of clamping
the element main min size to 0.

This also adds one more box to the flex.html test page, which is
the same flex: 0 0 0 box but with flex-direction: column.
2022-03-30 21:16:47 +02:00
Daniel Glazman
fdf1c3c2f1 LibWeb: More tests for attribute selectors 2022-03-29 18:53:20 +02:00
Karol Kosek
55ac11a0ae Base: Add inline properties to custom-properties test page 2022-03-26 17:30:49 +01:00
Andreas Kling
6cffabef03 LibWeb: Support CSS vertical-align values "top" and "bottom" 2022-03-24 22:57:01 +01:00
Sam Atkins
c914e732d2 LibWeb+Base: Fix An+B of foo parsing
When I wrote the An+B parser, it was guaranteed to have no
non-whitespace tokens after it. This is no longer true with the `of
foo` syntax, so this patch corrects the logic when there is no `+B`
segment.

This makes this case shown on Twitter work correctly. :^)
https://twitter.com/simevidas/status/1506657566012678151
2022-03-24 18:08:45 +01:00
Sam Atkins
4d8789b173 Base: Add a text-shadow test page 2022-03-24 18:08:34 +01:00