This reworks checkboxes to use a tiny 16x16 SDF for the tick icon along
with an antialiased background/border.
The checkbox now works well at any scale, shows the various checkbox
state (enabled, disabled, being pressed), and supports using the colors
from the active system theme and/or the accent-color property.
The checkbox provided by ClassicStylePainter is not scaling-aware and
generally unflexible, instead use the UA default stylesheet with a
handful of properties, the same way we already style buttons and text
inputs.
Thanks to Xexxa for the nice checkmark image!
Co-Authored-By: Xexxa <93391300+Xexxa@users.noreply.github.com>
This adds support for parsing the ::placeholder pseudo-element and
injecting an anonymous layout node with that element when the input
element's data is empty.
The main benefit of this is respecting the iframe frameborder
attribute, as frameborder="0" is a pretty common way of removing
the default <iframe> border.
For example, it's on all YouTube embeds by default and on some
ReCAPTCHA embeds.
The HTML spec provides a set of suitable default CSS rules for our UA
stylesheet, so let's use those instead of inventing our own. :^)
Note that I had to replace "foo-block-start" properties with "foo-top"
since we don't support the block/inline direction based properties yet.
Let's make 16px the default font size instead of 10px. This makes our
layout results match those of other engines in many more cases.
Also make the h1-h6 element styles use relative (em) font sizes, also
matching other browsers.
This style is the same as what is used in WebKit/Blink, it is a bit
ugly, but you're expected to override it. Adding more than a
background color here could cause some issues, as sites don't
expect to have to unset the styles.
This adds (or at least stubs-out) the following:
- display-mode
- dynamic-range
- environment-blending
- forced-colors
- horizontal-viewport-segments
- vertical-viewport-segments
- inverted-colors
- nav-controls
- prefers-contrast
- prefers-reduced-data
- prefers-reduced-motion
- prefers-reduced-transparency
- scripting
- video-color-gamut
- video-dynamic-range
The `@media (inverted-colors)` CSS that the spec requires we add to the
UA style sheet does not actually do anything for us yet since we don't
support `filter`, but it seemed sensible to include it now to avoid
forgetting later. :^)
Previously we used a native ui button to draw the buttons.
These buttons can however not be styled with css.
To allow these to be styled with css, we create a button with
the UA stylesheet that resembles the system ui button.
Although it is not said that some of the elements need to be italic,
*most* browsers mark them as such to distinguish them from the normal
text, so let's do that too!
This moves LibWeb to using the list of hidden elements from the spec.
Concretely, the following things are now explicitly marked
`display: none` in addition to before:
- elements with the `hidden` attribute
- area
- base
- basefont
- datalist
- param
- rp
The spec also wants `noframes` and `noembed` to be `display: none`,
but since support for frames and embeds doesn't exist yet, these
are omitted for now.
With this, everyone's favorite website http://45.33.8.238/ no longer
displays spans with attribute hidden. (Whitespace handling still
looks a bit off though.)
This makes un-styled text readable when using a dark system theme,
previously such text would be black, regardless of the theme background
color.
Fixes#7274.
In the ListItemMarkerBox render the correct thing when painting.
This covers decimal counting for ordered lists as well as square,
disc, and circle for unordered lists. Thus all currently supported
list-style-types are displayed correctly.
This closes#2059
Text <input> fields will now generate a basic shadow DOM and attach it
to the input element.
The shadow DOM contains a <div> with some inline style, and an always-
editable text node inside it. Accessing the "value" attribute on such
an input element will get/set the value from that text node.
This is really cool, although not super stable since HTML editing is
not super stable. But it's a start! :^)
