mirror of
https://github.com/servo/servo.git
synced 2025-08-24 06:45:33 +01:00
layout: Consider transform for bounding box queries (#37871)
The recent changes that cached the Scroll Tree present an opportunity to calculate the queries that consider transform and scroll (dubbed as post composite queries) accurately. This PR propose a solution for this calculation by noting the lowest scroll tree nodes that would affect a fragment. To do this, each fragment would store a new attribute `spatial_tree_node` -- scroll tree node id that we could use for the query. This referencing is considered because the scroll tree node construction is managed by the fragment itself. Therefore it would ease the managing the possibly stale reference and future query cache invalidation considering the development of incremental layout. The bounding box query then could transform the bounding content rect of a fragment using the computed current transformation matrix. Fixes: https://github.com/servo/servo/issues/35768 Testing: Existing and new WPT --------- Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> Signed-off-by: Jo Steven Novaryo <jo.steven.novaryo@huawei.com> Signed-off-by: Martin Robinson <mrobinson@igalia.com> Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This commit is contained in:
Jo Steven Novaryo
GitHub
parent
37ac4ffeb4
commit
900dd8d191
31 changed files with 304 additions and 146 deletions
7
tests/wpt/meta/MANIFEST.json
vendored
7
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -626509,6 +626509,13 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"getBoundingClientRect-scroll.html": [
|
||||
"4bcfe5e3de7bbc052732c8737345e5ca8acb6304",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"getBoundingClientRect-shy.html": [
|
||||
"55349e93969af0d527da4bcb589804239164bafc",
|
||||
[
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
[position-sticky-transforms-translate.html]
|
||||
[Translation transform can move sticky element past sticking point]
|
||||
expected: FAIL
|
||||
|
||||
[Stuck elements can still be moved via translations]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -8,15 +8,6 @@
|
|||
[Intermediate DOM nodes cause rendering context to end (fixed)]
|
||||
expected: FAIL
|
||||
|
||||
[Perspective applies to direct DOM normal-flow children]
|
||||
expected: FAIL
|
||||
|
||||
[Perspective applies to direct DOM abs-pos children]
|
||||
expected: FAIL
|
||||
|
||||
[Perspective applies to direct DOM fixed-pos children]
|
||||
expected: FAIL
|
||||
|
||||
[Perspective does not apply to DOM normal-flow grandchildren]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[transform-getBoundingClientRect-001.html]
|
||||
[correct getBoundingClientRect() result within set of transforms]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[GetBoundingRect.html]
|
||||
[getBoundingClientRect]
|
||||
expected: FAIL
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
[elementsFromPoint-iframes.html]
|
||||
[elementsFromPoint on the root document for points in iframe elements]
|
||||
expected: FAIL
|
||||
|
||||
[elementsFromPoint on inner documents]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[elementsFromPoint-simple.html]
|
||||
[elementsFromPoint for each corner of a div with a 3d transform]
|
||||
expected: FAIL
|
||||
|
|
@ -1,12 +1,3 @@
|
|||
[bounding-box.html]
|
||||
[First rAF.]
|
||||
expected: FAIL
|
||||
|
||||
[target.style.transform = 'translateY(195px)']
|
||||
expected: FAIL
|
||||
|
||||
[target.style.transform = 'translateY(300px)']
|
||||
expected: FAIL
|
||||
|
||||
[target.style.zoom = 2]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
[edge-inclusive-intersection.html]
|
||||
[First rAF.]
|
||||
expected: FAIL
|
||||
|
||||
[Set transform=translateY(200px) on target.]
|
||||
expected: FAIL
|
||||
|
||||
[Set transform=translateY(201px) on target.]
|
||||
expected: FAIL
|
||||
|
||||
[Set transform=translateY(185px) on target.]
|
||||
expected: FAIL
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
[isIntersecting-threshold.html]
|
||||
[Scrolled to half way through target element]
|
||||
expected: FAIL
|
||||
|
||||
[Scrolled to target element completely off screen]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
[multiple-targets.html]
|
||||
[document.scrollingElement.scrollTop = 150]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = 10000]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = 0]
|
||||
expected: FAIL
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
[multiple-thresholds.html]
|
||||
[document.scrollingElement.scrollTop = 120]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = 160]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = 200]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = 240]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = window.innerHeight + 140]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = window.innerHeight + 160]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = window.innerHeight + 200]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[observer-without-js-reference.html]
|
||||
[document.scrollingElement.scrollTop = 300]
|
||||
expected: FAIL
|
||||
|
|
@ -5,8 +5,8 @@
|
|||
[root.scrollTop = 150]
|
||||
expected: FAIL
|
||||
|
||||
[root.removeChild(target).]
|
||||
expected: FAIL
|
||||
|
||||
[root.scrollTop = 150 after reinserting target.]
|
||||
expected: FAIL
|
||||
|
||||
[root.insertBefore(target, trailingSpace).]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -5,9 +5,6 @@
|
|||
[root.scrollTop = 50, putting target into root margin]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = 0.]
|
||||
expected: FAIL
|
||||
|
||||
[root.scrollTop = 0]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
[root-margin.html]
|
||||
[document.scrollingElement.scrollLeft = 100]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = document.documentElement.clientHeight + 200]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = document.documentElement.clientHeight + 300]
|
||||
expected: FAIL
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
[same-document-no-root.html]
|
||||
[document.scrollingElement.scrollTop = 300]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = 100]
|
||||
expected: FAIL
|
||||
|
|
@ -5,9 +5,6 @@
|
|||
[root.scrollTop = 150 with root scrolled into view.]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = 0.]
|
||||
expected: FAIL
|
||||
|
||||
[root.scrollTop = 0]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[same-document-with-document-root.html]
|
||||
[document.scrollingElement.scrollTop = 300]
|
||||
expected: FAIL
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
[same-document-zero-size-target.html]
|
||||
[document.scrollingElement.scrollTop = 300]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = 100]
|
||||
expected: FAIL
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
[text-target.html]
|
||||
[document.scrollingElement.scrollTop = 300]
|
||||
expected: FAIL
|
||||
|
||||
[document.scrollingElement.scrollTop = 100]
|
||||
expected: FAIL
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
[unclipped-root.html]
|
||||
[First rAF.]
|
||||
expected: FAIL
|
||||
|
||||
[target.style.transform = 'translateY(195px)']
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[visibility-hidden.html]
|
||||
[document.scrollingElement.scrollTop = 300]
|
||||
expected: FAIL
|
||||
130
tests/wpt/tests/css/cssom-view/getBoundingClientRect-scroll.html
vendored
Normal file
130
tests/wpt/tests/css/cssom-view/getBoundingClientRect-scroll.html
vendored
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<!DOCTYPE html>
|
||||
<title>getBoundingClientRect for a element inside scroll container</title>
|
||||
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.scroll_container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
overflow: scroll;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.dummy_overflowing_box {
|
||||
width: 5000px;
|
||||
height: 5000px;
|
||||
}
|
||||
.target_box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.display_none {
|
||||
display: none;
|
||||
}
|
||||
.display_content {
|
||||
display: content;
|
||||
}
|
||||
.position_absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.position_fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.absolute_containing_block {
|
||||
position: relative;
|
||||
}
|
||||
.fixed_containing_block {
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="scroll_container fixed_containing_block">
|
||||
<div class="scroll_container absolute_containing_block">
|
||||
<div id="target_scroll_container" class="scroll_container">
|
||||
<div id="target_fixed" class="target_box position_fixed"></div>
|
||||
<div id="target_absolute" class="target_box position_absolute"></div>
|
||||
<div id="target_none" class="target_box display_none"></div>
|
||||
<div id="target_content" class="target_box display_content">
|
||||
<div id="target_static" class="target_box"></div>
|
||||
</div>
|
||||
<div class="dummy_overflowing_box"></div>
|
||||
</div>
|
||||
<div class="dummy_overflowing_box"></div>
|
||||
</div>
|
||||
<div class="dummy_overflowing_box"></div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
setup(() => {
|
||||
var offset_left = 1;
|
||||
var offset_top = 2;
|
||||
for (scroll_container of document.getElementsByClassName('scroll_container')) {
|
||||
scroll_container.scrollTo(offset_left, offset_top)
|
||||
offset_left *= 4;
|
||||
offset_top *= 4;
|
||||
}
|
||||
});
|
||||
test(function() {
|
||||
var target = document.querySelector('#target_static');
|
||||
let staticRect = target.getBoundingClientRect();
|
||||
assert_equals(staticRect.left, -21, 'static positioned target left');
|
||||
assert_equals(staticRect.top, -42, 'static positioned target top');
|
||||
assert_equals(staticRect.width, 100, 'static positioned target width');
|
||||
assert_equals(staticRect.height, 100, 'static positioned target height');
|
||||
}, "getBoundingClientRect for element inside scroll container");
|
||||
|
||||
test(function() {
|
||||
var target = document.querySelector('#target_absolute');
|
||||
let absoluteRect = target.getBoundingClientRect();
|
||||
assert_equals(absoluteRect.left, -5, 'absolute positioned target left');
|
||||
assert_equals(absoluteRect.top, -10, 'absolute positioned target top');
|
||||
assert_equals(absoluteRect.width, 100, 'absolute positioned target width');
|
||||
assert_equals(absoluteRect.height, 100, 'absolute positioned target height');
|
||||
}, "getBoundingClientRect for absolute element inside scroll container");
|
||||
|
||||
test(function() {
|
||||
var target = document.querySelector('#target_fixed');
|
||||
let fixedRect = target.getBoundingClientRect();
|
||||
assert_equals(fixedRect.left, -1, 'fixed positioned target left');
|
||||
assert_equals(fixedRect.top, -2, 'fixed positioned target top');
|
||||
assert_equals(fixedRect.width, 100, 'fixed positioned target width');
|
||||
assert_equals(fixedRect.height, 100, 'fixed positioned target height');
|
||||
}, "getBoundingClientRect for fixed element inside scroll container");
|
||||
|
||||
test(function() {
|
||||
var target = document.querySelector('#target_scroll_container');
|
||||
let staticRect = target.getBoundingClientRect();
|
||||
assert_equals(staticRect.left, -5, 'scroll container target left');
|
||||
assert_equals(staticRect.top, -10, 'scroll container target top');
|
||||
assert_equals(staticRect.width, 300, 'scroll container target width');
|
||||
assert_equals(staticRect.height, 300, 'scroll container target height');
|
||||
}, "getBoundingClientRect for a scrolled scroll container");
|
||||
|
||||
test(function() {
|
||||
var target = document.querySelector('#target_none');
|
||||
let staticRect = target.getBoundingClientRect();
|
||||
assert_equals(staticRect.left, 0, 'scroll container target left');
|
||||
assert_equals(staticRect.top, 0, 'scroll container target top');
|
||||
assert_equals(staticRect.width, 0, 'scroll container target width');
|
||||
assert_equals(staticRect.height, 0, 'scroll container target height');
|
||||
}, "getBoundingClientRect for a scrolled display none box");
|
||||
|
||||
test(function() {
|
||||
var target = document.querySelector('#target_content');
|
||||
let staticRect = target.getBoundingClientRect();
|
||||
assert_equals(staticRect.left, -21, 'static positioned target left');
|
||||
assert_equals(staticRect.top, -42, 'static positioned target top');
|
||||
assert_equals(staticRect.width, 100, 'static positioned target width');
|
||||
assert_equals(staticRect.height, 100, 'static positioned target height');
|
||||
}, "getBoundingClientRect for a scrolled display content box");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue