This creates a button to prompt users to select a file, and a label to
show information about the selected file(s). Clicking either shadow
element will activate the input element.
This implements enough to represent <input type=image> with its loaded
source image (or fallback to its alt text, if applicable). This does not
implement acquring coordinates from user-activated click events on the
image.
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. :^)
