зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1602531 [wpt PR 20682] - [css-layout-api] IntrinsicSizes Implementation, a=testonly
Automatic update from web-platform-tests
[css-layout-api] IntrinsicSizes Implementation
This change adds support for the CSS Layout API intrinsicSizes()
callback function. The implementation closely matches that of the
layout() callback function.
- Spec:
https://drafts.css-houdini.org/css-layout-api/#intrinsicsizes
- Algorithm:
https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback
The implementation also involved exposure of the
IntrinsicSizesResultOptions type.
- Spec:
https://drafts.css-houdini.org/css-layout-api/#dictdef-intrinsicsizesresultoptions
Support was also added for the Child intrinsicSizes() function.
- Spec:
https://drafts.css-houdini.org/css-layout-api/#dom-layoutchild-intrinsicsizes
- Algorithm:
https://drafts.css-houdini.org/css-layout-api/#dom-layoutchild-intrinsicsizes
Bug: 726125
Change-Id: Ifc6064e069b4c9c5218c9d783b7d9de6a480e7ee
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1949536
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#725834}
--
Rename some colliding references
--
wpt-commits: f160db31bb6fdf94c6c914a779a1b47b9e0e4e30, 5f8d15ebdcf0495c271c81776971061be1366445
wpt-pr: 20682
--HG--
rename : testing/web-platform/tests/css/css-layout-api/auto-block-size/absolute-ref.html => testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-absolute-ref.html
rename : testing/web-platform/tests/css/css-layout-api/auto-block-size/floats-ref.html => testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-floats-ref.html
rename : testing/web-platform/tests/css/css-layout-api/auto-block-size/negative-ref.html => testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-negative-ref.html
rename : testing/web-platform/tests/css/css-layout-api/fallback-layout/fallback-ref.html => testing/web-platform/tests/css/css-layout-api/fallback-layout/fallback-layout-fallback-ref.html
This commit is contained in:
Alison Maher
moz-wptsync-bot
Родитель
321c836b6d
Коммит
0ee3f1a484
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
||||
<link rel="match" href="absolute-ref.html">
|
||||
<link rel="match" href="auto-block-size-absolute-ref.html">
|
||||
<meta name="assert" content="This test checks that the absolute positioning respects the auto-block-size." />
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
||||
<link rel="match" href="floats-ref.html">
|
||||
<link rel="match" href="auto-block-size-floats-ref.html">
|
||||
<meta name="assert" content="This test checks that if the layout() is a float, the flow layout respects the auto-block-size." />
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
||||
<link rel="match" href="negative-ref.html">
|
||||
<link rel="match" href="auto-block-size-negative-ref.html">
|
||||
<meta name="assert" content="This test checks that auto-block-size is correctly clamped to zero." />
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class with the intrinsicSizes function returning a bad value will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
height: 100px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.fc {
|
||||
display: flow-root;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(bad-return)) {
|
||||
.test {
|
||||
display: layout(bad-return);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="float"></div>
|
||||
<div class="fc"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('bad-return', class {
|
||||
async intrinsicSizes() { return 42; }
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#get-a-layout-class-instance">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class with a throwing constructor will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.fc {
|
||||
display: flow-root;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(throwing-ctor)) {
|
||||
.test {
|
||||
display: layout(throwing-ctor);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="float"></div>
|
||||
<div class="fc"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('throwing-ctor', class {
|
||||
constructor() { throw Error('fail!'); }
|
||||
async intrinsicSizes() {}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class with a throwing intrinsicSizes function will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
height: 100px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.fc {
|
||||
display: flow-root;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(throwing-intrinsic-sizes)) {
|
||||
.test {
|
||||
display: layout(throwing-intrinsic-sizes);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="float"></div>
|
||||
<div class="fc"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('throwing-intrinsic-sizes', class {
|
||||
async intrinsicSizes() { throw Error('fail!'); }
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.result {
|
||||
background: green;
|
||||
border: solid 2px;
|
||||
height: 100px;
|
||||
width: min-content;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="result"></div>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class performing intrinsicSizes on an invalid child will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.test > div {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(bad-child-layout)) {
|
||||
.test {
|
||||
display: layout(bad-child-layout);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('bad-child-layout', class {
|
||||
static get inputProperties() { return ['--fail']; }
|
||||
|
||||
async intrinsicSizes(children, _, styleMap) {
|
||||
if (styleMap.get('--fail').toString() !== 'true') {
|
||||
this.child = children[0];
|
||||
}
|
||||
|
||||
// Try to perform layout on the child. If its invalid (we skipped the if
|
||||
// statement above) we should fallback to block layout.
|
||||
const childIntrinsicSize = await this.child.intrinsicSizes();
|
||||
|
||||
return { maxContentSize: 100, minContentSize: 100 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function raf() {
|
||||
return new Promise((resolve) => {
|
||||
requestAnimationFrame(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
(async function() {
|
||||
if (typeof CSS.layoutWorklet === 'undefined') {
|
||||
takeScreenshot();
|
||||
return;
|
||||
}
|
||||
|
||||
await importWorklet(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
|
||||
// Ensure that all instances have a child to perform an invalid intrinsic size upon.
|
||||
const test = document.getElementsByClassName('test')[0];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
test.innerHTML = '<div><div>';
|
||||
await raf();
|
||||
}
|
||||
|
||||
// The next layout should mean that we will fallback to block.
|
||||
test.innerHTML = '<div></div>';
|
||||
test.style.setProperty('--fail', 'true');
|
||||
|
||||
// Finish up the test.
|
||||
await raf();
|
||||
await raf();
|
||||
takeScreenshot();
|
||||
})();
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class with an intrinsicSizes function that doesn't return a promise will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.child {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(no-promise)) {
|
||||
.test {
|
||||
display: layout(no-promise);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('no-promise', class {
|
||||
intrinsicSizes() { return { minContentSize: 100 }; }
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class with an intrinsicSizes function that doesn't return a promise will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.child {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(unresolved-promise)) {
|
||||
.test {
|
||||
display: layout(unresolved-promise);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('unresolved-promise', class {
|
||||
intrinsicSizes() { return new Promise(() => { /* never resolves */ }); }
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<link rel="match" href="fallback-layout-fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class with the layout function returning a bad value will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#get-a-layout-class-instance">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<link rel="match" href="fallback-layout-fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class with a throwing constructor will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<link rel="match" href="fallback-layout-fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class with a throwing layout function will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<link rel="match" href="fallback-layout-fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class performing layout on an invalid child will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<link rel="match" href="fallback-layout-fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class returning an invalid fragment will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<link rel="match" href="fallback-layout-fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class with a layout function that doesn't return a promise will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
|
||||
<link rel="match" href="fallback-ref.html">
|
||||
<link rel="match" href="fallback-layout-fallback-ref.html">
|
||||
<meta name="assert" content="This test checks that a layout() class with a layout function that doesn't return a promise will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.test {
|
||||
background: green;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container-1 {
|
||||
border: solid 2px;
|
||||
position: relative;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.container-2 {
|
||||
border: solid 2px;
|
||||
position: relative;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-1">
|
||||
<div class="horizontal test" style="height: 100px; width: 100px; bottom: 0px;"></div>
|
||||
<div class="vertical test" style="height: 100px; width: 100px; right: 0px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container-2">
|
||||
<div class="horizontal test" style="height: 25px; width: 50px; bottom: 0px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container-2">
|
||||
<div class="vertical test" style="height: 50px; width: 25px; right: 0px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
||||
<link rel="match" href="absolute-ref.html">
|
||||
<meta name="assert" content="This test checks that the absolute positioning respects the intrinsicSizes function." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@supports (display: layout(test-layout)) {
|
||||
.test {
|
||||
display: layout(test-layout);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
|
||||
.container-1 {
|
||||
border: solid 2px;
|
||||
position: relative;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.container-2 {
|
||||
border: solid 2px;
|
||||
position: relative;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
|
||||
<div class="container-1">
|
||||
<div class="horizontal test" style="height: 100px; bottom: 0px;"></div>
|
||||
<div class="vertical test" style="width: 100px; right: 0px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container-2">
|
||||
<div class="horizontal test" style="height: 25px; bottom: 0px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container-2">
|
||||
<div class="vertical test" style="width: 25px; right: 0px;"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('test-layout', class {
|
||||
async intrinsicSizes() {
|
||||
return { maxContentSize: 100, minContentSize: 50 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes">
|
||||
<link rel="match" href="child-replaced-percentage-ref.html">
|
||||
<meta name="assert" content="This test checks that intrinsicSizes is calculated correctly for a replaced child element with a percentage height." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
height: 50px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<canvas width=100 height=100 style="height: 100%;"></canvas>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('parent', class {
|
||||
async intrinsicSizes(children, edges, styleMap) {
|
||||
const childrenSizes = await Promise.all(children.map((child) => {
|
||||
return child.intrinsicSizes();
|
||||
}));
|
||||
|
||||
if (childrenSizes[0].minContentSize == 50 &&
|
||||
childrenSizes[0].maxContentSize == 50) {
|
||||
return { maxContentSize: 100, minContentSize: 50 };
|
||||
}
|
||||
return { maxContentSize: 0, minContentSize: 0 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes">
|
||||
<link rel="match" href="child-replaced-percentage-ref.html">
|
||||
<meta name="assert" content="This test checks that intrinsicSizes is calculated correctly for a replaced child element with a percentage height." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
height: 50px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div style="height: 50%">
|
||||
<canvas width=100 height=100 style="height: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('parent', class {
|
||||
async intrinsicSizes(children, edges, styleMap) {
|
||||
const childrenSizes = await Promise.all(children.map((child) => {
|
||||
return child.intrinsicSizes();
|
||||
}));
|
||||
|
||||
if (childrenSizes[0].minContentSize == 25 &&
|
||||
childrenSizes[0].maxContentSize == 25) {
|
||||
return { maxContentSize: 100, minContentSize: 50 };
|
||||
}
|
||||
return { maxContentSize: 0, minContentSize: 0 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.result {
|
||||
background: green;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<div class="result"></div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.result {
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<div class="result"></div>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes">
|
||||
<link rel="match" href="child-size-01-ref.html">
|
||||
<meta name="assert" content="This test checks that passing child intrinsicSizes to a parent works correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
height: 100px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
|
||||
.child {
|
||||
display: layout(child);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
const MAX_CONTENT_SIZE = 100;
|
||||
const MIN_CONTENT_SIZE = 50;
|
||||
|
||||
registerLayout('parent', class {
|
||||
async intrinsicSizes(children, edges, styleMap) {
|
||||
const childrenSizes = await Promise.all(children.map((child) => {
|
||||
return child.intrinsicSizes();
|
||||
}));
|
||||
|
||||
if (childrenSizes[0].minContentSize == MIN_CONTENT_SIZE &&
|
||||
childrenSizes[0].maxContentSize == MAX_CONTENT_SIZE) {
|
||||
return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE };
|
||||
}
|
||||
return { maxContentSize: 0, minContentSize: 0 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
|
||||
registerLayout('child', class {
|
||||
async intrinsicSizes() {
|
||||
return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.result {
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 75px;
|
||||
}
|
||||
</style>
|
||||
<div class="result"></div>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes">
|
||||
<link rel="match" href="child-size-02-ref.html">
|
||||
<meta name="assert" content="This test checks that setting a child's intrinsicSizes does not override its min-width." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
height: 100px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.child {
|
||||
min-width: 75px;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
|
||||
.child {
|
||||
display: layout(child);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
const MAX_CONTENT_SIZE = 100;
|
||||
const MIN_CONTENT_SIZE = 50;
|
||||
|
||||
registerLayout('parent', class {
|
||||
static get childInputProperties() { return ['min-width']; }
|
||||
|
||||
async intrinsicSizes(children, edges, styleMap) {
|
||||
const childrenSizes = await Promise.all(children.map((child) => {
|
||||
return child.intrinsicSizes();
|
||||
}));
|
||||
|
||||
if (childrenSizes[0].minContentSize == child.styleMap.get('min-width').value &&
|
||||
childrenSizes[0].maxContentSize == MAX_CONTENT_SIZE) {
|
||||
return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE };
|
||||
}
|
||||
return { maxContentSize: 0, minContentSize: 0 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
|
||||
registerLayout('child', class {
|
||||
async intrinsicSizes() {
|
||||
return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes">
|
||||
<link rel="match" href="child-size-02-ref.html">
|
||||
<meta name="assert" content="This test checks that setting a child's intrinsicSizes does not override its max-width." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
height: 100px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.child {
|
||||
max-width: 75px;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
|
||||
.child {
|
||||
display: layout(child);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
const MAX_CONTENT_SIZE = 100;
|
||||
const MIN_CONTENT_SIZE = 50;
|
||||
|
||||
registerLayout('parent', class {
|
||||
static get childInputProperties() { return ['max-width']; }
|
||||
|
||||
async intrinsicSizes(children, edges, styleMap) {
|
||||
const childrenSizes = await Promise.all(children.map((child) => {
|
||||
return child.intrinsicSizes();
|
||||
}));
|
||||
|
||||
if (childrenSizes[0].minContentSize == MIN_CONTENT_SIZE &&
|
||||
childrenSizes[0].maxContentSize == child.styleMap.get('max-width').value) {
|
||||
return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE };
|
||||
}
|
||||
return { maxContentSize: 0, minContentSize: 0 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
|
||||
registerLayout('child', class {
|
||||
async intrinsicSizes() {
|
||||
return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes">
|
||||
<link rel="match" href="child-size-01-ref.html">
|
||||
<meta name="assert" content="This test checks that the child intrinsicSizes returns the min/max size contributions." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
height: 100px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div style="width: 100px;">
|
||||
<div style="width: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('parent', class {
|
||||
async intrinsicSizes(children, edges, styleMap) {
|
||||
const childrenSizes = await Promise.all(children.map((child) => {
|
||||
return child.intrinsicSizes();
|
||||
}));
|
||||
|
||||
if (childrenSizes[0].minContentSize == 100 &&
|
||||
childrenSizes[0].maxContentSize == 100) {
|
||||
return { maxContentSize: 100, minContentSize: 50 };
|
||||
}
|
||||
return { maxContentSize: 0, minContentSize: 0 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.test {
|
||||
background: green;
|
||||
border: solid 2px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="test" style="width: 96px"></div>
|
||||
<div class="test" style="width: 46px"></div>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
||||
<link rel="match" href="content-size-ref.html">
|
||||
<meta name="assert" content="This test checks that the min-content and max-content sizes respect the values returned from the intrinsicSizes function." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.test-1 {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.test-2 {
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
@supports (display: layout(test-layout)) {
|
||||
.test {
|
||||
display: layout(test-layout);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
|
||||
<div class="test test-1"></div>
|
||||
<div class="test test-2"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('test-layout', class {
|
||||
async intrinsicSizes() {
|
||||
return { maxContentSize: 100, minContentSize: 50 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.test {
|
||||
background: green;
|
||||
border: solid 2px;
|
||||
}
|
||||
|
||||
.container-1 {
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.container-2 {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.container-3 {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-1">
|
||||
<div class="left test" style="height: 100px; width: 96px;"></div>
|
||||
<div class="right test" style="height: 96px; width: 100px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container-2">
|
||||
<div class="left test" style="height: 25px; width: 46px;"></div>
|
||||
<div class="right test" style="height: 46px; width: 25px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container-3">
|
||||
<div class="left test" style="height: 25px; width: 76px;"></div>
|
||||
<div class="right test" style="height: 76px; width: 25px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
||||
<link rel="match" href="floats-ref.html">
|
||||
<meta name="assert" content="This test checks that if the layout() is a float, the flow layout respects the intrinsicSizes function." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test-layout)) {
|
||||
.test {
|
||||
display: layout(test-layout);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
|
||||
.container-1 {
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.container-2 {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.container-3 {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
|
||||
<div class="container-1">
|
||||
<div class="left test" style="height: 100px"></div>
|
||||
<div class="right test" style="width: 100px"></div>
|
||||
</div>
|
||||
|
||||
<div class="container-2">
|
||||
<div class="left test" style="height: 25px"></div>
|
||||
<div class="right test" style="width: 25px"></div>
|
||||
</div>
|
||||
|
||||
<div class="container-3">
|
||||
<div class="left test" style="height: 25px"></div>
|
||||
<div class="right test" style="width: 25px"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('test-layout', class {
|
||||
async intrinsicSizes() {
|
||||
return { maxContentSize: 100, minContentSize: 50 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
||||
<link rel="match" href="invalid-ref.html">
|
||||
<meta name="assert" content="This test checks that min-content-size greater than max-content-size is correctly clamped to max-content-size." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
height: 100px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
@supports (display: layout(invalid-sizes)) {
|
||||
.test {
|
||||
display: layout(invalid-sizes);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('invalid-sizes', class {
|
||||
async intrinsicSizes() {
|
||||
return { maxContentSize: 10, minContentSize: 200 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.result {
|
||||
background: green;
|
||||
border: solid 2px;
|
||||
height: 100px;
|
||||
width: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="result"></div>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
||||
<link rel="match" href="negative-ref.html">
|
||||
<meta name="assert" content="This test checks that max-content-size is correctly clamped to zero." />
|
||||
|
||||
<style>
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
height: 100px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
@supports (display: layout(max-content-size-negative)) {
|
||||
.test {
|
||||
display: layout(max-content-size-negative);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('max-content-size-negative', class {
|
||||
async intrinsicSizes() {
|
||||
return { maxContentSize: -100 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
||||
<link rel="match" href="negative-ref.html">
|
||||
<meta name="assert" content="This test checks that min-content-size is correctly clamped to zero." />
|
||||
|
||||
<style>
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
height: 100px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
@supports (display: layout(min-content-size-negative)) {
|
||||
.test {
|
||||
display: layout(min-content-size-negative);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('min-content-size-negative', class {
|
||||
async intrinsicSizes() {
|
||||
return { minContentSize: -100 };
|
||||
}
|
||||
async layout() {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.result {
|
||||
background: green;
|
||||
border: solid 2px;
|
||||
height: 100px;
|
||||
width: min-content;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="result"></div>
|
||||
Загрузка…
Ссылка в новой задаче