mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-09 17:44:56 +09:00
LibWeb/CSS: Implement the scrollbar-color
property
This allows the user to set the scrollbar thumb and track colors.
This commit is contained in:
parent
285bc005cb
commit
e2d0d8e2b9
Notes:
github-actions[bot]
2025-06-01 22:18:57 +00:00
Author: https://github.com/tcl3
Commit: e2d0d8e2b9
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4893
24 changed files with 212 additions and 10 deletions
|
@ -193,6 +193,7 @@ set(SOURCES
|
|||
CSS/StyleValues/PositionStyleValue.cpp
|
||||
CSS/StyleValues/RadialGradientStyleValue.cpp
|
||||
CSS/StyleValues/RectStyleValue.cpp
|
||||
CSS/StyleValues/ScrollbarColorStyleValue.cpp
|
||||
CSS/StyleValues/ShadowStyleValue.cpp
|
||||
CSS/StyleValues/ShorthandStyleValue.cpp
|
||||
CSS/StyleValues/StyleValueList.cpp
|
||||
|
|
|
@ -55,6 +55,7 @@
|
|||
#include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/RectStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ScrollbarGutterStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ShorthandStyleValue.h>
|
||||
|
@ -338,6 +339,12 @@ ResolutionStyleValue const& CSSStyleValue::as_resolution() const
|
|||
return static_cast<ResolutionStyleValue const&>(*this);
|
||||
}
|
||||
|
||||
ScrollbarColorStyleValue const& CSSStyleValue::as_scrollbar_color() const
|
||||
{
|
||||
VERIFY(is_scrollbar_color());
|
||||
return static_cast<ScrollbarColorStyleValue const&>(*this);
|
||||
}
|
||||
|
||||
ScrollbarGutterStyleValue const& CSSStyleValue::as_scrollbar_gutter() const
|
||||
{
|
||||
VERIFY(is_scrollbar_gutter());
|
||||
|
|
|
@ -130,6 +130,7 @@ public:
|
|||
Ratio,
|
||||
Rect,
|
||||
Resolution,
|
||||
ScrollbarColor,
|
||||
ScrollbarGutter,
|
||||
Shadow,
|
||||
Shorthand,
|
||||
|
@ -325,6 +326,10 @@ public:
|
|||
ResolutionStyleValue const& as_resolution() const;
|
||||
ResolutionStyleValue& as_resolution() { return const_cast<ResolutionStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_resolution()); }
|
||||
|
||||
bool is_scrollbar_color() const { return type() == Type::ScrollbarColor; }
|
||||
ScrollbarColorStyleValue const& as_scrollbar_color() const;
|
||||
ScrollbarColorStyleValue& as_scrollbar_color() { return const_cast<ScrollbarColorStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_scrollbar_color()); }
|
||||
|
||||
bool is_scrollbar_gutter() const { return type() == Type::ScrollbarGutter; }
|
||||
ScrollbarGutterStyleValue const& as_scrollbar_gutter() const;
|
||||
ScrollbarGutterStyleValue& as_scrollbar_gutter() { return const_cast<ScrollbarGutterStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_scrollbar_gutter()); }
|
||||
|
|
|
@ -31,6 +31,7 @@
|
|||
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/RectStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/StringStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/StyleValueList.h>
|
||||
|
@ -1852,6 +1853,22 @@ Vector<CounterData> ComputedProperties::counter_data(PropertyID property_id) con
|
|||
return {};
|
||||
}
|
||||
|
||||
ScrollbarColorData ComputedProperties::scrollbar_color(Layout::NodeWithStyle const& layout_node) const
|
||||
{
|
||||
auto const& value = property(PropertyID::ScrollbarColor);
|
||||
if (value.is_keyword() && value.as_keyword().keyword() == Keyword::Auto)
|
||||
return InitialValues::scrollbar_color();
|
||||
|
||||
if (value.is_scrollbar_color()) {
|
||||
auto& scrollbar_color_value = value.as_scrollbar_color();
|
||||
auto thumb_color = scrollbar_color_value.thumb_color()->to_color(layout_node);
|
||||
auto track_color = scrollbar_color_value.track_color()->to_color(layout_node);
|
||||
return { thumb_color, track_color };
|
||||
}
|
||||
|
||||
return {};
|
||||
}
|
||||
|
||||
ScrollbarWidth ComputedProperties::scrollbar_width() const
|
||||
{
|
||||
auto const& value = property(PropertyID::ScrollbarWidth);
|
||||
|
|
|
@ -228,6 +228,7 @@ public:
|
|||
QuotesData quotes() const;
|
||||
Vector<CounterData> counter_data(PropertyID) const;
|
||||
|
||||
ScrollbarColorData scrollbar_color(Layout::NodeWithStyle const& layout_node) const;
|
||||
ScrollbarWidth scrollbar_width() const;
|
||||
|
||||
static NonnullRefPtr<Gfx::Font const> font_fallback(bool monospace, bool bold, float point_size);
|
||||
|
|
|
@ -81,6 +81,11 @@ struct Containment {
|
|||
bool is_empty() const { return !(size_containment || inline_size_containment || layout_containment || style_containment || paint_containment); }
|
||||
};
|
||||
|
||||
struct ScrollbarColorData {
|
||||
Color thumb_color { Color::Transparent };
|
||||
Color track_color { Color::Transparent };
|
||||
};
|
||||
|
||||
using CursorData = Variant<NonnullRefPtr<CursorStyleValue const>, Cursor>;
|
||||
|
||||
using ListStyleType = Variant<CounterStyleNameKeyword, String>;
|
||||
|
@ -211,6 +216,13 @@ public:
|
|||
static CSS::MathStyle math_style() { return CSS::MathStyle::Normal; }
|
||||
static int math_depth() { return 0; }
|
||||
|
||||
static ScrollbarColorData scrollbar_color()
|
||||
{
|
||||
return ScrollbarColorData {
|
||||
.thumb_color = Color(Color::NamedColor::DarkGray).with_alpha(192),
|
||||
.track_color = Color(Color::NamedColor::WarmGray).with_alpha(192),
|
||||
};
|
||||
}
|
||||
static CSS::ScrollbarWidth scrollbar_width() { return CSS::ScrollbarWidth::Auto; }
|
||||
};
|
||||
|
||||
|
@ -581,6 +593,7 @@ public:
|
|||
CSS::MathStyle math_style() const { return m_inherited.math_style; }
|
||||
int math_depth() const { return m_inherited.math_depth; }
|
||||
|
||||
ScrollbarColorData scrollbar_color() const { return m_inherited.scrollbar_color; }
|
||||
CSS::ScrollbarWidth scrollbar_width() const { return m_noninherited.scrollbar_width; }
|
||||
|
||||
NonnullOwnPtr<ComputedValues> clone_inherited_values() const
|
||||
|
@ -655,6 +668,8 @@ protected:
|
|||
CSS::MathShift math_shift { InitialValues::math_shift() };
|
||||
CSS::MathStyle math_style { InitialValues::math_style() };
|
||||
int math_depth { InitialValues::math_depth() };
|
||||
|
||||
ScrollbarColorData scrollbar_color { InitialValues::scrollbar_color() };
|
||||
} m_inherited;
|
||||
|
||||
struct {
|
||||
|
@ -967,6 +982,7 @@ public:
|
|||
void set_math_style(CSS::MathStyle value) { m_inherited.math_style = value; }
|
||||
void set_math_depth(int value) { m_inherited.math_depth = value; }
|
||||
|
||||
void set_scrollbar_color(ScrollbarColorData value) { m_inherited.scrollbar_color = move(value); }
|
||||
void set_scrollbar_width(CSS::ScrollbarWidth value) { m_noninherited.scrollbar_width = value; }
|
||||
|
||||
void set_counter_increment(Vector<CounterData> value) { m_noninherited.counter_increment = move(value); }
|
||||
|
|
|
@ -417,6 +417,7 @@ private:
|
|||
RefPtr<CSSStyleValue const> parse_place_items_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<CSSStyleValue const> parse_place_self_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<CSSStyleValue const> parse_quotes_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<CSSStyleValue const> parse_scrollbar_color_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<CSSStyleValue const> parse_scrollbar_gutter_value(TokenStream<ComponentValue>&);
|
||||
enum class AllowInsetKeyword {
|
||||
No,
|
||||
|
|
|
@ -48,6 +48,7 @@
|
|||
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ScrollbarGutterStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ShorthandStyleValue.h>
|
||||
|
@ -644,6 +645,10 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue const>> Parser::parse_css_value
|
|||
if (auto parsed_value = parse_rotate_value(tokens); parsed_value && !tokens.has_next_token())
|
||||
return parsed_value.release_nonnull();
|
||||
return ParseError::SyntaxError;
|
||||
case PropertyID::ScrollbarColor:
|
||||
if (auto parsed_value = parse_scrollbar_color_value(tokens); parsed_value && !tokens.has_next_token())
|
||||
return parsed_value.release_nonnull();
|
||||
return ParseError::SyntaxError;
|
||||
case PropertyID::ScrollbarGutter:
|
||||
if (auto parsed_value = parse_scrollbar_gutter_value(tokens); parsed_value && !tokens.has_next_token())
|
||||
return parsed_value.release_nonnull();
|
||||
|
@ -4057,6 +4062,32 @@ RefPtr<CSSStyleValue const> Parser::parse_scale_value(TokenStream<ComponentValue
|
|||
return TransformationStyleValue::create(PropertyID::Scale, TransformFunction::Scale, { maybe_x.release_nonnull(), maybe_y.release_nonnull(), maybe_z.release_nonnull() });
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-scrollbars/#propdef-scrollbar-color
|
||||
RefPtr<CSSStyleValue const> Parser::parse_scrollbar_color_value(TokenStream<ComponentValue>& tokens)
|
||||
{
|
||||
// auto | <color>{2}
|
||||
if (!tokens.has_next_token())
|
||||
return nullptr;
|
||||
if (auto auto_keyword = parse_all_as_single_keyword_value(tokens, Keyword::Auto))
|
||||
return auto_keyword;
|
||||
|
||||
auto transaction = tokens.begin_transaction();
|
||||
|
||||
auto thumb_color = parse_color_value(tokens);
|
||||
if (!thumb_color)
|
||||
return nullptr;
|
||||
|
||||
tokens.discard_whitespace();
|
||||
|
||||
auto track_color = parse_color_value(tokens);
|
||||
if (!track_color)
|
||||
return nullptr;
|
||||
tokens.discard_whitespace();
|
||||
transaction.commit();
|
||||
|
||||
return ScrollbarColorStyleValue::create(thumb_color.release_nonnull(), track_color.release_nonnull());
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-overflow/#propdef-scrollbar-gutter
|
||||
RefPtr<CSSStyleValue const> Parser::parse_scrollbar_gutter_value(TokenStream<ComponentValue>& tokens)
|
||||
{
|
||||
|
|
|
@ -2684,6 +2684,12 @@
|
|||
"affects-layout": false,
|
||||
"affects-stacking-context": true
|
||||
},
|
||||
"scrollbar-color": {
|
||||
"affects-layout": false,
|
||||
"animation-type": "by-computed-value",
|
||||
"inherited": "yes",
|
||||
"initial": "auto"
|
||||
},
|
||||
"scrollbar-gutter": {
|
||||
"affects-layout": false,
|
||||
"animation-type": "discrete",
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
/*
|
||||
* Copyright (c) 2025, Tim Ledbetter <tim.ledbetter@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include "ScrollbarColorStyleValue.h"
|
||||
|
||||
namespace Web::CSS {
|
||||
|
||||
ValueComparingNonnullRefPtr<ScrollbarColorStyleValue const> ScrollbarColorStyleValue::create(NonnullRefPtr<CSSStyleValue const> thumb_color, NonnullRefPtr<CSSStyleValue const> track_color)
|
||||
{
|
||||
return adopt_ref(*new ScrollbarColorStyleValue(move(thumb_color), move(track_color)));
|
||||
}
|
||||
|
||||
String ScrollbarColorStyleValue::to_string(SerializationMode mode) const
|
||||
{
|
||||
return MUST(String::formatted("{} {}", m_thumb_color->to_string(mode), m_track_color->to_string(mode)));
|
||||
}
|
||||
|
||||
}
|
38
Libraries/LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h
Normal file
38
Libraries/LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h
Normal file
|
@ -0,0 +1,38 @@
|
|||
/*
|
||||
* Copyright (c) 2025, Tim Ledbetter <tim.ledbetter@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#pragma once
|
||||
|
||||
#include <AK/OwnPtr.h>
|
||||
#include <LibWeb/CSS/CSSStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/CSSColorValue.h>
|
||||
|
||||
namespace Web::CSS {
|
||||
|
||||
class ScrollbarColorStyleValue final : public StyleValueWithDefaultOperators<ScrollbarColorStyleValue> {
|
||||
public:
|
||||
static ValueComparingNonnullRefPtr<ScrollbarColorStyleValue const> create(NonnullRefPtr<CSSStyleValue const> thumb_color, NonnullRefPtr<CSSStyleValue const> track_color);
|
||||
virtual ~ScrollbarColorStyleValue() override = default;
|
||||
|
||||
virtual String to_string(SerializationMode) const override;
|
||||
bool properties_equal(ScrollbarColorStyleValue const& other) const { return m_thumb_color == other.m_thumb_color && m_track_color == other.m_track_color; }
|
||||
|
||||
NonnullRefPtr<CSSStyleValue const> thumb_color() const { return m_thumb_color; }
|
||||
NonnullRefPtr<CSSStyleValue const> track_color() const { return m_track_color; }
|
||||
|
||||
private:
|
||||
explicit ScrollbarColorStyleValue(NonnullRefPtr<CSSStyleValue const> thumb_color, NonnullRefPtr<CSSStyleValue const> track_color)
|
||||
: StyleValueWithDefaultOperators(Type::ScrollbarColor)
|
||||
, m_thumb_color(move(thumb_color))
|
||||
, m_track_color(move(track_color))
|
||||
{
|
||||
}
|
||||
|
||||
NonnullRefPtr<CSSStyleValue const> m_thumb_color;
|
||||
NonnullRefPtr<CSSStyleValue const> m_track_color;
|
||||
};
|
||||
|
||||
}
|
|
@ -288,6 +288,7 @@ class Selector;
|
|||
class ShadowStyleValue;
|
||||
class ShorthandStyleValue;
|
||||
class Size;
|
||||
class ScrollbarColorStyleValue;
|
||||
class StringStyleValue;
|
||||
class StyleComputer;
|
||||
class ComputedProperties;
|
||||
|
|
|
@ -962,6 +962,7 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
|
|||
computed_values.set_object_position(computed_style.object_position());
|
||||
computed_values.set_direction(computed_style.direction());
|
||||
computed_values.set_unicode_bidi(computed_style.unicode_bidi());
|
||||
computed_values.set_scrollbar_color(computed_style.scrollbar_color(*this));
|
||||
computed_values.set_scrollbar_width(computed_style.scrollbar_width());
|
||||
computed_values.set_writing_mode(computed_style.writing_mode());
|
||||
computed_values.set_user_select(computed_style.user_select());
|
||||
|
|
|
@ -405,6 +405,8 @@ struct PaintScrollBar {
|
|||
Gfx::IntRect gutter_rect;
|
||||
Gfx::IntRect thumb_rect;
|
||||
CSSPixelFraction scroll_size;
|
||||
Color thumb_color;
|
||||
Color track_color;
|
||||
bool vertical;
|
||||
|
||||
void translate_by(Gfx::IntPoint const& offset)
|
||||
|
|
|
@ -1001,17 +1001,20 @@ void DisplayListPlayerSkia::paint_scrollbar(PaintScrollBar const& command)
|
|||
|
||||
auto& canvas = surface().canvas();
|
||||
|
||||
auto gutter_fill_color = Color(Color::NamedColor::WarmGray).with_alpha(192);
|
||||
auto gutter_fill_color = command.track_color;
|
||||
SkPaint gutter_fill_paint;
|
||||
gutter_fill_paint.setColor(to_skia_color(gutter_fill_color));
|
||||
canvas.drawRect(gutter_rect, gutter_fill_paint);
|
||||
|
||||
auto thumb_fill_color = Color(Color::NamedColor::DarkGray).with_alpha(gutter_rect.isEmpty() ? 128 : 192);
|
||||
auto thumb_fill_color = command.thumb_color;
|
||||
if (command.gutter_rect.is_empty() && thumb_fill_color == CSS::InitialValues::scrollbar_color().thumb_color)
|
||||
thumb_fill_color = thumb_fill_color.with_alpha(128);
|
||||
|
||||
SkPaint thumb_fill_paint;
|
||||
thumb_fill_paint.setColor(to_skia_color(thumb_fill_color));
|
||||
canvas.drawRRect(thumb_rrect, thumb_fill_paint);
|
||||
|
||||
auto stroke_color = Color(Color::NamedColor::LightGray).with_alpha(128);
|
||||
auto stroke_color = thumb_fill_color.lightened();
|
||||
SkPaint stroke_paint;
|
||||
stroke_paint.setStroke(true);
|
||||
stroke_paint.setStrokeWidth(1);
|
||||
|
|
|
@ -400,13 +400,15 @@ void DisplayListRecorder::draw_triangle_wave(Gfx::IntPoint a_p1, Gfx::IntPoint a
|
|||
.thickness = thickness });
|
||||
}
|
||||
|
||||
void DisplayListRecorder::paint_scrollbar(int scroll_frame_id, Gfx::IntRect gutter_rect, Gfx::IntRect thumb_rect, CSSPixelFraction scroll_size, bool vertical)
|
||||
void DisplayListRecorder::paint_scrollbar(int scroll_frame_id, Gfx::IntRect gutter_rect, Gfx::IntRect thumb_rect, CSSPixelFraction scroll_size, Color thumb_color, Color track_color, bool vertical)
|
||||
{
|
||||
append(PaintScrollBar {
|
||||
.scroll_frame_id = scroll_frame_id,
|
||||
.gutter_rect = gutter_rect,
|
||||
.thumb_rect = thumb_rect,
|
||||
.scroll_size = scroll_size,
|
||||
.thumb_color = thumb_color,
|
||||
.track_color = track_color,
|
||||
.vertical = vertical });
|
||||
}
|
||||
|
||||
|
|
|
@ -146,7 +146,7 @@ public:
|
|||
|
||||
void draw_triangle_wave(Gfx::IntPoint a_p1, Gfx::IntPoint a_p2, Color color, int amplitude, int thickness);
|
||||
|
||||
void paint_scrollbar(int scroll_frame_id, Gfx::IntRect gutter_rect, Gfx::IntRect thumb_rect, CSSPixelFraction scroll_size, bool vertical);
|
||||
void paint_scrollbar(int scroll_frame_id, Gfx::IntRect gutter_rect, Gfx::IntRect thumb_rect, CSSPixelFraction scroll_size, Color thumb_color, Color track_color, bool vertical);
|
||||
|
||||
void apply_opacity(float opacity);
|
||||
void apply_compositing_and_blending_operator(Gfx::CompositingAndBlendingOperator compositing_and_blending_operator);
|
||||
|
|
|
@ -479,16 +479,16 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
|
|||
}
|
||||
|
||||
if (phase == PaintPhase::Overlay && (g_paint_viewport_scrollbars || !is_viewport()) && computed_values().scrollbar_width() != CSS::ScrollbarWidth::None) {
|
||||
auto scrollbar_colors = computed_values().scrollbar_color();
|
||||
if (auto scrollbar_data = compute_scrollbar_data(ScrollDirection::Vertical); scrollbar_data.has_value()) {
|
||||
auto gutter_rect = context.rounded_device_rect(scrollbar_data->gutter_rect).to_type<int>();
|
||||
auto thumb_rect = context.rounded_device_rect(scrollbar_data->thumb_rect).to_type<int>();
|
||||
context.display_list_recorder().paint_scrollbar(own_scroll_frame_id().value(), gutter_rect, thumb_rect, scrollbar_data->scroll_length, true);
|
||||
context.display_list_recorder().paint_scrollbar(own_scroll_frame_id().value(), gutter_rect, thumb_rect, scrollbar_data->scroll_length, scrollbar_colors.thumb_color, scrollbar_colors.track_color, true);
|
||||
}
|
||||
|
||||
if (auto scrollbar_data = compute_scrollbar_data(ScrollDirection::Horizontal); scrollbar_data.has_value()) {
|
||||
auto gutter_rect = context.rounded_device_rect(scrollbar_data->gutter_rect).to_type<int>();
|
||||
auto thumb_rect = context.rounded_device_rect(scrollbar_data->thumb_rect).to_type<int>();
|
||||
context.display_list_recorder().paint_scrollbar(own_scroll_frame_id().value(), gutter_rect, thumb_rect, scrollbar_data->scroll_length, false);
|
||||
context.display_list_recorder().paint_scrollbar(own_scroll_frame_id().value(), gutter_rect, thumb_rect, scrollbar_data->scroll_length, scrollbar_colors.thumb_color, scrollbar_colors.track_color, false);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -208,6 +208,7 @@ All properties associated with getComputedStyle(document.body):
|
|||
"rx",
|
||||
"ry",
|
||||
"scale",
|
||||
"scrollbar-color",
|
||||
"scrollbar-gutter",
|
||||
"scrollbar-width",
|
||||
"stop-color",
|
||||
|
|
|
@ -564,6 +564,8 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'rx': 'auto'
|
||||
'ry': 'auto'
|
||||
'scale': 'none'
|
||||
'scrollbarColor': 'auto'
|
||||
'scrollbar-color': 'auto'
|
||||
'scrollbarGutter': 'auto'
|
||||
'scrollbar-gutter': 'auto'
|
||||
'scrollbarWidth': 'auto'
|
||||
|
|
|
@ -206,6 +206,7 @@ row-gap: normal
|
|||
rx: auto
|
||||
ry: auto
|
||||
scale: none
|
||||
scrollbar-color: auto
|
||||
scrollbar-gutter: auto
|
||||
scrollbar-width: auto
|
||||
stop-color: rgb(0, 0, 0)
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 199 tests
|
||||
Found 200 tests
|
||||
|
||||
189 Pass
|
||||
190 Pass
|
||||
10 Fail
|
||||
Pass accent-color
|
||||
Pass border-collapse
|
||||
|
@ -175,6 +175,7 @@ Pass row-gap
|
|||
Pass rx
|
||||
Pass ry
|
||||
Pass scale
|
||||
Pass scrollbar-color
|
||||
Pass scrollbar-gutter
|
||||
Pass scrollbar-width
|
||||
Pass stop-color
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 13 tests
|
||||
|
||||
13 Pass
|
||||
Pass e.style['scrollbar-color'] = "initial" should set the property value
|
||||
Pass e.style['scrollbar-color'] = "inherit" should set the property value
|
||||
Pass e.style['scrollbar-color'] = "unset" should set the property value
|
||||
Pass e.style['scrollbar-color'] = "revert" should set the property value
|
||||
Pass e.style['scrollbar-color'] = "auto" should set the property value
|
||||
Pass e.style['scrollbar-color'] = "red green" should set the property value
|
||||
Pass e.style['scrollbar-color'] = "#FF0000 #00FF00" should set the property value
|
||||
Pass e.style['scrollbar-color'] = "currentcolor currentcolor" should set the property value
|
||||
Pass e.style['scrollbar-color'] = "" should not set the property value
|
||||
Pass e.style['scrollbar-color'] = "auto auto" should not set the property value
|
||||
Pass e.style['scrollbar-color'] = "auto currentcolor" should not set the property value
|
||||
Pass e.style['scrollbar-color'] = "red" should not set the property value
|
||||
Pass e.style['scrollbar-color'] = "#FF0000" should not set the property value
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scrollbars: parsing scrollbar-color declarations</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scrollbars/"/>
|
||||
<meta name="assert" content="Parsing scrollbar-color declarations">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../css/support/parsing-testcommon.js"></script>
|
||||
|
||||
<script>
|
||||
test_valid_value('scrollbar-color', 'initial');
|
||||
test_valid_value('scrollbar-color', 'inherit');
|
||||
test_valid_value('scrollbar-color', 'unset');
|
||||
test_valid_value('scrollbar-color', 'revert');
|
||||
test_valid_value('scrollbar-color', 'auto');
|
||||
test_valid_value("scrollbar-color", "red green");
|
||||
test_valid_value("scrollbar-color", "#FF0000 #00FF00", "rgb(255, 0, 0) rgb(0, 255, 0)");
|
||||
test_valid_value("scrollbar-color", "currentcolor currentcolor");
|
||||
|
||||
test_invalid_value("scrollbar-color", "");
|
||||
test_invalid_value("scrollbar-color", "auto auto");
|
||||
test_invalid_value("scrollbar-color", "auto currentcolor");
|
||||
test_invalid_value("scrollbar-color", "red");
|
||||
test_invalid_value("scrollbar-color", "#FF0000");
|
||||
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue