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