mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-10 18:10:56 +09:00
LibWeb: Implement appearance CSS property
This includes the "compat" values even though they are not strictly necessary.
This commit is contained in:
MacDue
Andreas Kling
parent
b5febe538c
commit
d7d34d88e5
Notes:
sideshowbarker
2024-07-17 08:38:09 +09:00
Author: https://github.com/MacDue
Commit: d7d34d88e5
Pull-request: https://github.com/SerenityOS/serenity/pull/14645
7 changed files with 78 additions and 0 deletions
|
|
@ -39,6 +39,7 @@ public:
|
|||
static CSS::JustifyContent justify_content() { return CSS::JustifyContent::FlexStart; }
|
||||
static CSS::AlignItems align_items() { return CSS::AlignItems::Stretch; }
|
||||
static CSS::AlignSelf align_self() { return CSS::AlignSelf::Auto; }
|
||||
static CSS::Appearance appearance() { return CSS::Appearance::Auto; }
|
||||
static CSS::Overflow overflow() { return CSS::Overflow::Visible; }
|
||||
static CSS::BoxSizing box_sizing() { return CSS::BoxSizing::ContentBox; }
|
||||
static CSS::PointerEvents pointer_events() { return CSS::PointerEvents::Auto; }
|
||||
|
|
@ -154,6 +155,7 @@ public:
|
|||
int order() const { return m_noninherited.order; }
|
||||
CSS::AlignItems align_items() const { return m_noninherited.align_items; }
|
||||
CSS::AlignSelf align_self() const { return m_noninherited.align_self; }
|
||||
CSS::Appearance appearance() const { return m_noninherited.appearance; }
|
||||
float opacity() const { return m_noninherited.opacity; }
|
||||
CSS::Visibility visibility() const { return m_inherited.visibility; }
|
||||
CSS::ImageRendering image_rendering() const { return m_inherited.image_rendering; }
|
||||
|
|
@ -269,6 +271,7 @@ protected:
|
|||
int order { InitialValues::order() };
|
||||
CSS::AlignItems align_items { InitialValues::align_items() };
|
||||
CSS::AlignSelf align_self { InitialValues::align_self() };
|
||||
CSS::Appearance appearance { InitialValues::appearance() };
|
||||
CSS::JustifyContent justify_content { InitialValues::justify_content() };
|
||||
CSS::Overflow overflow_x { InitialValues::overflow() };
|
||||
CSS::Overflow overflow_y { InitialValues::overflow() };
|
||||
|
|
@ -339,6 +342,7 @@ public:
|
|||
void set_order(int value) { m_noninherited.order = value; }
|
||||
void set_align_items(CSS::AlignItems value) { m_noninherited.align_items = value; }
|
||||
void set_align_self(CSS::AlignSelf value) { m_noninherited.align_self = value; }
|
||||
void set_appearance(CSS::Appearance value) { m_noninherited.appearance = value; }
|
||||
void set_opacity(float value) { m_noninherited.opacity = value; }
|
||||
void set_justify_content(CSS::JustifyContent value) { m_noninherited.justify_content = value; }
|
||||
void set_box_shadow(Vector<ShadowData>&& value) { m_noninherited.box_shadow = move(value); }
|
||||
|
|
|
|||
|
|
@ -24,6 +24,24 @@
|
|||
"stretch",
|
||||
"unsafe"
|
||||
],
|
||||
"appearance": [
|
||||
"auto",
|
||||
"button",
|
||||
"checkbox",
|
||||
"listbox",
|
||||
"menulist",
|
||||
"meter",
|
||||
"menulist-button",
|
||||
"none",
|
||||
"push-button",
|
||||
"progress-bar",
|
||||
"radio",
|
||||
"searchfield",
|
||||
"slider-horizontal",
|
||||
"square-button",
|
||||
"textarea",
|
||||
"textfield"
|
||||
],
|
||||
"background-attachment": [
|
||||
"fixed",
|
||||
"local",
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@
|
|||
"bottom",
|
||||
"break-word",
|
||||
"browser",
|
||||
"button",
|
||||
"capitalize",
|
||||
"cell",
|
||||
"center",
|
||||
|
|
@ -96,6 +97,7 @@
|
|||
"currentcolor",
|
||||
"cursive",
|
||||
"custom",
|
||||
"checkbox",
|
||||
"dark",
|
||||
"dashed",
|
||||
"decimal",
|
||||
|
|
@ -160,12 +162,16 @@
|
|||
"lower-roman",
|
||||
"lowercase",
|
||||
"ltr",
|
||||
"listbox",
|
||||
"medium",
|
||||
"middle",
|
||||
"minimal-ui",
|
||||
"monospace",
|
||||
"more",
|
||||
"move",
|
||||
"menulist",
|
||||
"meter",
|
||||
"menulist-button",
|
||||
"n-resize",
|
||||
"ne-resize",
|
||||
"nesw-resize",
|
||||
|
|
@ -197,6 +203,8 @@
|
|||
"pre-wrap",
|
||||
"progress",
|
||||
"progressive",
|
||||
"push-button",
|
||||
"progress-bar",
|
||||
"rec2020",
|
||||
"reduce",
|
||||
"relative",
|
||||
|
|
@ -216,6 +224,7 @@
|
|||
"ruby-text",
|
||||
"ruby-text-container",
|
||||
"run-in",
|
||||
"radio",
|
||||
"s-resize",
|
||||
"safe",
|
||||
"sans-serif",
|
||||
|
|
@ -245,6 +254,9 @@
|
|||
"subtractive",
|
||||
"super",
|
||||
"sw-resize",
|
||||
"searchfield",
|
||||
"slider-horizontal",
|
||||
"square-button",
|
||||
"table",
|
||||
"table-caption",
|
||||
"table-cell",
|
||||
|
|
@ -260,6 +272,8 @@
|
|||
"thick",
|
||||
"thin",
|
||||
"top",
|
||||
"textarea",
|
||||
"textfield",
|
||||
"ui-monospace",
|
||||
"ui-rounded",
|
||||
"ui-sans-serif",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,13 @@
|
|||
"align-self"
|
||||
]
|
||||
},
|
||||
"appearance": {
|
||||
"inherited": false,
|
||||
"initial": "auto",
|
||||
"valid-types": [
|
||||
"appearance"
|
||||
]
|
||||
},
|
||||
"background": {
|
||||
"affects-layout": false,
|
||||
"inherited": false,
|
||||
|
|
|
|||
|
|
@ -316,6 +316,36 @@ Optional<CSS::AlignSelf> StyleProperties::align_self() const
|
|||
return value_id_to_align_self(value->to_identifier());
|
||||
}
|
||||
|
||||
Optional<CSS::Appearance> StyleProperties::appearance() const
|
||||
{
|
||||
auto value = property(CSS::PropertyID::Appearance);
|
||||
auto appearance = value_id_to_appearance(value->to_identifier());
|
||||
if (appearance.has_value()) {
|
||||
switch (*appearance) {
|
||||
// Note: All these compatibility values can be treated as 'auto'
|
||||
case CSS::Appearance::Textfield:
|
||||
case CSS::Appearance::MenulistButton:
|
||||
case CSS::Appearance::Searchfield:
|
||||
case CSS::Appearance::Textarea:
|
||||
case CSS::Appearance::PushButton:
|
||||
case CSS::Appearance::SliderHorizontal:
|
||||
case CSS::Appearance::Checkbox:
|
||||
case CSS::Appearance::Radio:
|
||||
case CSS::Appearance::SquareButton:
|
||||
case CSS::Appearance::Menulist:
|
||||
case CSS::Appearance::Listbox:
|
||||
case CSS::Appearance::Meter:
|
||||
case CSS::Appearance::ProgressBar:
|
||||
case CSS::Appearance::Button:
|
||||
appearance = CSS::Appearance::Auto;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
return appearance;
|
||||
}
|
||||
|
||||
Optional<CSS::Position> StyleProperties::position() const
|
||||
{
|
||||
auto value = property(CSS::PropertyID::Position);
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ public:
|
|||
int order() const;
|
||||
Optional<CSS::AlignItems> align_items() const;
|
||||
Optional<CSS::AlignSelf> align_self() const;
|
||||
Optional<CSS::Appearance> appearance() const;
|
||||
float opacity() const;
|
||||
Optional<CSS::Visibility> visibility() const;
|
||||
Optional<CSS::ImageRendering> image_rendering() const;
|
||||
|
|
|
|||
|
|
@ -431,6 +431,10 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
|
|||
if (align_self.has_value())
|
||||
computed_values.set_align_self(align_self.value());
|
||||
|
||||
auto appearance = computed_style.appearance();
|
||||
if (appearance.has_value())
|
||||
computed_values.set_appearance(appearance.value());
|
||||
|
||||
auto position = computed_style.position();
|
||||
if (position.has_value())
|
||||
computed_values.set_position(position.value());
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue