mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-15 06:41:50 +00:00
LibWeb/CSS: Implement the caret-color property
This commit is contained in:
Tim Ledbetter
Alexander Kalenik
parent
bf15b7ac12
commit
88d35c547c
Notes:
github-actions[bot]
2025-03-09 18:37:22 +00:00
Author: https://github.com/tcl3
Commit: 88d35c547c
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3876
16 changed files with 381 additions and 218 deletions
|
|
@ -832,6 +832,18 @@ Float ComputedProperties::float_() const
|
||||||
return keyword_to_float(value.to_keyword()).release_value();
|
return keyword_to_float(value.to_keyword()).release_value();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Color ComputedProperties::caret_color(Layout::NodeWithStyle const& node) const
|
||||||
|
{
|
||||||
|
auto const& value = property(PropertyID::CaretColor);
|
||||||
|
if (value.is_keyword() && value.to_keyword() == Keyword::Auto)
|
||||||
|
return node.computed_values().color();
|
||||||
|
|
||||||
|
if (value.has_color())
|
||||||
|
return value.to_color(node);
|
||||||
|
|
||||||
|
return InitialValues::caret_color();
|
||||||
|
}
|
||||||
|
|
||||||
Clear ComputedProperties::clear() const
|
Clear ComputedProperties::clear() const
|
||||||
{
|
{
|
||||||
auto const& value = property(PropertyID::Clear);
|
auto const& value = property(PropertyID::Clear);
|
||||||
|
|
|
||||||
|
|
@ -86,6 +86,7 @@ public:
|
||||||
Clip clip() const;
|
Clip clip() const;
|
||||||
Display display() const;
|
Display display() const;
|
||||||
Float float_() const;
|
Float float_() const;
|
||||||
|
Color caret_color(Layout::NodeWithStyle const&) const;
|
||||||
Clear clear() const;
|
Clear clear() const;
|
||||||
ColumnSpan column_span() const;
|
ColumnSpan column_span() const;
|
||||||
struct ContentDataAndQuoteNestingLevel {
|
struct ContentDataAndQuoteNestingLevel {
|
||||||
|
|
|
||||||
|
|
@ -93,6 +93,7 @@ public:
|
||||||
static CSS::Float float_() { return CSS::Float::None; }
|
static CSS::Float float_() { return CSS::Float::None; }
|
||||||
static CSS::Length border_spacing() { return CSS::Length::make_px(0); }
|
static CSS::Length border_spacing() { return CSS::Length::make_px(0); }
|
||||||
static CSS::CaptionSide caption_side() { return CSS::CaptionSide::Top; }
|
static CSS::CaptionSide caption_side() { return CSS::CaptionSide::Top; }
|
||||||
|
static Color caret_color() { return Color::Black; }
|
||||||
static CSS::Clear clear() { return CSS::Clear::None; }
|
static CSS::Clear clear() { return CSS::Clear::None; }
|
||||||
static CSS::Clip clip() { return CSS::Clip::make_auto(); }
|
static CSS::Clip clip() { return CSS::Clip::make_auto(); }
|
||||||
static CSS::PreferredColorScheme color_scheme() { return CSS::PreferredColorScheme::Auto; }
|
static CSS::PreferredColorScheme color_scheme() { return CSS::PreferredColorScheme::Auto; }
|
||||||
|
|
@ -374,6 +375,7 @@ public:
|
||||||
CSS::Length border_spacing_horizontal() const { return m_inherited.border_spacing_horizontal; }
|
CSS::Length border_spacing_horizontal() const { return m_inherited.border_spacing_horizontal; }
|
||||||
CSS::Length border_spacing_vertical() const { return m_inherited.border_spacing_vertical; }
|
CSS::Length border_spacing_vertical() const { return m_inherited.border_spacing_vertical; }
|
||||||
CSS::CaptionSide caption_side() const { return m_inherited.caption_side; }
|
CSS::CaptionSide caption_side() const { return m_inherited.caption_side; }
|
||||||
|
Color caret_color() const { return m_inherited.caret_color; }
|
||||||
CSS::Clear clear() const { return m_noninherited.clear; }
|
CSS::Clear clear() const { return m_noninherited.clear; }
|
||||||
CSS::Clip clip() const { return m_noninherited.clip; }
|
CSS::Clip clip() const { return m_noninherited.clip; }
|
||||||
CSS::PreferredColorScheme color_scheme() const { return m_inherited.color_scheme; }
|
CSS::PreferredColorScheme color_scheme() const { return m_inherited.color_scheme; }
|
||||||
|
|
@ -555,6 +557,7 @@ public:
|
||||||
|
|
||||||
protected:
|
protected:
|
||||||
struct {
|
struct {
|
||||||
|
Color caret_color { InitialValues::caret_color() };
|
||||||
RefPtr<Gfx::FontCascadeList> font_list {};
|
RefPtr<Gfx::FontCascadeList> font_list {};
|
||||||
CSSPixels font_size { InitialValues::font_size() };
|
CSSPixels font_size { InitialValues::font_size() };
|
||||||
int font_weight { InitialValues::font_weight() };
|
int font_weight { InitialValues::font_weight() };
|
||||||
|
|
@ -744,6 +747,7 @@ public:
|
||||||
}
|
}
|
||||||
|
|
||||||
void set_aspect_ratio(AspectRatio aspect_ratio) { m_noninherited.aspect_ratio = move(aspect_ratio); }
|
void set_aspect_ratio(AspectRatio aspect_ratio) { m_noninherited.aspect_ratio = move(aspect_ratio); }
|
||||||
|
void set_caret_color(Color caret_color) { m_inherited.caret_color = caret_color; }
|
||||||
void set_font_list(NonnullRefPtr<Gfx::FontCascadeList> font_list) { m_inherited.font_list = move(font_list); }
|
void set_font_list(NonnullRefPtr<Gfx::FontCascadeList> font_list) { m_inherited.font_list = move(font_list); }
|
||||||
void set_font_size(CSSPixels font_size) { m_inherited.font_size = font_size; }
|
void set_font_size(CSSPixels font_size) { m_inherited.font_size = font_size; }
|
||||||
void set_font_weight(int font_weight) { m_inherited.font_weight = font_weight; }
|
void set_font_weight(int font_weight) { m_inherited.font_weight = font_weight; }
|
||||||
|
|
|
||||||
|
|
@ -818,6 +818,18 @@
|
||||||
"caption-side"
|
"caption-side"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"caret-color": {
|
||||||
|
"affects-layout": false,
|
||||||
|
"animation-type": "by-computed-value",
|
||||||
|
"inherited": true,
|
||||||
|
"initial": "auto",
|
||||||
|
"valid-identifiers": [
|
||||||
|
"auto"
|
||||||
|
],
|
||||||
|
"valid-types": [
|
||||||
|
"color"
|
||||||
|
]
|
||||||
|
},
|
||||||
"clear": {
|
"clear": {
|
||||||
"animation-type": "discrete",
|
"animation-type": "discrete",
|
||||||
"inherited": false,
|
"inherited": false,
|
||||||
|
|
|
||||||
|
|
@ -203,7 +203,7 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
|
||||||
// -> border-right-color
|
// -> border-right-color
|
||||||
// -> border-top-color
|
// -> border-top-color
|
||||||
// -> box-shadow
|
// -> box-shadow
|
||||||
// FIXME: -> caret-color
|
// -> caret-color
|
||||||
// -> color
|
// -> color
|
||||||
// -> outline-color
|
// -> outline-color
|
||||||
// -> A resolved value special case property like color defined in another specification
|
// -> A resolved value special case property like color defined in another specification
|
||||||
|
|
@ -220,6 +220,8 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
|
||||||
return CSSColorValue::create_from_color(layout_node.computed_values().border_top().color, ColorSyntax::Modern);
|
return CSSColorValue::create_from_color(layout_node.computed_values().border_top().color, ColorSyntax::Modern);
|
||||||
case PropertyID::BoxShadow:
|
case PropertyID::BoxShadow:
|
||||||
return style_value_for_shadow(layout_node.computed_values().box_shadow());
|
return style_value_for_shadow(layout_node.computed_values().box_shadow());
|
||||||
|
case PropertyID::CaretColor:
|
||||||
|
return CSSColorValue::create_from_color(layout_node.computed_values().caret_color(), ColorSyntax::Modern);
|
||||||
case PropertyID::Color:
|
case PropertyID::Color:
|
||||||
return CSSColorValue::create_from_color(layout_node.computed_values().color(), ColorSyntax::Modern);
|
return CSSColorValue::create_from_color(layout_node.computed_values().color(), ColorSyntax::Modern);
|
||||||
case PropertyID::OutlineColor:
|
case PropertyID::OutlineColor:
|
||||||
|
|
|
||||||
|
|
@ -943,6 +943,8 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
|
||||||
computed_values.set_mix_blend_mode(computed_style.mix_blend_mode());
|
computed_values.set_mix_blend_mode(computed_style.mix_blend_mode());
|
||||||
computed_values.set_view_transition_name(computed_style.view_transition_name());
|
computed_values.set_view_transition_name(computed_style.view_transition_name());
|
||||||
|
|
||||||
|
computed_values.set_caret_color(computed_style.caret_color(*this));
|
||||||
|
|
||||||
propagate_style_to_anonymous_wrappers();
|
propagate_style_to_anonymous_wrappers();
|
||||||
|
|
||||||
if (auto* box_node = as_if<NodeWithStyleAndBoxModelMetrics>(*this))
|
if (auto* box_node = as_if<NodeWithStyleAndBoxModelMetrics>(*this))
|
||||||
|
|
|
||||||
|
|
@ -657,6 +657,10 @@ void paint_cursor_if_needed(PaintContext& context, TextPaintable const& paintabl
|
||||||
if (!dom_node || (!dom_node->is_editable() && !active_element_is_editable))
|
if (!dom_node || (!dom_node->is_editable() && !active_element_is_editable))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
|
auto caret_color = paintable.computed_values().caret_color();
|
||||||
|
if (caret_color.alpha() == 0)
|
||||||
|
return;
|
||||||
|
|
||||||
auto fragment_rect = fragment.absolute_rect();
|
auto fragment_rect = fragment.absolute_rect();
|
||||||
|
|
||||||
auto text = fragment.string_view();
|
auto text = fragment.string_view();
|
||||||
|
|
@ -670,7 +674,7 @@ void paint_cursor_if_needed(PaintContext& context, TextPaintable const& paintabl
|
||||||
|
|
||||||
auto cursor_device_rect = context.rounded_device_rect(cursor_rect).to_type<int>();
|
auto cursor_device_rect = context.rounded_device_rect(cursor_rect).to_type<int>();
|
||||||
|
|
||||||
context.display_list_recorder().draw_rect(cursor_device_rect, paintable.computed_values().color());
|
context.display_list_recorder().draw_rect(cursor_device_rect, caret_color);
|
||||||
}
|
}
|
||||||
|
|
||||||
void paint_text_decoration(PaintContext& context, TextPaintable const& paintable, PaintableFragment const& fragment)
|
void paint_text_decoration(PaintContext& context, TextPaintable const& paintable, PaintableFragment const& fragment)
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
|
All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
|
||||||
'cssText': ''
|
'cssText': ''
|
||||||
'length': '219'
|
'length': '220'
|
||||||
'parentRule': 'null'
|
'parentRule': 'null'
|
||||||
'cssFloat': 'none'
|
'cssFloat': 'none'
|
||||||
'WebkitAlignContent': 'normal'
|
'WebkitAlignContent': 'normal'
|
||||||
|
|
@ -245,6 +245,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
|
||||||
'box-sizing': 'content-box'
|
'box-sizing': 'content-box'
|
||||||
'captionSide': 'top'
|
'captionSide': 'top'
|
||||||
'caption-side': 'top'
|
'caption-side': 'top'
|
||||||
|
'caretColor': 'rgb(0, 0, 0)'
|
||||||
|
'caret-color': 'rgb(0, 0, 0)'
|
||||||
'clear': 'none'
|
'clear': 'none'
|
||||||
'clip': 'auto'
|
'clip': 'auto'
|
||||||
'clipPath': 'none'
|
'clipPath': 'none'
|
||||||
|
|
|
||||||
|
|
@ -5,220 +5,221 @@ All properties associated with getComputedStyle(document.body):
|
||||||
"2": "border-collapse",
|
"2": "border-collapse",
|
||||||
"3": "border-spacing",
|
"3": "border-spacing",
|
||||||
"4": "caption-side",
|
"4": "caption-side",
|
||||||
"5": "clip-rule",
|
"5": "caret-color",
|
||||||
"6": "color",
|
"6": "clip-rule",
|
||||||
"7": "color-scheme",
|
"7": "color",
|
||||||
"8": "cursor",
|
"8": "color-scheme",
|
||||||
"9": "direction",
|
"9": "cursor",
|
||||||
"10": "fill",
|
"10": "direction",
|
||||||
"11": "fill-opacity",
|
"11": "fill",
|
||||||
"12": "fill-rule",
|
"12": "fill-opacity",
|
||||||
"13": "font-family",
|
"13": "fill-rule",
|
||||||
"14": "font-feature-settings",
|
"14": "font-family",
|
||||||
"15": "font-language-override",
|
"15": "font-feature-settings",
|
||||||
"16": "font-size",
|
"16": "font-language-override",
|
||||||
"17": "font-style",
|
"17": "font-size",
|
||||||
"18": "font-variant-alternates",
|
"18": "font-style",
|
||||||
"19": "font-variant-caps",
|
"19": "font-variant-alternates",
|
||||||
"20": "font-variant-east-asian",
|
"20": "font-variant-caps",
|
||||||
"21": "font-variant-emoji",
|
"21": "font-variant-east-asian",
|
||||||
"22": "font-variant-ligatures",
|
"22": "font-variant-emoji",
|
||||||
"23": "font-variant-numeric",
|
"23": "font-variant-ligatures",
|
||||||
"24": "font-variant-position",
|
"24": "font-variant-numeric",
|
||||||
"25": "font-variation-settings",
|
"25": "font-variant-position",
|
||||||
"26": "font-weight",
|
"26": "font-variation-settings",
|
||||||
"27": "font-width",
|
"27": "font-weight",
|
||||||
"28": "image-rendering",
|
"28": "font-width",
|
||||||
"29": "letter-spacing",
|
"29": "image-rendering",
|
||||||
"30": "line-height",
|
"30": "letter-spacing",
|
||||||
"31": "list-style-image",
|
"31": "line-height",
|
||||||
"32": "list-style-position",
|
"32": "list-style-image",
|
||||||
"33": "list-style-type",
|
"33": "list-style-position",
|
||||||
"34": "math-depth",
|
"34": "list-style-type",
|
||||||
"35": "math-shift",
|
"35": "math-depth",
|
||||||
"36": "math-style",
|
"36": "math-shift",
|
||||||
"37": "pointer-events",
|
"37": "math-style",
|
||||||
"38": "quotes",
|
"38": "pointer-events",
|
||||||
"39": "stroke",
|
"39": "quotes",
|
||||||
"40": "stroke-dasharray",
|
"40": "stroke",
|
||||||
"41": "stroke-dashoffset",
|
"41": "stroke-dasharray",
|
||||||
"42": "stroke-linecap",
|
"42": "stroke-dashoffset",
|
||||||
"43": "stroke-linejoin",
|
"43": "stroke-linecap",
|
||||||
"44": "stroke-miterlimit",
|
"44": "stroke-linejoin",
|
||||||
"45": "stroke-opacity",
|
"45": "stroke-miterlimit",
|
||||||
"46": "stroke-width",
|
"46": "stroke-opacity",
|
||||||
"47": "tab-size",
|
"47": "stroke-width",
|
||||||
"48": "text-align",
|
"48": "tab-size",
|
||||||
"49": "text-anchor",
|
"49": "text-align",
|
||||||
"50": "text-decoration-line",
|
"50": "text-anchor",
|
||||||
"51": "text-indent",
|
"51": "text-decoration-line",
|
||||||
"52": "text-justify",
|
"52": "text-indent",
|
||||||
"53": "text-shadow",
|
"53": "text-justify",
|
||||||
"54": "text-transform",
|
"54": "text-shadow",
|
||||||
"55": "visibility",
|
"55": "text-transform",
|
||||||
"56": "white-space",
|
"56": "visibility",
|
||||||
"57": "word-break",
|
"57": "white-space",
|
||||||
"58": "word-spacing",
|
"58": "word-break",
|
||||||
"59": "word-wrap",
|
"59": "word-spacing",
|
||||||
"60": "writing-mode",
|
"60": "word-wrap",
|
||||||
"61": "align-content",
|
"61": "writing-mode",
|
||||||
"62": "align-items",
|
"62": "align-content",
|
||||||
"63": "align-self",
|
"63": "align-items",
|
||||||
"64": "animation-delay",
|
"64": "align-self",
|
||||||
"65": "animation-direction",
|
"65": "animation-delay",
|
||||||
"66": "animation-duration",
|
"66": "animation-direction",
|
||||||
"67": "animation-fill-mode",
|
"67": "animation-duration",
|
||||||
"68": "animation-iteration-count",
|
"68": "animation-fill-mode",
|
||||||
"69": "animation-name",
|
"69": "animation-iteration-count",
|
||||||
"70": "animation-play-state",
|
"70": "animation-name",
|
||||||
"71": "animation-timing-function",
|
"71": "animation-play-state",
|
||||||
"72": "appearance",
|
"72": "animation-timing-function",
|
||||||
"73": "aspect-ratio",
|
"73": "appearance",
|
||||||
"74": "backdrop-filter",
|
"74": "aspect-ratio",
|
||||||
"75": "background-attachment",
|
"75": "backdrop-filter",
|
||||||
"76": "background-clip",
|
"76": "background-attachment",
|
||||||
"77": "background-color",
|
"77": "background-clip",
|
||||||
"78": "background-image",
|
"78": "background-color",
|
||||||
"79": "background-origin",
|
"79": "background-image",
|
||||||
"80": "background-position-x",
|
"80": "background-origin",
|
||||||
"81": "background-position-y",
|
"81": "background-position-x",
|
||||||
"82": "background-repeat",
|
"82": "background-position-y",
|
||||||
"83": "background-size",
|
"83": "background-repeat",
|
||||||
"84": "block-size",
|
"84": "background-size",
|
||||||
"85": "border-bottom-color",
|
"85": "block-size",
|
||||||
"86": "border-bottom-left-radius",
|
"86": "border-bottom-color",
|
||||||
"87": "border-bottom-right-radius",
|
"87": "border-bottom-left-radius",
|
||||||
"88": "border-bottom-style",
|
"88": "border-bottom-right-radius",
|
||||||
"89": "border-bottom-width",
|
"89": "border-bottom-style",
|
||||||
"90": "border-left-color",
|
"90": "border-bottom-width",
|
||||||
"91": "border-left-style",
|
"91": "border-left-color",
|
||||||
"92": "border-left-width",
|
"92": "border-left-style",
|
||||||
"93": "border-right-color",
|
"93": "border-left-width",
|
||||||
"94": "border-right-style",
|
"94": "border-right-color",
|
||||||
"95": "border-right-width",
|
"95": "border-right-style",
|
||||||
"96": "border-top-color",
|
"96": "border-right-width",
|
||||||
"97": "border-top-left-radius",
|
"97": "border-top-color",
|
||||||
"98": "border-top-right-radius",
|
"98": "border-top-left-radius",
|
||||||
"99": "border-top-style",
|
"99": "border-top-right-radius",
|
||||||
"100": "border-top-width",
|
"100": "border-top-style",
|
||||||
"101": "bottom",
|
"101": "border-top-width",
|
||||||
"102": "box-shadow",
|
"102": "bottom",
|
||||||
"103": "box-sizing",
|
"103": "box-shadow",
|
||||||
"104": "clear",
|
"104": "box-sizing",
|
||||||
"105": "clip",
|
"105": "clear",
|
||||||
"106": "clip-path",
|
"106": "clip",
|
||||||
"107": "column-count",
|
"107": "clip-path",
|
||||||
"108": "column-gap",
|
"108": "column-count",
|
||||||
"109": "column-span",
|
"109": "column-gap",
|
||||||
"110": "column-width",
|
"110": "column-span",
|
||||||
"111": "contain",
|
"111": "column-width",
|
||||||
"112": "content",
|
"112": "contain",
|
||||||
"113": "content-visibility",
|
"113": "content",
|
||||||
"114": "counter-increment",
|
"114": "content-visibility",
|
||||||
"115": "counter-reset",
|
"115": "counter-increment",
|
||||||
"116": "counter-set",
|
"116": "counter-reset",
|
||||||
"117": "cx",
|
"117": "counter-set",
|
||||||
"118": "cy",
|
"118": "cx",
|
||||||
"119": "display",
|
"119": "cy",
|
||||||
"120": "filter",
|
"120": "display",
|
||||||
"121": "flex-basis",
|
"121": "filter",
|
||||||
"122": "flex-direction",
|
"122": "flex-basis",
|
||||||
"123": "flex-grow",
|
"123": "flex-direction",
|
||||||
"124": "flex-shrink",
|
"124": "flex-grow",
|
||||||
"125": "flex-wrap",
|
"125": "flex-shrink",
|
||||||
"126": "float",
|
"126": "flex-wrap",
|
||||||
"127": "grid-auto-columns",
|
"127": "float",
|
||||||
"128": "grid-auto-flow",
|
"128": "grid-auto-columns",
|
||||||
"129": "grid-auto-rows",
|
"129": "grid-auto-flow",
|
||||||
"130": "grid-column-end",
|
"130": "grid-auto-rows",
|
||||||
"131": "grid-column-start",
|
"131": "grid-column-end",
|
||||||
"132": "grid-row-end",
|
"132": "grid-column-start",
|
||||||
"133": "grid-row-start",
|
"133": "grid-row-end",
|
||||||
"134": "grid-template-areas",
|
"134": "grid-row-start",
|
||||||
"135": "grid-template-columns",
|
"135": "grid-template-areas",
|
||||||
"136": "grid-template-rows",
|
"136": "grid-template-columns",
|
||||||
"137": "height",
|
"137": "grid-template-rows",
|
||||||
"138": "inline-size",
|
"138": "height",
|
||||||
"139": "inset-block-end",
|
"139": "inline-size",
|
||||||
"140": "inset-block-start",
|
"140": "inset-block-end",
|
||||||
"141": "inset-inline-end",
|
"141": "inset-block-start",
|
||||||
"142": "inset-inline-start",
|
"142": "inset-inline-end",
|
||||||
"143": "isolation",
|
"143": "inset-inline-start",
|
||||||
"144": "justify-content",
|
"144": "isolation",
|
||||||
"145": "justify-items",
|
"145": "justify-content",
|
||||||
"146": "justify-self",
|
"146": "justify-items",
|
||||||
"147": "left",
|
"147": "justify-self",
|
||||||
"148": "margin-block-end",
|
"148": "left",
|
||||||
"149": "margin-block-start",
|
"149": "margin-block-end",
|
||||||
"150": "margin-bottom",
|
"150": "margin-block-start",
|
||||||
"151": "margin-inline-end",
|
"151": "margin-bottom",
|
||||||
"152": "margin-inline-start",
|
"152": "margin-inline-end",
|
||||||
"153": "margin-left",
|
"153": "margin-inline-start",
|
||||||
"154": "margin-right",
|
"154": "margin-left",
|
||||||
"155": "margin-top",
|
"155": "margin-right",
|
||||||
"156": "mask-image",
|
"156": "margin-top",
|
||||||
"157": "mask-type",
|
"157": "mask-image",
|
||||||
"158": "max-block-size",
|
"158": "mask-type",
|
||||||
"159": "max-height",
|
"159": "max-block-size",
|
||||||
"160": "max-inline-size",
|
"160": "max-height",
|
||||||
"161": "max-width",
|
"161": "max-inline-size",
|
||||||
"162": "min-block-size",
|
"162": "max-width",
|
||||||
"163": "min-height",
|
"163": "min-block-size",
|
||||||
"164": "min-inline-size",
|
"164": "min-height",
|
||||||
"165": "min-width",
|
"165": "min-inline-size",
|
||||||
"166": "mix-blend-mode",
|
"166": "min-width",
|
||||||
"167": "object-fit",
|
"167": "mix-blend-mode",
|
||||||
"168": "object-position",
|
"168": "object-fit",
|
||||||
"169": "opacity",
|
"169": "object-position",
|
||||||
"170": "order",
|
"170": "opacity",
|
||||||
"171": "outline-color",
|
"171": "order",
|
||||||
"172": "outline-offset",
|
"172": "outline-color",
|
||||||
"173": "outline-style",
|
"173": "outline-offset",
|
||||||
"174": "outline-width",
|
"174": "outline-style",
|
||||||
"175": "overflow-x",
|
"175": "outline-width",
|
||||||
"176": "overflow-y",
|
"176": "overflow-x",
|
||||||
"177": "padding-block-end",
|
"177": "overflow-y",
|
||||||
"178": "padding-block-start",
|
"178": "padding-block-end",
|
||||||
"179": "padding-bottom",
|
"179": "padding-block-start",
|
||||||
"180": "padding-inline-end",
|
"180": "padding-bottom",
|
||||||
"181": "padding-inline-start",
|
"181": "padding-inline-end",
|
||||||
"182": "padding-left",
|
"182": "padding-inline-start",
|
||||||
"183": "padding-right",
|
"183": "padding-left",
|
||||||
"184": "padding-top",
|
"184": "padding-right",
|
||||||
"185": "position",
|
"185": "padding-top",
|
||||||
"186": "r",
|
"186": "position",
|
||||||
"187": "right",
|
"187": "r",
|
||||||
"188": "rotate",
|
"188": "right",
|
||||||
"189": "row-gap",
|
"189": "rotate",
|
||||||
"190": "rx",
|
"190": "row-gap",
|
||||||
"191": "ry",
|
"191": "rx",
|
||||||
"192": "scale",
|
"192": "ry",
|
||||||
"193": "scrollbar-gutter",
|
"193": "scale",
|
||||||
"194": "scrollbar-width",
|
"194": "scrollbar-gutter",
|
||||||
"195": "stop-color",
|
"195": "scrollbar-width",
|
||||||
"196": "stop-opacity",
|
"196": "stop-color",
|
||||||
"197": "table-layout",
|
"197": "stop-opacity",
|
||||||
"198": "text-decoration-color",
|
"198": "table-layout",
|
||||||
"199": "text-decoration-style",
|
"199": "text-decoration-color",
|
||||||
"200": "text-decoration-thickness",
|
"200": "text-decoration-style",
|
||||||
"201": "text-overflow",
|
"201": "text-decoration-thickness",
|
||||||
"202": "top",
|
"202": "text-overflow",
|
||||||
"203": "transform",
|
"203": "top",
|
||||||
"204": "transform-box",
|
"204": "transform",
|
||||||
"205": "transform-origin",
|
"205": "transform-box",
|
||||||
"206": "transition-delay",
|
"206": "transform-origin",
|
||||||
"207": "transition-duration",
|
"207": "transition-delay",
|
||||||
"208": "transition-property",
|
"208": "transition-duration",
|
||||||
"209": "transition-timing-function",
|
"209": "transition-property",
|
||||||
"210": "translate",
|
"210": "transition-timing-function",
|
||||||
"211": "unicode-bidi",
|
"211": "translate",
|
||||||
"212": "user-select",
|
"212": "unicode-bidi",
|
||||||
"213": "vertical-align",
|
"213": "user-select",
|
||||||
"214": "view-transition-name",
|
"214": "vertical-align",
|
||||||
"215": "width",
|
"215": "view-transition-name",
|
||||||
"216": "x",
|
"216": "width",
|
||||||
"217": "y",
|
"217": "x",
|
||||||
"218": "z-index"
|
"218": "y",
|
||||||
|
"219": "z-index"
|
||||||
}
|
}
|
||||||
All properties associated with document.body.style by default:
|
All properties associated with document.body.style by default:
|
||||||
{}
|
{}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ accent-color: auto
|
||||||
border-collapse: separate
|
border-collapse: separate
|
||||||
border-spacing: 0px
|
border-spacing: 0px
|
||||||
caption-side: top
|
caption-side: top
|
||||||
|
caret-color: rgb(0, 0, 0)
|
||||||
clip-rule: nonzero
|
clip-rule: nonzero
|
||||||
color: rgb(0, 0, 0)
|
color: rgb(0, 0, 0)
|
||||||
color-scheme: normal
|
color-scheme: normal
|
||||||
|
|
@ -135,7 +136,7 @@ grid-row-start: auto
|
||||||
grid-template-areas: none
|
grid-template-areas: none
|
||||||
grid-template-columns: auto
|
grid-template-columns: auto
|
||||||
grid-template-rows: auto
|
grid-template-rows: auto
|
||||||
height: 1918px
|
height: 1932px
|
||||||
inline-size: auto
|
inline-size: auto
|
||||||
inset-block-end: auto
|
inset-block-end: auto
|
||||||
inset-block-start: auto
|
inset-block-start: auto
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 11 tests
|
||||||
|
|
||||||
|
11 Pass
|
||||||
|
Pass Test default caret-color
|
||||||
|
Pass Test caret-color: initial
|
||||||
|
Pass Test caret-color: inherit
|
||||||
|
Pass Test caret-color: auto
|
||||||
|
Pass Test caret-color: currentcolor
|
||||||
|
Pass Test caret-color: lime
|
||||||
|
Pass Reset caret-color: initial
|
||||||
|
Pass Test caret-color: rgb(0, 100, 100)
|
||||||
|
Pass Test caret-color: initial (inherited)
|
||||||
|
Pass Test caret-color: inherit (inherited)
|
||||||
|
Pass Test caret-color: blue (inherited)
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 4 tests
|
||||||
|
|
||||||
|
4 Pass
|
||||||
|
Pass e.style['caret-color'] = "none" should not set the property value
|
||||||
|
Pass e.style['caret-color'] = "invert" should not set the property value
|
||||||
|
Pass e.style['caret-color'] = "50%" should not set the property value
|
||||||
|
Pass e.style['caret-color'] = "red green" should not set the property value
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 2 tests
|
||||||
|
|
||||||
|
2 Pass
|
||||||
|
Pass e.style['caret-color'] = "auto" should set the property value
|
||||||
|
Pass e.style['caret-color'] = "rgba(10, 20, 30, 0.4)" should set the property value
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Basic User Interface Test: caret-color dynamic changes</title>
|
||||||
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||||
|
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
|
||||||
|
<meta name="flags" content="dom">
|
||||||
|
<meta name="assert" content="Test checks checks that carret-color can be correctly changed using the style attribute, and that the computed value is done correctly.">
|
||||||
|
<script src="../../resources/testharness.js"></script>
|
||||||
|
<script src="../../resources/testharnessreport.js"></script>
|
||||||
|
|
||||||
|
<div id="log"></div>
|
||||||
|
<div id="wrapper">
|
||||||
|
<textarea id="textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function testStyleCaretColor(element, value) {
|
||||||
|
assert_equals(element.style.caretColor, value, "The style attribute's caret-color should be '" + value + "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
function testComputedStyleCaretColor(element, value) {
|
||||||
|
assert_equals(getComputedStyle(element).getPropertyValue("caret-color"), value, "caret-color computed style should be '" + value + "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
function setAndCheckCaretColor(element, caretColor, styleValue, computedStyleValue, description) {
|
||||||
|
element.style.caretColor = caretColor;
|
||||||
|
test(function() {
|
||||||
|
testStyleCaretColor(element, styleValue);
|
||||||
|
testComputedStyleCaretColor(element, computedStyleValue);
|
||||||
|
}, description);
|
||||||
|
}
|
||||||
|
|
||||||
|
var textarea = document.getElementById("textarea");
|
||||||
|
setAndCheckCaretColor(textarea, "", "", "rgb(0, 0, 0)", "Test default caret-color");
|
||||||
|
setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial");
|
||||||
|
setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 0, 0)", "Test caret-color: inherit");
|
||||||
|
setAndCheckCaretColor(textarea, "auto", "auto", "rgb(0, 0, 0)", "Test caret-color: auto");
|
||||||
|
setAndCheckCaretColor(textarea, "currentcolor", "currentcolor", "rgb(0, 0, 0)", "Test caret-color: currentcolor");
|
||||||
|
setAndCheckCaretColor(textarea, "lime", "lime", "rgb(0, 255, 0)", "Test caret-color: lime");
|
||||||
|
setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Reset caret-color: initial");
|
||||||
|
setAndCheckCaretColor(textarea, "rgb(0, 100, 100)", "rgb(0, 100, 100)", "rgb(0, 100, 100)", "Test caret-color: rgb(0, 100, 100)");
|
||||||
|
|
||||||
|
var wrapper = document.getElementById("wrapper");
|
||||||
|
wrapper.style.caretColor = "green";
|
||||||
|
|
||||||
|
setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial (inherited)");
|
||||||
|
setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 128, 0)", "Test caret-color: inherit (inherited)");
|
||||||
|
setAndCheckCaretColor(textarea, "blue", "blue", "rgb(0, 0, 255)", "Test caret-color: blue (inherited)");
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS UI Level 3: parsing caret-color with invalid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#caret-color">
|
||||||
|
<meta name="assert" content="caret-color supports only the grammar 'auto | <color>'.">
|
||||||
|
<script src="../../../resources/testharness.js"></script>
|
||||||
|
<script src="../../../resources/testharnessreport.js"></script>
|
||||||
|
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_invalid_value("caret-color", "none");
|
||||||
|
test_invalid_value("caret-color", "invert");
|
||||||
|
test_invalid_value("caret-color", "50%");
|
||||||
|
test_invalid_value("caret-color", "red green");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS UI Level 3: parsing caret-color with valid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#caret-color">
|
||||||
|
<meta name="assert" content="caret-color supports the full grammar 'auto | <color>'.">
|
||||||
|
<script src="../../../resources/testharness.js"></script>
|
||||||
|
<script src="../../../resources/testharnessreport.js"></script>
|
||||||
|
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_valid_value("caret-color", "auto");
|
||||||
|
test_valid_value("caret-color", "rgba(10, 20, 30, 0.4)");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue