RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 01:07:35 +00:00
Code Issues Activity Actions

LibWeb: Resolve effective overflow-x and overflow-y according to spec

Browse source 
Implements following rule from CSS Overflow Module Level 3:
"The visible/clip values of overflow compute to auto/hidden
(respectively) if one of overflow-x or overflow-y is neither visible
nor clip."
This commit is contained in:
Aliaksandr Kalenik 2024-02-04 15:27:04 +01:00 • committed by Andreas Kling
parent b6292a2d7d
commit 623ad94582
6 changed files with 74 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

19
Tests/LibWeb/Ref/overflow-hidden-7.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<link rel="match" href="reference/overflow-hidden-7-ref.html" />
<style>
.box {
overflow-y: hidden;
overflow-x: visible;
width: 200px;
height: 200px;
}
.inner {
width: 300px;
height: 300px;
background-color: darkblue;
}
</style>
<div class="box">
<div class="inner"></div>
</div>

9
Tests/LibWeb/Ref/reference/overflow-hidden-7-ref.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<style>
.box {
width: 200px;
height: 200px;
background-color: darkblue;
}
</style>
<div class="box"></div>

2
Tests/LibWeb/Text/expected/resolve-css-overflow-effective-value.txt Normal file
View file

@ -0,0 +1,2 @@
overflow-x: auto
overflow-y: hidden

19
Tests/LibWeb/Text/input/resolve-css-overflow-effective-value.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<style>
.box {
overflow-y: hidden;
overflow-x: visible;
width: 200px;
height: 200px;
background-color: darkblue;
}
</style>
<body><div class="box"></div></body>
<script src="include.js"></script>
<script>
test(() => {
const box = window.getComputedStyle(document.querySelector(".box"));
println(`overflow-x: ${box.getPropertyValue("overflow-x")}`);
println(`overflow-y: ${box.getPropertyValue("overflow-y")}`);
});
</script>

24
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -1959,6 +1959,27 @@ void StyleComputer::absolutize_values(StyleProperties& style) const
style.set_line_height({}, line_height); style.set_line_height({}, line_height);
} }
void StyleComputer::resolve_effective_overflow_values(StyleProperties& style) const
{
// https://www.w3.org/TR/css-overflow-3/#overflow-control
// The visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or
// overflow-y is neither visible nor clip.
auto overflow_x = value_id_to_overflow(style.property(PropertyID::OverflowX)->to_identifier());
auto overflow_y = value_id_to_overflow(style.property(PropertyID::OverflowY)->to_identifier());
auto overflow_x_is_visible_or_clip = overflow_x == Overflow::Visible || overflow_x == Overflow::Clip;
auto overflow_y_is_visible_or_clip = overflow_y == Overflow::Visible || overflow_y == Overflow::Clip;
if (!overflow_x_is_visible_or_clip || !overflow_y_is_visible_or_clip) {
if (overflow_x == CSS::Overflow::Visible)
style.set_property(CSS::PropertyID::OverflowX, IdentifierStyleValue::create(CSS::ValueID::Auto), nullptr);
if (overflow_x == CSS::Overflow::Clip)
style.set_property(CSS::PropertyID::OverflowX, IdentifierStyleValue::create(CSS::ValueID::Hidden), nullptr);
if (overflow_y == CSS::Overflow::Visible)
style.set_property(CSS::PropertyID::OverflowY, IdentifierStyleValue::create(CSS::ValueID::Auto), nullptr);
if (overflow_y == CSS::Overflow::Clip)
style.set_property(CSS::PropertyID::OverflowY, IdentifierStyleValue::create(CSS::ValueID::Hidden), nullptr);
}
}
enum class BoxTypeTransformation { enum class BoxTypeTransformation {
None, None,
Blockify, Blockify,
@ -2139,6 +2160,9 @@ ErrorOr<RefPtr<StyleProperties>> StyleComputer::compute_style_impl(DOM::Element&
// 6. Run automatic box type transformations // 6. Run automatic box type transformations
transform_box_type_if_needed(style, element, pseudo_element); transform_box_type_if_needed(style, element, pseudo_element);
// 7. Resolve effective overflow values
resolve_effective_overflow_values(style);
return style; return style;
} }

1
Userland/Libraries/LibWeb/CSS/StyleComputer.h
View file

@ -129,6 +129,7 @@ private:
void compute_math_depth(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const; void compute_math_depth(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
void compute_defaulted_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const; void compute_defaulted_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
void absolutize_values(StyleProperties&) const; void absolutize_values(StyleProperties&) const;
void resolve_effective_overflow_values(StyleProperties&) const;
void transform_box_type_if_needed(StyleProperties&, DOM::Element const&, Optional<CSS::Selector::PseudoElement::Type>) const; void transform_box_type_if_needed(StyleProperties&, DOM::Element const&, Optional<CSS::Selector::PseudoElement::Type>) const;
void compute_defaulted_property_value(StyleProperties&, DOM::Element const*, CSS::PropertyID, Optional<CSS::Selector::PseudoElement::Type>) const; void compute_defaulted_property_value(StyleProperties&, DOM::Element const*, CSS::PropertyID, Optional<CSS::Selector::PseudoElement::Type>) const;