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 styleMap and give to layout function.
This adds both style-invalidation for the LayoutCustom object, as well as giving the populated StylePropertyMapReadOnly to the layout() function. ComputedStyle::DiffNeedsFullLayout now needs a Document in order to look up the DocumentLayoutDefinition, to see which properties need to checked for change. Bug: 726125 Change-Id: Ie462cb624ba413c796131433ea4eae9bb9f3ec13
- Loading branch information
1 parent
ca1654a
commit b8603f3
Showing
4 changed files
with
170 additions
and
0 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,13 @@ | ||
<!DOCTYPE html> | ||
<style> | ||
.result { | ||
background: green; | ||
border-radius: 2px; | ||
margin: 10px; | ||
|
||
width: 100px; | ||
height: 100px; | ||
} | ||
</style> | ||
|
||
<div class="result"></div> |
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,70 @@ | ||
<!DOCTYPE html> | ||
<html class=reftest-wait> | ||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-invalidation"> | ||
<link rel="match" href="style-map-multi-ref.html"> | ||
<meta name="assert" content="This test checks that properties are correctly given to the layout function." /> | ||
|
||
<style> | ||
.test { | ||
background: red; | ||
margin: 10px; | ||
width: 100px; | ||
|
||
/* Properties under test. */ | ||
--foo: bar; | ||
border-radius: 2px; | ||
} | ||
|
||
@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> | ||
|
||
<script id="code" type="text/worklet"> | ||
registerLayout('test', class { | ||
static get inputProperties() { | ||
return [ '--bar', '--foo', 'align-items', 'border-top-left-radius']; | ||
} | ||
|
||
*intrinsicSizes() {} | ||
*layout(children, edges, constraints, styleMap) { | ||
const expected = [ | ||
{property: '--bar', value: '[CSSUnparsedValue=]'}, | ||
{property: '--foo', value: '[CSSUnparsedValue= bar]'}, | ||
{property: 'align-items', value: '[CSSKeywordValue=normal]'}, | ||
{property: 'border-top-left-radius', value: '[CSSUnitValue=2px]'}, | ||
]; | ||
|
||
const actual = Array.from(styleMap.keys()).sort().map((property) => { | ||
const valueObject = styleMap.get(property); | ||
const value = '[' + valueObject.constructor.name + '=' + valueObject.toString() + ']'; | ||
return {property, value}; | ||
}); | ||
|
||
if (expected.length != actual.length) | ||
return {autoBlockSize: 0}; | ||
|
||
for (let i = 0; i < expected.length; i++) { | ||
if (expected[i].property != actual[i].property) | ||
return {autoBlockSize: 0}; | ||
|
||
if (expected[i].value != actual[i].value) | ||
return {autoBlockSize: 0}; | ||
} | ||
|
||
return {autoBlockSize: 100}; | ||
} | ||
}); | ||
</script> | ||
|
||
<script> | ||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); | ||
</script> | ||
</html> |
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 @@ | ||
<!DOCTYPE html> | ||
<style> | ||
.result { | ||
background: green; | ||
border-radius: 2px; | ||
margin: 10px; | ||
|
||
width: 100px; | ||
height: 100px; | ||
} | ||
</style> | ||
|
||
<div class="result"></div> | ||
<div class="result"></div> | ||
<div class="result"></div> | ||
<div class="result"></div> |
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,71 @@ | ||
<!DOCTYPE html> | ||
<html class=reftest-wait> | ||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-invalidation"> | ||
<link rel="match" href="style-map-ref.html"> | ||
<meta name="assert" content="This test checks that properties are correctly given to the layout function." /> | ||
|
||
<style> | ||
.test { | ||
background: red; | ||
margin: 10px; | ||
width: 100px; | ||
|
||
/* Properties under test. */ | ||
--foo: bar; | ||
border-radius: 2px; | ||
} | ||
|
||
@supports (display: layout(test)) { | ||
.test { | ||
background: green; | ||
} | ||
|
||
.test-0 { display: layout(test-0); } | ||
.test-1 { display: layout(test-1); } | ||
.test-2 { display: layout(test-2); } | ||
.test-3 { display: layout(test-3); } | ||
} | ||
</style> | ||
<script src="/common/reftest-wait.js"></script> | ||
<script src="/common/worklet-reftest.js"></script> | ||
|
||
<div class="test test-0"></div> | ||
<div class="test test-1"></div> | ||
<div class="test test-2"></div> | ||
<div class="test test-3"></div> | ||
|
||
<script> | ||
const tmpl = (test, idx) => { | ||
return ` | ||
registerLayout('test-${idx}', class { | ||
static get inputProperties() { return ['${test.property}']; } | ||
*intrinsicSizes() {} | ||
*layout(children, edges, constraints, styleMap) { | ||
const value = styleMap.get('${test.property}'); | ||
const result = '[' + value.constructor.name + '=' + value.toString() + ']'; | ||
if (result != '${test.expected}') | ||
return {autoBlockSize: 0}; | ||
const size = Array.from(styleMap.keys()).length; | ||
if (size != 1) | ||
return {autoBlockSize: 0}; | ||
return {autoBlockSize: 100}; | ||
} | ||
}); | ||
`; | ||
} | ||
|
||
const tests = [ | ||
{property: '--bar', expected: '[CSSUnparsedValue=]'}, | ||
{property: '--foo', expected: '[CSSUnparsedValue= bar]'}, | ||
{property: 'align-items', expected: '[CSSKeywordValue=normal]'}, | ||
{property: 'border-top-left-radius', expected: '[CSSUnitValue=2px]'}, | ||
]; | ||
|
||
const workletSource = tests.map(tmpl).join('\n'); | ||
|
||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, workletSource); | ||
</script> | ||
</html> |