Previously, all input elements were given a textbox-like style by
default, this was then undone by another CSS rule in the case of certain
types of input element. This commit makes it so that the first rule
simply ignores those types instead.
Co-authored-by: Sam Atkins <atkinssj@serenityos.org>
Give it a shadow tree, similar to HTMLInputElement's, so that we can
actually edit its contents at a basic level. Add some CSS to use the
`rows` and `cols` attributes as the size if they are present.
This property was removed from the CSS specs, and efforts to correct the
HTML spec have stalled. For now, let's comment them out so that I don't
get spammed with the meaningless log warnings that they didn't parse,
every time I launch Ladybird. :^)
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.)
