Skip to content

Commit 136f75d

Browse files
bfgeekbfgeek
committed
[css-layout-api] Firm up invalidation section, reorder concepts section.
1 parent 4824c9a commit 136f75d

File tree

1 file changed

+74
-51
lines changed

1 file changed

+74
-51
lines changed

‎css-layout-api/Overview.bs

+74-51
Original file line numberDiff line numberDiff line change
@@ -960,57 +960,6 @@ Layout {#layout}
960960

961961
This section describes how the CSS Layout API interacts with the user agent's layout engine.
962962

963-
Layout Invalidation {#layout-invalidation}
964-
------------------------------------------
965-
966-
A <a>document</a> has an associated <dfn>layout name to input properties map</dfn> and a <dfn>layout
967-
name to child input properties map</dfn>. Initially these maps are empty and are populated when
968-
{{registerLayout(name, layoutCtor)}} is called.
969-
970-
Each <a>box</a> has an associated <dfn>layout valid flag</dfn>. It may be either
971-
<dfn>layout-valid</dfn> or <dfn>layout-invalid</dfn>. It is initially set to <a>layout-invalid</a>.
972-
973-
Each <a>box</a> has an associated <dfn>intrinsic sizes valid flag</dfn>. If may be either
974-
<dfn>intrinsic-sizes-valid</dfn> or <dfn>intrinsic-sizes-invalid</dfn>. It is initially set to
975-
<a>intrinsic-sizes-invalid</a>.
976-
977-
When the computed style for a |box| changes, the user agent must run the following steps:
978-
1. Let |layoutFunction| be the ''layout()'' function of the 'display' property on the computed
979-
style for the |box| if it exists. If it is a different type of value (e.g. ''grid'') then
980-
abort all these steps.
981-
982-
2. Let |name| be the first argument of the |layoutFunction|.
983-
984-
3. Let |inputProperties| be the result of looking up |name| on <a>layout name to input
985-
properties map</a>.
986-
987-
4. Let |childInputProperties| be the result of looking up |name| on <a>layout name to child
988-
input properties map</a>.
989-
990-
5. For each |property| in |inputProperties|, if the |property|'s <a>computed value</a> has
991-
changed, set the <a>layout valid flag</a> on the <a>box</a> to <a>layout-invalid</a>, and
992-
set the <a>intrinsic sizes valid flag</a> to <a>intrinsic-sizes-invalid</a>.
993-
994-
6. For each |property| in |childInputProperties|, if the |property|'s <a>computed value</a> has
995-
changed, set the <a>layout valid flag</a> on the <a>box</a> to <a>layout-invalid</a>, and
996-
set the <a>intrinsic sizes valid flag</a> to <a>intrinsic-sizes-invalid</a>.
997-
998-
When a child <a>box</a> represented by a {{LayoutChild}} is added or removed from the <a>box
999-
tree</a> or has its layout invalidated (from a computed style change, or a descentdant change). Set
1000-
the <a>layout valid flag</a> on the current <a>box</a> to <a>layout-invalid</a> and set the
1001-
<a>intrinsic sizes valid flag</a> on the current <a>box</a> to <a>intrinsic-sizes-invalid</a>.
1002-
1003-
Note: This only describes layout invalidation as it relates to the CSS Layout API. All
1004-
<a>boxes</a> conceptually have a <a>layout valid flag</a> and these changes are propagated
1005-
through the <a>box tree</a>.
1006-
1007-
Issue: We also want to implcitly invalidate on size and edge properties, i.e.
1008-
- 'width', 'min-width', 'max-width'
1009-
- 'height', 'min-height', 'max-height'
1010-
- 'padding-top', 'padding-bottom', 'padding-left', 'padding-right'
1011-
- 'border-top-width', 'border-bottom-width', 'border-left-width', 'border-right-width'
1012-
- 'overflow', 'overflow-x', 'overflow-y'
1013-
1014963
Concepts {#concepts}
1015964
--------------------
1016965

@@ -1048,6 +997,80 @@ function). It consists of:
1048997

1049998
- <dfn for="document layout definition">layout options</dfn> a {{LayoutOptions}}.
1050999

1000+
Layout Invalidation {#layout-invalidation}
1001+
------------------------------------------
1002+
1003+
Each <a>box</a> has an associated <dfn>layout valid flag</dfn>. It may be either
1004+
<dfn>layout-valid</dfn> or <dfn>layout-invalid</dfn>. It is initially set to <a>layout-invalid</a>.
1005+
1006+
Each <a>box</a> has an associated <dfn>intrinsic sizes valid flag</dfn>. If may be either
1007+
<dfn>intrinsic-sizes-valid</dfn> or <dfn>intrinsic-sizes-invalid</dfn>. It is initially set to
1008+
<a>intrinsic-sizes-invalid</a>.
1009+
1010+
<div algorithm>
1011+
When the user agent wants to <dfn>invalidate layout functions</dfn> given |box|, the user agent
1012+
<em>must</em> run the following steps:
1013+
1014+
1. Let |layoutFunction| be the ''layout()'' function of the 'display' property on the computed
1015+
style for the |box| if it exists. If it is a different type of value (e.g. ''grid'') then
1016+
abort all these steps.
1017+
1018+
2. Let |name| be the first argument of the |layoutFunction|.
1019+
1020+
3. Let |documentDefinition| be the result of <a>get a document layout definition</a> given
1021+
|name|.
1022+
1023+
4. Let |inputProperties| be |documentDefinition|'s <a for="document layout definition">input
1024+
properties</a>.
1025+
1026+
5. Let |childInputProperties| be |documentDefinition|'s <a for="document layout
1027+
definition">child input properties</a>.
1028+
1029+
6. For each |property| in |inputProperties|, if the |property|'s <a>computed value</a> has
1030+
changed, set the <a>layout valid flag</a> on the <a>box</a> to <a>layout-invalid</a>, and
1031+
set the <a>intrinsic sizes valid flag</a> to <a>intrinsic-sizes-invalid</a>.
1032+
1033+
7. For each |property| in |childInputProperties|, if the |property|'s <a>computed value</a> has
1034+
changed, set the <a>layout valid flag</a> on the <a>box</a> to <a>layout-invalid</a>, and
1035+
set the <a>intrinsic sizes valid flag</a> to <a>intrinsic-sizes-invalid</a>.
1036+
</div>
1037+
1038+
<a>Invalidate layout functions</a> <em>must</em> be run when the user agent recalculates the computed
1039+
style for a box, or when the children's computed style of that box is recalculated.
1040+
1041+
When a child <a>box</a> represented by a {{LayoutChild}} is added or removed from the <a>box
1042+
tree</a> or has its layout invalidated (from a computed style change, or a descendant change),
1043+
<em>and</em> this invalidation is to be propagated up the box tree, set the <a>layout valid flag</a>
1044+
on the current <a>box</a> to <a>layout-invalid</a> and set the <a>intrinsic sizes valid flag</a> on
1045+
the current <a>box</a> to <a>intrinsic-sizes-invalid</a>.
1046+
1047+
When the computed style of a <a>layout API container</a> changes, <em>and</em> this change effects
1048+
the values inside the {{LayoutEdges}} object, set the <a>layout valid flag</a> of the box to
1049+
<a>layout-invalid</a>, and set the <a>intrinsic sizes valid flag</a> of the box to
1050+
<a>intrinsic-sizes-invalid</a>.
1051+
1052+
If the computed style changes effects the values inside the {{LayoutConstraints}} object, just set
1053+
the <a>intrinsic sizes valid flag</a> of the box to <a>intrinsic-sizes-invalid</a>.
1054+
1055+
Note: As the {{LayoutConstraints}} object is only passed into the layout function there is no need
1056+
to invalidate the intrinsic sizes.
1057+
1058+
<div class="note">
1059+
Note: As an example the following properties could change the {{LayoutEdges}} object:
1060+
- 'padding-top'
1061+
- 'border-left-width'
1062+
- 'overflow-y'
1063+
1064+
And the following properties could change the {{LayoutConstraints}} object:
1065+
- 'width'
1066+
- 'max-width'
1067+
- 'height'
1068+
</div>
1069+
1070+
Note: This only describes layout invalidation as it relates to the CSS Layout API. All
1071+
<a>boxes</a> conceptually have a <a>layout valid flag</a> and these changes are propagated
1072+
through the <a>box tree</a>.
1073+
10511074
Layout Worklet {#layout-worklet}
10521075
--------------------------------
10531076

0 commit comments

Comments
 (0)