[css-navigation-1] Split :active-navigation() from :link-to().

This separates the more complex feature in the :link-to() pseudo-class
into a separate :active-navigation() pseudo-class.

Author: dbaron

css-navigation-1/Overview.bs

@@ -40,7 +40,7 @@ url: https://drafts.csswg.org/css-view-transitions-1/#capture-the-image
 The <dfn at-rule id="at-ruledef-route">@route</dfn> rule
 is an at-rule that associates a name with a [=URL pattern=].
 This name can be referenced in ''@navigation'' rules
-and in '':link-to()'' pseudo-classes.
+and in '':active-navigation()'' pseudo-classes.
 
 The syntax of the ''@route'' rule is:
 
@@ -270,34 +270,22 @@ as follows:
 ::    : at: <<navigation-location>>
     :: The result is true if
         the [=current at URL=] <var>at</var> of the document is non-null and
-        [=URL pattern/match|match a URL pattern=] is non-null
-        given <var>urlPattern</var> as
-        the [=navigation location URL pattern=] of <<navigation-location>>
-        and <var>input</var> as <var>at</var>.
+        the <<navigation-location>> [=navigation-location/matches=] <var>at</var>.
 
     : with: <<navigation-location>>
     :: The result is true if
         the [=current with URL=] <var>other</var> of the document is non-null and
-        [=URL pattern/match|match a URL pattern=] is non-null when
-        given <var>urlPattern</var> as
-        the [=navigation location URL pattern=] of <<navigation-location>>
-        and <var>input</var> as <var>other</var>.
+        the <<navigation-location>> [=navigation-location/matches=] <var>other</var>.
 
     : from: <<navigation-location>>
     :: The result is true if
         the [=current from URL=] <var>from</var> of the document is non-null and
-        [=URL pattern/match|match a URL pattern=] is non-null when
-        given <var>urlPattern</var> as
-        the [=navigation location URL pattern=] of <<navigation-location>>
-        and <var>input</var> as <var>from</var>.
+        the <<navigation-location>> [=navigation-location/matches=] <var>from</var>.
 
     : to: <<navigation-location>>
     :: The result is true if
         the [=current to URL=] <var>to</var> of the document is non-null and
-        [=URL pattern/match|match a URL pattern=] is non-null when
-        given <var>urlPattern</var> as
-        the [=navigation location URL pattern=] of <<navigation-location>>
-        and <var>input</var> as <var>to</var>.
+        the <<navigation-location>> [=navigation-location/matches=] <var>to</var>.
 
 : <<navigation-location-between-test>>
 ::    : between: <<navigation-location>> and <<navigation-location>>
@@ -349,6 +337,13 @@ See the
 <a href="https://github.com/WICG/declarative-partial-updates/blob/main/route-matching-explainer.md">route matching explainer</a>
 for details.
 
+A <<navigation-location>> is defined to
+<dfn for="navigation-location">match</dfn> a URL <var>input</var> if
+[=URL pattern/match|match a URL pattern=] is non-null given
+<var>urlPattern</var> as the [=navigation location URL pattern=] of the
+<<navigation-location>> and
+<var>input</var> as <var>input</var>.
+
 A <dfn>document's navigation API</dfn> is
 the result of the following steps on <var>document</var>:
 
@@ -390,7 +385,9 @@ 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.
 
-<h2 id="link-navigation-pseudo-classes">Pseudo-class for navigation-related links: '':link-to()''</h2>
+<h2 id="link-navigation-pseudo-classes">Pseudo-class for navigation-related links: '':link-to()'' and '':active-navigation()''</h2>
+
+<h3 id="link-to-pseudo-class">The ''::link-to()'' pseudo-class</h3>
 
 This specification defines a new
 <dfn id="link-to-pseudo" selector>'':link-to()''</dfn> functional pseudo-class
@@ -409,9 +406,22 @@ which matches any links that link to the site's homepage:
 
 </div>
 
+The '':link-to()'' pseudo-class takes a single argument, a <<navigation-location>>,
+and the pseudo-class matches any element where both:
+* the element matches '':any-link''
+* the <<navigation-location>> [=navigation-location/matches=] the target of the link
+
+<h3 id="active-navigation-pseudo-class">The ''::active-navigation()'' pseudo-class</h3>
+
+This specification defines a new
+<dfn id="active-navigation-pseudo" selector>'':active-navigation()''</dfn>
+functional pseudo-class
+that matches link elements that link to a certain URL
+that is related to a navigation that is currently active.
+
 <div class="example">
 
-A more interesting example of the '':link-to()'' pseudo-class
+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).
@@ -457,7 +467,7 @@ by matching the relevant parts of the navigation URL to the link URL.
    match, containing the language, can be different.)
    */
 .movie-container:has(
-    > .movie-title:link-to(with --movie-details-with-id)) {
+    > .movie-title:active-navigation(with --movie-details-with-id)) {
 
   view-transition-name: movie-container;
 
@@ -472,84 +482,69 @@ by matching the relevant parts of the navigation URL to the link URL.
 
 </div>
 
-The '':link-to()'' pseudo-class takes a single argument, a <<link-condition>>,
+The '':active-navigation()'' pseudo-class takes a single argument, a <<active-navigation-condition>>,
 and the pseudo-class matches any element where:
 * the element matches '':any-link''
-* the target of link matches the <<link-condition>>, as defined below.
+* the target of the link matches the <<active-navigation-condition>>, as defined below.
 
 <pre class="prod def" dfn-type="type" nohighlight>
-<dfn><<link-condition>></dfn> = [ <<navigation-relation>> ]? <<link-condition-base>>
-<dfn><<link-condition-base>></dfn> = <<navigation-location>>
+<dfn><<active-navigation-condition>></dfn> =
+  <<navigation-relation>>? [ <<navigation-location>> | link-href ] ?
 <dfn><<navigation-relation>></dfn> = at | with | from | to
 </pre>
 
-ISSUE: Should we use ''navigation-''(''at''/''with''/''from''/''to'') or
-''navigation-''(''current''/''other''/''from''/''to'')?
-
-ISSUE: Should the '':link-to()'' variant that has a <<link-condition>> have a different name,
-such as '':navigating-link()''?
-
-A <<link-condition>> matches the target of the link when both:
-* the <<link-condition-base>> matches the target of the link, and
-* either:
-    * a <<navigation-match>> is not present, or
-    * the <<navigation-match>> matches the target of the link,
-        with the [=URL pattern=] represented by the <<link-condition-base>> as context
-
-A <<link-condition-base>> represents a [=URL pattern=].
-If the <<link-condition-base>> is a <<url-pattern()>>,
-then it represents the URL pattern
-represented by the <<url-pattern()>> function
-(see [=create a URL pattern for url-pattern()=]).
-If it is a <<route-name>>, then it represents the URL pattern
-represented by the ''@route'' rule.
-
-A <<link-condition-base>> matches a URL
-when [=URL pattern/match|match a URL pattern=] is non-null
-given <var>urlPattern</var> as
-the [=URL pattern=] that it represents and
-<var>input</var> as the given URL.
-
-A <<navigation-match>> matches the URL <var>linkTarget</var>
-(with a URL Pattern <var>urlPattern</var> as context)
-if the following steps return true:
-1. Let <var>targetMatchResult</var> be the result of
-    [=URL pattern/match|match a URL pattern=]
-    given <var>urlPattern</var> and <var>linkTarget</var>.
-1. If <var>targetMatchResult</var> is null, return false.
-
-    NOTE: This doesn't really matter because
-    in this case the <<link-condition-base>> also doesn't match.
-1. Let <var>matchRelation</var> be the <<navigation-relation>> argument
-    of the <<navigation-match>>.
-1. Let <var>navigationURL</var> be:
-    : If <var>matchRelation</var> is ''at'',
-    :: the <a>current at URL</a> of the document.
-    : Otherwise, if <var>matchRelation</var> is ''with'',
-    :: the <a>current with URL</a> of the document.
-    : Otherwise, if <var>matchRelation</var> is ''from'',
-    :: the <a>current from URL</a> of the document.
-    : Otherwise (Assert: <var>matchRelation</var> is ''to''),
-    :: the <a>current to URL</a> of the document.
+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.
+
+ISSUE: Should we use ''at''/''with''/''from''/''to'' or
+''current''/''other''/''from''/''to''?
+
+The <dfn>active navigation URL</dfn> for an <<active-navigation-condition>> is:
+<dl switch>
+<dt>If the <<navigation-relation>> is ''at''
+<dd>The [=current at URL=] of the document
+<dt>If the <<navigation-relation>> is ''with'' or is omitted
+<dd>The [=current with URL=] of the document
+<dt>If the <<navigation-relation>> is ''from''
+<dd>The [=current from URL=] of the document
+<dt>If the <<navigation-relation>> is ''to''
+<dd>The [=current to URL=] of the document
+</dl>
+
+An <<active-navigation-condition>> matches the target <var>linkTarget</var> of the link when
+the following steps return true:
+1. Let <var>navigationURL</var> be
+    the [=active navigation URL=] of the <<active-navigation-condition>>
 1. If <var>navigationURL</var> is null, return false.
-1. Let <var>navigationMatchResult</var> be the result of
-     [=URL pattern/match|match a URL pattern=] given
-     <var>navigationURL</var> and <var>urlPattern</var>.
+1. If a <<navigation-location>> is present:
+    1. Let <var>targetMatchResult</var> be the result of
+        [=URL pattern/match|match a URL pattern=]
+        given <var>urlPattern</var> and <var>linkTarget</var>.
+
+    1. Let <var>navigationMatchResult</var> be the result of
+         [=URL pattern/match|match a URL pattern=] given
+         <var>urlPattern</var> and <var>navigationURL</var>.
+
+    1. If <var>navigationMatchResult</var> or <var>targetMatchResult</var> is null, return false.
+
+    1. For each property <var>prop</var> of {{URLPatternResult}} that is a
+        {{URLPatternComponentResult}}:
+
+        1. If {{URLPatternComponentResult/groups}} of <var>prop</var> of
+            <var>targetMatchResult</var> is not equal to
+            {{URLPatternComponentResult/groups}} of <var>prop</var> of
+            <var>navigationMatchResult</var>,
+            then return false.
 
-1. If <var>navigationMatchResult</var> is null, return false.
+            ISSUE: Need to formally define equality of ordered maps.
 
-1. For each property <var>prop</var> of {{URLPatternResult}} that is a
-    {{URLPatternComponentResult}}:
+    1. Return true.
 
-    1. If {{URLPatternComponentResult/groups}} of <var>prop</var> of
-        <var>targetMatchResult</var> is not equal to
-        {{URLPatternComponentResult/groups}} of <var>prop</var> of
-        <var>navigationMatchResult</var>,
-        then return false.
+1. Otherwise:
 
-        ISSUE: Need to formally define equality of ordered maps.
+    1. Return true if <var>linkTarget</var> [=url/equals=] <var>navigationURL</var>.
 
-1. Return true.
+    1. Return false.
 
 NOTE: Some of the design discussion for this feature has been in
 <a href="https://github.com/w3c/csswg-drafts/issues/13163">w3c/csswg-drafts#13163</a>.