[css-page] Rebase @page and margin at-rule grammars over the Syntax spec. Also fix linking errors.

Author: tabatkins

css-page/Overview.bs

@@ -356,7 +356,7 @@ box:
 	<li>Authors <em class="RFC2119">SHOULD NOT</em> position elements in
 	inconvenient locations just to avoid rendering them. Instead:
 	<ul>
-		<li>To suppress box generation entirely, set the 'display' property to ''none''.
+		<li>To suppress box generation entirely, set the 'display' property to ''display/none''.
 		<li>To make a box invisible, set the <span class="property">'visibility'</span>
 		property.
 		</ul>
@@ -435,14 +435,14 @@ The @page Rule</h3>
 	''@page'' rules are allowed
 	wherever <a href="https://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule-sets</a> are allowed.
 	An ''@page'' rule consists of the keyword ''@page'',
-	an <em class="RFC2119">OPTIONAL</em> comma-separated list of
-	<a href="#page-selectors">page selectors</a>
+	an optional comma-separated list of
+	<a>page selectors</a>
 	and a block of declarations
 	(said to be in the <dfn export id="page-context">page context</dfn>).
 	An ''@page'' rule can also contain other at-rules,
 	interleaved between declarations.
 	The current level of this specification
-	only allows <a href="#margin-at-rules">margin at-rules</a> inside ''@page''.
+	only allows <a>margin at-rules</a> inside ''@page''.
 
 	''@page'' rules without a selector list apply to every page.
 	Other ''@page'' rules apply to pages that <a>match</a>
@@ -460,7 +460,7 @@ apply; that is, valid declarations within the block are applied.
 	or a <a>page pseudo-class</a>,
 	followed by zero or more additional <a>page pseudo-classes</a>.
 	No whitespace is allowed between components of a selector.
-	The <a lt="page_selector">page selector grammar</a>
+	The <<page-selector>> grammar
 	and examples can be found below.
 
 	A <a>page selector</a> is said to <dfn>match</dfn> a given page if and only if
@@ -543,7 +543,7 @@ margin-top: 10cm /* Top margin on first page 10cm */
 </div>
 
 <h4 id="blank-pseudo">
-Blank-page pseudo-class: '':blank''</h4>
+Blank-page pseudo-class: ''@page/:blank''</h4>
 
 	The <dfn dfn-type="value" dfn-for="@page">:blank</dfn> pseudo-class <a lt="match">matches</a>
 	<a lt="content-empty page">content-empty pages</a>
@@ -553,7 +553,7 @@ Blank-page pseudo-class: '':blank''</h4>
 	<div class="note">
 		Only the ''break-before/left'', ''break-before/right'', ''break-before/recto'' and ''break-before/verso'' values
 		of the 'break-before' and 'break-after' properties
-		can generate pages that match '':blank''.
+		can generate pages that match ''@page/:blank''.
 	</div>
 
 <div class="example">
@@ -567,7 +567,7 @@ h1 { break-before: left }
 </pre>
 </div>
 
-	A page matched by '':blank'' can also be matched
+	A page matched by ''@page/:blank'' can also be matched
 	by other page pseudo-classes.
 
 <div class="example">
@@ -606,83 +606,43 @@ pseudo-classes.</em>
 
 <h3 id="syntax-page-selector">@page rule grammar</h3>
 
-The syntax for the @page rule is a specialization of the generic at-rule
-defined by CSS 2.1. This grammar extends the at-rule syntax to allow @page rules
-nested inside @media rules. User agents must adhere
-to the following grammar:
-
-See [[!CSS21]], Section 4.1.1 and Appendix G for the expansion of missing
-productions:
-<p id="specializatons-of-ATKEYWORD">
-All new lexical tokens are specializations of the ATKEYWORD lexical token:
-<pre class="lexical">
-PAGE_SYM              ::= "@page"
-TOPLEFTCORNER_SYM     ::= "@top-left-corner"
-TOPLEFT_SYM           ::= "@top-left"
-TOPCENTER_SYM         ::= "@top-center"
-TOPRIGHT_SYM          ::= "@top-right"
-TOPRIGHTCORNER_SYM    ::= "@top-right-corner"
-BOTTOMLEFTCORNER_SYM  ::= "@bottom-left-corner"
-BOTTOMLEFT_SYM        ::= "@bottom-left"
-BOTTOMCENTER_SYM      ::= "@bottom-center"
-BOTTOMRIGHT_SYM       ::= "@bottom-right"
-BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
-LEFTTOP_SYM           ::= "@left-top"
-LEFTMIDDLE_SYM        ::= "@left-middle"
-LEFTBOTTOM_SYM        ::= "@left-bottom"
-RIGHTTOP_SYM          ::= "@right-top"
-RIGHTMIDDLE_SYM       ::= "@right-middle"
-RIGHTBOTTOM_SYM       ::= "@right-bottom"
-
-<dfn>media</dfn> :
-		 MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ <a>page_rule</a> | ruleset ]* '}' S*
-		 ;
-
-<dfn id="syntax-prod-page">page_rule</dfn> :
-		 PAGE_SYM S* <a>page_selector_list</a> '{' S* <a>page_body</a> '}' S*
-		 ;
-
-<dfn>page_selector_list</dfn> :
-		 [ <a>page_selector</a> S* [ ',' <a>page_selector</a> S* ]* ]?
-		 ;
-
-<dfn>page_selector</dfn> :
-		 <a>pseudo_page</a>+ | IDENT <a>pseudo_page</a>*
-		 ;
-
-<dfn id="syntax-prod-pseudo-page">pseudo_page</dfn> :
-		 ':' [ "left" | "right" | "first" | "blank" ]
-		 ;
-
-<dfn>page_body</dfn> :  /* Can be empty */
-		 declaration? [ ';' S* <a>page_body</a> ]? |
-		 <a>page_margin_box</a> <a>page_body</a>
-		 ;
-
-<dfn id="syntax-prod-margin">page_margin_box</dfn> :
-		 <a>margin_sym</a> S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
-		 ;
-
-<dfn id="syntax-prod-margin-sym">margin_sym</dfn> :
-		 TOPLEFTCORNER_SYM |
-		 TOPLEFT_SYM |
-		 TOPCENTER_SYM |
-		 TOPRIGHT_SYM |
-		 TOPRIGHTCORNER_SYM |
-		 BOTTOMLEFTCORNER_SYM |
-		 BOTTOMLEFT_SYM |
-		 BOTTOMCENTER_SYM |
-		 BOTTOMRIGHT_SYM |
-		 BOTTOMRIGHTCORNER_SYM |
-		 LEFTTOP_SYM |
-		 LEFTMIDDLE_SYM |
-		 LEFTBOTTOM_SYM |
-		 RIGHTTOP_SYM |
-		 RIGHTMIDDLE_SYM |
-		 RIGHTBOTTOM_SYM
-		 ;
+''@page'' rules are [=CSS/parsed=] according to the following grammar,
+plus the additional rules noted below:
+
+<pre class=prod>
+	@page = @page <<page-selector-list>>? { <<declaration-list>> }
+	<dfn><<page-selector-list>></dfn> = <<page-selector>>#
+	<dfn><<page-selector>></dfn> = [ <<ident-token>>? <<pseudo-page>>* ]!
+	<dfn><<pseudo-page>></dfn> = ':' [ left | right | first | blank ]
+
+	/* Margin rules */
+	<dfn>@top-left-corner</dfn> = @top-left-corner { <<declaration-list>> };
+	<dfn>@top-left</dfn> = @top-left { <<declaration-list>> };
+	<dfn>@top-center</dfn> = @top-center { <<declaration-list>> };
+	<dfn>@top-right</dfn> = @top-right { <<declaration-list>> };
+	<dfn>@top-right-corner</dfn> = @top-right-corner { <<declaration-list>> };
+	<dfn>@bottom-left-corner</dfn> = @bottom-left-corner { <<declaration-list>> };
+	<dfn>@bottom-left</dfn> = @bottom-left { <<declaration-list>> };
+	<dfn>@bottom-center</dfn> = @bottom-center { <<declaration-list>> };
+	<dfn>@bottom-right</dfn> = @bottom-right { <<declaration-list>> };
+	<dfn>@bottom-right-corner</dfn> = @bottom-right-corner { <<declaration-list>> };
+	<dfn>@left-top</dfn> = @left-top { <<declaration-list>> };
+	<dfn>@left-middle</dfn> = @left-middle { <<declaration-list>> };
+	<dfn>@left-bottom</dfn> = @left-bottom { <<declaration-list>> };
+	<dfn>@right-top</dfn> = @right-top { <<declaration-list>> };
+	<dfn>@right-middle</dfn> = @right-middle { <<declaration-list>> };
+	<dfn>@right-bottom</dfn> = @right-bottom { <<declaration-list>> };
 </pre>
 
+In addition, the following rules apply:
+
+* No whitespace is allowed between the productions in <<page-selector>> or <<pseudo-page>>
+	(similar to the rule for <<compound-selector>>).
+* The ''@page'' rule can only contain <a>page properties</a> and <a>margin at-rules</a>.
+* The <a>margin at-rules</a> can only contain <a>page-margin properties</a>.
+
+
+
 <div class="example">
 The following are examples of page selectors (declaration block intentionally
 left blank)
@@ -978,17 +938,16 @@ millimeter margins and 14 point type in the page-margin boxes:
 <h3 id="margin-at-rules">At-rules for page-margin boxes</h3>
 
 Page-margin boxes are created by
-<a href="#margin-at-rules">margin at-rules</a>
+<a>margin at-rules</a>
 inside the <a href="#page-context">page context</a>.
 Authors should put these rules after any declarations in the page context
 as legacy clients may not handle declarations
 after margin at-rules correctly.
 
-A <dfn id="margin-at-rule" lt="@margin" at-rule>margin at-rule</dfn> consists of an
-<a href="#specializatons-of-ATKEYWORD">ATKEYWORD</a>
+A <dfn id="margin-at-rule">margin at-rule</dfn> is an <a>at-rule</a>
 that identifies the page-margin box
-(e.g. ''@top-left'') and a block of declarations (said
-to be in the <dfn export id="margin-context">margin context</dfn>).
+(e.g. ''@top-left'') and a block of descriptors
+(said to be in the <dfn export id="margin-context">margin context</dfn>).
 
 <div class="example">
 
@@ -1013,9 +972,9 @@ right side:
 <h3 id="populating-margin-boxes">Populating page-margin boxes</h3>
 
 As with the '':before'' and '':after'' pseudo-elements,
-a specified 'content: normal' on a page-margin box computes to ''none''.
+a specified ''content: normal'' on a page-margin box computes to ''content/none''.
 A page-margin box is <dfn>generated</dfn>
-if and only if the computed value of its 'content' property is not ''none''.
+if and only if the computed value of its 'content' property is not ''content/none''.
 Otherwise, no box is generated, as for elements with ''display: none''.
 
 <p class=note>
@@ -1048,7 +1007,8 @@ violate their constraints.
 If the UA does not support the 'min-height' or 'min-width' properties
 then it must behave as if 'min-height' and 'min-width' were always zero.
 
-<h4 id="margin-box-terms"><span id="max-margin-dimension"></span>Page-Margin Box Layout Terminology</h4>
+<h4 id="margin-box-terms" oldids="max-margin-dimension">
+Page-Margin Box Layout Terminology</h4>
 
 	In addition to the box model definitions in CSS2.1 [[!CSS21]],
 	and the sizing terms in CSS Intrinsic Sizing [[!CSS3-SIZING]],
@@ -1472,7 +1432,7 @@ Page Properties</h2>
 
 		<li>
 			As on the '::before' and '::after' pseudo-elements,
-			the ''content/normal'' value of the 'content' property computes to ''none''
+			the ''content/normal'' value of the 'content' property computes to ''content/none''
 			on page-margin boxes.
 
 		<li>
@@ -2170,7 +2130,8 @@ Appendix A: Applicable CSS2.1 Properties</h2>
 <h3 class="no-num" id="page-property-list">
 	CSS 2.1 Properties that apply within the page context</h3>
 
-	This list is described in [[#page-properties]].
+	This list defines the <dfn export lt="page property">page properties</dfn>.
+	They are further described in [[#page-properties]].
 
 	<table class="data">
 		<tbody>
@@ -2285,7 +2246,8 @@ Appendix A: Applicable CSS2.1 Properties</h2>
 <h3 class="no-num" id="margin-property-list">
 CSS 2.1 properties that apply within the margin contexts</h3>
 
-	This list is described in the [[#page-properties]].
+	This list defines the <dfn export lt="page-margin property">page-margin properties</dfn>.
+	They are further described in [[#page-properties]].
 
 	<table class="data">
 		<tbody>
@@ -2420,7 +2382,7 @@ Changes</h2>
 
 	<ul>
 		<li>Imported the 'marks' and 'bleed' properties from [[CSS3GCPM]].
-		<li>Added ''bleed/auto'' as the initial value of 'bleed' and allowed it to apply even when 'marks' is ''none''.
+		<li>Added ''bleed/auto'' as the initial value of 'bleed' and allowed it to apply even when 'marks' is ''marks/none''.
 		<li>Added JIS-B4 and JIS-B5
 	</ul>