Ladybird/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-10 18:10:56 +09:00
Code Activity

LibWeb/CSS: Implement the scrollbar-color property

Browse source 
This allows the user to set the scrollbar thumb and track colors.
This commit is contained in:
Tim Ledbetter 2025-05-26 22:36:12 +01:00 • committed by Alexander Kalenik
parent 285bc005cb
commit e2d0d8e2b9
Notes: github-actions[bot] 2025-06-01 22:18:57 +00:00
24 changed files with 212 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Libraries/LibWeb/CMakeLists.txt
View file

@ -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

7
Libraries/LibWeb/CSS/CSSStyleValue.cpp
View file

@ -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());

5
Libraries/LibWeb/CSS/CSSStyleValue.h
View file

@ -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()); }

17
Libraries/LibWeb/CSS/ComputedProperties.cpp
View file

@ -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);

1
Libraries/LibWeb/CSS/ComputedProperties.h
View file

@ -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);

16
Libraries/LibWeb/CSS/ComputedValues.h
View file

@ -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); }

1
Libraries/LibWeb/CSS/Parser/Parser.h
View file

@ -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,

31
Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp
View file

@ -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)
{

6
Libraries/LibWeb/CSS/Properties.json
View file

@ -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",

21
Libraries/LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.cpp Normal file
View file

@ -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
View 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;
};
}

1
Libraries/LibWeb/Forward.h
View file

@ -288,6 +288,7 @@ class Selector;
class ShadowStyleValue;
class ShorthandStyleValue;
class Size;
class ScrollbarColorStyleValue;
class StringStyleValue;
class StyleComputer;
class ComputedProperties;

1
Libraries/LibWeb/Layout/Node.cpp
View file

@ -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());

2
Libraries/LibWeb/Painting/Command.h
View file

@ -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)

9
Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp
View file

@ -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);

4
Libraries/LibWeb/Painting/DisplayListRecorder.cpp
View file

@ -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 });
}

2
Libraries/LibWeb/Painting/DisplayListRecorder.h
View file

@ -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);

6
Libraries/LibWeb/Painting/PaintableBox.cpp
View file

@ -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);
}
}

1
Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt
View file

@ -208,6 +208,7 @@ All properties associated with getComputedStyle(document.body):
"rx",
"ry",
"scale",
"scrollbar-color",
"scrollbar-gutter",
"scrollbar-width",
"stop-color",

2
Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt
View file

@ -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'

1
Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
View file

@ -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)

5
Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt
View file

@ -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

18
Tests/LibWeb/Text/expected/wpt-import/css/css-scrollbars/scrollbar-color-parsing.txt Normal file
View file

@ -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

26
Tests/LibWeb/Text/input/wpt-import/css/css-scrollbars/scrollbar-color-parsing.html Normal file
View file

@ -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>