| Age | Commit message (Collapse) | Author |
|---|
|
|
|
- Use the border box of the floated element when testing if something
needs to flow around it.
- Take the floated element's containing block size into account (instead
of the BFC root) when calculating available space on a line where a
right-side float intrudes.
|
|
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.
|
|
|
|
|
|
|
|
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.
|
|
Clean up the Clip test page after adding the logic necessary so that
absolutely positioned divs are correctly positioned.
|
|
This adds a demo of making a 'rainbow' with hard edges using
transition hints, along with an animated demo of moving the
transition hint.
|
|
This restores the demo to being the same as on css-tricks.com.
|
|
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.
|
|
|
|
|
|
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 :^)
|
|
|
|
|
|
* 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).
|
|
The button color here now just creates issues on dark themes,
and the margin on the progress bar does nothing.
|
|
This adds an example of a progress bar with just `appearance none`,
and one with `appearance none` and some custom styling.
|
|
This adds a test for overflow: hidden + border-radius clipping
child positioned elements, and child backgrounds.
|
|
Adds tests for:
- Multi-stop gradient at arbitrary angles (CPU brr)
- Default/calculated color stops
- to <corner>
- Pre-multiplied alpha mixing
|
|
|
|
|
|
|
|
This will allow this demo to be reused for other tests.
|
|
|
|
`calc(<percentage> + -<length>)` did work before, but a direct
`calc(<percentage> - <length>)` was broken. Let's have a test for both.
|
|
|
|
|
|
|
|
This now also shows the same box-shadows on the right on top of a
background to test the clipping underneath the content.
|
|
These all save at least a couple of kilobytes.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.
|
|
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. :^)
|
|
|
|
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.
|
|
|
|
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.
|
|
Adds support for the flex order property and a test page for it
on the browser welcome page.
|
|
|
|
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.
|
|
|
|
|
|
|
