[css-navigation-1] Apply CSSWG resolutions (#14264)

- Rename @route to @location
- Remove `with` for now

Addresses most of #12594

Resolution #12594 (comment)

Author: noamr

css-navigation-1/Overview.bs

@@ -1,5 +1,5 @@
 <pre class="metadata">
-Title: CSS Route and Navigation Matching
+Title: CSS Navigation Matching
 Status: ED
 Work Status: Exploring
 Shortname: css-navigation
@@ -42,58 +42,57 @@ url: https://drafts.csswg.org/css-view-transitions-1/#capture-the-image
 
 <h2 id="url-patterns-in-css">Defining URL patterns in CSS</h2>
 
-<h3 id="route-value-type">The <<route-location>> value type</h3>
+<h3 id="nav-location-value-type">The <<navigation-location>> value type</h3>
 
 <pre class="prod def" dfn-type="type" nohighlight>
-<dfn><<route-location>></dfn> = <<url>> | [ <<route-name>> | <<url-pattern()>> ]
-<dfn><<route-name>></dfn> = <<dashed-ident>>
+<dfn><<navigation-location>></dfn> = <<url>> | [ <<location-name>> | <<url-pattern()>> ]
+<dfn><<location-name>></dfn> = <<dashed-ident>>
 </pre>
 
-A <<route-location>> is defined to
-<dfn for="route-location">match</dfn> a [=/URL=]-or-null <var>input</var> if <var>input</var> is non-null,
+A <<navigation-location>> is defined to
+<dfn for="navigation-location">match</dfn> a [=/URL=]-or-null <var>input</var> if <var>input</var> is non-null,
 and the corresponding statement:
 
 <dl class=switch>
 
-: the <<route-location>> is a <<route-name>>
-:: The [=URL pattern=] represented by the ''@route'' rule referenced by the name [=URL pattern/match|matching=] <var>input</var>.
+: the <<navigation-location>> is a <<location-name>>
+:: The [=URL pattern=] represented by the ''@location'' rule referenced by the name [=URL pattern/match|matching=] <var>input</var>.
 
-: the <<route-location>> is a <<url-pattern()>>
+: the <<navigation-location>> is a <<url-pattern()>>
 :: The provided [=URL pattern=][=URL pattern/match|matches=] <var>input</var>.
 
-: the <<route-location>> is a <<url>>
+: the <<navigation-location>> is a <<url>>
 :: The provided [=/URL=] [=url/equals=] <var>input</var>.
 
 </dl>
 
 The <css>navigation-source-url</css> represents the [=current navigation URL=] given ''from''.
 The <css>navigation-destination-url</css> represents the [=current navigation URL=] given ''to''.
 The <css>navigation-current-url</css> represents the [=current navigation URL=] given ''at''.
-The <css>navigation-peer-url</css> represents the [=current navigation URL=] given ''with''.
 
 ISSUE: bikeshed on naming these keywords.
 
-<h3 id="at-route">Declaring named URL patterns: the ''@route'' rule</h3>
+<h3 id="at-location">Declaring named URL patterns: the ''@location'' rule</h3>
 
-The <dfn at-rule id="at-ruledef-route">@route</dfn> rule
+The <dfn at-rule id="at-ruledef-location">@location</dfn> rule
 is an at-rule that associates an author-defined name with a [=URL pattern=].
 This name can be referenced in ''@navigation'' rules
 and in '':link-to()'' pseudo-classes.
 
-The syntax of the ''@route'' rule is described by the <<route-rule>> production in:
+The syntax of the ''@location'' rule is described by the <<location-rule>> production in:
 
 <pre class="prod def" dfn-type="type" nohighlight>
-<dfn><<route-rule>></dfn> = @route <<dashed-ident>> { <<declaration-list>> }
+<dfn><<location-rule>></dfn> = @location <<dashed-ident>> { <<declaration-list>> }
 </pre>
 
 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 <<route-descriptor>> production below.
+the <<location-descriptor>> production below.
 Any other descriptors are ignored.
 
 <pre class="prod def" dfn-type="type" nohighlight>
-<dfn><<route-descriptor>></dfn> = <<pattern-descriptor>> |
+<dfn><<location-descriptor>></dfn> = <<pattern-descriptor>> |
                      <<init-descriptor>> |
                      <<base-descriptor>>
 <dfn><<pattern-descriptor>></dfn> = pattern : <<url-pattern()>>
@@ -110,7 +109,7 @@ If a rule has both a valid <<pattern-descriptor>>
 and a valid <<init-descriptor>>
 then it is ignored.
 
-The ''@route'' rule can be defined in one of two ways:
+The ''@location'' rule can be defined in one of two ways:
 
 : with the <code>pattern</code> descriptor
 :: in this case the URL pattern represented is
@@ -135,20 +134,20 @@ ISSUE: ''document'' should probably only apply in origin-clean stylesheets.
 Is this more confusing? Should we have that rather than the ordinary stylesheet-based URLs?
 
 ISSUE: Should this use <<dashed-ident>>, <<custom-ident>>, or <<ident>>
-for the route names?
+for the location names?
 
 ISSUE: Should we use <code>base-url</code> or just <code>base</code> as the descriptor name?
 
 NOTE: The list of allowed init descriptors does not include <code>username</code>
 or <code>password</code> since they seem unlikely to be useful.
 
 <div class="issue">
-It's possible that this syntax with init descriptors in the ''@route'' rule
+It's possible that this syntax with init descriptors in the ''@location'' rule
 would make more sense as part of the ''url-pattern()'' function
 (that is, as an alternate syntax for what goes inside the function).
 
 This would also give us the option to remove the braces from
-the syntax of the ''@route'' rule
+the syntax of the ''@location'' rule
 and make it more like ''@import'' or ''@namespace''.
 This does remove a potential future extensibility point,
 but it could also be added back later if we need it.
@@ -157,17 +156,17 @@ but it could also be added back later if we need it.
 <div class="example">
 Either this rule:
 <pre highlight=css>
-@route --movie-list {
+@location --movie-list {
   pattern: url-pattern("/movies");
 }
 </pre>
 or this rule:
 <pre highlight=css>
-@route --movie-list {
+@location --movie-list {
   pathname: "/movies";
 }
 </pre>
-define an ''@route'' rule that associates
+define an ''@location'' rule that associates
 the name <code>--movie-list</code>
 with the URL <code>"/movies"</code> resolved relative to the style sheet.
 </div>
@@ -263,11 +262,11 @@ which can be ''document'', ''stylesheet'', or a URL, is:
 <div class="example">
 This rule:
 <pre highlight=css>
-@route --movie-detail {
+@location --movie-detail {
   pattern: url-pattern("/movies/:id");
 }
 </pre>
-defines an ''@route'' rule that associates
+defines an ''@location'' rule that associates
 the name <code>--movie-detail</code>
 with any URL that matches the [=URL pattern=] <code>/movies/:id</code>.
 
@@ -288,25 +287,25 @@ These URLs will not match:
 </div>
 
 <div class="example">
-To have the <code>--movie-details</code> route
+To have the <code>--movie-details</code> location
 match only numeric <code>:id</code> values,
-define the route eiter as:
+define the location either as:
 
 <pre highlight=css>
-@route --movie-detail {
+@location --movie-detail {
   pattern: url-pattern("/movies/:id(\\d+)");
 }
 </pre>
 
 or as:
 
 <pre highlight=css>
-@route --movie-detail {
+@location --movie-detail {
   pattern: url-pattern("/movies/(\\d+)");
 }
 </pre>
 
-This way, <code>/movies/something</code> won’t be matched by the route.
+This way, <code>/movies/something</code> won’t be matched by the location.
 
 NOTE: Even though the capture groups are not currently exposed,
 it is recommended to give the capture groups a name for future use.
@@ -352,10 +351,10 @@ which matches any links that link to the site's homepage:
 }
 </pre>
 
-Passing in a named route is also possible:
+Passing in a named location is also possible:
 
 <pre highlight=css>
-@route --homepage {
+@location --homepage {
   pattern: url-pattern("/");
 }
 
@@ -376,10 +375,10 @@ you might be tempted to pass in a <<url>> directly:
 However, <code>url("/")</code> won't match URLs such as
 <code>/#scroll-to-here</code> or <code>/?utm_id=something</code>
 so it is recommended to use the <<url-pattern()>>
-or <<route-location>> variants, or use the following alternative:
+or <<navigation-location>> variants, or use the following alternative:
 
 <pre highlight=css>
-@route --homepage {
+@location --homepage {
   pathname: "/";
   base-url: document;
 }
@@ -409,7 +408,7 @@ by matching the relevant parts of the navigation URL to the link URL.
   navigation: auto;
 }
 
-@route --movie-detail {
+@location --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
@@ -506,25 +505,25 @@ This is particularly useful for defining
 styles that cause [=view transitions=].
 
 <pre highlight="css">
-@route --search-results-page {
+@location --search-results-page {
   pattern: url-pattern("/search-results");
 }
-@route --product-page {
+@location --product-page {
   pattern: url-pattern("/product/:id");
 }
 
 @navigation (from: --search-results-page) and
             (to: --product-page) {
   /* These styles apply when a navigation is in progress
      from a search results page to a product page (as
-     defined by the @route rules above), but not in the
+     defined by the @location rules above), but not in the
      reverse direction. */
 }
 
 @navigation (between: --search-results-page and --product-page) {
   /* These styles apply when a navigation is in progress
      between a search results page and a product page (as
-     defined by the @route rules above), in either
+     defined by the @location rules above), in either
      direction. */
 }
 </pre>
@@ -551,11 +550,11 @@ with <<navigation-condition>> defined as:
                     <<navigation-type-test>> |
                     <<navigation-phase-test>>
 
-<dfn><<navigation-location-test>></dfn> = <<navigation-relation>> : <<route-location>>
-<dfn><<navigation-relation>></dfn> = at | with | from | to
+<dfn><<navigation-location-test>></dfn> = <<navigation-relation>> : <<navigation-location>>
+<dfn><<navigation-relation>></dfn> = at | from | to
 
 <dfn><<navigation-location-between-test>></dfn> =
-    between : <<route-location>> and <<route-location>>
+    between : <<navigation-location>> and <<navigation-location>>
 
 <dfn><<navigation-type-test>></dfn> = history : <<navigation-type-keyword>>
 <dfn><<navigation-type-keyword>></dfn> = traverse | back | forward | reload
@@ -564,7 +563,7 @@ with <<navigation-condition>> defined as:
 <dfn><<navigation-phase-keyword>></dfn> = loading | ready | committed
 </pre>
 
-ISSUE: Should we use ''at''/''with''/''from''/''to'' or ''current''/''other''/''from''/''to''?
+ISSUE: Should we use ''at''/''from''/''to'' or ''current''/''other''/''from''/''to''?
 
 The above grammar is purposely very loose for forwards-compatibility reasons,
 since the <<general-enclosed>> production
@@ -598,17 +597,17 @@ as follows:
 
 : <<navigation-location-test>>
 ::  The result is true if
-        the <<route-location>> [=route-location/matches=] [=current navigation URL=] of the document given the <<navigation-relation>>.
+        the <<navigation-location>> [=navigation-location/matches=] [=current navigation URL=] of the document given the <<navigation-relation>>.
 
 : <<navigation-location-between-test>>
-::    : between: <<route-location>> and <<route-location>>
+::    : between: <<navigation-location>> and <<navigation-location>>
     :: The result is true if
         the [=current navigation URL=] <var>from</var> of the document given ''from'' is non-null,
         the [=current navigation URL=] <var>to</var> of the document ''to'' is non-null,
-        one of the two <<route-location>>s
-        [=route-location/matches=] <var>from</var>,
-        and the other of the two <<route-location>>s
-        [=route-location/matches=] <var>to</var>.
+        one of the two <<navigation-location>>s
+        [=navigation-location/matches=] <var>from</var>,
+        and the other of the two <<navigation-location>>s
+        [=navigation-location/matches=] <var>to</var>.
 
 : <<navigation-type-test>>
 ::    : history: traverse
@@ -751,10 +750,6 @@ To get the <dfn>current navigation URL</dfn> given a {{Document}} |document| and
 
 : ''at''
 :: |state|'s [=navigation state/new URL=] if |state|'s [=navigation state/phase=] is `committed`; Otherwise |state|'s [=navigation state/old URL=].
-
-: ''with''
-:: |state|'s [=navigation state/old URL=] if |state|'s [=navigation state/phase=] is `committed`; Otherwise |state|'s [=navigation state/new URL=].
-
 </dl>
 
 To get the <dfn>current navigation type</dfn> of a [=/document=] |document|: