forked from mirrors/gecko-dev
f374bf4f57
Automatic update from web-platform-tests[css-layout-api] Implement the guts of the javascript layout runner. This implements the hooks from the LayoutCustom object into a web developer defined layout class. See: https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback Currently the only useful thing this does to allow the web developer to return an "auto" block-size, e.g. registerLayout('foo', class { *intrinsicSizes() {} *layout() { return { autoBlockSize: Math.random() * 100; } // FUN! } }); The engine calculates the inline-size, and adjusts the block-size for the web developer. This is a simplification on the current API as spec'd but we'll see what the HoudiniTF thinks of this approach. The other large behaviour change is appropriate "fallback" handling when something goes wrong. See "fallback" tests. Bug: 726125 Change-Id: I08cd2e439f4321bd534a4e3f7222fbdb898e1785 Reviewed-on: https://chromium-review.googlesource.com/917423 Reviewed-by: Kentaro Hara <haraken@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Hiroki Nakagawa <nhiroki@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#537371} wpt-commits: 1a2e430c6fd35c111ead0d5a0e9afbe874e7c1a2 wpt-pr: 9509 wpt-commits: 1a2e430c6fd35c111ead0d5a0e9afbe874e7c1a2 wpt-pr: 9509
63 lines
1.5 KiB
HTML
63 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html class=reftest-wait>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
|
<link rel="match" href="auto-block-size-inflow-ref.html">
|
|
<meta name="assert" content="This test checks that min/max-block-size constraints are applied correctly to a layout()." />
|
|
|
|
<style>
|
|
.test {
|
|
margin: 20px 0;
|
|
background: red;
|
|
}
|
|
|
|
@supports (display: layout(block-size-100)) {
|
|
.test {
|
|
display: layout(block-size-100);
|
|
background: green;
|
|
}
|
|
}
|
|
|
|
.width-100 {
|
|
width: 100px;
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
|
|
.height-100 {
|
|
height: 100px;
|
|
writing-mode: vertical-rl;
|
|
}
|
|
</style>
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<script src="/common/worklet-reftest.js"></script>
|
|
|
|
<!-- 100px x 100px -->
|
|
<div class="test width-100"></div>
|
|
|
|
<!-- 100px x 150px -->
|
|
<div class="test width-100" style="min-height: 150px"></div>
|
|
|
|
<!-- 100px x 50px -->
|
|
<div class="test width-100" style="max-height: 50px"></div>
|
|
|
|
<!-- 100px x 100px -->
|
|
<div class="test height-100"></div>
|
|
|
|
<!-- 150px x 100px -->
|
|
<div class="test height-100" style="min-width: 150px"></div>
|
|
|
|
<!-- 50px x 100px -->
|
|
<div class="test height-100" style="max-width: 50px"></div>
|
|
|
|
<script id="code" type="text/worklet">
|
|
registerLayout('block-size-100', class {
|
|
*intrinsicSizes() {}
|
|
*layout() {
|
|
return {autoBlockSize: 100};
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
|
</script>
|
|
</html>
|