mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-09 17:44:56 +09:00
LibWeb: Apply presentational hints for the HTMLHRElement align attribute
This commit is contained in:
parent
c217057cfd
commit
0e470d5cdf
Notes:
github-actions[bot]
2025-02-18 11:07:39 +00:00
Author: https://github.com/tcl3
Commit: 0e470d5cdf
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3610
3 changed files with 69 additions and 1 deletions
|
@ -36,7 +36,7 @@ bool HTMLHRElement::is_presentational_hint(FlyString const& name) const
|
|||
if (Base::is_presentational_hint(name))
|
||||
return true;
|
||||
|
||||
return first_is_one_of(name, HTML::AttributeNames::color, HTML::AttributeNames::noshade, HTML::AttributeNames::width);
|
||||
return first_is_one_of(name, HTML::AttributeNames::align, HTML::AttributeNames::color, HTML::AttributeNames::noshade, HTML::AttributeNames::width);
|
||||
}
|
||||
|
||||
void HTMLHRElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
|
||||
|
@ -50,6 +50,19 @@ void HTMLHRElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties>
|
|||
cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderLeftStyle, CSS::CSSKeywordValue::create(CSS::Keyword::Solid));
|
||||
}
|
||||
|
||||
if (name == HTML::AttributeNames::align) {
|
||||
if (value.equals_ignoring_ascii_case("left"sv)) {
|
||||
cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, CSS::LengthStyleValue::create(CSS::Length::make_px(0)));
|
||||
cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
|
||||
} else if (value.equals_ignoring_ascii_case("right"sv)) {
|
||||
cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
|
||||
cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, CSS::LengthStyleValue::create(CSS::Length::make_px(0)));
|
||||
} else if (value.equals_ignoring_ascii_case("center"sv)) {
|
||||
cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
|
||||
cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
|
||||
}
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2:attr-hr-color-3
|
||||
// When an hr element has a color attribute, its value is expected to be parsed using the rules for parsing a legacy color value, and if that does not return failure,
|
||||
// the user agent is expected to treat the attribute as a presentational hint setting the element's 'color' property to the resulting color.
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<style>
|
||||
.hr {
|
||||
color: gray;
|
||||
border-style: inset;
|
||||
border-width: 1px;
|
||||
margin: 0.5em auto;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
<div class='hr'></div>
|
||||
<div class='hr left'></div>
|
||||
<div class='hr'></div>
|
||||
<div class='hr right'></div>
|
||||
<div class='hr'></div>
|
||||
|
||||
<div class='hr'></div>
|
||||
<div class='hr left'></div>
|
||||
<div class='hr'></div>
|
||||
<div class='hr right'></div>
|
||||
<div class='hr'></div>
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="match" href="../../../../../../expected/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html">
|
||||
<style>
|
||||
hr {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<hr align=>
|
||||
<hr align=left>
|
||||
<hr align=center>
|
||||
<hr align=right>
|
||||
<hr align=foobar>
|
||||
|
||||
<script>
|
||||
// Test the IDL attribute
|
||||
const values = ['', 'left', 'center', 'right', 'foobar'];
|
||||
values.forEach(value => {
|
||||
const hr = document.createElement('hr');
|
||||
hr.align = value;
|
||||
document.body.appendChild(hr);
|
||||
});
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue