-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[css-layout-api] Populate children, and pass into layout() function
This introduces the LayoutChild API surface, (which only has a styleMap accessor currently). Each LayoutBox which is a child of a LayoutCustom will hold onto a LayoutChild object, acting as the script interface for the web developer. Bug: 726125 Change-Id: Iecdb01a38c0712dcda063b485c4207bde59f3995 Reviewed-on: https://chromium-review.googlesource.com/933092 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/master@{#539928}
- Loading branch information
1 parent
3370b65
commit 7ccdd1e
Showing
12 changed files
with
397 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
// Returns true if the given arrays are equal. Optionally can pass an equality function. | ||
export function areArraysEqual(a, b, equalityFunction = (c, d) => { return c === d; }) { | ||
try { | ||
if (a.length !== b.length) | ||
return false; | ||
|
||
for (let i = 0; i < a.length; i++) { | ||
if (!equalityFunction(a[i], b[i])) | ||
return false; | ||
} | ||
} catch (ex) { | ||
return false; | ||
} | ||
|
||
return true; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
<!DOCTYPE html> | ||
<html class=reftest-wait> | ||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> | ||
<link rel="match" href="layout-child-ref.html"> | ||
<meta name="assert" content="This test checks that absolute children don't appear in the children array." /> | ||
|
||
<style> | ||
.test { | ||
--child-expected: ["2"]; | ||
|
||
background: red; | ||
margin: 10px; | ||
width: 100px; | ||
} | ||
|
||
.absolute { | ||
position: absolute; | ||
visibility: hidden; | ||
--child: 1; | ||
} | ||
|
||
.inflow { | ||
visibility: hidden; | ||
--child: 2; | ||
} | ||
|
||
@supports (display: layout(test)) { | ||
.test { | ||
background: green; | ||
display: layout(test); | ||
} | ||
} | ||
</style> | ||
<script src="/common/reftest-wait.js"></script> | ||
<script src="/common/worklet-reftest.js"></script> | ||
|
||
<div class="test"> | ||
<div class="absolute"></div> | ||
<div class="inflow"></div> | ||
</div> | ||
|
||
<script> | ||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
<!DOCTYPE html> | ||
<html class=reftest-wait> | ||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> | ||
<link rel="match" href="layout-child-ref.html"> | ||
<meta name="assert" content="This test checks that boxes created by ::before/::after appear as children." /> | ||
|
||
<style> | ||
.test { | ||
--child-expected: ["1", "2", "3"]; | ||
|
||
background: red; | ||
margin: 10px; | ||
width: 100px; | ||
} | ||
|
||
.test::before { | ||
visibility: hidden; | ||
content: 'before'; | ||
--child: 1; | ||
} | ||
|
||
.inflow { | ||
visibility: hidden; | ||
--child: 2; | ||
} | ||
|
||
.test::after { | ||
visibility: hidden; | ||
content: 'after'; | ||
--child: 3; | ||
} | ||
|
||
@supports (display: layout(test)) { | ||
.test { | ||
background: green; | ||
display: layout(test); | ||
} | ||
} | ||
</style> | ||
<script src="/common/reftest-wait.js"></script> | ||
<script src="/common/worklet-reftest.js"></script> | ||
|
||
<div class="test"> | ||
<div class="inflow"></div> | ||
</div> | ||
|
||
<script> | ||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
<!DOCTYPE html> | ||
<html class=reftest-wait> | ||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> | ||
<link rel="match" href="layout-child-ref.html"> | ||
<meta name="assert" content="This test checks that fixed children don't appear in the children array." /> | ||
|
||
<style> | ||
.test { | ||
--child-expected: ["2"]; | ||
|
||
background: red; | ||
margin: 10px; | ||
width: 100px; | ||
} | ||
|
||
.fixed { | ||
position: fixed; | ||
visibility: hidden; | ||
--child: 1; | ||
} | ||
|
||
.inflow { | ||
visibility: hidden; | ||
--child: 2; | ||
} | ||
|
||
@supports (display: layout(test)) { | ||
.test { | ||
background: green; | ||
display: layout(test); | ||
} | ||
} | ||
</style> | ||
<script src="/common/reftest-wait.js"></script> | ||
<script src="/common/worklet-reftest.js"></script> | ||
|
||
<div class="test"> | ||
<div class="fixed"></div> | ||
<div class="inflow"></div> | ||
</div> | ||
|
||
<script> | ||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
<!DOCTYPE html> | ||
<html class=reftest-wait> | ||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> | ||
<link rel="match" href="layout-child-ref.html"> | ||
<meta name="assert" content="This test checks that float children appear in the children array." /> | ||
|
||
<style> | ||
.test { | ||
--child-expected: ["1", "2"]; | ||
|
||
background: red; | ||
margin: 10px; | ||
width: 100px; | ||
} | ||
|
||
.float { | ||
float: right; | ||
visibility: hidden; | ||
--child: 1; | ||
} | ||
|
||
.inflow { | ||
visibility: hidden; | ||
--child: 2; | ||
} | ||
|
||
@supports (display: layout(test)) { | ||
.test { | ||
background: green; | ||
display: layout(test); | ||
} | ||
} | ||
</style> | ||
<script src="/common/reftest-wait.js"></script> | ||
<script src="/common/worklet-reftest.js"></script> | ||
|
||
<div class="test"> | ||
<div class="float"></div> | ||
<div class="inflow"></div> | ||
</div> | ||
|
||
<script> | ||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<!DOCTYPE html> | ||
<html class=reftest-wait> | ||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> | ||
<link rel="match" href="layout-child-ref.html"> | ||
<meta name="assert" content="This test checks that regular inflow children appear as children." /> | ||
|
||
<style> | ||
.test { | ||
--child-expected: ["1", "2"]; | ||
|
||
background: red; | ||
margin: 10px; | ||
width: 100px; | ||
} | ||
|
||
.inflow-1 { | ||
visibility: hidden; | ||
--child: 1; | ||
} | ||
|
||
.inflow-2 { | ||
visibility: hidden; | ||
--child: 2; | ||
} | ||
|
||
@supports (display: layout(test)) { | ||
.test { | ||
background: green; | ||
display: layout(test); | ||
} | ||
} | ||
</style> | ||
<script src="/common/reftest-wait.js"></script> | ||
<script src="/common/worklet-reftest.js"></script> | ||
|
||
<div class="test"> | ||
<div class="inflow-1"></div> | ||
<div class="inflow-2"></div> | ||
</div> | ||
|
||
<script> | ||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
<!DOCTYPE html> | ||
<html class=reftest-wait> | ||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> | ||
<link rel="match" href="layout-child-ref.html"> | ||
<meta name="assert" content="This test checks that inline children are correctly blockified or wrapped in anonymous boxes." /> | ||
|
||
<style> | ||
/* We have a wrapper in this test to ensure that any text that is positioned | ||
* slightly outside the "test" box doesn't affect the rendering. | ||
* This wrapper has a 10px inline padding which does the trick. */ | ||
.wrapper { | ||
background: green; | ||
padding: 0 10px; | ||
margin: 10px; | ||
width: 80px; | ||
} | ||
|
||
.test { | ||
--child-expected: ["1", "default", "3", "4", "5"]; | ||
|
||
background: red; | ||
color: green; | ||
width: 80px; | ||
--child: default; | ||
} | ||
|
||
.inflow { | ||
visibility: hidden; | ||
--child: 3; | ||
} | ||
|
||
@supports (display: layout(test)) { | ||
.test { | ||
background: green; | ||
display: layout(test); | ||
} | ||
} | ||
</style> | ||
<script src="/common/reftest-wait.js"></script> | ||
<script src="/common/worklet-reftest.js"></script> | ||
|
||
<div class="wrapper"> | ||
<div class="test"> | ||
<span style="--child: 1;">Text,</span> more text | ||
<div class="inflow"></div> | ||
<span style="--child: 4;">Text, | ||
<div>block!</div> | ||
</span> | ||
<span style="--child: 5;">Other text</span> | ||
</div> | ||
</div> | ||
|
||
<script> | ||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<!DOCTYPE html> | ||
<style> | ||
.result { | ||
background: green; | ||
margin: 10px; | ||
height: 100px; | ||
width: 100px; | ||
} | ||
</style> | ||
<div class="result"></div> |
Oops, something went wrong.