зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1465661 [wpt PR 11260] - [css-layout-api] Adds passing of LayoutConstraints#fixedBlockSize., a=testonly
Automatic update from web-platform-tests[css-layout-api] Adds passing of LayoutConstraints#fixedBlockSize. This passes a fixed block size constraint into the layout function if: - It has a fixed/percentage/calc block-size. - The abs-pos constraints will make a fixed block size. - It is a quirky body/document (which stretches to fit the viewport). - It has a fixed block-size constraint from a parent layout. The tests all behave the same way. The layout which we are interested in testing looks at the received fixedBlockSize, and if correct performs layout on the only child with a 100x100 fixed size. Bug: 726125 Change-Id: I4eec86a843d58a791c9df071e16b71bf2f5d80ee Reviewed-on: https://chromium-review.googlesource.com/1073636 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#563668} -- wpt-commits: ff4d0553835102b2f68c7bf8dafb205bd3cacb89 wpt-pr: 11260
This commit is contained in:
Ian Kilpatrick
Родитель
7cf6fb68d9
Коммит
df1cc99a60
|
|
@ -120939,6 +120939,330 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-absolute-left-right-vrl.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-absolute-left-right-vrl.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-absolute-none.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-absolute-none.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-absolute-top-bottom.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-absolute-top-bottom.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-block-none-vrl.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-block-none-vrl.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-block-none.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-block-none.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-fixed-max.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-fixed-max.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-fixed-min.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-fixed-min.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-fixed-vrl.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-fixed-vrl.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-fixed.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-fixed.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-basis-vrl.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-flex-basis-vrl.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-column-basis.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-flex-column-basis.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-column-grow.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-flex-column-grow.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-column-none.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-flex-column-none.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-column-stretch-vrl.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-flex-column-stretch-vrl.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-grow-vrl.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-flex-grow-vrl.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-none.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-flex-none.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-percentage-indefinite.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-flex-percentage-indefinite.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-stretch-max.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-flex-stretch-max.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-stretch.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-flex-stretch.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-grid-none.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-grid-none.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-grid-stretch-max.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-grid-stretch-max.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-grid-stretch.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-grid-stretch.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-grid-vrl.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-grid-vrl.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-percentage-indefinite.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-percentage-indefinite.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-percentage-vrl.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-percentage-vrl.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-percentage.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-percentage.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-quirky-body.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-block-size-quirky-body.https.html",
|
||||
[
|
||||
[
|
||||
"/css/css-layout-api/green-square-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-inline-size-absolute-left-right.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/constraints-fixed-inline-size-absolute-left-right.https.html",
|
||||
|
|
@ -251118,6 +251442,16 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/support/constraints-fixed-block-size-quirky-body-iframe.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/support/constraints-fixed-block-size.js": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/support/constraints-fixed-inline-size.js": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -517264,6 +517598,114 @@
|
|||
"371958d97ba951172a283a653f2064def1327a32",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-absolute-left-right-vrl.https.html": [
|
||||
"ef743bb31278b2a9cb3fef53a1afa430bf347eaf",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-absolute-none.https.html": [
|
||||
"0eac283ecc975a020075ce274eeb61b9c456b375",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-absolute-top-bottom.https.html": [
|
||||
"ec737a097b1c43e87a75da98808630d87def3820",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-block-none-vrl.https.html": [
|
||||
"0f5b86acd6ed8acd65a9f0f42d6cc58a6647fa1a",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-block-none.https.html": [
|
||||
"59a141464e16d51ca3d80c5c4a8288ff8941a499",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-fixed-max.https.html": [
|
||||
"4e49d34d2fc28f15d52e83c27aa8e4fc49dc40f6",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-fixed-min.https.html": [
|
||||
"5785b9c3512c74fd297aa73bcdd6265c8008fd4c",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-fixed-vrl.https.html": [
|
||||
"a7eafe481062365a3367cedfd30ed3a3a21ec7ab",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-fixed.https.html": [
|
||||
"bb8c0b95f1d382cfce289a17d29dea571e938c2d",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-basis-vrl.https.html": [
|
||||
"a1868fd28509931b4c447c866e7669b7129e8380",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-column-basis.https.html": [
|
||||
"53458ee7f683668a621cf82ab30212ee74bad83f",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-column-grow.https.html": [
|
||||
"04f4fdd074cf2726211d2718d4aa14b816ca0214",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-column-none.https.html": [
|
||||
"166a66ce956b3b49b2d00ce88e808739065acc9d",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-column-stretch-vrl.https.html": [
|
||||
"9bd9cccaea90f3c472a254ac41738716d921845d",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-grow-vrl.https.html": [
|
||||
"8c82d4c094b1ff74f2638b2182880fc55c00737a",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-none.https.html": [
|
||||
"b35d8ca45539171ff4a3360e223bb476b81e131e",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-percentage-indefinite.https.html": [
|
||||
"c4a30e47f6758a2ec98d4c122b09caf8efb7244d",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-stretch-max.https.html": [
|
||||
"07155efe3bf9a2a48f1e76180176dca76c2e0096",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-flex-stretch.https.html": [
|
||||
"9a34469e3eb5b89f76739b26082cc97f356c5d3d",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-grid-none.https.html": [
|
||||
"fda1fa1d2dc49d9b3721165a6f55eb680ed0d958",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-grid-stretch-max.https.html": [
|
||||
"8eb9641f5eba2aedcc4f8445ea55eff0574b07a2",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-grid-stretch.https.html": [
|
||||
"392a866a7fd24e58b28169f0aa23a58abceb4c6f",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-grid-vrl.https.html": [
|
||||
"e4e6a64e131de62dd18223bdffe0404f8e890464",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-percentage-indefinite.https.html": [
|
||||
"6bb68de285ec3eefeaf7ddd6a4bba6ea867865e4",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-percentage-vrl.https.html": [
|
||||
"20143f108250817b376b3be48d1569d83d305a08",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-percentage.https.html": [
|
||||
"9afd79b298034ada9c1d46c1c5ce90f40ce619b3",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-block-size-quirky-body.https.html": [
|
||||
"a6d5724f25ca05b3d205166a04e9a53f5b227527",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/constraints-fixed-inline-size-absolute-left-right.https.html": [
|
||||
"15f8dde88dd066b5525a6b8990206ac567f48b2a",
|
||||
"reftest"
|
||||
|
|
@ -517480,6 +517922,14 @@
|
|||
"361b3c82c37c0068d23ae23e96d8e9185d3765b0",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-layout-api/support/constraints-fixed-block-size-quirky-body-iframe.html": [
|
||||
"874a80d6bc5e5cfa8f8fe6c224e7e3c999d81d1e",
|
||||
"support"
|
||||
],
|
||||
"css/css-layout-api/support/constraints-fixed-block-size.js": [
|
||||
"9e15bc74f332c532b149f43465851d79d9e9c850",
|
||||
"support"
|
||||
],
|
||||
"css/css-layout-api/support/constraints-fixed-inline-size.js": [
|
||||
"ed0224a380c50a7e83d23a95be5a4348ce5bf706",
|
||||
"support"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 20px;
|
||||
--expected-block-size: 100;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
position: absolute;
|
||||
--expected-block-size: null;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
position: relative;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 20px;
|
||||
--expected-block-size: 100;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-lr;
|
||||
background: red;
|
||||
--expected-block-size: null;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 30;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
max-height: 30px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 70;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 60;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
flex-basis: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 60;
|
||||
flex-basis: 60px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 50;
|
||||
margin-bottom: 10px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 90; /* flex-item should stretch to (100 - 10)px */
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null; /* Percentage which we are resolving height against is indefinite. */
|
||||
width: 100px;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 30; /* flex-item should respect the max constraint */
|
||||
max-height: 30px;
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 40; /* flex-item should stretch to (50 - 10)px */
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
grid: 50px / auto-flow;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 30; /* grid-item should respect the max constraint */
|
||||
max-height: 30px;
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
grid: 50px / auto-flow;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 40; /* grid-item should stretch to (50 - 10)px */
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
grid: auto-flow / 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null; /* Percentage which we are resolving height against is indefinite. */
|
||||
width: 100px;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
width: 100px;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
iframe { border: none; width: 200px; height: 200px; }
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
<body>
|
||||
<script>
|
||||
// For this test we load a quirky iframe with the test file.
|
||||
// We can control the auto size of the iframe body element by setting the iframe height.
|
||||
const iframe = document.createElement('iframe');
|
||||
document.body.appendChild(iframe);
|
||||
iframe.addEventListener('load', () => {
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(
|
||||
iframe.contentWindow.CSS.layoutWorklet, {url: 'constraints-fixed-block-size.js'});
|
||||
});
|
||||
iframe.src = 'support/constraints-fixed-block-size-quirky-body-iframe.html';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
--expected-block-size: 200;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
body {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- In Quirks mode, we should stretch to 100% of the inital containing block. -->
|
||||
<body>
|
||||
<div class="child"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
registerLayout('test', class {
|
||||
static get inputProperties() {
|
||||
return ['--expected-block-size'];
|
||||
}
|
||||
|
||||
*intrinsicSizes() {}
|
||||
*layout([child], edges, constraints, styleMap) {
|
||||
let childFixedInlineSize = 0;
|
||||
let childFixedBlockSize = 0;
|
||||
if (constraints.fixedBlockSize === JSON.parse(styleMap.get('--expected-block-size'))) {
|
||||
childFixedInlineSize = 100;
|
||||
childFixedBlockSize = 100;
|
||||
}
|
||||
|
||||
const childFragments = [yield child.layoutNextFragment({
|
||||
fixedInlineSize: childFixedInlineSize,
|
||||
fixedBlockSize: childFixedBlockSize,
|
||||
})];
|
||||
|
||||
return {childFragments};
|
||||
}
|
||||
});
|
||||
Загрузка…
Ссылка в новой задаче