[giow] (2) Add support for automatic sizing of headings in <hgroup> i…

…f they follow <h1>.

Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=17894
Affected topics: Rendering

git-svn-id: http://svn.whatwg.org/webapps@7616 340c8d12-0b0e-0410-8428-c7bf67bfef74

complete.html

@@ -96697,21 +96697,34 @@ <h4 id=sections-and-headings><span class=secno>14.3.7 </span>Sections and headin
 h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
 h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }</pre>
 
-  <p>The <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>,
-  and <code><a href=#the-section-element>section</a></code> elements are expected to affect the margins
-  and font size of <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements, based on the nesting
-  depth. If <var title="">x</var> is a selector that matches elements
-  that are either <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>,
-  <code><a href=#the-nav-element>nav</a></code>, or <code><a href=#the-section-element>section</a></code> elements, then the
-  following rules capture what is expected:</p>
+  <p>The <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>, and <code><a href=#the-section-element>section</a></code>
+  elements are expected to affect the margins and font size of <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements, as well as
+  <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code> elements that follow <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements in
+  <code><a href=#the-hgroup-element>hgroup</a></code> elements, based on the nesting depth. If <var title="">x</var> is a selector
+  that matches elements that are either <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>,
+  or <code><a href=#the-section-element>section</a></code> elements, then the following rules capture what is expected:</p>
 
   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
 
 <var title="">x</var> h1 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; }
 <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
 <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
 <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
-<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }</pre>
+<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup &gt; h1 ~ h2 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
+<var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h2 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
+<var title="">x</var> <var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h2 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
+<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h2 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup &gt; h1 ~ h3 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
+<var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h3 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
+<var title="">x</var> <var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h3 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup &gt; h1 ~ h4 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
+<var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h4 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup &gt; h1 ~ h5 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }</pre>
 
 
 

index

@@ -96697,21 +96697,34 @@ h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight:
 h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
 h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }</pre>
 
-  <p>The <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>,
-  and <code><a href=#the-section-element>section</a></code> elements are expected to affect the margins
-  and font size of <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements, based on the nesting
-  depth. If <var title="">x</var> is a selector that matches elements
-  that are either <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>,
-  <code><a href=#the-nav-element>nav</a></code>, or <code><a href=#the-section-element>section</a></code> elements, then the
-  following rules capture what is expected:</p>
+  <p>The <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>, and <code><a href=#the-section-element>section</a></code>
+  elements are expected to affect the margins and font size of <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements, as well as
+  <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code> elements that follow <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements in
+  <code><a href=#the-hgroup-element>hgroup</a></code> elements, based on the nesting depth. If <var title="">x</var> is a selector
+  that matches elements that are either <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>,
+  or <code><a href=#the-section-element>section</a></code> elements, then the following rules capture what is expected:</p>
 
   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
 
 <var title="">x</var> h1 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; }
 <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
 <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
 <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
-<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }</pre>
+<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup &gt; h1 ~ h2 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
+<var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h2 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
+<var title="">x</var> <var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h2 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
+<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h2 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup &gt; h1 ~ h3 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
+<var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h3 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
+<var title="">x</var> <var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h3 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup &gt; h1 ~ h4 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
+<var title="">x</var> <var title="">x</var> hgroup &gt; h1 ~ h4 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup &gt; h1 ~ h5 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }</pre>
 
 
 

source

@@ -111845,21 +111845,34 @@ h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight:
 h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
 h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }</pre>
 
-  <p>The <code>article</code>, <code>aside</code>, <code>nav</code>,
-  and <code>section</code> elements are expected to affect the margins
-  and font size of <code>h1</code> elements, based on the nesting
-  depth. If <var title="">x</var> is a selector that matches elements
-  that are either <code>article</code>, <code>aside</code>,
-  <code>nav</code>, or <code>section</code> elements, then the
-  following rules capture what is expected:</p>
+  <p>The <code>article</code>, <code>aside</code>, <code>nav</code>, and <code>section</code>
+  elements are expected to affect the margins and font size of <code>h1</code> elements, as well as
+  <code>h2</code>&ndash;<code>h5</code> elements that follow <code>h1</code> elements in
+  <code>hgroup</code> elements, based on the nesting depth. If <var title="">x</var> is a selector
+  that matches elements that are either <code>article</code>, <code>aside</code>, <code>nav</code>,
+  or <code>section</code> elements, then the following rules capture what is expected:</p>
 
   <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
 
 <var title="">x</var> h1 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; }
 <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
 <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
 <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
-<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }</pre>
+<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup > h1 ~ h2 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
+<var title="">x</var> <var title="">x</var> hgroup > h1 ~ h2 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
+<var title="">x</var> <var title="">x</var> <var title="">x</var> hgroup > h1 ~ h2 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
+<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> hgroup > h1 ~ h2 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup > h1 ~ h3 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
+<var title="">x</var> <var title="">x</var> hgroup > h1 ~ h3 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
+<var title="">x</var> <var title="">x</var> <var title="">x</var> hgroup > h1 ~ h3 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup > h1 ~ h4 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
+<var title="">x</var> <var title="">x</var> hgroup > h1 ~ h4 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
+
+<var title="">x</var> hgroup > h1 ~ h5 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }</pre>