Skip to content

Commit 0c731ef

Browse files
mstenshochromium-wpt-export-bot
mstensho
authored and
chromium-wpt-export-bot
committed
RunResizeObserverSteps() for all frames.
RunResizeObserverSteps() used to NotifyResizeObservers() for all frames, but RunResizeObserverSteps() was only performed on the root frame, which caused trouble for some mechanisms when inside iframes: 1. Forgetting the size of disconnected elements. Test: forget-on-disconnect-in-iframe.html , which is based on auto-006.html 2. Updating the last successful position fallback. Test: last-successful-iframe.html is based on last-successful-basic.html 3. Default anchor scroll shift. Test: position-area-scrolling-003.tentative.html Bug: 373874012 Change-Id: I39657685689d41b7ae1f15d31aaf61e05f1ee9c3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6063590 Reviewed-by: Rune Lillesveen <[email protected]> Commit-Queue: Morten Stenshorne <[email protected]> Reviewed-by: Vladimir Levin <[email protected]> Cr-Commit-Position: refs/heads/main@{#1391245}
1 parent c86db81 commit 0c731ef

File tree

3 files changed

+260
-0
lines changed

3 files changed

+260
-0
lines changed

‎css/css-anchor-position/last-successful-iframe.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<title>CSS Anchor Positioning: basic last successful position fallback</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-fallback">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="support/test-common.js"></script>
7+
8+
<iframe id="iframe" srcdoc='
9+
<style>
10+
#container {
11+
position: relative;
12+
width: 400px;
13+
height: 400px;
14+
background: teal;
15+
}
16+
#anchor {
17+
position: relative;
18+
top: 100px;
19+
left: 100px;
20+
width: 100px;
21+
height: 100px;
22+
background: red;
23+
anchor-name: --a;
24+
}
25+
#anchored {
26+
position-anchor: --a;
27+
position-try-fallbacks: flip-block;
28+
position: absolute;
29+
width: 100px;
30+
height: 200px;
31+
position-area: top center;
32+
background: lime;
33+
}
34+
</style>
35+
<div id="container">
36+
<div id="anchor"></div>
37+
<div id="anchored"></div>
38+
</div>
39+
'></iframe>
40+
<script>
41+
// Wait for the iframe to load:
42+
onload = function() {
43+
const doc = iframe.contentWindow.document;
44+
const container = doc.getElementById('container');
45+
const anchor = doc.getElementById('anchor');
46+
const anchored = doc.getElementById('anchored');
47+
48+
promise_test(async () => {
49+
await waitUntilNextAnimationFrame();
50+
await waitUntilNextAnimationFrame();
51+
assert_equals(anchored.offsetTop, 200);
52+
}, "Starts rendering with flip-block");
53+
54+
promise_test(async () => {
55+
anchor.style.top = "150px";
56+
await waitUntilNextAnimationFrame();
57+
await waitUntilNextAnimationFrame();
58+
assert_equals(anchored.offsetTop, 250);
59+
}, "No successful position, keep flip-block");
60+
61+
promise_test(async () => {
62+
anchor.style.top = "200px";
63+
await waitUntilNextAnimationFrame();
64+
await waitUntilNextAnimationFrame();
65+
assert_equals(anchored.offsetTop, 0);
66+
}, "Base position without fallback now successful");
67+
}
68+
</script>

‎css/css-anchor-position/position-area-scrolling-003.tentative.html

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<title>position-area to include current scroll position at first layout</title>
3+
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="support/test-common.js"></script>
8+
<iframe id="iframe" width="500" height="500" srcdoc='
9+
<style>
10+
body {
11+
overflow: hidden;
12+
margin: 0;
13+
}
14+
.pos {
15+
position: absolute;
16+
box-sizing: border-box;
17+
border: solid;
18+
position-anchor: --anchor;
19+
width: 50%;
20+
height: 50%;
21+
background: cyan;
22+
}
23+
#container.thicker > .pos {
24+
border-width: thick;
25+
}
26+
</style>
27+
<div style="width:1000px; height:1000px;">
28+
<div id="container">
29+
<div style="height:200px;"></div>
30+
<div style="anchor-name:--anchor; margin-left:200px; width:100px; height:100px; background:gray;"></div>
31+
<div id="e1" class="pos" style="position-area:top left;"></div>
32+
<div id="e2" class="pos" style="position-area:top center;"></div>
33+
<div id="e3" class="pos" style="position-area:top right;"></div>
34+
<div id="e4" class="pos" style="position-area:center left;"></div>
35+
<div id="e5" class="pos" style="position-area:center center;"></div>
36+
<div id="e6" class="pos" style="position-area:center right;"></div>
37+
<div id="e7" class="pos" style="position-area:bottom left;"></div>
38+
<div id="e8" class="pos" style="position-area:bottom center;"></div>
39+
<div id="e9" class="pos" style="position-area:bottom right;"></div>
40+
</div>
41+
</div>
42+
'></iframe>
43+
<script>
44+
// Wait for the iframe to load:
45+
onload = function() {
46+
const doc = iframe.contentWindow.document;
47+
const container = doc.getElementById('container');
48+
const e1 = doc.getElementById('e1');
49+
const e2 = doc.getElementById('e2');
50+
const e3 = doc.getElementById('e3');
51+
const e4 = doc.getElementById('e4');
52+
const e5 = doc.getElementById('e5');
53+
const e6 = doc.getElementById('e6');
54+
const e7 = doc.getElementById('e7');
55+
const e8 = doc.getElementById('e8');
56+
const e9 = doc.getElementById('e9');
57+
58+
function assert_rects_equal(elm, x, y, width, height) {
59+
assert_equals(elm.offsetLeft, x, (elm.id + " x"));
60+
assert_equals(elm.offsetTop, y, (elm.id + " y"));
61+
assert_equals(elm.offsetWidth, width, (elm.id + " width"));
62+
assert_equals(elm.offsetHeight, height, (elm.id + " height"));
63+
}
64+
65+
function assert_at_initial() {
66+
assert_rects_equal(e1, 100, 100, 100, 100);
67+
assert_rects_equal(e2, 225, 100, 50, 100);
68+
assert_rects_equal(e3, 300, 100, 100, 100);
69+
assert_rects_equal(e4, 100, 225, 100, 50);
70+
assert_rects_equal(e5, 225, 225, 50, 50);
71+
assert_rects_equal(e6, 300, 225, 100, 50);
72+
assert_rects_equal(e7, 100, 300, 100, 100);
73+
assert_rects_equal(e8, 225, 300, 50, 100);
74+
assert_rects_equal(e9, 300, 300, 100, 100);
75+
}
76+
77+
function assert_at_40_60() {
78+
assert_rects_equal(e1, 120, 130, 80, 70);
79+
assert_rects_equal(e2, 225, 130, 50, 70);
80+
assert_rects_equal(e3, 300, 130, 120, 70);
81+
assert_rects_equal(e4, 120, 225, 80, 50);
82+
assert_rects_equal(e5, 225, 225, 50, 50);
83+
assert_rects_equal(e6, 300, 225, 120, 50);
84+
assert_rects_equal(e7, 120, 300, 80, 130);
85+
assert_rects_equal(e8, 225, 300, 50, 130);
86+
assert_rects_equal(e9, 300, 300, 120, 130);
87+
}
88+
89+
promise_test(async() => {
90+
assert_at_initial();
91+
}, "Initial scroll position");
92+
93+
promise_test(async() => {
94+
await waitUntilNextAnimationFrame();
95+
await waitUntilNextAnimationFrame();
96+
iframe.contentWindow.scrollTo(40, 60);
97+
await waitUntilNextAnimationFrame();
98+
await waitUntilNextAnimationFrame();
99+
assert_at_initial();
100+
}, "Scroll to 40,60");
101+
102+
promise_test(async() => {
103+
// As long as we're within the same animation frame (and therefore haven't
104+
// run ResizeObserver events), there will be no anchor recalculation point.
105+
container.style.display = "flow-root";
106+
assert_at_initial();
107+
container.style.display = "none";
108+
document.body.offsetTop;
109+
container.style.display = "block";
110+
assert_at_initial();
111+
}, "Reattach at 40,60");
112+
113+
promise_test(async() => {
114+
container.style.display = "none";
115+
await waitUntilNextAnimationFrame();
116+
await waitUntilNextAnimationFrame();
117+
container.style.display = "block";
118+
await waitUntilNextAnimationFrame();
119+
await waitUntilNextAnimationFrame();
120+
assert_at_40_60();
121+
}, "Redisplay at 40,60");
122+
123+
promise_test(async() => {
124+
iframe.contentWindow.scrollTo(0, 0);
125+
container.className = "thicker";
126+
container.style.display = "block";
127+
await waitUntilNextAnimationFrame();
128+
await waitUntilNextAnimationFrame();
129+
assert_at_40_60();
130+
}, "Scroll to 0,0 and relayout");
131+
132+
promise_test(async() => {
133+
container.style.display = "none";
134+
await waitUntilNextAnimationFrame();
135+
container.style.display = "block";
136+
await waitUntilNextAnimationFrame();
137+
await waitUntilNextAnimationFrame();
138+
assert_at_initial();
139+
}, "Redisplay at 0,0");
140+
}
141+
</script>

‎css/css-sizing/contain-intrinsic-size/forget-on-disconnect-in-iframe.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
3+
<link rel="help" href="https://www.w3.org/TR/css-sizing-4/#intrinsic-size-override">
4+
5+
<iframe id="iframe" srcdoc='
6+
<div id="parent">
7+
<div id="target" style="contain-intrinsic-size:auto 1px auto 2px; width:max-content; height:max-content;">
8+
<div id="contents" style="width:100px; height:50px;"></div>
9+
</div>
10+
</div>
11+
'></iframe>
12+
13+
<script src="/resources/testharness.js"></script>
14+
<script src="/resources/testharnessreport.js"></script>
15+
<script>
16+
function checkSize(elm, expectedWidth, expectedHeight, msg) {
17+
assert_equals(elm.clientWidth, expectedWidth, msg + " - clientWidth");
18+
assert_equals(elm.clientHeight, expectedHeight, msg + " - clientHeight");
19+
}
20+
21+
function nextRendering() {
22+
return new Promise(resolve => {
23+
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
24+
});
25+
}
26+
27+
// Make sure that the iframe is loaded:
28+
onload = function() {
29+
promise_test(async function() {
30+
const doc = iframe.contentWindow.document;
31+
const parent = doc.getElementById('parent');
32+
const target = doc.getElementById('target');
33+
const contents = doc.getElementById('contents');
34+
35+
checkSize(target, 100, 50, "Sizing normally");
36+
37+
await nextRendering();
38+
target.style.contentVisibility = "hidden";
39+
contents.style.width = "66px";
40+
contents.style.height = "66px";
41+
checkSize(target, 100, 50, "Using last remembered size");
42+
43+
target.remove();
44+
checkSize(target, 0, 0, "No box");
45+
46+
await nextRendering();
47+
parent.appendChild(target);
48+
checkSize(target, 1, 2, "Size containment with no last remembered size");
49+
}, "Forget remembered size inside iframe");
50+
}
51+
</script>

0 commit comments

Comments
 (0)