mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-16 05:51:55 +00:00
LibWeb: Add generic functionality for logical alias computed values
This commit is contained in:
Callum Law
Sam Atkins
parent
cfc8d3031b
commit
34a52baeed
Notes:
github-actions[bot]
2025-06-23 14:20:34 +00:00
Author: https://github.com/Calme1709
Commit: 34a52baeed
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5138
Reviewed-by: https://github.com/AtkinsSJ ✅
8 changed files with 339 additions and 144 deletions
|
|
@ -356,44 +356,6 @@ static NonnullRefPtr<CSSStyleValue const> style_value_for_size(Size const& size)
|
|||
TODO();
|
||||
}
|
||||
|
||||
enum class LogicalSide {
|
||||
BlockStart,
|
||||
BlockEnd,
|
||||
InlineStart,
|
||||
InlineEnd,
|
||||
};
|
||||
static RefPtr<CSSStyleValue const> style_value_for_length_box_logical_side(Layout::NodeWithStyle const&, LengthBox const& box, LogicalSide logical_side)
|
||||
{
|
||||
// FIXME: Actually determine the logical sides based on layout_node's writing-mode and direction.
|
||||
switch (logical_side) {
|
||||
case LogicalSide::BlockStart:
|
||||
return style_value_for_length_percentage(box.top());
|
||||
case LogicalSide::BlockEnd:
|
||||
return style_value_for_length_percentage(box.bottom());
|
||||
case LogicalSide::InlineStart:
|
||||
return style_value_for_length_percentage(box.left());
|
||||
case LogicalSide::InlineEnd:
|
||||
return style_value_for_length_percentage(box.right());
|
||||
}
|
||||
VERIFY_NOT_REACHED();
|
||||
}
|
||||
|
||||
static CSSPixels pixels_for_pixel_box_logical_side(Layout::NodeWithStyle const&, Painting::PixelBox const& box, LogicalSide logical_side)
|
||||
{
|
||||
// FIXME: Actually determine the logical sides based on layout_node's writing-mode and direction.
|
||||
switch (logical_side) {
|
||||
case LogicalSide::BlockStart:
|
||||
return box.top;
|
||||
case LogicalSide::BlockEnd:
|
||||
return box.bottom;
|
||||
case LogicalSide::InlineStart:
|
||||
return box.left;
|
||||
case LogicalSide::InlineEnd:
|
||||
return box.right;
|
||||
}
|
||||
VERIFY_NOT_REACHED();
|
||||
}
|
||||
|
||||
static RefPtr<CSSStyleValue const> style_value_for_shadow(Vector<ShadowData> const& shadow_data)
|
||||
{
|
||||
if (shadow_data.is_empty())
|
||||
|
|
@ -728,11 +690,25 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
|
|||
return element.computed_properties()->property(property_id);
|
||||
};
|
||||
|
||||
if (property_is_logical_alias(property_id)) {
|
||||
GC::Ptr<ComputedProperties> computed_properties;
|
||||
|
||||
if (pseudo_element.has_value())
|
||||
computed_properties = element.pseudo_element_computed_properties(pseudo_element.value());
|
||||
else
|
||||
computed_properties = element.computed_properties();
|
||||
|
||||
return style_value_for_computed_property(
|
||||
layout_node,
|
||||
StyleComputer::map_logical_alias_to_physical_property_id(property_id, StyleComputer::LogicalAliasMappingContext { computed_properties->writing_mode(), computed_properties->direction() }));
|
||||
}
|
||||
|
||||
// A limited number of properties have special rules for producing their "resolved value".
|
||||
// We also have to manually construct shorthands from their longhands here.
|
||||
// Everything else uses the computed value.
|
||||
// https://drafts.csswg.org/cssom/#resolved-values
|
||||
|
||||
// AD-HOC: We don't resolve logical properties here as we have already handled above
|
||||
// The resolved value for a given longhand property can be determined as follows:
|
||||
switch (property_id) {
|
||||
// -> background-color
|
||||
|
|
@ -752,20 +728,8 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
|
|||
// The resolved value is the used value.
|
||||
case PropertyID::BackgroundColor:
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().background_color());
|
||||
case PropertyID::BorderBlockEndColor:
|
||||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
return style_value_for_computed_property(layout_node, PropertyID::BorderBottomColor);
|
||||
case PropertyID::BorderBlockStartColor:
|
||||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
return style_value_for_computed_property(layout_node, PropertyID::BorderTopColor);
|
||||
case PropertyID::BorderBottomColor:
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().border_bottom().color);
|
||||
case PropertyID::BorderInlineEndColor:
|
||||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
return style_value_for_computed_property(layout_node, PropertyID::BorderRightColor);
|
||||
case PropertyID::BorderInlineStartColor:
|
||||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
return style_value_for_computed_property(layout_node, PropertyID::BorderLeftColor);
|
||||
case PropertyID::BorderLeftColor:
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().border_left().color);
|
||||
case PropertyID::BorderRightColor:
|
||||
|
|
@ -818,46 +782,16 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
|
|||
// If the property applies to the element or pseudo-element and the resolved value of the
|
||||
// display property is not none or contents, then the resolved value is the used value.
|
||||
// Otherwise the resolved value is the computed value.
|
||||
case PropertyID::BlockSize: {
|
||||
auto writing_mode = layout_node.computed_values().writing_mode();
|
||||
auto is_vertically_oriented = first_is_one_of(writing_mode, WritingMode::VerticalLr, WritingMode::VerticalRl);
|
||||
if (is_vertically_oriented)
|
||||
return style_value_for_computed_property(layout_node, PropertyID::Width);
|
||||
return style_value_for_computed_property(layout_node, PropertyID::Height);
|
||||
}
|
||||
case PropertyID::Height: {
|
||||
auto maybe_used_height = used_value_for_property([](auto const& paintable_box) { return paintable_box.content_height(); });
|
||||
if (maybe_used_height.has_value())
|
||||
return style_value_for_size(Size::make_px(maybe_used_height.release_value()));
|
||||
return style_value_for_size(layout_node.computed_values().height());
|
||||
}
|
||||
case PropertyID::InlineSize: {
|
||||
auto writing_mode = layout_node.computed_values().writing_mode();
|
||||
auto is_vertically_oriented = first_is_one_of(writing_mode, WritingMode::VerticalLr, WritingMode::VerticalRl);
|
||||
if (is_vertically_oriented)
|
||||
return style_value_for_computed_property(layout_node, PropertyID::Height);
|
||||
return style_value_for_computed_property(layout_node, PropertyID::Width);
|
||||
}
|
||||
case PropertyID::MarginBlockEnd:
|
||||
if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().margin, LogicalSide::BlockEnd); }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().margin(), LogicalSide::BlockEnd);
|
||||
case PropertyID::MarginBlockStart:
|
||||
if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().margin, LogicalSide::BlockStart); }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().margin(), LogicalSide::BlockStart);
|
||||
case PropertyID::MarginBottom:
|
||||
if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().margin.bottom; }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_percentage(layout_node.computed_values().margin().bottom());
|
||||
case PropertyID::MarginInlineEnd:
|
||||
if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().margin, LogicalSide::InlineEnd); }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().margin(), LogicalSide::InlineEnd);
|
||||
case PropertyID::MarginInlineStart:
|
||||
if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().margin, LogicalSide::InlineStart); }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().margin(), LogicalSide::InlineStart);
|
||||
case PropertyID::MarginLeft:
|
||||
if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().margin.left; }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
|
|
@ -870,26 +804,10 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
|
|||
if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().margin.top; }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_percentage(layout_node.computed_values().margin().top());
|
||||
case PropertyID::PaddingBlockEnd:
|
||||
if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().padding, LogicalSide::BlockEnd); }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().padding(), LogicalSide::BlockEnd);
|
||||
case PropertyID::PaddingBlockStart:
|
||||
if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().padding, LogicalSide::BlockStart); }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().padding(), LogicalSide::BlockStart);
|
||||
case PropertyID::PaddingBottom:
|
||||
if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().padding.bottom; }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_percentage(layout_node.computed_values().padding().bottom());
|
||||
case PropertyID::PaddingInlineEnd:
|
||||
if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().padding, LogicalSide::InlineEnd); }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().padding(), LogicalSide::InlineEnd);
|
||||
case PropertyID::PaddingInlineStart:
|
||||
if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().padding, LogicalSide::InlineStart); }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().padding(), LogicalSide::InlineStart);
|
||||
case PropertyID::PaddingLeft:
|
||||
if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().padding.left; }); maybe_used_value.has_value())
|
||||
return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value()));
|
||||
|
|
@ -928,14 +846,6 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
|
|||
|
||||
return style_value_for_length_percentage(inset.bottom());
|
||||
}
|
||||
case PropertyID::InsetBlockEnd:
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().inset(), LogicalSide::BlockEnd);
|
||||
case PropertyID::InsetBlockStart:
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().inset(), LogicalSide::BlockStart);
|
||||
case PropertyID::InsetInlineEnd:
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().inset(), LogicalSide::InlineEnd);
|
||||
case PropertyID::InsetInlineStart:
|
||||
return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().inset(), LogicalSide::InlineStart);
|
||||
case PropertyID::Left: {
|
||||
auto& inset = layout_node.computed_values().inset();
|
||||
if (auto maybe_used_value = used_value_for_inset(inset.left(), inset.right(), [](auto const& paintable_box) { return paintable_box.box_model().inset.left; }); maybe_used_value.has_value())
|
||||
|
|
|
|||
|
|
@ -201,22 +201,22 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'blockSize': '0px'
|
||||
'block-size': '0px'
|
||||
'border': '0px rgb(0, 0, 0)'
|
||||
'borderBlockEnd': 'rgb(0, 0, 0)'
|
||||
'border-block-end': 'rgb(0, 0, 0)'
|
||||
'borderBlockEnd': '0px rgb(0, 0, 0)'
|
||||
'border-block-end': '0px rgb(0, 0, 0)'
|
||||
'borderBlockEndColor': 'rgb(0, 0, 0)'
|
||||
'border-block-end-color': 'rgb(0, 0, 0)'
|
||||
'borderBlockEndStyle': 'none'
|
||||
'border-block-end-style': 'none'
|
||||
'borderBlockEndWidth': 'medium'
|
||||
'border-block-end-width': 'medium'
|
||||
'borderBlockStart': 'rgb(0, 0, 0)'
|
||||
'border-block-start': 'rgb(0, 0, 0)'
|
||||
'borderBlockEndWidth': '0px'
|
||||
'border-block-end-width': '0px'
|
||||
'borderBlockStart': '0px rgb(0, 0, 0)'
|
||||
'border-block-start': '0px rgb(0, 0, 0)'
|
||||
'borderBlockStartColor': 'rgb(0, 0, 0)'
|
||||
'border-block-start-color': 'rgb(0, 0, 0)'
|
||||
'borderBlockStartStyle': 'none'
|
||||
'border-block-start-style': 'none'
|
||||
'borderBlockStartWidth': 'medium'
|
||||
'border-block-start-width': 'medium'
|
||||
'borderBlockStartWidth': '0px'
|
||||
'border-block-start-width': '0px'
|
||||
'borderBottom': '0px rgb(0, 0, 0)'
|
||||
'border-bottom': '0px rgb(0, 0, 0)'
|
||||
'borderBottomColor': 'rgb(0, 0, 0)'
|
||||
|
|
@ -233,22 +233,22 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'border-collapse': 'separate'
|
||||
'borderColor': 'rgb(0, 0, 0)'
|
||||
'border-color': 'rgb(0, 0, 0)'
|
||||
'borderInlineEnd': 'rgb(0, 0, 0)'
|
||||
'border-inline-end': 'rgb(0, 0, 0)'
|
||||
'borderInlineEnd': '0px rgb(0, 0, 0)'
|
||||
'border-inline-end': '0px rgb(0, 0, 0)'
|
||||
'borderInlineEndColor': 'rgb(0, 0, 0)'
|
||||
'border-inline-end-color': 'rgb(0, 0, 0)'
|
||||
'borderInlineEndStyle': 'none'
|
||||
'border-inline-end-style': 'none'
|
||||
'borderInlineEndWidth': 'medium'
|
||||
'border-inline-end-width': 'medium'
|
||||
'borderInlineStart': 'rgb(0, 0, 0)'
|
||||
'border-inline-start': 'rgb(0, 0, 0)'
|
||||
'borderInlineEndWidth': '0px'
|
||||
'border-inline-end-width': '0px'
|
||||
'borderInlineStart': '0px rgb(0, 0, 0)'
|
||||
'border-inline-start': '0px rgb(0, 0, 0)'
|
||||
'borderInlineStartColor': 'rgb(0, 0, 0)'
|
||||
'border-inline-start-color': 'rgb(0, 0, 0)'
|
||||
'borderInlineStartStyle': 'none'
|
||||
'border-inline-start-style': 'none'
|
||||
'borderInlineStartWidth': 'medium'
|
||||
'border-inline-start-width': 'medium'
|
||||
'borderInlineStartWidth': '0px'
|
||||
'border-inline-start-width': '0px'
|
||||
'borderLeft': '0px rgb(0, 0, 0)'
|
||||
'border-left': '0px rgb(0, 0, 0)'
|
||||
'borderLeftColor': 'rgb(0, 0, 0)'
|
||||
|
|
@ -500,12 +500,12 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'max-inline-size': 'none'
|
||||
'maxWidth': 'none'
|
||||
'max-width': 'none'
|
||||
'minBlockSize': '0px'
|
||||
'min-block-size': '0px'
|
||||
'minBlockSize': 'auto'
|
||||
'min-block-size': 'auto'
|
||||
'minHeight': 'auto'
|
||||
'min-height': 'auto'
|
||||
'minInlineSize': '0px'
|
||||
'min-inline-size': '0px'
|
||||
'minInlineSize': 'auto'
|
||||
'min-inline-size': 'auto'
|
||||
'minWidth': 'auto'
|
||||
'min-width': 'auto'
|
||||
'mixBlendMode': 'normal'
|
||||
|
|
|
|||
|
|
@ -91,10 +91,10 @@ background-size: auto auto
|
|||
block-size: 1350px
|
||||
border-block-end-color: rgb(0, 0, 0)
|
||||
border-block-end-style: none
|
||||
border-block-end-width: medium
|
||||
border-block-end-width: 0px
|
||||
border-block-start-color: rgb(0, 0, 0)
|
||||
border-block-start-style: none
|
||||
border-block-start-width: medium
|
||||
border-block-start-width: 0px
|
||||
border-bottom-color: rgb(0, 0, 0)
|
||||
border-bottom-left-radius: 0px
|
||||
border-bottom-right-radius: 0px
|
||||
|
|
@ -102,10 +102,10 @@ border-bottom-style: none
|
|||
border-bottom-width: 0px
|
||||
border-inline-end-color: rgb(0, 0, 0)
|
||||
border-inline-end-style: none
|
||||
border-inline-end-width: medium
|
||||
border-inline-end-width: 0px
|
||||
border-inline-start-color: rgb(0, 0, 0)
|
||||
border-inline-start-style: none
|
||||
border-inline-start-width: medium
|
||||
border-inline-start-width: 0px
|
||||
border-left-color: rgb(0, 0, 0)
|
||||
border-left-style: none
|
||||
border-left-width: 0px
|
||||
|
|
@ -178,9 +178,9 @@ max-block-size: none
|
|||
max-height: none
|
||||
max-inline-size: none
|
||||
max-width: none
|
||||
min-block-size: 0px
|
||||
min-block-size: auto
|
||||
min-height: auto
|
||||
min-inline-size: 0px
|
||||
min-inline-size: auto
|
||||
min-width: auto
|
||||
mix-blend-mode: normal
|
||||
object-fit: fill
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ Harness status: OK
|
|||
|
||||
Found 236 tests
|
||||
|
||||
218 Pass
|
||||
18 Fail
|
||||
230 Pass
|
||||
6 Fail
|
||||
Pass accent-color
|
||||
Pass border-collapse
|
||||
Pass border-spacing
|
||||
|
|
@ -92,22 +92,22 @@ Pass background-repeat
|
|||
Pass background-size
|
||||
Fail block-size
|
||||
Pass border-block-end-color
|
||||
Fail border-block-end-style
|
||||
Fail border-block-end-width
|
||||
Pass border-block-end-style
|
||||
Pass border-block-end-width
|
||||
Pass border-block-start-color
|
||||
Fail border-block-start-style
|
||||
Fail border-block-start-width
|
||||
Pass border-block-start-style
|
||||
Pass border-block-start-width
|
||||
Pass border-bottom-color
|
||||
Pass border-bottom-left-radius
|
||||
Pass border-bottom-right-radius
|
||||
Pass border-bottom-style
|
||||
Pass border-bottom-width
|
||||
Pass border-inline-end-color
|
||||
Fail border-inline-end-style
|
||||
Fail border-inline-end-width
|
||||
Pass border-inline-end-style
|
||||
Pass border-inline-end-width
|
||||
Pass border-inline-start-color
|
||||
Fail border-inline-start-style
|
||||
Fail border-inline-start-width
|
||||
Pass border-inline-start-style
|
||||
Pass border-inline-start-width
|
||||
Pass border-left-color
|
||||
Pass border-left-style
|
||||
Pass border-left-width
|
||||
|
|
@ -175,13 +175,13 @@ Pass margin-right
|
|||
Pass margin-top
|
||||
Pass mask-image
|
||||
Pass mask-type
|
||||
Fail max-block-size
|
||||
Pass max-block-size
|
||||
Pass max-height
|
||||
Fail max-inline-size
|
||||
Pass max-inline-size
|
||||
Pass max-width
|
||||
Fail min-block-size
|
||||
Pass min-block-size
|
||||
Pass min-height
|
||||
Fail min-inline-size
|
||||
Pass min-inline-size
|
||||
Pass min-width
|
||||
Pass mix-blend-mode
|
||||
Pass object-fit
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 68 tests
|
||||
|
||||
57 Pass
|
||||
11 Fail
|
||||
Pass Property block-size has initial value 0px
|
||||
Pass Property block-size does not inherit
|
||||
Pass Property border-block-end-color has initial value rgb(0, 0, 255)
|
||||
Pass Property border-block-end-color does not inherit
|
||||
Pass Property border-block-end-style has initial value none
|
||||
Pass Property border-block-end-style does not inherit
|
||||
Pass Property border-block-end-width has initial value 3px
|
||||
Pass Property border-block-end-width does not inherit
|
||||
Pass Property border-block-start-color has initial value rgb(0, 0, 255)
|
||||
Pass Property border-block-start-color does not inherit
|
||||
Pass Property border-block-start-style has initial value none
|
||||
Pass Property border-block-start-style does not inherit
|
||||
Pass Property border-block-start-width has initial value 3px
|
||||
Pass Property border-block-start-width does not inherit
|
||||
Fail Property border-end-end-radius has initial value 0px
|
||||
Fail Property border-end-end-radius does not inherit
|
||||
Fail Property border-end-start-radius has initial value 0px
|
||||
Fail Property border-end-start-radius does not inherit
|
||||
Pass Property border-inline-end-color has initial value rgb(0, 0, 255)
|
||||
Pass Property border-inline-end-color does not inherit
|
||||
Pass Property border-inline-end-style has initial value none
|
||||
Pass Property border-inline-end-style does not inherit
|
||||
Pass Property border-inline-end-width has initial value 3px
|
||||
Pass Property border-inline-end-width does not inherit
|
||||
Pass Property border-inline-start-color has initial value rgb(0, 0, 255)
|
||||
Pass Property border-inline-start-color does not inherit
|
||||
Pass Property border-inline-start-style has initial value none
|
||||
Pass Property border-inline-start-style does not inherit
|
||||
Pass Property border-inline-start-width has initial value 3px
|
||||
Pass Property border-inline-start-width does not inherit
|
||||
Fail Property border-start-end-radius has initial value 0px
|
||||
Fail Property border-start-end-radius does not inherit
|
||||
Fail Property border-start-start-radius has initial value 0px
|
||||
Fail Property border-start-start-radius does not inherit
|
||||
Pass Property inline-size has initial value 294px
|
||||
Pass Property inline-size does not inherit
|
||||
Pass Property inset-block-end has initial value auto
|
||||
Pass Property inset-block-end does not inherit
|
||||
Pass Property inset-block-start has initial value auto
|
||||
Pass Property inset-block-start does not inherit
|
||||
Pass Property inset-inline-end has initial value auto
|
||||
Pass Property inset-inline-end does not inherit
|
||||
Pass Property inset-inline-start has initial value auto
|
||||
Pass Property inset-inline-start does not inherit
|
||||
Pass Property margin-block-end has initial value 0px
|
||||
Pass Property margin-block-end does not inherit
|
||||
Pass Property margin-block-start has initial value 0px
|
||||
Pass Property margin-block-start does not inherit
|
||||
Pass Property margin-inline-end has initial value 0px
|
||||
Fail Property margin-inline-end does not inherit
|
||||
Pass Property margin-inline-start has initial value 0px
|
||||
Pass Property margin-inline-start does not inherit
|
||||
Pass Property max-block-size has initial value none
|
||||
Pass Property max-block-size does not inherit
|
||||
Pass Property max-inline-size has initial value none
|
||||
Pass Property max-inline-size does not inherit
|
||||
Fail Property min-block-size has initial value 0px
|
||||
Pass Property min-block-size does not inherit
|
||||
Fail Property min-inline-size has initial value 0px
|
||||
Pass Property min-inline-size does not inherit
|
||||
Pass Property padding-block-end has initial value 0px
|
||||
Pass Property padding-block-end does not inherit
|
||||
Pass Property padding-block-start has initial value 0px
|
||||
Pass Property padding-block-start does not inherit
|
||||
Pass Property padding-inline-end has initial value 0px
|
||||
Pass Property padding-inline-end does not inherit
|
||||
Pass Property padding-inline-start has initial value 0px
|
||||
Pass Property padding-inline-start does not inherit
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 93 tests
|
||||
|
||||
21 Pass
|
||||
72 Fail
|
||||
Pass Test that logical sizing properties are supported.
|
||||
Pass Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Pass Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Pass Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Fail Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Fail Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Fail Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Fail Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Fail Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Fail Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Fail Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Fail Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Fail Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Fail Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Fail Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Fail Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Fail Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Fail Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Fail Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Fail Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Fail Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Fail Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Fail Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Fail Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Fail Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Fail Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Fail Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Fail Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Pass Test that logical max sizing properties are supported.
|
||||
Pass Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Pass Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Pass Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Fail Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Fail Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Fail Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Fail Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Fail Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Fail Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Fail Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Fail Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Fail Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Fail Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Fail Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Fail Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Fail Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Fail Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Fail Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Fail Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Fail Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Fail Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Fail Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Fail Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Fail Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Fail Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Fail Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Fail Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Pass Test that logical min sizing properties are supported.
|
||||
Pass Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Pass Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Pass Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Fail Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Fail Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Fail Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Fail Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Fail Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Fail Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Fail Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Fail Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Fail Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Fail Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Fail Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Fail Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Fail Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Fail Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Fail Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Fail Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Fail Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Fail Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Fail Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Fail Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Fail Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Fail Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Fail Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Fail Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Inheritance of CSS Logical Properties and Values properties</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-logical-1/#property-index">
|
||||
<meta name="assert" content="Properties do not inherit.">
|
||||
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../css/support/inheritance-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="reference-container">
|
||||
<div id="reference"></div>
|
||||
</div>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<style>
|
||||
#reference-container {
|
||||
width: 300px;
|
||||
}
|
||||
#reference-container, #reference {
|
||||
border-style: solid; /* Avoid border-top-width computed style 0 */
|
||||
border-top-width: medium;
|
||||
}
|
||||
|
||||
#container, #target {
|
||||
border-block-end-style: solid; /* Avoid border-block-end-width computed style 0 */
|
||||
border-block-start-style: solid;
|
||||
border-inline-end-style: solid;
|
||||
border-inline-start-style: solid;
|
||||
}
|
||||
|
||||
#container {
|
||||
color: blue;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
'use strict';
|
||||
const blue = "rgb(0, 0, 255)";
|
||||
const green = "rgb(0, 128, 0)";
|
||||
const mediumWidth = getComputedStyle(reference).borderTopWidth; // e.g. 3px
|
||||
const referenceWidth = getComputedStyle(reference).width; // e.g. 294px
|
||||
|
||||
assert_not_inherited('block-size', '0px', '10px');
|
||||
|
||||
assert_not_inherited('border-block-end-color', blue, green);
|
||||
assert_not_inherited('border-block-end-style', 'none', 'dotted');
|
||||
assert_not_inherited('border-block-end-width', mediumWidth, '10px');
|
||||
|
||||
assert_not_inherited('border-block-start-color', blue, green);
|
||||
assert_not_inherited('border-block-start-style', 'none', 'dotted');
|
||||
assert_not_inherited('border-block-start-width', mediumWidth, '10px');
|
||||
|
||||
assert_not_inherited('border-end-end-radius', '0px', '10px 20px');
|
||||
assert_not_inherited('border-end-start-radius', '0px', '10px 20px');
|
||||
|
||||
assert_not_inherited('border-inline-end-color', blue, green);
|
||||
assert_not_inherited('border-inline-end-style', 'none', 'dotted');
|
||||
assert_not_inherited('border-inline-end-width', mediumWidth, '10px');
|
||||
|
||||
assert_not_inherited('border-inline-start-color', blue, green);
|
||||
assert_not_inherited('border-inline-start-style', 'none', 'dotted');
|
||||
assert_not_inherited('border-inline-start-width', mediumWidth, '10px');
|
||||
|
||||
assert_not_inherited('border-start-end-radius', '0px', '10px 20px');
|
||||
assert_not_inherited('border-start-start-radius', '0px', '10px 20px');
|
||||
|
||||
assert_not_inherited('inline-size', referenceWidth, '10px');
|
||||
|
||||
assert_not_inherited('inset-block-end', 'auto', '10px');
|
||||
assert_not_inherited('inset-block-start', 'auto', '10px');
|
||||
assert_not_inherited('inset-inline-end', 'auto', '10px');
|
||||
assert_not_inherited('inset-inline-start', 'auto', '10px');
|
||||
|
||||
assert_not_inherited('margin-block-end', '0px', '10px');
|
||||
assert_not_inherited('margin-block-start', '0px', '10px');
|
||||
assert_not_inherited('margin-inline-end', '0px', '10px');
|
||||
assert_not_inherited('margin-inline-start', '0px', '10px');
|
||||
|
||||
assert_not_inherited('max-block-size', 'none', '10px');
|
||||
assert_not_inherited('max-inline-size', 'none', '10px');
|
||||
assert_not_inherited('min-block-size', '0px', '10px');
|
||||
assert_not_inherited('min-inline-size', '0px', '10px');
|
||||
|
||||
assert_not_inherited('padding-block-end', '0px', '10px');
|
||||
assert_not_inherited('padding-block-start', '0px', '10px');
|
||||
assert_not_inherited('padding-inline-end', '0px', '10px');
|
||||
assert_not_inherited('padding-inline-start', '0px', '10px');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Logical Properties: Flow-Relative Sizing</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#dimension-properties">
|
||||
<meta name="assert" content="This test checks the interaction of the flow-relative sizing properties with the physical ones in different writing modes." />
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="module">
|
||||
import {runTests, createSizingPropertyGroup} from "./resources/test-box-properties.js";
|
||||
runTests(createSizingPropertyGroup(""));
|
||||
runTests(createSizingPropertyGroup("max-"));
|
||||
runTests(createSizingPropertyGroup("min-"));
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue