diff --git a/animation-triggers-1/Overview.bs b/animation-triggers-1/Overview.bs index 8506335c7251..a0e5dbe1a760 100644 --- a/animation-triggers-1/Overview.bs +++ b/animation-triggers-1/Overview.bs @@ -391,7 +391,7 @@ urlPrefix: https://www.w3.org/TR/web-animations-1/; type: dfn
 	Name: timeline-trigger
-	Value: none | [ <<'timeline-trigger-name'>> <<'timeline-trigger-source'>> <<'timeline-trigger-activation-range'>> [ '/' <<'timeline-trigger-active-range'>> ]? ]#
+	Value: none | [ <<'timeline-trigger-name'>> <<'timeline-trigger-source'>> <<'timeline-trigger-activation-range'>> [ / <<'timeline-trigger-active-range'>> ]? ]#
 	
The 'timeline-trigger' [=shorthand property=] diff --git a/css-align-3/Overview.bs b/css-align-3/Overview.bs index f2300b7efb4d..023b07495c7c 100644 --- a/css-align-3/Overview.bs +++ b/css-align-3/Overview.bs @@ -2145,7 +2145,8 @@ Determining the Baselines of a Box
tables
The first/last [=baseline set=] of a table box - is the first/last [=baseline set=] of its first/last row. + is the first/last [=baseline set=] of its first/last row + (after any reordering of [=table row groups=]). When finding the first/last baseline set of an inline-block, any baselines contributed by table boxes must be skipped. @@ -2153,16 +2154,43 @@ Determining the Baselines of a Box
table rows
- If any cells in the row participate in - ''first baseline''/''last baseline'' alignment - along the [=inline axis=], - the first/last [=baseline set=] of the row - is generated from their shared alignment baseline - and the row's first available font, - after alignment has been performed. - Otherwise, the first/last [=baseline set=] of the row - is synthesized from the lowest and highest content edges of the cells in the row. - [[!CSS2]] + The first [=baseline set=] of a [=table row box=] + is taken from the first available of: + + 1. If any cells in the row participate in + first [=baseline alignment=] along the table’s [=inline axis=], + [=generate=] a [=baseline set=] from their shared [=alignment baseline=] + and the row’s [=first available font=], + after alignment has been performed. + + 2. Otherwise, if any cells in the row participate in + last [=baseline alignment=] along the table’s [=inline axis=], + [=generate=] from that [=alignment baseline=]. + + + + 4. Otherwise, if the row is not empty, + [=synthesize=] from the lowest and highest [=content edges=] + of all the cells in the row. + See [[css2#height-layout]]. + + 5. Otherwise, + use the [=block-start=] [=content edge=] of the [=table row box=] itself + as the [=alignment baseline=]. + + For this purpose, + any [=table cell=] that spans multiple rows + is ignored if it’s span does not start in this row; + except that for step 2, + it's ignored if its span does not end in this row. + + Last baselines are analogous + (with “first”/“last” and “start”/“end” inverted). Spanning cells participate only in the first/last row that they span for the purpose of ''first baseline''/''last baseline''. diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index 8d2bf69aaef5..8a8911346c51 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -458,7 +458,7 @@ in anchor positioning. if all of the following are true: * |possible anchor| is either an [=element=] - or a fully styleable [=tree-abiding pseudo-element=]. + or a [=fully styleable pseudo-elements=]. * |possible anchor| is in scope for |positioned el|, per the effects of 'anchor-scope' on |possible anchor| @@ -1503,12 +1503,12 @@ or being positioned partially off screen. To ameliorate this, an [=absolutely positioned=] box can use the 'position-try-fallbacks' property -to specify additional [=position options=] +to specify additional position options (variant sets of positioning/alignment properties generated from the box's existing styles, or specified in ''@position-try'' rules) that the UA can try if the box overflows its initial position. -Each is applied to the box, +Each [=position option=] is applied to the box, one by one in the order specified by 'position-try-order', and the first that doesn't cause the box to overflow its [=containing block=] @@ -1562,17 +1562,18 @@ Applies to: [=absolutely positioned boxes=] Animation type: discrete -This property provides a list of alternate positioning styles -to try when the [=absolutely positioned box=] -overflows its [=inset-modified containing block=]. -This position options list -initially contains a single [=position option=] -generated from the element's fallback base styles, -i.e. the [=computed values|computed styles=] without applying 'position-try-fallbacks'. +This property provides a list of additional, alternative [=position options=] +to try in order to prevent the [=absolutely positioned box=] +from overflowing its [=inset-modified containing block=]. -Each comma-separated entry in the list is a separate option: +Each comma-separated entry in the list is a separate [=position option=]: either the name of a ''@position-try'' block, -or a <> representing an automatic transformation of the box's existing computed style. +or a <> representing an automatic transformation +of the box's existing computed style (its fallback base styles). +Together with the [=fallback base styles=], +these options form the position options list +from which the effective style is chosen, +see [[#fallback-apply]]. Values have the following meanings: @@ -1580,7 +1581,8 @@ Values have the following meanings: : none :: The property has no effect; - the box's [=position options list=] is empty. + the box's [=position options list=] + consists only of the [=fallback base styles=]. : <> :: @@ -1596,8 +1598,8 @@ Values have the following meanings: :: Automatically creates a [=position option=] by [=executing a try-tactic|executing the specified try tactic=] - to the box's [=base styles=], - then adding the constructed [=position option=] + on the box's [=base styles=], + then adding this constructed [=position option=] to the box's [=position options list=].
@@ -1684,10 +1686,10 @@ Inherited: no
 Animation Type: discrete
 
-This property allows an element to sort its [=position options=] -by the available space they define, -if it's more important for the box to have as much space as possible -rather than strictly following the order declared in 'position-try-fallbacks'. +This property allows an element to sort its [=position option list=] +by the available space they produce. +This allows the box to prioritize having more layout space +over strictly following the order declared in 'position-try-fallbacks'.
 <> = most-width | most-height | most-block-size | most-inline-size
@@ -1845,11 +1847,10 @@ The ''@position-try'' Rule {#fallback-rule}
 -------------------------------
 
 The @position-try rule
-defines a position option
-with a given name,
+defines a [=position option=] with a given name,
 specifying one or more sets of positioning properties
 that can be applied to a box
-via 'position-try-fallbacks',
+via 'position-try-fallbacks'.
 
 The syntax of the ''@position-try'' rule is:
 
@@ -1862,10 +1863,10 @@ The syntax of the ''@position-try'' rule is:
 The <> specified in the prelude
 is the rule's name.
 If multiple ''@position-try'' rules are declared with the same name,
-they [=cascade=] the same as ''@keyframe'' rules do.
+they [=cascade=] (overriding each other) the same as ''@keyframes'' rules do.
 
-The ''@position-try'' rule only accepts
-the following [=properties=]:
+The ''@position-try'' rule only accepts
+the following accepted @position-try properties:
 
 * [=inset properties=]
 * [=margin properties=]
diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
index c35f720c65b9..240843095d65 100644
--- a/css-color-5/Overview.bs
+++ b/css-color-5/Overview.bs
@@ -295,12 +295,14 @@ Otherwise, use the specified colorspace for mixing.
 	1. [=Normalize mix percentages=] from the list of [=mix items=] passed to the function,
 		with the "forced normalization" flag set to true,
 		letting |items| and |leftover| be the result.
+	
+	2. Let |alpha mult| be 1 - |leftover|,
 		interpreting |leftover| as a number between 0 and 1.
-	4. If |items| is length 1,
+	3. If |items| is length 1,
 		set |color| to the color of that sole item,
 		converted to the specified interpolation <>.
 
@@ -314,7 +316,10 @@ Otherwise, use the specified colorspace for mixing.
 				Let |combined percentage| be the sum of |a| and |b|’s percentages.
 			2. Interpolate |a| and |b|’s colors
 				as described in [[css-color-4#interpolation]],
-				with a progress percentage equal to (|b|’s percentage) / |combined percentage|).
+				with a progress percentage equal to
+				(|b|’s percentage) / |combined percentage|),
+				if |combined percentage| is greater than 0,
+				and 0.5 otherwise.
 				If the specified color space is a [=cylindrical polar color=] space,
 				then the <> controls the
 				interpolation of hue, as described in
@@ -325,8 +330,8 @@ Otherwise, use the specified colorspace for mixing.
 				and a percentage of |combined percentage|,
 				and [=stack/push=] it onto |item stack|.
 		3. Set |color| to the color of the sole remaining item in |item stack|.
-	5. Multiply the alpha component of |color| by |alpha mult|.
-	6. Return |color|.
+	4. Multiply the alpha component of |color| by |alpha mult|.
+	5. Return |color|.
 
 	Note: In [=cylindrical polar color=] spaces,
 	mixing is order-dependent,
@@ -3905,6 +3910,16 @@ This specification adds a way to ensure adequate contrast for text whose backgro
 
 
 
    +
  • Removed special casing of 100% from the color-mix() algorithm, + thus avoiding a discontinuity near fully-transparent colors + (Issue 14014), + (Issue 13996) +
  • +
  • + Guarded against division by zero in the color-mix() algorithm + (Issue 14013), + (Issue 13996) +
  • Added a backlink from Color Interpolation in this specification, to the same section in CSS Color 4 where most of this is defined (Issue 13788) diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs index 44e184c0e084..f48574071950 100644 --- a/css-conditional-5/Overview.bs +++ b/css-conditional-5/Overview.bs @@ -212,11 +212,26 @@ At-rules Named features A CSS processor is considered to - support an named feature + support a named feature if it supports the named feature based on the feature definition described in the following list: - [ No features are currently defined. ] +
    + : anchor-position-follows-transforms + :: Anchoring to a transformed element automatically takes into account the anchor's transforms, + causing the positioned element to shift to match it. + [[CSS-ANCHOR-POSITIONING]] + + (An earlier version of the specification did not take transforms into account.) + + : single-axis-scroll-container + :: The ability to have [=single-axis scroll containers=], + where one axis is scrollable and the other is ''overflow/clip''. + [[CSS-OVERFLOW-4]] + + (Previously, specifying ''overflow/clip'' alongside a scrollable value caused it to compute to ''overflow/hidden'', + which is still a scrollable value even if it doesn't generate a scrollbar.) +
    If the feature is not listed the processor does not support the named feature. diff --git a/css-display-3/Overview.bs b/css-display-3/Overview.bs index 86069fae7357..3b914e992017 100644 --- a/css-display-3/Overview.bs +++ b/css-display-3/Overview.bs @@ -9,6 +9,7 @@ Shortname: css-display Group: csswg Level: 3 TR: https://www.w3.org/TR/css-display-3/ +Previous version: https://www.w3.org/TR/2023/CR-css-display-3-20230330/ Previous Version: https://www.w3.org/TR/2021/CRD-css-display-3-20210903/ Previous Version: https://www.w3.org/TR/2020/CRD-css-display-3-20201218/ Previous Version: https://www.w3.org/TR/2020/CR-css-display-3-20200519/ @@ -74,6 +75,7 @@ spec: svg2; .code-and-figure img { background: transparent; } +.order-example a.self-link { display: none; }

    @@ -1374,7 +1376,7 @@ Display Order: the 'order' property

     		<article class="sale-item">
    -			<h1>Computer Starter Kit</h1>
    +			<h3>Computer Starter Kit</h3>
     			<p>This is the best computer money can buy, if you don’t have much money.
     			<ul>
     				<li>Computer
    @@ -1391,7 +1393,7 @@ Display Order: the 'order' property
     		
    You get: a white desktop computer with matching keyboard and monitor. -

    Computer Starter Kit

    +

    Computer Starter Kit

    This is the best computer money can buy, if you don't have much money. @@ -2055,8 +2057,8 @@ Appendix A: Glossary * (very loosely) any block-level box that establishes a new [=formatting context=] (other than an inline formatting context) -

    out-of-flow -
    in-flow +
    out-of-flow +
    in-flow
    A box is out-of-flow if it is extracted from its expected position and interaction with surrounding content diff --git a/css-display-4/Overview.bs b/css-display-4/Overview.bs index f4b3f780698d..22b6f3e30743 100644 --- a/css-display-4/Overview.bs +++ b/css-display-4/Overview.bs @@ -2600,8 +2600,8 @@ Appendix A: Glossary * (very loosely) any block-level box that establishes a new [=formatting context=] (other than an inline formatting context) -
    out-of-flow -
    in-flow +
    out-of-flow +
    in-flow
    A box is out-of-flow if it is extracted from its expected position and interaction with surrounding content diff --git a/css-env-1/Overview.bs b/css-env-1/Overview.bs index b0b9e172538f..f5f0429a216e 100644 --- a/css-env-1/Overview.bs +++ b/css-env-1/Overview.bs @@ -78,9 +78,13 @@ A CSS environment variable is a name associated with a (a sequence of zero more CSS tokens, with almost no restrictions on what tokens can exist), similar to a [=custom property=]. [=Environment variables=] can be defined by the user agent, -or by the user. -(In the latter case, the names are <>s, -and start with `--` per standard for custom identifiers.) +or by the author. + +If author-defined, +they are a custom environment variable. +The name of a [=custom environment variable=] +must conform to the <> grammar. +This specification does not yet define how authors can define [=custom environment variables=]. Issue: Is the set of UA-defined [=environment variables=] visible to script? If so, define an API on {{Document}} to expose them. diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs index 407938b13e5c..610af7882949 100644 --- a/css-flexbox-1/Overview.bs +++ b/css-flexbox-1/Overview.bs @@ -3460,24 +3460,32 @@ Flex Container Baselines matches its main axis, its baselines are determined as follows: - 1. If any of the flex items on the flex container's [=startmost=]/[=endmost=] flex line - participate in baseline alignment, - the flex container's first/last main-axis baseline set - is generated from - the shared alignment baseline of those flex items. - - 2. Otherwise, if the flex container has at least one flex item, - the flex container's first/last main-axis baseline set - is generated from - the alignment baseline of the [=startmost=]/[=endmost=] flex item. - (If that item has no alignment baseline - parallel to the flex container's main axis, - then one is first synthesized - from its border edges.) - - 3. Otherwise, the flex container has no first/last main-axis baseline set, - and one is synthesized if needed - according to the rules of its alignment context. + 1. If any of the [=flex items=] on the flex container's [=startmost=] [=flex line=] + participate in first [=baseline alignment=] along the [=main axis=], + generate a [=baseline set=] from their shared [=alignment baseline=] + and the [=flex container's=] [=first available font=]. + + 2. Otherwise, if any of the [=flex items=] on the flex container's [=startmost=] [=flex line=] + participate in last [=baseline alignment=] along the [=main axis=], + generate a [=baseline set=] from their shared [=alignment baseline=] + and the [=flex container's=] [=first available font=]. + + 3. Otherwise, if any [=flex items=] in the [=startmost=] [=flex line=] + have a [=baseline set=] along the [=main axis=], + take the [=baseline set=] from the first such [=flex item=] + in [=order-modified document order=]. + + 4. Otherwise, if there are any [=flex items=] at all, + synthesize a [=baseline set=] + from the [=startmost=] [=flex item=] on the [=startmost=] line. + + 5. Otherwise, the [=flex container=] has no first [=main-axis=] baseline set. + (One is synthesized + from the [=flex container=] itself if needed, + according to the rules of its alignment context.) + + Last baselines are analogous + (with “first”/“last” and “start”/“end” inverted).
    first/last diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 82c13511dfb3..8647d46df5f2 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -674,6 +674,7 @@ Gap decoration segments flex/flex-gap-decorations-060.html flex/flex-gap-decorations-061.html flex/flex-gap-decorations-repaint-on-child-resize.html + flex/flex-gap-decorations-writing-mode.html grid/grid-gap-decorations-001.html grid/grid-gap-decorations-029.html grid/grid-gap-decorations-030.html @@ -695,6 +696,7 @@ Gap decoration segments grid/grid-gap-decorations-repaint-on-child-resize.html grid/grid-gap-decorations-repaint-on-item-position-change.html grid/grid-gap-decorations-repaint-on-item-span-change.html + grid/grid-gap-decorations-writing-mode.html grid/subgrid/subgrid-gap-decorations-001.html grid/subgrid/subgrid-gap-decorations-002.html grid/subgrid/subgrid-gap-decorations-003.html @@ -718,7 +720,9 @@ Gap decoration segments multicol/multicol-gap-decorations-016.html multicol/multicol-gap-decorations-018.html multicol/multicol-gap-decorations-024.html + multicol/multicol-gap-decorations-040.html multicol/multicol-gap-decorations-repaint-on-content-resize.html + multicol/multicol-gap-decorations-writing-mode.html @@ -23,6 +24,8 @@ url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-naviga type: dfn; spec: html; text: from entry; url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#window-navigation-api type: dfn; spec: html; text: navigation API; +url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigation-current-entry + type: dfn; spec: html; text: current entry; for: navigation API; url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#ongoing-navigate-event type: dfn; spec: html; text: ongoing navigate event; url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-navigation-transition @@ -31,48 +34,90 @@ url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigation-act type: dfn; spec: html; text: activation; url: https://html.spec.whatwg.org/multipage/browsing-the-web.html#has-been-revealed type: dfn; spec: html; text: has been revealed; +url: https://html.spec.whatwg.org/multipage/browsing-the-web.html#ongoing-navigation + type: dfn; spec: html; text: ongoing navigation; url: https://drafts.csswg.org/css-view-transitions-1/#capture-the-image type: dfn; spec: css-view-transitions-1; text: capture the image;

    Defining URL patterns in CSS

    +

    The <> value type

    + +
    +<> = <> | <> | <>
    +<> = <>
    +
    + +A <> is defined to +match a [=/URL=]-or-null input if input is non-null, and: + +
    + +: the <> is a <> +:: [=URL pattern/match|match a URL pattern=] is non-null given + urlPattern as + the [=URL pattern=] represented by the ''@route'' rule referenced by the name and + input as input. + +: the <> is a <> +:: [=URL pattern/match|match a URL pattern=] is non-null given + urlPattern as + the [=URL pattern=] represented by the function (see + [=create a URL pattern for url-pattern()=]) and + input as input. + +: the <> is a <> +:: The given [=/URL=] [=url/equals=] input. + +
    +

    Declaring named URL patterns: the ''@route'' rule

    The @route rule -is an at-rule that associates a name with a [=URL pattern=]. +is an at-rule that associates an author-defined name with a [=URL pattern=]. This name can be referenced in ''@navigation'' rules and in '':active-navigation()'' pseudo-classes. -The syntax of the ''@route'' rule is: +The syntax of the ''@route'' rule is described by the <> production in:
    -@route <> {
    -  [ <> | <> ]
    -}
    +<> = @route <> { <> }
     
    -based on the following definitions: +This means that the rule accepts a sequence of descriptors +that have the syntax of declarations. +However, in valid style sheets the only descriptors must match +the <> production below. +Any other descriptors are ignored. -
    -<> = ;* <> ;*
    +
    +<> = <> |
    +                     <> |
    +                     <>
     <> = pattern : <>
    -<> = ;* <> [ ;+ <> ]* ;*
     <> = <> : <>
     <> = protocol | hostname | port | pathname |
    -                         search | hash | base-url
    +                         search | hash
    +<> = base-url : stylesheet | document | <>
     
    -This associates an author-defined keyword with a URL pattern, -so that any URL that matches one of the URL patterns -matches the route named by the keyword. + +If two valid descriptors in a single rule have the same name, +the last one is used and the others are ignored. +If a rule has both a valid <> +and a valid <> +then it is ignored. The ''@route'' rule can be defined in one of two ways: : with the pattern descriptor :: in this case the URL pattern represented is - the one represented by the <> function - given as the descriptor's value. + the result of invoking + [=create a URL pattern for url-pattern()=] given + arg as the argument to the ''url-pattern()'' function + and baseURLSpecifier as + the (optional) value of the rule's <>. : with the other descriptors named by <> :: In this case the URL pattern represented is the result of invoking [=URL pattern/create|create a URL pattern=] given @@ -80,16 +125,15 @@ The ''@route'' rule can be defined in one of two ways: constructed from the descriptors and their values. Each dictionary member is given the value of the descriptor with the same name, - except the baseURL member is given the value of - the base-url descriptor. - If a base-url descriptor is not given then one is created from - the [=style resource base URL=] of the rule. + except the baseURL member is given the result of + [=create a URL for a base descriptor=] + given baseURLSpecifier as + the (optional) value of the rule's <>. ISSUE: Should this use <>, <>, or <> for the route names? -ISSUE: Is there value in being able to provide a list of <> -rather than just one? +ISSUE: Should we use base-url or just base as the descriptor name? NOTE: The list of allowed init descriptors does not include username or password since they seem unlikely to be useful. @@ -110,18 +154,18 @@ but it could also be added back later if we need it. Either this rule:
     @route --movie-list {
    -  pattern: url-pattern("/movie-list");
    +  pattern: url-pattern("/movies");
     }
     
    or this rule:
     @route --movie-list {
    -  pathname: "/movie-list";
    +  pathname: "/movies";
     }
     
    define an ''@route'' rule that associates the name --movie-list -with the URL "/movie-list" resolved relative to the style sheet. +with the URL "/movies" resolved relative to the style sheet. NOTE: The bracing syntax also allows for future expansion if needed. @@ -147,33 +191,45 @@ which can be used to match URLs. <> = url-pattern( <> )
    -This function represents a [=URL pattern=] that can be created -using the steps of the create a URL pattern for url-pattern() algorithm: +This function represents the [=URL pattern=] resulting from +invoking [=create a URL pattern for url-pattern()=] with its string argument. -1. Let arg be the <> argument to the ''url-pattern()'' function. +The syntax used in the ''url-pattern()'' function follows that of [=URL Pattern=]. +It is a [=pattern string=] directly based on the syntax used by +the popular path-to-regexp JavaScript library. -1. Let baseURL be the [=style resource base URL=] of - the rule or declaration block containing the ''url-pattern()'' function. +
    +Pattern strings can contain capture groups, which by default match the shortest possible string, +up to a component-specific separator (/ in the pathname, . in the hostname). + +For example, the pathname pattern "/movies/:id" +will match "/movies/123" +but not "/movies/123/cast". + +A regular expression enclosed in parentheses can also be used instead, +so the pathname pattern "/blog/:id(\\d+)" +will match "/movies/123" +but not "/movies/css". + +You may also omit the name of the capture group by using only a regular expression, +for example "/blog/(\\d+)". -
    - Do we want this to be the base URL all the time? - For use of ''url-pattern()'' in ''@navigation'', - it's likely more useful for the base URL - to be the document URL rather than the style sheet URL. - However, it would be very awkward for ''url-pattern()'' - to be inconsistent with ''url()''. - - Should we allow the base URL of ''url-pattern()'' - to be defined by the consumer? - Should we introduce document-url-pattern()? - Should we do something similar to - [[css-images-3#ambiguous-urls]] - (see )? - - Also see other proposed uses of {{URLPattern}} in CSS - in , - for '':local-link''. -
    +A group can also be made optional by using the ? modifier or by wrapping it in braces. +For example, the patterns "/movies/:id?" and "/movies{/:id}" +will match both "/movies" and "/movies/123" (but not "/movies/"). + +A full wildcard * can also be used to match as much as possible, +as in the pattern "/*/movies". +This too can be given a name, for example "/*lang/movies". +
    + +The steps of the create a URL pattern for url-pattern() algorithm, +given a string arg and +an optional baseURLSpecifier +which can be ''document'', ''stylesheet'', or a URL, are: + +1. Let baseURL be the result of + [=create a URL for a base descriptor=] given baseURLSpecifier. 1. Return the result of [=URL pattern/create|create a URL pattern=] given arg, baseURL, and an empty [=map=]. @@ -182,6 +238,90 @@ NOTE: This function requires that its argument is quoted. This differs from the ''url()'' function, which allows its argument to be quoted or unquoted. +The create a URL for a base descriptor algorithm, given +an optional baseURLSpecifier +which can be ''document'', ''stylesheet'', or a URL, is: + +
    + +: if baseURLSpecifier is not present or is ''stylesheet'' +:: the [=style resource base URL=] of + the rule or declaration block containing the ''url-pattern()'' function. + +: if baseURLSpecifier is ''document'' +:: the [=document base URL=] of the document + +: if baseURLSpecifier is a URL +:: baseURLSpecifier + +
    + +
    +This rule: +
    +@route --movie-detail {
    +  pattern: url-pattern("/movies/:id");
    +}
    +
    +defines an ''@route'' rule that associates +the name --movie-detail +with any URL that matches the [=URL pattern=] /movies/:id. + +Any of the following URLs (relative to the style sheet) match: + +
      +
    • /movies/123
    • +
    • /movies/456
    • +
    • /movies/something
    • +
    + +These URLs will not match: + +
      +
    • /movies/123/ — The trailing slash is not matched by the pattern
    • +
    • /movies/456/extra — The /extra is not matched by the pattern
    • +
    +
    + +
    +To have the --movie-details route +match only numeric :id values, +define the route eiter as: + +
    +@route --movie-detail {
    +  pattern: url-pattern("/movies/:id(\\d+)");
    +}
    +
    + +or as: + +
    +@route --movie-detail {
    +  pattern: url-pattern("/movies/(\\d+)");
    +}
    +
    + +This way, /movies/something won’t be matched by the route. + +NOTE: Even though the capture groups are not currently exposed, +it is recommended to give the capture groups a name for future use. +
    + +
    +Should the default always be ''stylesheet''? +For use of ''url-pattern()'' in ''@navigation'', +it's likely more useful for the base URL +to be the document URL rather than the style sheet URL. +However, it would be very awkward for ''url-pattern()'' +to be inconsistent with ''url()''. + +Also see other proposed uses of {{URLPattern}} in CSS +in , +for '':local-link''. +
    + + To serialize a ''url-pattern()'' function f, [=serialize a function=] f, using [=serialize a string=] on the single argument @@ -190,41 +330,334 @@ to serialize f's contents. NOTE: This is defined this way because {{URLPattern}} intentionally does not provide a serialization. -

    The <> value type

    + + + + +This specification defines a new +'':link-to()'' functional pseudo-class +that matches link elements that link to a certain URL. + +
    +A simple example of a '':link-to()'' selector is this one, +which matches any links that link to the site's homepage: + +
    +:link-to(url-pattern("/")) {
    +  font-weight: bold;
    +}
    +
    + +Passing in a named route is also possible: + +
    +@route --homepage {
    +  pattern: url-pattern("/");
    +}
    +
    +:link-to(--homepage) {
    +  font-weight: bold;
    +}
    +
    + +Because there is no dynamic part in the homepage URL, +you might be tempted to pass in a <> directly: + +
    +:link-to(url("/")) {
    +  font-weight: bold;
    +}
    +
    + +However, url("/") won't match URLs such as +/#scroll-to-here or /?utm_id=something +so it is recommended to use the <> +or <> variants, or use the following alternative: + +
    +@route --homepage {
    +  pathname: "/";
    +  base-url: document;
    +}
    +
    +:link-to(--homepage) {
    +  font-weight: bold;
    +}
    +
    +
    + +The '':link-to()'' pseudo-class takes a single argument, a <>, +and the pseudo-class matches any element where both: +* the element matches '':any-link'' +* the <> [=route-location/matches=] the target of the link + +

    The '':active-navigation()'' pseudo-class

    + +This specification defines a new +'':active-navigation()'' +functional pseudo-class +that matches link elements that link to a certain URL +that is related to a navigation that is currently active. + +The '':active-navigation()'' pseudo-class takes a single argument, a <>, +and the pseudo-class matches any element where: +* the element matches '':any-link'' +* the target of the link matches the <>, as defined below.
    -<> = <> | <> | <>
    -<> = <>
    +<> =
    +  <>? [ <> | link-href ]?
    +<> = at | with | from | to
     
    -A <> is defined to -match a URL input if: +ISSUE: Should we use ''at''/''with''/''from''/''to'' or +''current''/''other''/''from''/''to''? -
    +An <> matches the target linkTarget of the link when +the following steps return true: +1. Let navigationURL be + the [=current navigation URL=] of the document given the <> in <> (default ''with''). -: the <> is a <> -:: [=URL pattern/match|match a URL pattern=] is non-null given - urlPattern as - the [=URL pattern=] represented by the ''@route'' rule referenced by the name and - input as input. +1. If navigationURL is null, return false. +1. If ''link-href'' is present, or a <> is not provided: + 1. Return true if linkTarget [=url/equals=] navigationURL; Otherwise false. -: the <> is a <> -:: [=URL pattern/match|match a URL pattern=] is non-null given - urlPattern as - the [=URL pattern=] represented by the function (see - [=create a URL pattern for url-pattern()=]) and - input as input. +1. If a <> is present: + 1. Let targetMatchResult be the result of + [=URL pattern/match|matching a URL pattern=] + given urlPattern and linkTarget. -: the <> is a <> -:: The given URL [=url/equals=] input. + 1. Let navigationMatchResult be the result of + [=URL pattern/match|matching a URL pattern=] given + urlPattern and navigationURL. -
    + 1. If navigationMatchResult or targetMatchResult is null, return false. + + 1. For each property prop of {{URLPatternResult}} that is a + {{URLPatternComponentResult}}: + + 1. If {{URLPatternComponentResult/groups}} of prop of + targetMatchResult is not equal to + {{URLPatternComponentResult/groups}} of prop of + navigationMatchResult, + then return false. + + ISSUE: Need to formally define equality of ordered maps. + + 1. Return true. + +
    + +The difference between '':link-to()'' and '':active-navigation()'' +is that the latter is only active while a navigation is in progress. + +Consider this example: + +
    +@route --homepage {
    +  pattern: url-pattern("/");
    +}
    +
    +:link-to(--homepage) {
    +  color: lime;
    +}
    +
    +:active-navigation(--homepage) {
    +  color: hotpink;
    +}
    +
    + +Links that link to the --homepage get a lime color. +When navigating to or from the --homepage, +their color changes to hotpink for as long as the animation is active. + +Once the navigation has completed, the '':active-navigation()'' +selector no longer applies, and those links revert back to lime. + +
    + +
    + +In the following examples, all links that link to the --movie-detail route, +get a lime color when a navigation is in progress. + +
    +@route --movie-detail {
    +  pattern: url-pattern("/movies/:id");
    +}
    +
    +:active-navigation(--movie-detail) {
    +  color: lime;
    +}
    +
    + +By adding the following selectors that use a <>, +the behavior changes a bit. + +
    +:active-navigation(from --movie-detail) {
    +  color: hotpink;
    +}
    +
    +:active-navigation(to --movie-detail) {
    +  color: yellow;
    +}
    +
    + +When navigating from /movies/1 to /movies/2: + +
      +
    • + Links that link to the --movie-detail route + with any :id + get a lime color + during the navigation. +
    • +
    • + Links that link to the --movie-detail route + whose target is /movies/1 + (the “from” page) + get a hotpink color + during the navigation. +
    • +
    • + Links that link to the --movie-detail route + whose target is /movies/2 + (the “to” page) + get a yellow color + during the navigation. +
    • +
    + +When navigating from /movies/2 to /: + +
      +
    • + Links that link to the --movie-detail route + with any :id + get a lime color + during the navigation. +
    • +
    • + Links that link to the --movie-detail route + whose target is /movies/3 + (the “from” page) + get a hotpink color + during the navigation. +
    • +
    + +When navigating from / to /movies/3: + +
      +
    • + Links that link to the --movie-detail route + with any :id + get a lime color + during the navigation. +
    • +
    • + Links that link to the --movie-detail route + whose target is /movies/3 + (the “to” page) + get a yellow color + during the navigation. +
    • +
    + +
    + +
    + +A an example of the '':active-navigation()'' pseudo-class +is this example which creates a view transition between +a item in a list that contains a link (in this document) +and the details page for that link (in a different document). +This transition works even when the navigation is a back/forward navigation +and even if the user has used a language selector UI +to change the page into a different language (and thus change the URL). +The use of the '':link-to()'' pseudo-class ensures that +the view transition animations from or to the correct item in the list +by matching the relevant parts of the navigation URL to the link URL. -ISSUE: Should it also be possible to reference -a name defined in a routemap? -See the -route matching explainer -for details. +
    +@view-transition {
    +  /* allow cross-document view transitions */
    +  navigation: auto;
    +}
    +
    +@route --movie-detail {
    +  /* match URLs like /en/movies/123 which is the English page
    +     about a movie with ID 123.  Be careful to specify the
    +     language part with a "*" but the ID part with a named
    +     :id parameter so that matching will require equal IDs
    +     but allow differences of language. */
    +  pattern: url-pattern("/*/movies/:id");
    +}
    +
    +/* capture the overall area representing the movie, and a
    +   sub-area for its poster image */
    +
    +/* match an element with class movie-container with a child
    +   link that links to a movie whose id is the same as the
    +   movie we are currently navigating to or from.  (lang can
    +   be different, though.)
    +
    +   This depends on the --movie-detail route
    +   declaring the ID but not the language with a named
    +   parameter, and the use of the 'with' keyword.
    +
    +   This means that both the of the link and the other URL of
    +   the current navigation match the URL pattern defined by
    +   the "@route --movie-detail" rule, and that the
    +   id named group from both matches be the same.  (However,
    +   the URLs can be different because the * part of the
    +   match, containing the language, can be different.)
    +   */
    +.movie-container:has(
    +    > .movie-title:active-navigation(with --movie-detail)) {
    +
    +  view-transition-name: movie-container;
    +
    +  > .movie-poster {
    +    view-transition-name: movie-poster;
    +  }
    +
    +  /* leave the default cross-fade animation for both image
    +     captures */
    +}
    +
    + +
    + +NOTE: Some of the design discussion for this feature has been in +w3c/csswg-drafts#13163. + + + +This specification defines a new +'':trigger-link'' +that matches link elements that trigger the current navigation. + +The '':trigger-link'' pseudo-class matches any element where both: +* the element matches '':any-link'' +* the [=current navigation state=] is not null, and element is its [=navigation state/source element=]. + +Issue: should this apply to forms or submit buttons? + +
    + +A simple example of a '':trigger-link'' selector is this one, +which sets the ''view-transition-name'' for an image thumbnail that is a child of the link that triggers the current navigation. + + +
    +:trigger-link .thumb {
    +  view-transition-name: active-image;
    +}
    +
    + +

    Conditional rules for navigation queries

    @@ -368,31 +801,14 @@ as follows: :: The result is the result of the child subexpression. : <> -:: : at: <> - :: The result is true if - the [=current at URL=] at of the document is non-null and - the <> [=route-location/matches=] at. - - : with: <> - :: The result is true if - the [=current with URL=] other of the document is non-null and - the <> [=route-location/matches=] other. - - : from: <> - :: The result is true if - the [=current from URL=] from of the document is non-null and - the <> [=route-location/matches=] from. - - : to: <> - :: The result is true if - the [=current to URL=] to of the document is non-null and - the <> [=route-location/matches=] to. +:: The result is true if + the <> [=route-location/matches=] [=current navigation URL=] of the document given the <>. : <> :: : between: <> and <> :: The result is true if - the [=current from URL=] from of the document is non-null, - the [=current to URL=] to of the document is non-null, + the [=current navigation URL=] from of the document given ''from'' is non-null, + the [=current navigation URL=] to of the document ''to'' is non-null, one of the two <>s [=route-location/matches=] from, and the other of the two <>s @@ -403,22 +819,15 @@ as follows: :: True if the [=current navigation type=] is {{NavigationType/traverse}}. : history: back :: True if the [=current navigation type=] is {{NavigationType/traverse}} and - the [=current navigation delta=] is less than 0. + the document's [=current navigation state=]'s [=navigation state/new index=] is less than its [=navigation state/old index=]. : history: forward :: True if the [=current navigation type=] is {{NavigationType/traverse}} and - the [=current navigation delta=] is greater than 0. + the document's [=current navigation state=]'s [=navigation state/new index=] is greater than its [=navigation state/old index=]. : history: reload :: True if the [=current navigation type=] is {{NavigationType/reload}}. : <> -:: : phase: loading - :: ISSUE: Needs to be defined. - : phase: ready - :: ISSUE: Needs to be defined. - - NOTE: Only applies to cross-document navigations. - : phase: committed - :: ISSUE: Needs to be defined. +:: The [=current navigation state=] is not null, and its [=navigation state/phase=] matches the given ''phase'' value. : <> :: @@ -428,15 +837,6 @@ as follows: It exists only for future-compatibility, so that new syntax additions do not invalidate too much of a <> in older user agents. -A document's navigation API is -the result of the following steps on document: - -1. Let window be the {{Window}} whose [=associated Document=] is document, or null if there is no such {{Window}}. - -1. If window is null, return null. - -1. Return window's [=navigation API=]. - The condition of the ''@navigation'' rule is the result of the <> in its prelude. @@ -469,340 +869,108 @@ ISSUE: This should probably have a more formal definition of the function, but I can't find the formal definitions of the existing ''if()'' functions to model it after. - +

    Processing model

    - +The at rules and pseudo-classes defined in this document rely on the [=current navigation state=]. -This specification defines a new -'':link-to()'' functional pseudo-class -that matches link elements that link to a certain URL. +A navigation state is a [=struct=] with the following items: -
    +
    + : old URL + : new URL + :: a [=/URL=] + + : type + :: a {{NavigationType}} + + : old index + : new index + :: an integer -A simple example of a '':link-to()'' selector is this one, -which matches any links that link to the site's homepage: + : phase + :: `loading`, `ready`, or `committed`. -
    -:link-to(url-pattern("/")) {
    -  font-weight: bold;
    -}
    -
    + : source element + :: null or an {{Element}}. +
    -
    +
    +To get the current navigation state of a {{Document}} |document|: -The '':link-to()'' pseudo-class takes a single argument, a <>, -and the pseudo-class matches any element where both: -* the element matches '':any-link'' -* the <> [=route-location/matches=] the target of the link +1. If |document| is not [=Document/fully active=], return null. -

    The ''::active-navigation()'' pseudo-class

    +1. Let |navigation| be |document|'s [=relevant global object=]'s [=navigation API=]. -This specification defines a new -'':active-navigation()'' -functional pseudo-class -that matches link elements that link to a certain URL -that is related to a navigation that is currently active. +1. Let |activation| be |navigation|'s {{Navigation/activation}}. -
    +1. If |document| has not [=has been revealed|been revealed=]: + 1. If |activation| is null, return null. -A an example of the '':active-navigation()'' pseudo-class -is this example which creates a view transition between -a item in a list that contains a link (in this document) -and the details page for that link (in a different document). -This transition works even when the navigation is a back/forward navigation -and even if the user has used a language selector UI -to change the page into a different language (and thus change the URL). -The use of the '':link-to()'' pseudo-class ensures that -the view transition animations from or to the correct item in the list -by matching the relevant parts of the navigation URL to the link URL. + 1. [=Assert=]: |activation|'s {{NavigationActivation/entry}} is not null. -
    -@view-transition {
    -  /* allow cross-document view transitions */
    -  navigation: auto;
    -}
    +    1. Return a new [=navigation state=] whose
    +        [=navigation state/old URL=] is |activation|'s {{NavigationActivation/from}}'s {{NavigationHistoryEntry/url}},
    +        [=navigation state/new URL=] is |activation|'s {{NavigationActivation/entry}}'s {{NavigationHistoryEntry/url}},
    +        [=navigation state/type=] is |activation|'s {{NavigationActivation/navigationType}},
    +        [=navigation state/old index=] is |activation|'s {{NavigationActivation/from}}'s {{NavigationHistoryEntry/index}},
    +        [=navigation state/new index=] is |activation|'s {{NavigationActivation/entry}}'s {{NavigationHistoryEntry/index}},
    +        [=navigation state/phase=] is `committed`,
    +        and [=navigation state/source element=] is null.
     
    -@route --movie-details-with-id {
    -  /* match URLs like /en/movie/123 which is the English page
    -     about a movie with ID 123.  Be careful to specify the
    -     language part with a "*" but the ID part with a named
    -     :id parameter so that matching will require equal IDs
    -     but allow differences of language. */
    -  pattern: url-pattern("/*/movie/:id");
    -}
    +    Note: this means that navigations that occur before the page is revealed, e.g. calling {{History/pushState()}} in the head do not reflect in CSS.
     
    -/* capture the overall area representing the movie, and a
    -   sub-area for its poster image */
    +1. Let |navigateEvent| be the [=ongoing navigate event=] of |navigation|.
     
    -/* match an element with class movie-container with a child
    -   link that links to a movie whose id is the same as the
    -   movie we are currently navigating to or from.  (lang can
    -   be different, though.)
    +1. Let |phase| be `loading`.
     
    -   This depends on the --movie-details-with-id route
    -   declaring the ID but not the language with a named
    -   parameter, and the use of the 'with' keyword.
    +1. If |navigateEvent| is null and |navigation|'s [=traversing navigate event=] is not null:
    +    1. Set |navigateEvent| to |navigation|'s [=traversing navigate event=].
     
    -   This means that both the of the link and the other URL of
    -   the current navigation match the URL pattern defined by
    -   the "@route --movie-details-with-id" rule, and that the
    -   id named group from both matches be the same.  (However,
    -   the URLs can be different because the * part of the
    -   match, containing the language, can be different.)
    -   */
    -.movie-container:has(
    -    > .movie-title:active-navigation(with --movie-details-with-id)) {
    +    1. Set |phase| to `ready`.
     
    -  view-transition-name: movie-container;
    -
    -  > .movie-poster {
    -    view-transition-name: movie-poster;
    -  }
    +1. If |navigateEvent| is null, return null.
     
    -  /* leave the default cross-fade animation for both image
    -     captures */
    -}
    -
    +1. Return a new [=navigation state=] whose + [=navigation state/old URL=] is |document|'s [=Document/URL=], + [=navigation state/new URL=] is |navigateEvent|'s {{NavigateEvent/destination}}'s {{NavigationDestination/url}}, + [=navigation state/type=] is |ongoingNavigateEvent|'s {{NavigateEvent/navigationType}}, + [=navigation state/old index=] is |navigation|'s [=navigation API/current entry=]'s {{NavigationHistoryEntry/index}}, + [=navigation state/new index=] is |navigateEvent|'s {{NavigateEvent/destination}}'s {{NavigationDestination/index}}, + [=navigation state/phase=] is |phase|, + and [=navigation state/source element=] is |ongoingNavigateEvent|'s {{NavigateEvent/sourceElement}}.
    -The '':active-navigation()'' pseudo-class takes a single argument, a <>, -and the pseudo-class matches any element where: -* the element matches '':any-link'' -* the target of the link matches the <>, as defined below. - -
    -<> =
    -  <>? [ <> | link-href ]?
    -<> = at | with | from | to
    -
    +To get the current navigation URL given a {{Document}} |document| and a <> |relation|: -NOTE: The ''link-href'' keyword is an explicit way to represent the default, -but there is no difference between specifying it explicitly or omitting it. +1. Let |state| be |document|'s [=current navigation state=]. +1. If |state| is null, return null. +1. Return the result of switching on |relation|: -ISSUE: Should we use ''at''/''with''/''from''/''to'' or -''current''/''other''/''from''/''to''? - -The active navigation URL for an <> is:
    -
    If the <> is ''at'' -
    The [=current at URL=] of the document -
    If the <> is ''with'' or is omitted -
    The [=current with URL=] of the document -
    If the <> is ''from'' -
    The [=current from URL=] of the document -
    If the <> is ''to'' -
    The [=current to URL=] of the document -
    - -An <> matches the target linkTarget of the link when -the following steps return true: -1. Let navigationURL be - the [=active navigation URL=] of the <> -1. If navigationURL is null, return false. -1. If a <> is present: - 1. Let targetMatchResult be the result of - [=URL pattern/match|match a URL pattern=] - given urlPattern and linkTarget. +: ''to'' +:: |state|'s [=navigation state/new URL=]. - 1. Let navigationMatchResult be the result of - [=URL pattern/match|match a URL pattern=] given - urlPattern and navigationURL. +: ''from'' +:: |state|'s [=navigation state/old URL=]. - 1. If navigationMatchResult or targetMatchResult is null, return false. +: ''at'' +:: |state|'s [=navigation state/new URL=] if |state|'s [=navigation state/phase=] is `committed`; Otherwise |state|'s [=navigation state/old URL=]. - 1. For each property prop of {{URLPatternResult}} that is a - {{URLPatternComponentResult}}: +: ''with'' +:: |state|'s [=navigation state/old URL=] if |state|'s [=navigation state/phase=] is `committed`; Otherwise |state|'s [=navigation state/new URL=]. - 1. If {{URLPatternComponentResult/groups}} of prop of - targetMatchResult is not equal to - {{URLPatternComponentResult/groups}} of prop of - navigationMatchResult, - then return false. - - ISSUE: Need to formally define equality of ordered maps. - - 1. Return true. - -1. Otherwise: - - 1. Return true if linkTarget [=url/equals=] navigationURL. - - 1. Return false. - -NOTE: Some of the design discussion for this feature has been in -w3c/csswg-drafts#13163. - -

    Definitions of current navigation state

    - -Both the ''@navigation'' rule and the '':link-to()'' pseudo-class -rely on the following definitions of [=current at URL=] -the [=current with URL=], [=current from URL=], and [=current to URL=]. - -The current from URL of a [=/document=] is a URL or null. -It is defined as follows: - -1. If the [=document's navigation API=] of the document is non-null and - its [=transition=] is non-null, - its [=from entry=]'s {{NavigationHistoryEntry/url}}. - - NOTE: This part is for when the old document in the navigation - is still the current document. - -1. If the [=document's navigation API=] of the document is non-null, - its [=activation=] is non-null, - the activation's {{NavigationActivation/from}} is non-null, and - the document's [=has been revealed=] is false or - was false at the start of the current [=task=], - the activation's {{NavigationActivation/from}}'s - {{NavigationHistoryEntry/url}}. - - NOTE: This part is for when the new document in the navigation - has become the current document. - -1. Otherwise, null. - - NOTE: The previous two branches can also produce null results. - -The current to URL of a [=/document=] is a URL or null. -It is defined as follows: - -1. If the [=document's navigation API=] of the document is non-null and - its [=ongoing navigate event=] is non-null: - - 1. if the {{pageswap}} event has fired since that navigation began, - and its {{PageSwapEvent/activation}} was non-null, - and that {{PageSwapEvent/activation}}'s - {{NavigationActivation/entry}}'s - {{NavigationHistoryEntry/url}} is non-null, - then that - {{NavigationHistoryEntry/url}}. - - NOTE: This part does expose the result of redirects. - - NOTE: This part is not relevant to normal page rendering. - However, it can be relevant to what is rendered - when [=capturing the image=] - for a [[css-view-transitions-2#cross-document-view-transitions|cross-document view transition]]. - - ISSUE: Is the final "non-null" check needed? - - 1. otherwise, the [=ongoing navigate event=]'s - {{NavigateEvent/destination}}'s - {{NavigationDestination/url}} - - NOTE: This part does not expose the result of redirects. - - ISSUE: This assumes that the [=ongoing navigate event=] - and the [=transition=] have the same lifetime, - but this isn't really - true if the event is intercepted. - After - whatwg/html#11690 / - whatwg/html#11692. - we could probably define this more like "from" above. - But which lifetime is the one we want? - - NOTE: This part is for when the old document in the navigation - is still the current document. - -1. If the [=document's navigation API=] of the document is non-null and - its [=activation=] is non-null, - the document's [=has been revealed=] is false or - was false at the start of the current [=task=], - and the activation's {{NavigationActivation/entry}}'s - {{NavigationHistoryEntry/url}}. - - NOTE: This part is for when the new document in the navigation - has become the current document. - - ISSUE: Does it make sense to expose this when - the activation's {{NavigationActivation/from}} is null, - and thus there is no [=current from URL=]? - -1. Otherwise, null. - - NOTE: The previous two branches can also produce null results. - -ISSUE: The above definitions of from and to apparently don't work right -if you start a same-document navigation (e.g., with {{History/pushState}}) -in the middle of a cross-document navigation. - -The current at URL of a [=/document=] is a URL or null. -It is defined as follows: - -1. ISSUE: Write this! (It should be null if there is no active navigation, - and the same as the document's [=Document/URL=] if there is.) - -The current with URL of a [=/document=] is a URL or null. -It is defined as follows: - -1. ISSUE: Write this! (It should be like [=current to URL=] and [=current from URL=] - but always referring to the other Document in the navigation.) - -The current navigation type of a [=/document=] is a {{NavigationType}} or null. -It is defined as follows: - -1. If the [=document's navigation API=] of the document is non-null and - its [=transition=] is non-null, - the transition's {{NavigationTransition/navigationType}}. - - NOTE: This part is for when the old document in the navigation - is still the current document. - -1. If the [=document's navigation API=] of the document is non-null and - its [=activation=] is non-null, - the document's [=has been revealed=] is false or - was false at the start of the current [=task=], - the activation's {{NavigationActivation/navigationType}}. - - NOTE: This part is for when the new document in the navigation - has become the current document. - -1. Otherwise, null. - -The current navigation delta of a [=/document=] is a {{NavigationType}} or null. -It is defined as follows: - -1. If the [=document's navigation API=] of the document is non-null and - its [=transition=] is non-null, - - 1. If the transition's {{NavigationTransition/navigationType}} is not {{NavigationType/traverse}}, null. - - 1. Otherwise, - the transition's {{NavigationTransition/to}}'s {{NavigationDestination/index}} - minus - the transition's {{NavigationTransition/from}}'s {{NavigationHistoryEntry/index}}. - - NOTE: This part is for when the old document in the navigation - is still the current document. - -1. If the [=document's navigation API=] of the document is non-null, - its [=activation=] is non-null, - the activation's {{NavigationActivation/from}} is non-null, and - the document's [=has been revealed=] is false or - was false at the start of the current [=task=], - - 1. If the activation's {{NavigationActivation/navigationType}} is not {{NavigationType/traverse}}, null. + - 1. Otherwise, - the activation's {{NavigationActivation/entry}}'s {{NavigationHistoryEntry/index}} - minus - the activation's {{NavigationActivation/from}}'s {{NavigationHistoryEntry/index}}. +To get the current navigation type of a [=/document=] |document|: + 1. If |document|'s [=current navigation state=] is non-null, return its [=navigation state/type=]. + 1. Return null. - NOTE: This part is for when the new document in the navigation - has become the current document. +The traversing navigate event is the [=ongoing navigate event=] which was reset when the [=ongoing navigation=] is set to `traversal`. -1. Otherwise, null. -ISSUE: Generally improve integration with the HTML spec for these definitions, -instead of monkeypatching. -This includes the interaction with [=has been revealed=] -and the interaction with the {{pageswap}} event, -and other things where this section links to non-exported definitions. -ISSUE: Generally figure out if these definitions should care about -the [=ongoing navigate event=] or the [=transition=]. +ISSUE: Improve integration with the HTML standard, especially the concept of [=traversing navigate event=] and unexported definitions.

    Privacy Considerations

    diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs index 5de3123cac55..1906c5fa7997 100644 --- a/css-overflow-3/Overview.bs +++ b/css-overflow-3/Overview.bs @@ -622,8 +622,9 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property * the [=overflow clip edge=] is clamped to stay within the element's [=padding box=]. (This does not affect the [=computed value|computed=] or [=used value=] of this property.) * the ''overflow-clip-margin/border-box'' value - behaves as ''overflow-clip-margin/padding-box'' - and ignores any specified offset. + ignores any specified offset + (and, due to the previous bullet point, + effectively acts as ''overflow-clip-margin/padding-box'') Note: This property was previously defined to only affect ''overflow: clip''. It now also affects [=scroll containers=], diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index 260683891551..bda42d7115cd 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -24,6 +24,7 @@ spec:css-pseudo-4; type:selector; text:::first-letter spec:css-pseudo-4; type:selector; text:::first-line spec:css-writing-modes-4; type:dfn; text:start spec:css-writing-modes-4; type:dfn; text:end +spec:dom; type:dfn; for: Document; text:mode
 url: https://drafts.csswg.org/selectors-3/#subject; type: dfn; text: subject;
@@ -925,11 +926,23 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property
 
 		If this results in the entire contents of the line box being displaced,
 		the line box is considered to contain a [=strut=], as defined in [[CSS2/visudet#leading]].
+		
+		This requirement applies regardless of the document's [=mode=],
+		and is not affected by the [[quirks#the-blocks-ignore-line-height-quirk|line-height quirk]].
+		
+		
+
 
 		
 			block-ellipsis-016.html
 			block-ellipsis-018.html
 			block-ellipsis-025.html
+			block-ellipsis-quirk-001.html
 		
 
 		Displacing content to make room for the [=block overflow ellipsis=]
@@ -1305,6 +1318,7 @@ Forcing a Break After a Set Number of Lines: the 'max-lines' property
 		webkit-line-clamp-013.html
 		webkit-line-clamp-027.html
 		webkit-line-clamp-029.html
+		line-clamp-with-floats-007.html
 	
 
 	Note: This implies that 'max-lines' has no effect when applied to [=multi-column containers=],
@@ -1696,6 +1710,8 @@ Handling of Excess Content: the 'continue' property
 			line-clamp-033.html
 			line-clamp-auto-033.html
 			line-clamp-auto-with-ruby-002.html
+			line-clamp-with-floats-003.html
+			line-clamp-with-floats-004.html
 		
 
 	- Any [=line boxes=] that follow the [=clamp point=]
@@ -1759,6 +1775,7 @@ Handling of Excess Content: the 'continue' property
 	is always counted as [=ink overflow=] rather than [=scrollable overflow=].
 
 	
+		line-clamp-with-floats-010.html
 		line-clamp-021.html
 		line-clamp-with-abspos-019.html
 	
@@ -1768,12 +1785,20 @@ Handling of Excess Content: the 'continue' property
 
 	Within a [=line-clamp container=],
 	floats which have not been made into [=invisible boxes=]
-	must be visually clipped to the [=content edge=]
+	must be visually clipped to the [=block-end=] [=content edge=]
 	of the [=line-clamp container=].
 	They do not introduce any clearance
 	that would make the [=line-clamp container=] increase its height,
 	and do not contribute to the [=scrollable overflow area=].
 
+	
+		line-clamp-with-floats-001.html
+		line-clamp-with-floats-002.html
+		line-clamp-with-floats-005.html
+		line-clamp-with-floats-006.html
+		line-clamp-with-floats-010.html
+	
+
 	If a [=block container=] contains a [=clamp point=],
 	within itself or in any of its descendants,
 	its [=automatic block size=] will not take into account any invisible boxes,
diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs
index 996d4ced6af1..331854a6d17f 100644
--- a/css-pseudo-4/Overview.bs
+++ b/css-pseudo-4/Overview.bs
@@ -1810,7 +1810,9 @@ Additions to the CSS Object Model
 
   The type attribute
   is a string representing the type of the pseudo-element.
-  This can be one of the following values:
+  This can be any standardized [=tree-abiding pseudo-element=]
+  that is not an [=element-backed pseudo-element=],
+  for example:
 
   
"::before" @@ -1819,6 +1821,10 @@ Additions to the CSS Object Model
Represents the ''::after'' pseudo-element.
"::marker"
Represents the ''::marker'' pseudo-element. +
"::backdrop" +
Represents the ''::backdrop'' pseudo-element. +
"::view-transition" +
Represents the ''::view-transition'' pseudo-element.
The element attribute is the @@ -1881,7 +1887,13 @@ Additions to the CSS Object Model 2. If |type| is failure, return null. - 3. Otherwise, return the {{CSSPseudoElement}} object + 3. If |type| is an [=element-backed pseudo-element=], + return null. + + 4. If |type| is not a [=tree-abiding pseudo-element=], + return null. + + 5. Otherwise, return the {{CSSPseudoElement}} object representing the pseudo-element that would match the selector |type| with [=this=] as its [=originating element=]. diff --git a/css-sizing-4/responsive-iframes-explainer.md b/css-sizing-4/responsive-iframes-explainer.md index a1c0912328f7..464487f10cb6 100644 --- a/css-sizing-4/responsive-iframes-explainer.md +++ b/css-sizing-4/responsive-iframes-explainer.md @@ -29,9 +29,9 @@ In general, there is a lot of demand for this feature, as evidenced by: ## Solution -The embedding document opts in via the `contain-intrinsic-size: from-element` CSS property on the `