mirror of
https://github.com/servo/servo.git
synced 2025-08-04 21:20:23 +01:00
layout: Account for transform in scrollable overflow (#36138)
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
GitHub
parent
b92542b756
commit
bd6928f3dc
37 changed files with 974 additions and 288 deletions
|
|
@ -1,3 +0,0 @@
|
|||
[overflow-inline-transform-relative.html]
|
||||
[#target used transform when computing scroll overflow]
|
||||
expected: FAIL
|
||||
|
|
@ -1,7 +1,4 @@
|
|||
[scroll-overflow-padding-block-001.html]
|
||||
expected: ERROR
|
||||
[undefined block-end]
|
||||
expected: FAIL
|
||||
|
||||
[undefined block-start]
|
||||
expected: [PASS, FAIL]
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
[scrollable-overflow-transform-001.html]
|
||||
[.container 1]
|
||||
expected: FAIL
|
||||
|
||||
[.container 2]
|
||||
expected: FAIL
|
||||
|
||||
[.container 3]
|
||||
expected: FAIL
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
[scrollable-overflow-transform-002.html]
|
||||
[.container 1]
|
||||
expected: FAIL
|
||||
|
||||
[.container 2]
|
||||
expected: FAIL
|
||||
|
||||
[.container 3]
|
||||
expected: FAIL
|
||||
|
|
@ -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
3
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-005.tentative.html.ini
vendored
Normal 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
6
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-009.html.ini
vendored
Normal 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
6
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-010.tentative.html.ini
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
[scrollable-overflow-transform-010.tentative.html]
|
||||
[.container 1]
|
||||
expected: FAIL
|
||||
|
||||
[.container 2]
|
||||
expected: FAIL
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
168
tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-unreachable-region.html.ini
vendored
Normal 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue