Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-06 16:45:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

layout: Account for transform in scrollable overflow (#36138)

Browse source 
In the scrollable overflow calcutation, apply CSS transforms to boxes
and scrollable overflow of the descendant. Clip unreachable scrollable
overflow according to it's block start and inline start scrolling
direction. And, renamed `Fragment::scrolling_overflow` to
`Fragment::scrolling_overflow_for_parent` as it was calculating the
scrolling overflow contribution from a child.

Add several WPT tests, testing the transform interaction `rotate`,
`scale`, and `skew` with scrollable overflow. There are several WPT test
that are testing the interaction that not expected from current browsers
implementation according to the spec.

Testing: Existing and new WPT. 
Fixes: #36031

---------

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
This commit is contained in:
Steven Novaryo 2025-04-29 17:37:27 +08:00 • committed by GitHub
parent b92542b756
commit bd6928f3dc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 974 additions and 288 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/layout/display_list/mod.rs
View file

@ -39,7 +39,7 @@ use webrender_api::{
use wr::units::LayoutVector2D;
use crate::context::{LayoutContext, ResolvedImage};
use crate::display_list::conversions::ToWebRender;
pub use crate::display_list::conversions::ToWebRender;
use crate::display_list::stacking_context::StackingContextSection;
use crate::fragment_tree::{
BackgroundMode, BoxFragment, Fragment, FragmentFlags, FragmentTree, SpecificLayoutInfo, Tag,
@ -711,7 +711,12 @@ impl<'a> BuilderForBoxFragment<'a> {
fn build(&mut self, builder: &mut DisplayListBuilder, section: StackingContextSection) {
if self.is_hit_test_for_scrollable_overflow {
self.build_hit_test(builder, self.fragment.scrollable_overflow().to_webrender());
self.build_hit_test(
builder,
self.fragment
.reachable_scrollable_overflow_region()
.to_webrender(),
);
return;
}

2
components/layout/display_list/stacking_context.rs
View file

@ -1477,7 +1477,7 @@ impl BoxFragment {
y: overflow.y.into(),
};
let content_rect = self.scrollable_overflow().to_webrender();
let content_rect = self.reachable_scrollable_overflow_region().to_webrender();
let scroll_tree_node_id = display_list.define_scroll_frame(
parent_scroll_node_id,

2
components/layout/flow/root.rs
View file

@ -411,7 +411,7 @@ impl BoxTree {
let scrollable_overflow = root_fragments
.iter()
.fold(PhysicalRect::zero(), |acc, child| {
let child_overflow = child.scrollable_overflow();
let child_overflow = child.scrollable_overflow_for_parent();
// https://drafts.csswg.org/css-overflow/#scrolling-direction
// We want to clip scrollable overflow on box-start and inline-start

110
components/layout/fragment_tree/box_fragment.rs
View file

@ -2,11 +2,12 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
use app_units::Au;
use app_units::{Au, MAX_AU, MIN_AU};
use atomic_refcell::AtomicRefCell;
use base::print_tree::PrintTree;
use malloc_size_of_derive::MallocSizeOf;
use servo_arc::Arc as ServoArc;
use servo_geometry::f32_rect_to_au_rect;
use style::Zero;
use style::computed_values::border_collapse::T as BorderCollapse;
use style::computed_values::overflow_x::T as ComputedOverflow;
@ -16,6 +17,7 @@ use style::properties::ComputedValues;
use style::values::specified::box_::DisplayOutside;
use super::{BaseFragment, BaseFragmentInfo, CollapsedBlockMargins, Fragment};
use crate::display_list::ToWebRender;
use crate::formatting_contexts::Baselines;
use crate::geom::{
AuOrAuto, LengthPercentageOrAuto, PhysicalPoint, PhysicalRect, PhysicalSides, ToLogical,
@ -116,7 +118,7 @@ impl BoxFragment {
) -> BoxFragment {
let scrollable_overflow_from_children =
children.iter().fold(PhysicalRect::zero(), |acc, child| {
acc.union(&child.scrollable_overflow())
acc.union(&child.scrollable_overflow_for_parent())
});
BoxFragment {
@ -267,32 +269,98 @@ impl BoxFragment {
pub fn scrollable_overflow_for_parent(&self) -> PhysicalRect<Au> {
let mut overflow = self.border_rect();
if self.style.establishes_scroll_container(self.base.flags) {
return overflow;
if !self.style.establishes_scroll_container(self.base.flags) {
// https://www.w3.org/TR/css-overflow-3/#scrollable
// Only include the scrollable overflow of a child box if it has overflow: visible.
let scrollable_overflow = self.scrollable_overflow();
let bottom_right = PhysicalPoint::new(
overflow.max_x().max(scrollable_overflow.max_x()),
overflow.max_y().max(scrollable_overflow.max_y()),
);
let overflow_style = self.style.effective_overflow(self.base.flags);
if overflow_style.y == ComputedOverflow::Visible {
overflow.origin.y = overflow.origin.y.min(scrollable_overflow.origin.y);
overflow.size.height = bottom_right.y - overflow.origin.y;
}
if overflow_style.x == ComputedOverflow::Visible {
overflow.origin.x = overflow.origin.x.min(scrollable_overflow.origin.x);
overflow.size.width = bottom_right.x - overflow.origin.x;
}
}
// https://www.w3.org/TR/css-overflow-3/#scrollable
// Only include the scrollable overflow of a child box if it has overflow: visible.
let scrollable_overflow = self.scrollable_overflow();
let bottom_right = PhysicalPoint::new(
overflow.max_x().max(scrollable_overflow.max_x()),
overflow.max_y().max(scrollable_overflow.max_y()),
);
let overflow_style = self.style.effective_overflow(self.base.flags);
if overflow_style.y == ComputedOverflow::Visible {
overflow.origin.y = overflow.origin.y.min(scrollable_overflow.origin.y);
overflow.size.height = bottom_right.y - overflow.origin.y;
}
if overflow_style.x == ComputedOverflow::Visible {
overflow.origin.x = overflow.origin.x.min(scrollable_overflow.origin.x);
overflow.size.width = bottom_right.x - overflow.origin.x;
// <https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region>
// > ...accounting for transforms by projecting each box onto the plane of
// > the element that establishes its 3D rendering context. [CSS3-TRANSFORMS]
// Both boxes and its scrollable overflow (if it is included) should be transformed accordingly.
//
// TODO(stevennovaryo): We are supposed to handle perspective transform and 3d context, but it is yet to happen.
if self
.style
.has_effective_transform_or_perspective(self.base.flags)
{
if let Some(transform) =
self.calculate_transform_matrix(&self.border_rect().to_untyped())
{
if let Some(transformed_overflow_box) =
transform.outer_transformed_rect(&overflow.to_webrender().to_rect())
{
overflow =
f32_rect_to_au_rect(transformed_overflow_box.to_untyped()).cast_unit();
}
}
}
overflow
}
/// <https://drafts.csswg.org/css-overflow/#unreachable-scrollable-overflow-region>
/// > area beyond the scroll origin in either axis is considered the unreachable scrollable overflow region
///
/// Return the clipped the scrollable overflow based on its scroll origin, determined by overflow direction.
/// For an element, the clip rect is the padding rect and for viewport, it is the initial containing block.
pub fn clip_unreachable_scrollable_overflow_region(
&self,
scrollable_overflow: PhysicalRect<Au>,
clipping_rect: PhysicalRect<Au>,
) -> PhysicalRect<Au> {
let scrolling_direction = self.style.overflow_direction();
let mut scrollable_overflow_box = scrollable_overflow.to_box2d();
let mut clipping_box = clipping_rect.to_box2d();
if scrolling_direction.rightward {
clipping_box.max.x = MAX_AU;
} else {
clipping_box.min.x = MIN_AU;
}
if scrolling_direction.downward {
clipping_box.max.y = MAX_AU;
} else {
clipping_box.min.y = MIN_AU;
}
scrollable_overflow_box = scrollable_overflow_box.intersection_unchecked(&clipping_box);
match scrollable_overflow_box.is_negative() {
true => PhysicalRect::zero(),
false => scrollable_overflow_box.to_rect(),
}
}
/// <https://drafts.csswg.org/css-overflow/#unreachable-scrollable-overflow-region>
/// > area beyond the scroll origin in either axis is considered the unreachable scrollable overflow region
///
/// Return the clipped the scrollable overflow based on its scroll origin, determined by overflow direction.
/// This will coincides with the scrollport if the fragment is a scroll container.
pub fn reachable_scrollable_overflow_region(&self) -> PhysicalRect<Au> {
self.clip_unreachable_scrollable_overflow_region(
self.scrollable_overflow(),
self.padding_rect(),
)
}
pub(crate) fn calculate_resolved_insets_if_positioned(&self) -> PhysicalSides<AuOrAuto> {
let position = self.style.get_box().position;
debug_assert_ne!(

17
components/layout/fragment_tree/fragment.rs
View file

@ -170,17 +170,28 @@ impl Fragment {
}
}
pub fn scrolling_area(&self) -> PhysicalRect<Au> {
pub fn unclipped_scrolling_area(&self) -> PhysicalRect<Au> {
match self {
Fragment::Box(fragment) | Fragment::Float(fragment) => {
let fragment = fragment.borrow();
fragment.offset_by_containing_block(&fragment.scrollable_overflow())
},
_ => self.scrollable_overflow(),
_ => self.scrollable_overflow_for_parent(),
}
}
pub fn scrollable_overflow(&self) -> PhysicalRect<Au> {
pub fn scrolling_area(&self) -> PhysicalRect<Au> {
match self {
Fragment::Box(fragment) | Fragment::Float(fragment) => {
let fragment = fragment.borrow();
fragment
.offset_by_containing_block(&fragment.reachable_scrollable_overflow_region())
},
_ => self.scrollable_overflow_for_parent(),
}
}
pub fn scrollable_overflow_for_parent(&self) -> PhysicalRect<Au> {
match self {
Fragment::Box(fragment) | Fragment::Float(fragment) => {
fragment.borrow().scrollable_overflow_for_parent()

21
components/layout/fragment_tree/fragment_tree.rs
View file

@ -138,11 +138,26 @@ impl FragmentTree {
.find_map(|child| child.find(&info, 0, &mut process_func))
}
/// <https://drafts.csswg.org/cssom-view/#scrolling-area>
///
/// Scrolling area for a viewport that is clipped according to overflow direction of root element.
pub fn get_scrolling_area_for_viewport(&self) -> PhysicalRect<Au> {
let mut scroll_area = self.initial_containing_block;
for fragment in self.root_fragments.iter() {
scroll_area = fragment.scrolling_area().union(&scroll_area);
if let Some(root_fragment) = self.root_fragments.first() {
for fragment in self.root_fragments.iter() {
scroll_area = fragment.unclipped_scrolling_area().union(&scroll_area);
}
match root_fragment {
Fragment::Box(fragment) | Fragment::Float(fragment) => fragment
.borrow()
.clip_unreachable_scrollable_overflow_region(
scroll_area,
self.initial_containing_block,
),
_ => scroll_area,
}
} else {
scroll_area
}
scroll_area
}
}

2
components/layout/fragment_tree/positioning_fragment.rs
View file

@ -56,7 +56,7 @@ impl PositioningFragment {
let scrollable_overflow = children.iter().fold(PhysicalRect::zero(), |acc, child| {
acc.union(
&child
.scrollable_overflow()
.scrollable_overflow_for_parent()
.translate(content_origin.to_vector()),
)
});

30
components/layout/style_ext.rs
View file

@ -12,7 +12,7 @@ use style::computed_values::mix_blend_mode::T as ComputedMixBlendMode;
use style::computed_values::position::T as ComputedPosition;
use style::computed_values::transform_style::T as ComputedTransformStyle;
use style::computed_values::unicode_bidi::T as UnicodeBidi;
use style::logical_geometry::{Direction as AxisDirection, WritingMode};
use style::logical_geometry::{Direction as AxisDirection, PhysicalSide, WritingMode};
use style::properties::ComputedValues;
use style::properties::longhands::backface_visibility::computed_value::T as BackfaceVisiblity;
use style::properties::longhands::box_sizing::computed_value::T as BoxSizing;
@ -280,6 +280,16 @@ impl Default for BorderStyleColor {
}
}
/// <https://drafts.csswg.org/cssom-view/#overflow-directions>
/// > A scrolling box of a viewport or element has two overflow directions,
/// > which are the block-end and inline-end directions for that viewport or element.
pub(crate) struct OverflowDirection {
/// Whether block-end or inline-end direction is [PhysicalSide::Right].
pub rightward: bool,
/// Whether block-end or inline-end direction is [PhysicalSide::Bottom].
pub downward: bool,
}
pub(crate) trait ComputedValuesExt {
fn physical_box_offsets(&self) -> PhysicalSides<LengthPercentageOrAuto<'_>>;
fn box_offsets(&self, writing_mode: WritingMode) -> LogicalSides<LengthPercentageOrAuto<'_>>;
@ -354,6 +364,7 @@ pub(crate) trait ComputedValuesExt {
writing_mode: WritingMode,
) -> bool;
fn is_inline_box(&self, fragment_flags: FragmentFlags) -> bool;
fn overflow_direction(&self) -> OverflowDirection;
}
impl ComputedValuesExt for ComputedValues {
@ -980,6 +991,23 @@ impl ComputedValuesExt for ComputedValues {
};
has_percentage(box_offsets.block_start) || has_percentage(box_offsets.block_end)
}
// <https://drafts.csswg.org/cssom-view/#overflow-directions>
fn overflow_direction(&self) -> OverflowDirection {
let inline_end_direction = self.writing_mode.inline_end_physical_side();
let block_end_direction = self.writing_mode.block_end_physical_side();
let rightward = inline_end_direction == PhysicalSide::Right ||
block_end_direction == PhysicalSide::Right;
let downward = inline_end_direction == PhysicalSide::Bottom ||
block_end_direction == PhysicalSide::Bottom;
// TODO(stevennovaryo): We should consider the flex-container's CSS (e.g. flow-direction: column-reverse).
OverflowDirection {
rightward,
downward,
}
}
}
pub(crate) enum LayoutStyle<'a> {

56
tests/wpt/meta/MANIFEST.json vendored
View file

@ -595710,6 +595710,55 @@
{}
]
],
"scrollable-overflow-transform-004.html": [
"b398167fa309885658f044ccdd1df75bca880701",
[
null,
{}
]
],
"scrollable-overflow-transform-005.tentative.html": [
"837b95ba96db71e7d696edfe4bb6c7c489e7a411",
[
null,
{}
]
],
"scrollable-overflow-transform-006.html": [
"2eea759da6a1adad341b2145a8b29725e84c2db6",
[
null,
{}
]
],
"scrollable-overflow-transform-007.html": [
"8aa6e5f17d8633e759d5b52b5096057c367d7b58",
[
null,
{}
]
],
"scrollable-overflow-transform-008.html": [
"df1daeb842405ba6107be563e1652651ec232d58",
[
null,
{}
]
],
"scrollable-overflow-transform-009.html": [
"aca1b28418adf361a38f59bb10e6ba3cdabd3097",
[
null,
{}
]
],
"scrollable-overflow-transform-010.tentative.html": [
"e2c62cb4474ecbd486360fdd4aeb1c306a433f2d",
[
null,
{}
]
],
"scrollable-overflow-transform-dynamic-001.html": [
"a233376bdb222e5eeb45e3b5f646a84a665e6594",
[
@ -595752,6 +595801,13 @@
{}
]
],
"scrollable-overflow-transform-unreachable-region.html": [
"91e987bf82654415f47500f9d6d7d568e4eefcbc",
[
null,
{}
]
],
"scrollable-overflow-vertical-rl-dynamic.html": [
"07f322901748c9709c3037d0223a546549cc9cff",
[

12
tests/wpt/meta/css/css-flexbox/negative-overflow.html.ini vendored
View file

@ -5,21 +5,9 @@
[.flexbox 11]
expected: FAIL
[.flexbox 6]
expected: FAIL
[.flexbox 7]
expected: FAIL
[.flexbox 1]
expected: FAIL
[.flexbox 2]
expected: FAIL
[.flexbox 3]
expected: FAIL
[.flexbox 8]
expected: FAIL

9
tests/wpt/meta/css/css-grid/alignment/grid-content-alignment-overflow-002.html.ini vendored
View file

@ -11,20 +11,11 @@
[.grid 4]
expected: FAIL
[.grid 5]
expected: FAIL
[.grid 6]
expected: FAIL
[.grid 7]
expected: FAIL
[.grid 8]
expected: FAIL
[.grid 11]
expected: FAIL
[.grid 12]
expected: FAIL

3
tests/wpt/meta/css/css-overflow/overflow-inline-transform-relative.html.ini vendored
View file

@ -1,3 +0,0 @@
[overflow-inline-transform-relative.html]
[#target used transform when computing scroll overflow]
expected: FAIL

3
tests/wpt/meta/css/css-overflow/scroll-overflow-padding-block-001.html.ini vendored
View file

@ -1,7 +1,4 @@
[scroll-overflow-padding-block-001.html]
expected: ERROR
[undefined block-end]
expected: FAIL
[undefined block-start]
expected: [PASS, FAIL]

9
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-001.html.ini vendored
View file

@ -1,9 +0,0 @@
[scrollable-overflow-transform-001.html]
[.container 1]
expected: FAIL
[.container 2]
expected: FAIL
[.container 3]
expected: FAIL

9
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-002.html.ini vendored
View file

@ -1,9 +0,0 @@
[scrollable-overflow-transform-002.html]
[.container 1]
expected: FAIL
[.container 2]
expected: FAIL
[.container 3]
expected: FAIL

9
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-003.html.ini vendored
View file

@ -1,9 +0,0 @@
[scrollable-overflow-transform-003.html]
[.container 1]
expected: FAIL
[.container 2]
expected: FAIL
[.container 3]
expected: FAIL

3
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-005.tentative.html.ini vendored Normal file
View file

@ -0,0 +1,3 @@
[scrollable-overflow-transform-005.tentative.html]
[.container 6]
expected: FAIL

6
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-009.html.ini vendored Normal file
View file

@ -0,0 +1,6 @@
[scrollable-overflow-transform-009.html]
[.container 2]
expected: FAIL
[.container 3]
expected: FAIL

6
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-010.tentative.html.ini vendored Normal file
View file

@ -0,0 +1,6 @@
[scrollable-overflow-transform-010.tentative.html]
[.container 1]
expected: FAIL
[.container 2]
expected: FAIL

9
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-001.html.ini vendored
View file

@ -1,9 +0,0 @@
[scrollable-overflow-transform-dynamic-001.html]
[Check scrollWidth before and after transform chage]
expected: FAIL
[Check scrollHeight before and after transform chage]
expected: FAIL
[Check scrollWidth and scrollHeight before and after transform chage]
expected: FAIL

9
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-002.html.ini vendored
View file

@ -1,9 +0,0 @@
[scrollable-overflow-transform-dynamic-002.html]
[Check scrollWidth before and after transform chage]
expected: FAIL
[Check scrollHeight before and after transform chage]
expected: FAIL
[Check scrollWidth and scrollHeight before and after transform chage]
expected: FAIL

9
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-003.html.ini vendored
View file

@ -1,9 +0,0 @@
[scrollable-overflow-transform-dynamic-003.html]
[Check scrollWidth before and after transform chage]
expected: FAIL
[Check scrollHeight before and after transform chage]
expected: FAIL
[Check scrollWidth and scrollHeight before and after transform chage]
expected: FAIL

9
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-004.html.ini vendored
View file

@ -1,9 +0,0 @@
[scrollable-overflow-transform-dynamic-004.html]
[Check scrollWidth before and after position and transform chage]
expected: FAIL
[Check scrollHeight before and after position and transform chage]
expected: FAIL
[Check scrollWidth and scrollHeight after position and transform chage]
expected: FAIL

9
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-005.html.ini vendored
View file

@ -1,9 +0,0 @@
[scrollable-overflow-transform-dynamic-005.html]
[Check scrollWidth before and after appendChild() and transform chage]
expected: FAIL
[Check scrollHeight before and after appendChild() and transform chage]
expected: FAIL
[Check scrollWidth and scrollHeight before and after appendChild() and transform chage]
expected: FAIL

9
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-006.html.ini vendored
View file

@ -1,9 +0,0 @@
[scrollable-overflow-transform-dynamic-006.html]
[Check scrollWidth before and after removeChild() and transform chage]
expected: FAIL
[Check scrollHeight before and after removeChild() and transform chage]
expected: FAIL
[Check scrollWidth and scrollHeight before and after removeChild() and transform chage]
expected: FAIL

168
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-unreachable-region.html.ini vendored Normal file
View file

@ -0,0 +1,168 @@
[scrollable-overflow-transform-unreachable-region.html]
[scrollWidth of display: flow-root; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flow-root; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flow-root; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flow-root; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
expected: FAIL
[scrollWidth of display: grid; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollWidth of display: grid; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: grid; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL
[scrollHeight of display: grid; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
expected: FAIL

12
tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-001.html.ini vendored
View file

@ -1,12 +0,0 @@
[scrollWidthHeight-negative-margin-001.html]
[scrollWidth/Height with negative margins: overflow: visible;]
expected: FAIL
[scrollWidth/Height with negative margins: overflow: hidden;]
expected: FAIL
[scrollWidth/Height with negative margins: overflow: auto;]
expected: FAIL
[scrollWidth/Height with negative margins: overflow: clip;]
expected: FAIL

240
tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-002.html.ini vendored
View file

@ -121,97 +121,97 @@
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: wrap-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-flow: wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-flow: wrap-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-flow: wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-flow: wrap-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-flow: wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-flow: wrap-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-flow: wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-flow: wrap-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-flow: wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-flow: wrap-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-flow: wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-flow: wrap-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-flow: wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-flow: wrap-reverse;]
expected: FAIL
@ -220,49 +220,49 @@
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: row-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: row-reverse wrap-reverse;]
expected: FAIL
@ -313,145 +313,145 @@
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: column wrap-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: column wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-flow: column wrap-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-flow: column wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-flow: column wrap-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-flow: column wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-flow: column wrap-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-flow: column wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-flow: column wrap-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-flow: column wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-flow: column wrap-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-flow: column wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-flow: column wrap-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-flow: column wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-flow: column wrap-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-flow: column wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: column-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: column-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column-reverse;]
expected: FAIL
@ -505,85 +505,70 @@
expected: FAIL
[scrollWidth with negative margins: display: flow-root; overflow: visible; direction: ltr; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: flow-root; overflow: visible; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flow-root; overflow: hidden; direction: ltr; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: flow-root; overflow: hidden; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flow-root; overflow: auto; direction: ltr; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: flow-root; overflow: auto; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flow-root; overflow: scroll; direction: ltr; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: flow-root; overflow: scroll; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flow-root; overflow: visible; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flow-root; overflow: visible; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flow-root; overflow: hidden; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flow-root; overflow: hidden; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flow-root; overflow: auto; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flow-root; overflow: auto; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flow-root; overflow: scroll; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flow-root; overflow: scroll; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flow-root; overflow: clip; direction: ltr; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: flow-root; overflow: clip; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flow-root; overflow: clip; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flow-root; overflow: clip; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: wrap-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: wrap-reverse;]
expected: FAIL
@ -592,13 +577,13 @@
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: row-reverse wrap-reverse;]
expected: FAIL
@ -613,37 +598,37 @@
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: column wrap-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: column wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: column wrap-reverse;]
expected: FAIL
[scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: column wrap-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column-reverse;]
expected: FAIL
[scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column-reverse;]
expected: FAIL
expected: [FAIL, PASS]
[scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column-reverse;]
expected: FAIL
@ -661,61 +646,46 @@
expected: FAIL
[scrollWidth with negative margins: display: grid; overflow: visible; direction: ltr; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: grid; overflow: visible; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: grid; overflow: hidden; direction: ltr; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: grid; overflow: hidden; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: grid; overflow: auto; direction: ltr; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: grid; overflow: auto; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: grid; overflow: clip; direction: ltr; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: grid; overflow: clip; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: grid; overflow: scroll; direction: ltr; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: grid; overflow: scroll; direction: ltr; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: grid; overflow: visible; direction: rtl; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: grid; overflow: visible; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: grid; overflow: hidden; direction: rtl; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: grid; overflow: hidden; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: grid; overflow: auto; direction: rtl; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: grid; overflow: auto; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: grid; overflow: clip; direction: rtl; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: grid; overflow: clip; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]
[scrollWidth with negative margins: display: grid; overflow: scroll; direction: rtl; flex-direction: row;]
expected: FAIL
[scrollHeight with negative margins: display: grid; overflow: scroll; direction: rtl; flex-direction: row;]
expected: FAIL
expected: [FAIL, PASS]

6
tests/wpt/meta/css/cssom-view/table-scroll-props.html.ini vendored Normal file
View file

@ -0,0 +1,6 @@
[table-scroll-props.html]
[Table with separated border]
expected: FAIL
[Table with collapsed border]
expected: FAIL

53
tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-004.html vendored Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: Scrollable Overflow Transform Scroll Container</title>
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
<meta name="assert" content="Checks that the box of scroll container with transform contribute to the scrollable overflow.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.container {
width: 100px;
height: 100px;
overflow: auto;
background: silver;
border: solid thick;
scrollbar-width: none;
}
.element {
width: 50px;
height: 50px;
overflow: scroll;
background: lime;
}
.element-content {
width: 500px;
height: 500px;
background: aqua;
}
</style>
<body onload="checkLayout('.container')">
<div class="container" data-expected-scroll-width="250">
<div style="transform: translateX(200px);" class="element">
<div class="element-content"></div>
</div>
</div>
<div class="container" data-expected-scroll-height="350">
<div style="transform: translateY(300px);" class="element">
<div class="element-content"></div>
</div>
</div>
<div class="container" data-expected-scroll-width="250" data-expected-scroll-height="350">
<div style="transform: translate(200px, 300px);" class="element">
<div class="element-content"></div>
</div>
</div>
</body>

68
tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-005.tentative.html vendored Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: Scrollable Overflow Transform Exclusion of Untransformed Child Box</title>
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"/>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12113"/>
<meta name="assert" content="Checks that the untransformed child box is not included in scrollable overflow.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.container {
width: 100px;
height: 100px;
overflow: scroll;
background: silver;
border: solid thick;
scrollbar-width: none;
}
.element {
width: 200px;
height: 200px;
background: lime;
}
.element-2 {
width: 100px;
height: 100px;
}
</style>
<body onload="checkLayout('.container')">
<div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
<div style="transform: translate(-200px, -200px);" class="element">
</div>
</div>
<div class="container" data-expected-scroll-width="150" data-expected-scroll-height="150">
<div style="transform: translate(-25%, -25%);" class="element">
</div>
</div>
<div class="container" data-expected-scroll-height="100" data-expected-scroll-height="100">
<div style="width: 100px; height: 100px;">
<div style="transform: translate(-200px, -200px);" class="element">
</div>
</div>
</div>
<div class="container" data-expected-scroll-width="150" data-expected-scroll-height="150">
<div style="width: 100px; height: 100px;">
<div style="transform: translate(-25%, -25%);" class="element">
</div>
</div>
</div>
<div class="container" style="position: relative;" data-expected-scroll-width="100" data-expected-scroll-height="100">
<div style="transform: translate(-200px, -200px); position: absolute;" class="element">
</div>
</div>
<div class="container" style="position: relative;" data-expected-scroll-width="150" data-expected-scroll-height="150">
<div style="transform: translate(-25%, -25%); position: absolute;" class="element">
</div>
</div>
</body>

44
tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-006.html vendored Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: Scrollable Overflow Transform Rotate</title>
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
<meta name="assert" content="Checks that the bounding rectangle of rotated element is included correctly in scrollable overflow.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.container {
width: 100px;
height: 100px;
overflow: scroll;
background: silver;
border: solid thick;
scrollbar-width: none;
}
.element {
width: 200px;
height: 200px;
background: lime;
}
.element-2 {
width: 200px;
height: 200px;
background: aqua;
}
</style>
<body onload="checkLayout('.container')">
<div class="container" data-expected-scroll-width="241" data-expected-scroll-height="241">
<div style="transform: rotate(45deg);" class="element">
</div>
</div>
<div class="container" data-expected-scroll-width="241" data-expected-scroll-height="241">
<div style="transform: rotate(-45deg);" class="element">
</div>
</div>
</body>

46
tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-007.html vendored Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: Scrollable Overflow Transform Scale</title>
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
<meta name="assert" content="Checks that the bounding rectangle of scaled element is included correctly in scrollable overflow.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.container {
width: 100px;
height: 100px;
overflow: scroll;
background: silver;
border: solid thick;
scrollbar-width: none;
}
.element {
width: 200px;
height: 200px;
background: lime;
}
.element-2 {
width: 200px;
height: 200px;
background: aqua;
}
</style>
<body onload="checkLayout('.container')">
<div class="container" data-expected-scroll-width="300" data-expected-scroll-height="300">
<div style="transform: scale(2);" class="element">
</div>
</div>
<div class="container" data-expected-scroll-height="250" data-expected-scroll-height="250">
<div style="transform: scale(0.5);" class="element">
<div style="transform: scale(3);" class="element-2">
</div>
</div>
</div>
</body>

44
tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-008.html vendored Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: Scrollable Overflow Transform Skew</title>
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
<meta name="assert" content="Checks that the bounding rectangle of skewed element is included correctly in scrollable overflow.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.container {
width: 100px;
height: 100px;
overflow: scroll;
background: silver;
border: solid thick;
scrollbar-width: none;
}
.element {
width: 200px;
height: 200px;
background: lime;
}
.element-2 {
width: 200px;
height: 200px;
background: aqua;
}
</style>
<body onload="checkLayout('.container')">
<div class="container" data-expected-scroll-width="227" data-expected-scroll-height="227">
<div style="transform: skew(-15deg, -15deg);" class="element">
</div>
</div>
<div class="container" data-expected-scroll-width="227" data-expected-scroll-height="227">
<div style="transform: skew(15deg, 15deg);" class="element">
</div>
</div>
</body>

65
tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-009.html vendored Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: Scrollable Overflow Transform Unreachable Scrollable Overflow</title>
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
<meta name="assert" content="Checks that the box in unreachable scrollable overflow region with transform is not included in the calculation.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.container {
width: 100px;
height: 100px;
overflow: scroll;
background: silver;
border: solid thick;
scrollbar-width: none;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.element {
width: 100px;
height: 100px;
background: lime;
}
</style>
<body onload="checkLayout('.container')">
<div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
<div style="transform: translate(-300px, -300px);" class="element">
</div>
</div>
<div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
<div style="transform: translate(300px, -300px);" class="element">
</div>
</div>
<div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
<div style="transform: translate(-300px, 300px);" class="element">
</div>
</div>
<div class="container relative" data-expected-scroll-width="100" data-expected-scroll-height="100">
<div style="transform: translate(-300px, -300px);" class="element absolute">
</div>
</div>
<div class="container relative" data-expected-scroll-width="100" data-expected-scroll-height="100">
<div style="transform: translate(300px, -300px);" class="element absolute">
</div>
</div>
<div class="container relative" data-expected-scroll-width="100" data-expected-scroll-height="100">
<div style="transform: translate(-300px, 300px);" class="element absolute">
</div>
</div>
</body>

49
tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-010.tentative.html vendored Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: Scrollable Overflow Transform Rotate Nested Element</title>
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"/>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12112"/>
<meta name="assert" content="Checks that the bounding rectangle of nested rotated element is included correctly in scrollable overflow.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.container {
width: 100px;
height: 100px;
overflow: scroll;
background: silver;
border: solid thick;
scrollbar-width: none;
}
.element {
width: 200px;
height: 200px;
background: lime;
}
.element-2 {
width: 200px;
height: 200px;
background: aqua;
}
</style>
<body onload="checkLayout('.container')">
<div class="container" data-expected-scroll-height="241" data-expected-scroll-height="241">
<div style="transform: rotate(-45deg);" class="element">
<div style="transform: rotate(45deg);" class="element-2">
</div>
</div>
</div>
<div class="container" data-expected-scroll-height="222" data-expected-scroll-height="222">
<div style="transform: rotate(30deg) rotate(-15deg);" class="element">
<div style="transform: rotate(-30deg) rotate(105deg);" class="element-2">
</div>
</div>
</div>
</body>

95
tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-unreachable-region.html vendored Normal file
View file

@ -0,0 +1,95 @@
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Scrollable Overflow of a Scroll Container with Transformed Child in Unreachable Scrollable Overflow Region.</title>
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#unreachable-scrollable-overflow-region">
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
body { margin: 0 }
.wrapper {
width: 100px;
height: 200px;
overflow: scroll;
}
.inner {
width: 100px;
height: 200px;
background-color: lime;
transform: translate(-3px, -6px) scale(1.10);
}
</style>
<div class="wrapper">
<div class="inner"></div>
</div>
<script>
const wrapper = document.querySelector(".wrapper");
const contentBox = {
width: 100,
height: 200,
};
function getCurrentTestName(display, direction, writingMode, flexDirection, flexWrap) {
return `display: ${display}; ` +
`direction: ${direction}; ` +
`writing-mode: ${writingMode}; ` +
`flex-direction: ${flexDirection}; ` +
`flex-wrap: ${flexWrap};`;
}
for (let display of ["flow-root", "flex", "grid"]) {
for (let flexDirection of ["row", "row-reverse", "column", "column-reverse"]) {
if (flexDirection != "row" && display != "flex") {
// Don't bother retesting with all flexDirection values unless we're actually a flex container
continue;
}
for (let flexWrap of ["nowrap", "wrap-reverse"]) {
if (flexWrap != "nowrap" && display != "flex") {
// Don't bother retesting with all flexWrap values unless we're actually a flex container
continue;
}
for (let direction of ["ltr", "rtl"]) {
for (let writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl"]) {
wrapper.style.display = display;
wrapper.style.direction = direction;
wrapper.style.writingMode = writingMode;
wrapper.style.flexDirection = flexDirection;
wrapper.style.flexWrap = flexWrap;
// Suppress scrollbars because they get added to the padding are
// and would need to account for them in flexbox.
wrapper.style.scrollbarWidth = display == "flex" ? "none" : "";
let vertical = writingMode.startsWith("vertical");
let scrollToTop = vertical && direction == "rtl";
let scrollToLeft = (!vertical && direction == "rtl") || writingMode == "vertical-rl";
let flexMainAxisIsVertical = flexDirection.startsWith("row") == vertical;
if (display == "flex") {
if (flexDirection.endsWith("-reverse")) {
if (flexMainAxisIsVertical) {
scrollToTop = !scrollToTop;
} else {
scrollToLeft = !scrollToLeft;
}
}
if (flexWrap == "wrap-reverse") {
if (flexMainAxisIsVertical) {
scrollToLeft = !scrollToLeft;
} else {
scrollToTop = !scrollToTop;
}
}
}
currentTestName = getCurrentTestName(display, direction, writingMode, flexDirection, flexWrap);
test(function() {
assert_equals(wrapper.scrollWidth, (scrollToLeft ? 108 : 102), "scrollWidth");
}, "scrollWidth of " + currentTestName);
test(function() {
assert_equals(wrapper.scrollHeight, (scrollToTop ? 216 : 204), "scrollHeight");
}, "scrollHeight of " + currentTestName);
}
}
}
}
}
</script>