[html5] r8784 - [e] (0) Add in some clearer indentiation in the table sorting algorithm to make [...]

whatwg at whatwg.org whatwg at whatwg.org
Wed Sep 17 15:58:31 PDT 2014


Author: ianh
Date: 2014-09-17 15:58:28 -0700 (Wed, 17 Sep 2014)
New Revision: 8784

Modified:
   complete.html
   index
   source
Log:
[e] (0) Add in some clearer indentiation in the table sorting algorithm to make it easier to understand
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=26660
Affected topics: HTML

Modified: complete.html
===================================================================
--- complete.html	2014-09-17 22:43:04 UTC (rev 8783)
+++ complete.html	2014-09-17 22:58:28 UTC (rev 8784)
@@ -29719,365 +29719,407 @@
 
    <li><p>If <var>table</var> has no <a href=#concept-row-group id=table-sorting-model:concept-row-group-4>row group</a>
    corresponding to a <code id=table-sorting-model:the-thead-element-9><a href=#the-thead-element>thead</a></code> element, then set <var>ignore first group</var> to
-   true. Otherwise, set it to false.<li><p><i>Row loop</i>: Let <var>rows</var> be an empty list of <code id=table-sorting-model:the-tr-element-4><a href=#the-tr-element>tr</a></code>
-   elements.<li>
+   true. Otherwise, set it to false.<li>
 
-    <p>Run the appropriate steps from the following list:</p>
+    <p>Run these substeps:</p>
 
-    <dl class=switch><dt>If <var>row collection cursor</var> points to a <code id=table-sorting-model:the-tr-element-5><a href=#the-tr-element>tr</a></code> element
+    <ol><li><p><i>Row loop</i>: Let <var>rows</var> be an empty list of <code id=table-sorting-model:the-tr-element-4><a href=#the-tr-element>tr</a></code>
+     elements.<li>
 
-     <dd>
+      <p>Run these substeps:</p>
 
-      <ol><li><p><i>Collect</i>: Append the element pointed to by <var>row collection
-       cursor</var> to <var>rows</var>.<li><p>If there are no <code id=table-sorting-model:the-tr-element-6><a href=#the-tr-element>tr</a></code> or <code id=table-sorting-model:the-tbody-element-2><a href=#the-tbody-element>tbody</a></code> children of <var>table</var> that are later siblings of the element pointed to by <var>row
-       collection cursor</var>, or if the next such child is a <code id=table-sorting-model:the-tbody-element-3><a href=#the-tbody-element>tbody</a></code> element, then jump
-       to the step labeled <i>group</i> below.<li><p>Let <var>row collection cursor</var> point to the next <code id=table-sorting-model:the-tr-element-7><a href=#the-tr-element>tr</a></code> child
-       of <var>table</var> that is a later sibling of the element pointed to by <var>row collection cursor</var>.<li><p>Return to the step labeled <i>collect</i> above.</ol>
+      <ol><li>
 
-     <dt>If <var>row collection cursor</var> points to a <code id=table-sorting-model:the-tbody-element-4><a href=#the-tbody-element>tbody</a></code> element
+        <p>Run the appropriate steps from the following list:</p>
 
-     <dd>
+        <dl class=switch><dt>If <var>row collection cursor</var> points to a <code id=table-sorting-model:the-tr-element-5><a href=#the-tr-element>tr</a></code> element
 
-      <ol><li><p>Place all the <code id=table-sorting-model:the-tr-element-8><a href=#the-tr-element>tr</a></code> element children of the element pointed to by <var>row collection cursor</var> into <var>rows</var>, in <a href=#tree-order id=table-sorting-model:tree-order-2>tree
-       order</a>.<li><p>If <var>rows</var> is empty, jump to the step labeled <i>increment loop</i>
-       below.</ol>
+         <dd>
 
-     </dl>
+          <ol><li><p><i>Collect</i>: Append the element pointed to by <var>row collection
+           cursor</var> to <var>rows</var>.<li><p>If there are no <code id=table-sorting-model:the-tr-element-6><a href=#the-tr-element>tr</a></code> or <code id=table-sorting-model:the-tbody-element-2><a href=#the-tbody-element>tbody</a></code> children of <var>table</var> that are later siblings of the element pointed to by <var>row
+           collection cursor</var>, or if the next such child is a <code id=table-sorting-model:the-tbody-element-3><a href=#the-tbody-element>tbody</a></code> element, then jump
+           to the step labeled <i>group</i> below.<li><p>Let <var>row collection cursor</var> point to the next <code id=table-sorting-model:the-tr-element-7><a href=#the-tr-element>tr</a></code> child
+           of <var>table</var> that is a later sibling of the element pointed to by <var>row collection cursor</var>.<li><p>Jump back to the step labeled <i>collect</i> above.</ol>
 
-   <li><p><i>Group</i>: Let <var>groups</var> be an empty list of groups of <code id=table-sorting-model:the-tr-element-9><a href=#the-tr-element>tr</a></code>
-   elements.<li><p>Let <var>group</var> be an empty group of <code id=table-sorting-model:the-tr-element-10><a href=#the-tr-element>tr</a></code> elements.<li><p>Let <var>group cursor</var> be a pointer to an element, initially pointing at the
-   first <code id=table-sorting-model:the-tr-element-11><a href=#the-tr-element>tr</a></code> element in <var>rows</var>.<li><p><i>Start group</i>: Let <var>pending rows in group</var> be 1.<li><p><i>Group loop</i>: Append the <code id=table-sorting-model:the-tr-element-12><a href=#the-tr-element>tr</a></code> element pointed to by <var>group
-   cursor</var> to <var>group</var>.<li><p>If there are any <a href=#concept-cell id=table-sorting-model:concept-cell-11>cells</a> whose highest <a href=#concept-row id=table-sorting-model:concept-row-3>row</a>'s element is the one pointed to by <var>group
-   cursor</var>, then let <var>tallest height</var> be the number of rows covered by the
-   tallest such <a href=#concept-cell id=table-sorting-model:concept-cell-12>cell</a>.<li><p>If <var>tallest height</var> is greater than <var>pending rows in
-   group</var> then set <var>pending rows in group</var> to <var>tallest
-   height</var>.<li><p>Decrement <var>pending rows in group</var> by one.<li><p>Let <var>group cursor</var> point to the next <code id=table-sorting-model:the-tr-element-13><a href=#the-tr-element>tr</a></code> element in <var>rows</var>, if any; otherwise, let it be null.<li><p>If <var>group cursor</var> is not null and <var>pending rows in
-   group</var> is not zero, return to the step labeled <i>group loop</i>.<li><p>Append a new group to <var>groups</var> consisting of the <code id=table-sorting-model:the-tr-element-14><a href=#the-tr-element>tr</a></code>
-   elements in <var>group</var>.<li><p>Empty <var>group</var>.<li><p>If <var>group cursor</var> is not null, then return to the step labeled <i>start
-   group</i>.<li><p>If <var>ignore first group</var> is true, then drop the first group in <var>groups</var> and set <var>ignore first group</var> to false.<li><p><i>Drop leading header groups</i>: If <var>groups</var> is now empty, jump to the
-   step labeled <i>increment loop</i> below.<li><p>If the first group of <var>groups</var> consists of <code id=table-sorting-model:the-tr-element-15><a href=#the-tr-element>tr</a></code> elements
-   whose element children are all <code id=table-sorting-model:the-th-element-13><a href=#the-th-element>th</a></code> elements, then drop the first group in <var>groups</var> and return to the previous step (labeled <i>drop leading header
-   groups</i>).<li><p>Let <var>insertion point</var> be a placeholder in a DOM tree, which can be used
-   to reinsert nodes at a specific point in the DOM. Insert <var>insertion point</var> into
-   the parent of the first <code id=table-sorting-model:the-tr-element-16><a href=#the-tr-element>tr</a></code> element of the first group in <var>groups</var>,
-   immediately before that <code id=table-sorting-model:the-tr-element-17><a href=#the-tr-element>tr</a></code> element.<li>
+         <dt>If <var>row collection cursor</var> points to a <code id=table-sorting-model:the-tbody-element-4><a href=#the-tbody-element>tbody</a></code> element
 
-    <p>Sort the groups in <var>groups</var>, using the following algorithm to decide the
-    relative order of any two groups <var>a</var> and <var>b</var> (the algorithm
-    either returns that <var>a</var> comes before <var>b</var>, or that <var>b</var> comes before <var>a</var>):</p>
+         <dd>
 
-    <ol><li><p>Let <var>key index</var> be an index into <var>key heading
-     cells</var>, initially denoting the first element in the list.<li><p>Let <var>direction</var> be a sort direction, initially <i>ascending</i>. Its
-     other possible value is <i>descending</i>. When <var>direction</var> is
-     <i>toggled</i>, that means that if its value is <i>ascending</i>, it must be changed to
-     <i>descending</i>, and when its value is <i>descending</i>, it must be changed to
-     <i>ascending</i>.<li><p><i>Column loop</i>: Let <var>th</var> be the <var>key index</var>th
-     <code id=table-sorting-model:the-th-element-14><a href=#the-th-element>th</a></code> in <var>key heading cells</var>.<li><p>If <var>th</var>'s <code id=table-sorting-model:attr-th-sorted-10><a href=#attr-th-sorted>sorted</a></code> attribute's
-     <a href=#column-sort-direction id=table-sorting-model:column-sort-direction-3>column sort direction</a> is <i>reversed</i>, then toggle <var>direction</var>.<li><p>Let <var>tentative order</var> be the result of <a href=#comparing-two-row-groups-using-the-th-element id=table-sorting-model:comparing-two-row-groups-using-the-th-element>comparing two row groups
-     using the <code>th</code> element</a> <var>th</var>, with <var>a</var> and
-     <var>b</var> as the rows.<li><p>If <var>tentative order</var> is not "equal", then jump to the step labeled
-     <i>return</i> below.<li><p>Increment <var>key index</var>.<li><p>If <var>key index</var> still denotes a <code id=table-sorting-model:the-th-element-15><a href=#the-th-element>th</a></code> element in <var>key heading cells</var>, then jump back to the step above labeled <i>column
-     loop</i>.<li><p>If <var>a</var>'s <code id=table-sorting-model:the-tr-element-18><a href=#the-tr-element>tr</a></code> elements precede <var>b</var>'s in
-     <a href=#tree-order id=table-sorting-model:tree-order-3>tree order</a>, then let <var>tentative order</var> be "a before b".
-     Otherwise, let <var>tentative order</var> be "b before a".<li><p><i>Return</i>: Return the relative order given by the matching option from the following
-     list:</p>
+          <ol><li><p>Place all the <code id=table-sorting-model:the-tr-element-8><a href=#the-tr-element>tr</a></code> element children of the element pointed to by <var>row collection cursor</var> into <var>rows</var>, in <a href=#tree-order id=table-sorting-model:tree-order-2>tree
+           order</a>.<li><p>If <var>rows</var> is empty, jump to the step labeled <i>increment loop</i>
+           below.</ol>
 
-      <dl class=switch><dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
-       order</var> is "a before b"<dd>Return that <var>a</var> comes before <var>b</var>.<dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
-       order</var> is "b before a"<dd>Return that <var>b</var> comes before <var>a</var>.<dt>If <var>direction</var> is <i>descending</i> and <var>tentative
-       order</var> is "a before b"<dd>Return that <var>b</var> comes before <var>a</var>.<dt>If <var>direction</var> is <i>descending</i> and <var>tentative
-       order</var> is "b before a"<dd>Return that <var>a</var> comes before <var>b</var>.</dl>
+         </dl>
 
-     </ol>
+       <li><p><i>Group</i>: Let <var>groups</var> be an empty list of groups of <code id=table-sorting-model:the-tr-element-9><a href=#the-tr-element>tr</a></code>
+       elements.<li><p>Let <var>group</var> be an empty group of <code id=table-sorting-model:the-tr-element-10><a href=#the-tr-element>tr</a></code> elements.<li><p>Let <var>group cursor</var> be a pointer to an element, initially pointing at the
+       first <code id=table-sorting-model:the-tr-element-11><a href=#the-tr-element>tr</a></code> element in <var>rows</var>.<li>
 
-    <p>When the user agent is required to <dfn id=comparing-two-row-groups-using-the-th-element>compare two row groups using the <code>th</code> element</dfn> <var>th</var>,
-    with <var>a</var> and <var>b</var> being the two row groups respectively, the
-    user agent must run the following steps:</p>
+        <p>Run these substeps:</p>
 
-    <ol><li><p>Let <var>x</var> be the <var>x</var>-coordinate of the slots that
-     <code id=table-sorting-model:the-th-element-16><a href=#the-th-element>th</a></code> covers in its <a href=#concept-table id=table-sorting-model:concept-table-7>table</a>.<li>
+        <ol><li><p><i>Start group</i>: Let <var>pending rows in group</var> be 1.<li>
 
-      <p>Let <var>cell<sub>a</sub></var> be the element corresponding to the <a href=#concept-cell id=table-sorting-model:concept-cell-13>cell</a> in the first <a href=#concept-row id=table-sorting-model:concept-row-4>row</a> of group
-      <var>a</var> that covers the slot in that <a href=#concept-row id=table-sorting-model:concept-row-5>row</a> whose
-      <var>x</var>-coordinate is <var>x</var>.</p>
+          <p>Run these substeps:</p>
 
-      <p>Let <var>cell<sub>b</sub></var> be the element corresponding to the <a href=#concept-cell id=table-sorting-model:concept-cell-14>cell</a> in the first <a href=#concept-row id=table-sorting-model:concept-row-6>row</a> of group
-      <var>b</var> that covers the slot in that <a href=#concept-row id=table-sorting-model:concept-row-7>row</a> whose
-      <var>x</var>-coordinate is <var>x</var>.</p>
+          <ol><li><p><i>Group loop</i>: Append the <code id=table-sorting-model:the-tr-element-12><a href=#the-tr-element>tr</a></code> element pointed to by <var>group
+           cursor</var> to <var>group</var>.<li><p>If there are any <a href=#concept-cell id=table-sorting-model:concept-cell-11>cells</a> whose highest <a href=#concept-row id=table-sorting-model:concept-row-3>row</a>'s element is the one pointed to by <var>group
+           cursor</var>, then let <var>tallest height</var> be the number of rows covered by the
+           tallest such <a href=#concept-cell id=table-sorting-model:concept-cell-12>cell</a>.<li><p>If <var>tallest height</var> is greater than <var>pending rows in
+           group</var> then set <var>pending rows in group</var> to <var>tallest
+           height</var>.<li><p>Decrement <var>pending rows in group</var> by one.<li><p>Let <var>group cursor</var> point to the next <code id=table-sorting-model:the-tr-element-13><a href=#the-tr-element>tr</a></code> element in <var>rows</var>, if any; otherwise, let it be null.<li><p>If <var>group cursor</var> is not null and <var>pending rows in
+           group</var> is not zero, jump back to the step labeled <i>group loop</i>.</ol>
 
-      
+         <li><p>Append a new group to <var>groups</var> consisting of the <code id=table-sorting-model:the-tr-element-14><a href=#the-tr-element>tr</a></code>
+         elements in <var>group</var>.<li><p>Empty <var>group</var>.<li><p>If <var>group cursor</var> is not null, then jump back to the step labeled <i>start
+         group</i>.</ol>
 
-      <p>In either case, if there's no <a href=#concept-cell id=table-sorting-model:concept-cell-15>cell</a> that actually covers
-      the slot, then use the value <i>null</i> instead.</p>
+       <li><p>If <var>ignore first group</var> is true, then drop the first group in <var>groups</var> and set <var>ignore first group</var> to false.<li>
 
-     <li>
+        <p>Run these steps:</p>
 
-      <p>Let <var>type<sub>a</sub></var> and <var>value<sub>a</sub></var> be
-      the <a href=#type-and-value-of-the-cell id=table-sorting-model:type-and-value-of-the-cell>type and value of the cell</a> <var>cell<sub>a</sub></var>, as defined
-      below.</p>
+        <ol><li><p><i>Drop leading header groups</i>: If <var>groups</var> is now empty, jump to the
+         step labeled <i>increment loop</i> below.<li><p>If the first group of <var>groups</var> consists of <code id=table-sorting-model:the-tr-element-15><a href=#the-tr-element>tr</a></code> elements
+         whose element children are all <code id=table-sorting-model:the-th-element-13><a href=#the-th-element>th</a></code> elements, then drop the first group in <var>groups</var> and jump back to the previous step (labeled <i>drop leading header
+         groups</i>).</ol>
 
-      <p>Let <var>type<sub>b</sub></var> and <var>value<sub>b</sub></var> be
-      the <a href=#type-and-value-of-the-cell id=table-sorting-model:type-and-value-of-the-cell-2>type and value of the cell</a> <var>cell<sub>b</sub></var>, as defined
-      below.</p>
+       <li><p>Let <var>insertion point</var> be a placeholder in a DOM tree, which can be used
+       to reinsert nodes at a specific point in the DOM. Insert <var>insertion point</var> into
+       the parent of the first <code id=table-sorting-model:the-tr-element-16><a href=#the-tr-element>tr</a></code> element of the first group in <var>groups</var>,
+       immediately before that <code id=table-sorting-model:the-tr-element-17><a href=#the-tr-element>tr</a></code> element.<li>
 
-      <p>The <dfn id=type-and-value-of-the-cell>type and value of the cell</dfn> <var>cell</var> are computed as follows.</p>
+        <p>Sort the groups in <var>groups</var>, using the following algorithm to decide the
+        relative order of any two groups <var>a</var> and <var>b</var> (the algorithm
+        either returns that <var>a</var> comes before <var>b</var>, or that <var>b</var> comes before <var>a</var>):</p>
 
-      <ol><li><p>If <var>cell</var> is <i>null</i>, then the type is "string" and the value is
-       the empty string; abort these steps.<li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace>inter-element whitespace</a> and nodes other than
-       <a href=#element id=table-sorting-model:element>Element</a> and <a href=#text id=table-sorting-model:text>Text</a> nodes, <var>cell</var> has only one child
-       and that child is a <code id=table-sorting-model:the-data-element><a href=#the-data-element>data</a></code> element, then the value is the value of that
-       <code id=table-sorting-model:the-data-element-2><a href=#the-data-element>data</a></code> element's <code id=table-sorting-model:attr-data-value><a href=#attr-data-value>value</a></code> attribute, if there is
-       one, or the empty string otherwise; the type is "string".</p>
+        <ol><li><p>Let <var>key index</var> be an index into <var>key heading
+         cells</var>, initially denoting the first element in the list.<li><p>Let <var>direction</var> be a sort direction, initially <i>ascending</i>. Its
+         other possible value is <i>descending</i>. When <var>direction</var> is
+         <i>toggled</i>, that means that if its value is <i>ascending</i>, it must be changed to
+         <i>descending</i>, and when its value is <i>descending</i>, it must be changed to
+         <i>ascending</i>.<li>
 
-       <li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-2>inter-element whitespace</a> and nodes other than
-       <a href=#element id=table-sorting-model:element-2>Element</a> and <a href=#text id=table-sorting-model:text-2>Text</a> nodes, <var>cell</var> has only one child
-       and that child is a <code id=table-sorting-model:the-progress-element><a href=#the-progress-element>progress</a></code> element, then the value is the value of that
-       <code id=table-sorting-model:the-progress-element-2><a href=#the-progress-element>progress</a></code> element's <code id=table-sorting-model:attr-progress-value><a href=#attr-progress-value>value</a></code> attribute, if
-       there is one, or the empty string otherwise; the type is "string".</p>
+          <p>Run these substeps:</p>
 
-       <li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-3>inter-element whitespace</a> and nodes other than
-       <a href=#element id=table-sorting-model:element-3>Element</a> and <a href=#text id=table-sorting-model:text-3>Text</a> nodes, <var>cell</var> has only one child
-       and that child is a <code id=table-sorting-model:the-meter-element><a href=#the-meter-element>meter</a></code> element, then the value is the value of that
-       <code id=table-sorting-model:the-meter-element-2><a href=#the-meter-element>meter</a></code> element's <code id=table-sorting-model:attr-meter-value><a href=#attr-meter-value>value</a></code> attribute, if there is
-       one, or the empty string otherwise; the type is "string".</p>
+          <ol><li><p><i>Column loop</i>: Let <var>th</var> be the <var>key index</var>th
+           <code id=table-sorting-model:the-th-element-14><a href=#the-th-element>th</a></code> in <var>key heading cells</var>.<li><p>If <var>th</var>'s <code id=table-sorting-model:attr-th-sorted-10><a href=#attr-th-sorted>sorted</a></code> attribute's
+           <a href=#column-sort-direction id=table-sorting-model:column-sort-direction-3>column sort direction</a> is <i>reversed</i>, then toggle <var>direction</var>.<li><p>Let <var>tentative order</var> be the result of <a href=#comparing-two-row-groups-using-the-th-element id=table-sorting-model:comparing-two-row-groups-using-the-th-element>comparing two row groups
+           using the <code>th</code> element</a> <var>th</var>, with <var>a</var> and
+           <var>b</var> as the rows.<li><p>If <var>tentative order</var> is not "equal", then jump to the step labeled
+           <i>return</i> below.<li><p>Increment <var>key index</var>.<li><p>If <var>key index</var> still denotes a <code id=table-sorting-model:the-th-element-15><a href=#the-th-element>th</a></code> element in <var>key heading cells</var>, then jump back to the step above labeled <i>column
+           loop</i>.</ol>
 
-       <li>
+         <li><p>If <var>a</var>'s <code id=table-sorting-model:the-tr-element-18><a href=#the-tr-element>tr</a></code> elements precede <var>b</var>'s in
+         <a href=#tree-order id=table-sorting-model:tree-order-3>tree order</a>, then let <var>tentative order</var> be "a before b".
+         Otherwise, let <var>tentative order</var> be "b before a".<li><p><i>Return</i>: Return the relative order given by the matching option from the following
+         list:</p>
 
-        <p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-4>inter-element whitespace</a> and nodes other than
-        <a href=#element id=table-sorting-model:element-4>Element</a> and <a href=#text id=table-sorting-model:text-4>Text</a> nodes, <var>cell</var> has only one
-        child and that child is a <code id=table-sorting-model:the-time-element><a href=#the-time-element>time</a></code> element, then the value is the
-        <a href="#machine-readable-equivalent-of-the-element's-contents" id="table-sorting-model:machine-readable-equivalent-of-the-element's-contents">machine-readable equivalent of the element's contents</a>, if any, and the type is
-        the kind of value that is thus obtained
-       (a <a href=#concept-month id=table-sorting-model:concept-month>month</a>,
-        a <a href=#concept-date id=table-sorting-model:concept-date>date</a>,
-        a <a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date>yearless date</a>,
-        a <a href=#concept-time id=table-sorting-model:concept-time>time</a>,
-        a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local>local date and time</a>,
-        a <a href=#concept-timezone id=table-sorting-model:concept-timezone>time-zone offset</a>,
-        a <a href=#concept-datetime id=table-sorting-model:concept-datetime>global date and time</a>,
-        a <a href=#concept-week id=table-sorting-model:concept-week>week</a>,
-        a year, or
-        a <a href=#concept-duration id=table-sorting-model:concept-duration>duration</a>);
-        abort these steps after completing this one.</p>
+          <dl class=switch><dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
+           order</var> is "a before b"<dd>Return that <var>a</var> comes before <var>b</var>.<dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
+           order</var> is "b before a"<dd>Return that <var>b</var> comes before <var>a</var>.<dt>If <var>direction</var> is <i>descending</i> and <var>tentative
+           order</var> is "a before b"<dd>Return that <var>b</var> comes before <var>a</var>.<dt>If <var>direction</var> is <i>descending</i> and <var>tentative
+           order</var> is "b before a"<dd>Return that <var>a</var> comes before <var>b</var>.</dl>
 
-        <p>If there is no machine-readable equivalent, then the type is "string" and the value is
-        the empty string.</p>
+         </ol>
 
-        <p>If the type is
-        a <a href=#concept-month id=table-sorting-model:concept-month-2>month</a>,
-        a <a href=#concept-date id=table-sorting-model:concept-date-2>date</a>,
-        a <a href=#concept-week id=table-sorting-model:concept-week-2>week</a>, or
-        a year,
-        then change the value to be the instant in time (with no time zone) that describes the
-        earliest moment that the value represents, and change the type to be
-        a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-2>local date and time</a>.</p>
+        <p>When the user agent is required to <dfn id=comparing-two-row-groups-using-the-th-element>compare two row groups using the <code>th</code> element</dfn> <var>th</var>,
+        with <var>a</var> and <var>b</var> being the two row groups respectively, the
+        user agent must run the following steps:</p>
 
-        <p class=example>For example, if the cell was <code><td><time>2011-11</time></code> then for sorting purposes the value is
-        interpreted as "2011-11-01T00:00:00.000" and the type is treated as a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-3>local date and time</a> rather than a <a href=#concept-month id=table-sorting-model:concept-month-3>month</a>.</p>
+        <ol><li><p>Let <var>x</var> be the <var>x</var>-coordinate of the slots that
+         <code id=table-sorting-model:the-th-element-16><a href=#the-th-element>th</a></code> covers in its <a href=#concept-table id=table-sorting-model:concept-table-7>table</a>.<li>
 
-        <p class=example>Similarly, if the cell was <code><td><time
-        datetime="2014">MMXIV</time></code> then for sorting purposes the value is interpreted as
-        "2014-01-01T00:00:00.000" and the type is treated as a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-4>local date and time</a> rather than a year.</p>
+          <p>Let <var>cell<sub>a</sub></var> be the element corresponding to the <a href=#concept-cell id=table-sorting-model:concept-cell-13>cell</a> in the first <a href=#concept-row id=table-sorting-model:concept-row-4>row</a> of group
+          <var>a</var> that covers the slot in that <a href=#concept-row id=table-sorting-model:concept-row-5>row</a> whose
+          <var>x</var>-coordinate is <var>x</var>.</p>
 
-       <li><p>The value is the element's <code id=table-sorting-model:textcontent><a href=#textcontent>textContent</a></code>. The type is "string".</ol>
+          <p>Let <var>cell<sub>b</sub></var> be the element corresponding to the <a href=#concept-cell id=table-sorting-model:concept-cell-14>cell</a> in the first <a href=#concept-row id=table-sorting-model:concept-row-6>row</a> of group
+          <var>b</var> that covers the slot in that <a href=#concept-row id=table-sorting-model:concept-row-7>row</a> whose
+          <var>x</var>-coordinate is <var>x</var>.</p>
 
-     <li>
+          
 
-      <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
-      equal, then: return "a before b" if <var>type<sub>a</sub></var> is earlier in the
-      following list than <var>type<sub>b</sub></var>, otherwise, return "b before a";
-      then, abort these steps.</p>
+          <p>In either case, if there's no <a href=#concept-cell id=table-sorting-model:concept-cell-15>cell</a> that actually covers
+          the slot, then use the value <i>null</i> instead.</p>
 
-      <ol class=brief><li><a href=#concept-time id=table-sorting-model:concept-time-2>time</a><li><a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date-2>yearless date</a><li><a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-5>local date and time</a><li><a href=#concept-datetime id=table-sorting-model:concept-datetime-2>global date and time</a><li><a href=#concept-timezone id=table-sorting-model:concept-timezone-2>time-zone offset</a><li><a href=#concept-duration id=table-sorting-model:concept-duration-2>duration</a><li>"string"</ol>
+         <li>
 
-     <li><p>If <var>value<sub>a</sub></var> and <var>value<sub>b</sub></var> are
-     equal, then return "equal" and abort these steps.<li>
+          <p>Let <var>type<sub>a</sub></var> and <var>value<sub>a</sub></var> be
+          the <a href=#type-and-value-of-the-cell id=table-sorting-model:type-and-value-of-the-cell>type and value of the cell</a> <var>cell<sub>a</sub></var>, as defined
+          below.</p>
 
-      <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
-      "string", then: if <var>value<sub>a</sub></var> is earlier than <var>value<sub>b</sub></var> then return "a before b" and abort these steps, otherwise,
-      return "b before a" and abort these steps.</p>
+          <p>Let <var>type<sub>b</sub></var> and <var>value<sub>b</sub></var> be
+          the <a href=#type-and-value-of-the-cell id=table-sorting-model:type-and-value-of-the-cell-2>type and value of the cell</a> <var>cell<sub>b</sub></var>, as defined
+          below.</p>
 
-      <p>Values sort in their natural order, with the following additional constraints:</p>
+          <p>The <dfn id=type-and-value-of-the-cell>type and value of the cell</dfn> <var>cell</var> are computed as follows.</p>
 
-      <p>For <a href=#concept-time id=table-sorting-model:concept-time-3>time</a> values, 00:00:00.000 is the earliest value and
-      23:59:59.999 is the latest value.</p>
+          <ol><li><p>If <var>cell</var> is <i>null</i>, then the type is "string" and the value is
+           the empty string; abort these steps.<li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace>inter-element whitespace</a> and nodes other than
+           <a href=#element id=table-sorting-model:element>Element</a> and <a href=#text id=table-sorting-model:text>Text</a> nodes, <var>cell</var> has only one child
+           and that child is a <code id=table-sorting-model:the-data-element><a href=#the-data-element>data</a></code> element, then the value is the value of that
+           <code id=table-sorting-model:the-data-element-2><a href=#the-data-element>data</a></code> element's <code id=table-sorting-model:attr-data-value><a href=#attr-data-value>value</a></code> attribute, if there is
+           one, or the empty string otherwise; the type is "string".</p>
 
-      <p>For <a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date-3>yearless date</a> values, 01-01 is the earliest
-      value and 12-31 is the latest value; 02-28 is earlier than 02-29 which is earlier than
-      03-01.</p>
+           <li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-2>inter-element whitespace</a> and nodes other than
+           <a href=#element id=table-sorting-model:element-2>Element</a> and <a href=#text id=table-sorting-model:text-2>Text</a> nodes, <var>cell</var> has only one child
+           and that child is a <code id=table-sorting-model:the-progress-element><a href=#the-progress-element>progress</a></code> element, then the value is the value of that
+           <code id=table-sorting-model:the-progress-element-2><a href=#the-progress-element>progress</a></code> element's <code id=table-sorting-model:attr-progress-value><a href=#attr-progress-value>value</a></code> attribute, if
+           there is one, or the empty string otherwise; the type is "string".</p>
 
-      <p>Values that are <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-6>local date and time</a> compare as
-      if they were in the same time zone.</p>
+           <li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-3>inter-element whitespace</a> and nodes other than
+           <a href=#element id=table-sorting-model:element-3>Element</a> and <a href=#text id=table-sorting-model:text-3>Text</a> nodes, <var>cell</var> has only one child
+           and that child is a <code id=table-sorting-model:the-meter-element><a href=#the-meter-element>meter</a></code> element, then the value is the value of that
+           <code id=table-sorting-model:the-meter-element-2><a href=#the-meter-element>meter</a></code> element's <code id=table-sorting-model:attr-meter-value><a href=#attr-meter-value>value</a></code> attribute, if there is
+           one, or the empty string otherwise; the type is "string".</p>
 
-      
+           <li>
 
-      <p>For <a href=#concept-timezone id=table-sorting-model:concept-timezone-3>time-zone offset</a> values, -23:59 is the earliest
-      value and +23:59 is the latest value.</p>
+            <p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-4>inter-element whitespace</a> and nodes other than
+            <a href=#element id=table-sorting-model:element-4>Element</a> and <a href=#text id=table-sorting-model:text-4>Text</a> nodes, <var>cell</var> has only one
+            child and that child is a <code id=table-sorting-model:the-time-element><a href=#the-time-element>time</a></code> element, then the value is the
+            <a href="#machine-readable-equivalent-of-the-element's-contents" id="table-sorting-model:machine-readable-equivalent-of-the-element's-contents">machine-readable equivalent of the element's contents</a>, if any, and the type is
+            the kind of value that is thus obtained
+           (a <a href=#concept-month id=table-sorting-model:concept-month>month</a>,
+            a <a href=#concept-date id=table-sorting-model:concept-date>date</a>,
+            a <a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date>yearless date</a>,
+            a <a href=#concept-time id=table-sorting-model:concept-time>time</a>,
+            a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local>local date and time</a>,
+            a <a href=#concept-timezone id=table-sorting-model:concept-timezone>time-zone offset</a>,
+            a <a href=#concept-datetime id=table-sorting-model:concept-datetime>global date and time</a>,
+            a <a href=#concept-week id=table-sorting-model:concept-week>week</a>,
+            a year, or
+            a <a href=#concept-duration id=table-sorting-model:concept-duration>duration</a>);
+            abort these steps after completing this one.</p>
 
-      
+            <p>If there is no machine-readable equivalent, then the type is "string" and the value is
+            the empty string.</p>
 
-     <li>
+            <p>If the type is
+            a <a href=#concept-month id=table-sorting-model:concept-month-2>month</a>,
+            a <a href=#concept-date id=table-sorting-model:concept-date-2>date</a>,
+            a <a href=#concept-week id=table-sorting-model:concept-week-2>week</a>, or
+            a year,
+            then change the value to be the instant in time (with no time zone) that describes the
+            earliest moment that the value represents, and change the type to be
+            a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-2>local date and time</a>.</p>
 
-      <p>Let <var>components<sub>a</sub></var> be the result of <a href=#parsing-the-sort-key id=table-sorting-model:parsing-the-sort-key>parsing the sort
-      key</a> <var>value<sub>a</sub></var>.</p>
+            <p class=example>For example, if the cell was <code><td><time>2011-11</time></code> then for sorting purposes the value is
+            interpreted as "2011-11-01T00:00:00.000" and the type is treated as a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-3>local date and time</a> rather than a <a href=#concept-month id=table-sorting-model:concept-month-3>month</a>.</p>
 
-      <p>Let <var>components<sub>b</sub></var> be the result of <a href=#parsing-the-sort-key id=table-sorting-model:parsing-the-sort-key-2>parsing the sort
-      key</a> <var>value<sub>b</sub></var>.</p>
+            <p class=example>Similarly, if the cell was <code><td><time
+            datetime="2014">MMXIV</time></code> then for sorting purposes the value is interpreted as
+            "2014-01-01T00:00:00.000" and the type is treated as a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-4>local date and time</a> rather than a year.</p>
 
-      <p>As described below, <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> are tuples consisting of a list of <var>n</var>
-      <i>numbers</i>, a list of <var>n</var> <i>number strings</i>, a list of <var>n</var>+1 <i>non-numeric strings</i>, and a list of 2<var>n</var>+1 <i>raw
-      strings</i>, for any non-negative integer value of <var>n</var> (zero or more).</p>
+           <li><p>The value is the element's <code id=table-sorting-model:textcontent><a href=#textcontent>textContent</a></code>. The type is "string".</ol>
 
-     <li>
+         <li>
 
-      <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison>locale-specific string
-      comparison</a> of <var>components<sub>a</sub></var>'s first <i>non-numeric
-      string</i> and <var>components<sub>b</sub></var>'s first <i>non-numeric string</i>,
-      in the context of <var>th</var>.</p>
+          <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
+          equal, then: return "a before b" if <var>type<sub>a</sub></var> is earlier in the
+          following list than <var>type<sub>b</sub></var>, otherwise, return "b before a";
+          then, abort these steps.</p>
 
-      <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
-      these steps.</p>
+          <ol class=brief><li><a href=#concept-time id=table-sorting-model:concept-time-2>time</a><li><a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date-2>yearless date</a><li><a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-5>local date and time</a><li><a href=#concept-datetime id=table-sorting-model:concept-datetime-2>global date and time</a><li><a href=#concept-timezone id=table-sorting-model:concept-timezone-2>time-zone offset</a><li><a href=#concept-duration id=table-sorting-model:concept-duration-2>duration</a><li>"string"</ol>
 
-     <li>
+         <li><p>If <var>value<sub>a</sub></var> and <var>value<sub>b</sub></var> are
+         equal, then return "equal" and abort these steps.<li>
 
-      <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> both have exactly one <i>number</i>, then run these
-      substeps:</p>
+          <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
+          "string", then: if <var>value<sub>a</sub></var> is earlier than <var>value<sub>b</sub></var> then return "a before b" and abort these steps, otherwise,
+          return "b before a" and abort these steps.</p>
 
-      <ol><li>
+          <p>Values sort in their natural order, with the following additional constraints:</p>
 
-        <p>If <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, return "a before b".</p>
+          <p>For <a href=#concept-time id=table-sorting-model:concept-time-3>time</a> values, 00:00:00.000 is the earliest value and
+          23:59:59.999 is the latest value.</p>
 
-        <p>If <var>components<sub>b</sub></var>'s <i>number</i> is less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a".</p>
+          <p>For <a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date-3>yearless date</a> values, 01-01 is the earliest
+          value and 12-31 is the latest value; 02-28 is earlier than 02-29 which is earlier than
+          03-01.</p>
 
-       <li>
+          <p>Values that are <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-6>local date and time</a> compare as
+          if they were in the same time zone.</p>
 
-        <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-2>locale-specific string
-        comparison</a> of <var>components<sub>a</sub></var>'s second <i>non-numeric
-        string</i> and <var>components<sub>b</sub></var>'s second <i>non-numeric
-        string</i>, in the context of <var>th</var>.</p>
+          
 
-        <p>If <var>order</var> is not "equal" then return <var>order</var> and
-        abort these steps.</p>
+          <p>For <a href=#concept-timezone id=table-sorting-model:concept-timezone-3>time-zone offset</a> values, -23:59 is the earliest
+          value and +23:59 is the latest value.</p>
 
-       <li>
+          
 
-        <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-3>locale-specific string
-        comparison</a> of <var>components<sub>a</sub></var>'s <i>number string</i> and
-        <var>components<sub>b</sub></var>'s <i>number string</i>, in the context of <var>th</var>.</p>
+         <li>
 
-        <p>If <var>order</var> is not "equal" then return <var>order</var> and
-        abort these steps.</p>
+          <p>Let <var>components<sub>a</sub></var> be the result of <a href=#parsing-the-sort-key id=table-sorting-model:parsing-the-sort-key>parsing the sort
+          key</a> <var>value<sub>a</sub></var>.</p>
 
-       </ol>
+          <p>Let <var>components<sub>b</sub></var> be the result of <a href=#parsing-the-sort-key id=table-sorting-model:parsing-the-sort-key-2>parsing the sort
+          key</a> <var>value<sub>b</sub></var>.</p>
 
-      <p>Otherwise, run these substeps:</p>
+          <p>As described below, <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> are tuples consisting of a list of <var>n</var>
+          <i>numbers</i>, a list of <var>n</var> <i>number strings</i>, a list of <var>n</var>+1 <i>non-numeric strings</i>, and a list of 2<var>n</var>+1 <i>raw
+          strings</i>, for any non-negative integer value of <var>n</var> (zero or more).</p>
 
-      <ol><li>
+         <li>
 
-        <p>If <var>components<sub>a</sub></var> has zero <i>numbers</i> but <var>components<sub>b</sub></var> has more than zero <i>numbers</i>, return "a before
-        b".</p>
+          <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison>locale-specific string
+          comparison</a> of <var>components<sub>a</sub></var>'s first <i>non-numeric
+          string</i> and <var>components<sub>b</sub></var>'s first <i>non-numeric string</i>,
+          in the context of <var>th</var>.</p>
 
-        <p>If <var>components<sub>b</sub></var> has zero <i>numbers</i> but <var>components<sub>a</sub></var> has more than zero <i>numbers</i>, return "b before
-        a".</p>
+          <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
+          these steps.</p>
 
-       <li>
+         <li>
 
-        
+          <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> both have exactly one <i>number</i>, then run these
+          substeps:</p>
 
-        <p>If <var>components<sub>a</sub></var> has one <i>number</i>, return "a before
-        b".</p>
+          <ol><li>
 
-        <p>If <var>components<sub>b</sub></var> has one <i>number</i>, return "b before
-        a".</p>
+            <p>If <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, return "a before b".</p>
 
-       <li>
+            <p>If <var>components<sub>b</sub></var>'s <i>number</i> is less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a".</p>
 
-        
+           <li>
 
-        <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> have more than one <i>number</i>, run these substeps:</p>
+            <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-2>locale-specific string
+            comparison</a> of <var>components<sub>a</sub></var>'s second <i>non-numeric
+            string</i> and <var>components<sub>b</sub></var>'s second <i>non-numeric
+            string</i>, in the context of <var>th</var>.</p>
 
-        <ol><li><p>Let <var>count</var> be the smaller of the number of <i>numbers</i> in <var>components<sub>a</sub></var> and the number of <i>numbers</i> in <var>components<sub>b</sub></var>.<li><p>For each <i>number</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> from the first to the <var>count</var>th, in
-         order: if <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, then return "a before b" and abort
-         these steps; otherwise, if <var>components<sub>b</sub></var>'s <i>number</i> is
-         less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a"
-         and abort these steps.<li>
+            <p>If <var>order</var> is not "equal" then return <var>order</var> and
+            abort these steps.</p>
 
-          <p>If <var>components<sub>a</sub></var> has fewer <i>numbers</i> than <var>components<sub>b</sub></var>, return "a before b" and abort these steps.</p>
+           <li>
 
-          <p>If <var>components<sub>b</sub></var> has fewer <i>numbers</i> than <var>components<sub>a</sub></var>, return "b before a" and abort these steps.</p>
+            <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-3>locale-specific string
+            comparison</a> of <var>components<sub>a</sub></var>'s <i>number string</i> and
+            <var>components<sub>b</sub></var>'s <i>number string</i>, in the context of <var>th</var>.</p>
 
-         <li><p>Let <var>index</var> be zero.<li>
+            <p>If <var>order</var> is not "equal" then return <var>order</var> and
+            abort these steps.</p>
 
-          <p><i>String loop</i>: Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-4>locale-specific
-          string comparison</a> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>number string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>number string</i>,
-          in the context of <var>th</var>.</p>
+           </ol>
 
-          <p>If <var>order</var> is not "equal" then return <var>order</var> and
-          abort these steps.</p>
+          <p>Otherwise, run these substeps:</p>
 
-         <li>
+          <ol><li>
 
-          <p>Increment <var>index</var>.</p>
+            <p>If <var>components<sub>a</sub></var> has zero <i>numbers</i> but <var>components<sub>b</sub></var> has more than zero <i>numbers</i>, return "a before
+            b".</p>
 
-         <li>
+            <p>If <var>components<sub>b</sub></var> has zero <i>numbers</i> but <var>components<sub>a</sub></var> has more than zero <i>numbers</i>, return "b before
+            a".</p>
 
-          <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-5>locale-specific string
-          comparison</a> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>separator string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>separator
-          string</i>, in the context of <var>th</var>.</p>
+           <li>
 
-          <p>If <var>order</var> is not "equal" then return <var>order</var> and
-          abort these steps.</p>
+            
 
+            <p>If <var>components<sub>a</sub></var> has one <i>number</i>, return "a before
+            b".</p>
+
+            <p>If <var>components<sub>b</sub></var> has one <i>number</i>, return "b before
+            a".</p>
+
+           <li>
+
+            
+
+            <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> have more than one <i>number</i>, run these substeps:</p>
+
+            <ol><li><p>Let <var>count</var> be the smaller of the number of <i>numbers</i> in <var>components<sub>a</sub></var> and the number of <i>numbers</i> in <var>components<sub>b</sub></var>.<li><p>For each <i>number</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> from the first to the <var>count</var>th, in
+             order: if <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, then return "a before b" and abort
+             these steps; otherwise, if <var>components<sub>b</sub></var>'s <i>number</i> is
+             less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a"
+             and abort these steps.<li>
+
+              <p>If <var>components<sub>a</sub></var> has fewer <i>numbers</i> than <var>components<sub>b</sub></var>, return "a before b" and abort these steps.</p>
+
+              <p>If <var>components<sub>b</sub></var> has fewer <i>numbers</i> than <var>components<sub>a</sub></var>, return "b before a" and abort these steps.</p>
+
+             <li><p>Let <var>index</var> be zero.<li>
+
+              <p><i>String loop</i>: Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-4>locale-specific
+              string comparison</a> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>number string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>number string</i>,
+              in the context of <var>th</var>.</p>
+
+              <p>If <var>order</var> is not "equal" then return <var>order</var> and
+              abort these steps.</p>
+
+             <li>
+
+              <p>Increment <var>index</var>.</p>
+
+             <li>
+
+              <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-5>locale-specific string
+              comparison</a> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>separator string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>separator
+              string</i>, in the context of <var>th</var>.</p>
+
+              <p>If <var>order</var> is not "equal" then return <var>order</var> and
+              abort these steps.</p>
+
+             <li>
+
+              <p>If <var>index</var> is less than the number of <i>numbers</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, jump back
+              to the step labeled <i>string loop</i>.</p>
+
+             </ol>
+
+           </ol>
+
          <li>
 
-          <p>If <var>index</var> is less than the number of <i>numbers</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, return
-          to the step labeled <i>string loop</i>.</p>
+          
 
-         </ol>
+          <p>Let <var>index</var> be zero.</p>
 
-       </ol>
+         <li>
 
-     <li>
+          <p>Run these substeps:</p>
 
-      
+          <ol><li>
 
-      <p>Let <var>index</var> be zero.</p>
+            <p><i>Final loop:</i> Let <var>order</var> be the result of a <a href=#raw-string-comparison id=table-sorting-model:raw-string-comparison>raw string
+            comparison</a> of <var>components<sub>a</sub></var>'s <var>n</var>th
+            <i>raw string</i> and <var>components<sub>b</sub></var>'s <var>n</var>th
+            <i>raw string</i>.</p>
 
-     <li>
+            <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
+            these steps.</p>
 
-      <p><i>Final loop:</i> Let <var>order</var> be the result of a <a href=#raw-string-comparison id=table-sorting-model:raw-string-comparison>raw string
-      comparison</a> of <var>components<sub>a</sub></var>'s <var>n</var>th
-      <i>raw string</i> and <var>components<sub>b</sub></var>'s <var>n</var>th
-      <i>raw string</i>.</p>
+           <li>
 
-      <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
-      these steps.</p>
+            <p>Increment <var>index</var>.</p>
 
-     <li>
+           <li>
 
-      <p>Increment <var>index</var>.</p>
+            <p>If <var>index</var> is less than the number of <i>raw strings</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, jump back
+            to the step labeled <i>final loop</i>.</p>
 
-     <li>
+           </ol>
 
-      <p>If <var>index</var> is less than the number of <i>raw strings</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, return
-      to the step labeled <i>final loop</i>.</p>
+         <li>
 
-     <li>
+          <p>Return "equal".</p>
 
-      <p>Return "equal".</p>
+         </ol>
 
-     </ol>
+       <li><p>Let <var>new order</var> be a list of <code id=table-sorting-model:the-tr-element-19><a href=#the-tr-element>tr</a></code> elements consisting of the
+       <code id=table-sorting-model:the-tr-element-20><a href=#the-tr-element>tr</a></code> elements of all the groups in the newly ordered <var>groups</var>, with
+       the <code id=table-sorting-model:the-tr-element-21><a href=#the-tr-element>tr</a></code> elements being in the same order as the groups to which they belong are in
+       <var>groups</var>, and the <code id=table-sorting-model:the-tr-element-22><a href=#the-tr-element>tr</a></code> elements within each such group themselves
+       being ordered in <a href=#tree-order id=table-sorting-model:tree-order-4>tree order</a>.<li><p><a href=#concept-node-remove id=table-sorting-model:concept-node-remove>Remove</a> all the <code id=table-sorting-model:the-tr-element-23><a href=#the-tr-element>tr</a></code> elements in <var>new order</var> from their parents, in <a href=#tree-order id=table-sorting-model:tree-order-5>tree order</a>.<li><p><a href=#concept-node-insert id=table-sorting-model:concept-node-insert>Insert</a> all the <code id=table-sorting-model:the-tr-element-24><a href=#the-tr-element>tr</a></code> elements in <var>new order</var> into the DOM at the location of <var>insertion point</var>, in
+       the order these elements are found in <var>new order</var>.<li><p>Remove <var>insertion point</var> from the DOM.</ol>
 
-   <li><p>Let <var>new order</var> be a list of <code id=table-sorting-model:the-tr-element-19><a href=#the-tr-element>tr</a></code> elements consisting of the
-   <code id=table-sorting-model:the-tr-element-20><a href=#the-tr-element>tr</a></code> elements of all the groups in the newly ordered <var>groups</var>, with
-   the <code id=table-sorting-model:the-tr-element-21><a href=#the-tr-element>tr</a></code> elements being in the same order as the groups to which they belong are in
-   <var>groups</var>, and the <code id=table-sorting-model:the-tr-element-22><a href=#the-tr-element>tr</a></code> elements within each such group themselves
-   being ordered in <a href=#tree-order id=table-sorting-model:tree-order-4>tree order</a>.<li><p><a href=#concept-node-remove id=table-sorting-model:concept-node-remove>Remove</a> all the <code id=table-sorting-model:the-tr-element-23><a href=#the-tr-element>tr</a></code> elements in <var>new order</var> from their parents, in <a href=#tree-order id=table-sorting-model:tree-order-5>tree order</a>.<li><p><a href=#concept-node-insert id=table-sorting-model:concept-node-insert>Insert</a> all the <code id=table-sorting-model:the-tr-element-24><a href=#the-tr-element>tr</a></code> elements in <var>new order</var> into the DOM at the location of <var>insertion point</var>, in
-   the order these elements are found in <var>new order</var>.<li><p>Remove <var>insertion point</var> from the DOM.<li><p><i>Increment loop</i>: If there are no <code id=table-sorting-model:the-tr-element-25><a href=#the-tr-element>tr</a></code> or <code id=table-sorting-model:the-tbody-element-5><a href=#the-tbody-element>tbody</a></code> children of
-   <var>table</var> that are later siblings of the element pointed to by <var>row
-   collection cursor</var>, then jump to the step labeled <i>end</i> below.<li><p>Let <var>row collection cursor</var> point to the next <code id=table-sorting-model:the-tr-element-26><a href=#the-tr-element>tr</a></code> or
-   <code id=table-sorting-model:the-tbody-element-6><a href=#the-tbody-element>tbody</a></code> child of <var>table</var> that is a later sibling of the element
-   pointed to by <var>row collection cursor</var>.<li><p>Return to the step labeled <i>row loop</i> above.<li><p><i>End</i>: Set <var>table</var>'s <a href=#currently-sorting-flag id=table-sorting-model:currently-sorting-flag-3>currently-sorting flag</a> to
+     <li><p><i>Increment loop</i>: If there are no <code id=table-sorting-model:the-tr-element-25><a href=#the-tr-element>tr</a></code> or <code id=table-sorting-model:the-tbody-element-5><a href=#the-tbody-element>tbody</a></code> children of
+     <var>table</var> that are later siblings of the element pointed to by <var>row
+     collection cursor</var>, then jump to the step labeled <i>end</i> below.<li><p>Let <var>row collection cursor</var> point to the next <code id=table-sorting-model:the-tr-element-26><a href=#the-tr-element>tr</a></code> or
+     <code id=table-sorting-model:the-tbody-element-6><a href=#the-tbody-element>tbody</a></code> child of <var>table</var> that is a later sibling of the element
+     pointed to by <var>row collection cursor</var>.<li><p>Jump back to the step labeled <i>row loop</i> above.</ol>
+
+   <li><p><i>End</i>: Set <var>table</var>'s <a href=#currently-sorting-flag id=table-sorting-model:currently-sorting-flag-3>currently-sorting flag</a> to
    false.</ol>
 
   <p>When a user agent is to <dfn id=parsing-the-sort-key>parse the sort key</dfn> <var>value</var>, it must run the following steps. These return a tuple consisting of a list

Modified: index
===================================================================
--- index	2014-09-17 22:43:04 UTC (rev 8783)
+++ index	2014-09-17 22:58:28 UTC (rev 8784)
@@ -29719,365 +29719,407 @@
 
    <li><p>If <var>table</var> has no <a href=#concept-row-group id=table-sorting-model:concept-row-group-4>row group</a>
    corresponding to a <code id=table-sorting-model:the-thead-element-9><a href=#the-thead-element>thead</a></code> element, then set <var>ignore first group</var> to
-   true. Otherwise, set it to false.<li><p><i>Row loop</i>: Let <var>rows</var> be an empty list of <code id=table-sorting-model:the-tr-element-4><a href=#the-tr-element>tr</a></code>
-   elements.<li>
+   true. Otherwise, set it to false.<li>
 
-    <p>Run the appropriate steps from the following list:</p>
+    <p>Run these substeps:</p>
 
-    <dl class=switch><dt>If <var>row collection cursor</var> points to a <code id=table-sorting-model:the-tr-element-5><a href=#the-tr-element>tr</a></code> element
+    <ol><li><p><i>Row loop</i>: Let <var>rows</var> be an empty list of <code id=table-sorting-model:the-tr-element-4><a href=#the-tr-element>tr</a></code>
+     elements.<li>
 
-     <dd>
+      <p>Run these substeps:</p>
 
-      <ol><li><p><i>Collect</i>: Append the element pointed to by <var>row collection
-       cursor</var> to <var>rows</var>.<li><p>If there are no <code id=table-sorting-model:the-tr-element-6><a href=#the-tr-element>tr</a></code> or <code id=table-sorting-model:the-tbody-element-2><a href=#the-tbody-element>tbody</a></code> children of <var>table</var> that are later siblings of the element pointed to by <var>row
-       collection cursor</var>, or if the next such child is a <code id=table-sorting-model:the-tbody-element-3><a href=#the-tbody-element>tbody</a></code> element, then jump
-       to the step labeled <i>group</i> below.<li><p>Let <var>row collection cursor</var> point to the next <code id=table-sorting-model:the-tr-element-7><a href=#the-tr-element>tr</a></code> child
-       of <var>table</var> that is a later sibling of the element pointed to by <var>row collection cursor</var>.<li><p>Return to the step labeled <i>collect</i> above.</ol>
+      <ol><li>
 
-     <dt>If <var>row collection cursor</var> points to a <code id=table-sorting-model:the-tbody-element-4><a href=#the-tbody-element>tbody</a></code> element
+        <p>Run the appropriate steps from the following list:</p>
 
-     <dd>
+        <dl class=switch><dt>If <var>row collection cursor</var> points to a <code id=table-sorting-model:the-tr-element-5><a href=#the-tr-element>tr</a></code> element
 
-      <ol><li><p>Place all the <code id=table-sorting-model:the-tr-element-8><a href=#the-tr-element>tr</a></code> element children of the element pointed to by <var>row collection cursor</var> into <var>rows</var>, in <a href=#tree-order id=table-sorting-model:tree-order-2>tree
-       order</a>.<li><p>If <var>rows</var> is empty, jump to the step labeled <i>increment loop</i>
-       below.</ol>
+         <dd>
 
-     </dl>
+          <ol><li><p><i>Collect</i>: Append the element pointed to by <var>row collection
+           cursor</var> to <var>rows</var>.<li><p>If there are no <code id=table-sorting-model:the-tr-element-6><a href=#the-tr-element>tr</a></code> or <code id=table-sorting-model:the-tbody-element-2><a href=#the-tbody-element>tbody</a></code> children of <var>table</var> that are later siblings of the element pointed to by <var>row
+           collection cursor</var>, or if the next such child is a <code id=table-sorting-model:the-tbody-element-3><a href=#the-tbody-element>tbody</a></code> element, then jump
+           to the step labeled <i>group</i> below.<li><p>Let <var>row collection cursor</var> point to the next <code id=table-sorting-model:the-tr-element-7><a href=#the-tr-element>tr</a></code> child
+           of <var>table</var> that is a later sibling of the element pointed to by <var>row collection cursor</var>.<li><p>Jump back to the step labeled <i>collect</i> above.</ol>
 
-   <li><p><i>Group</i>: Let <var>groups</var> be an empty list of groups of <code id=table-sorting-model:the-tr-element-9><a href=#the-tr-element>tr</a></code>
-   elements.<li><p>Let <var>group</var> be an empty group of <code id=table-sorting-model:the-tr-element-10><a href=#the-tr-element>tr</a></code> elements.<li><p>Let <var>group cursor</var> be a pointer to an element, initially pointing at the
-   first <code id=table-sorting-model:the-tr-element-11><a href=#the-tr-element>tr</a></code> element in <var>rows</var>.<li><p><i>Start group</i>: Let <var>pending rows in group</var> be 1.<li><p><i>Group loop</i>: Append the <code id=table-sorting-model:the-tr-element-12><a href=#the-tr-element>tr</a></code> element pointed to by <var>group
-   cursor</var> to <var>group</var>.<li><p>If there are any <a href=#concept-cell id=table-sorting-model:concept-cell-11>cells</a> whose highest <a href=#concept-row id=table-sorting-model:concept-row-3>row</a>'s element is the one pointed to by <var>group
-   cursor</var>, then let <var>tallest height</var> be the number of rows covered by the
-   tallest such <a href=#concept-cell id=table-sorting-model:concept-cell-12>cell</a>.<li><p>If <var>tallest height</var> is greater than <var>pending rows in
-   group</var> then set <var>pending rows in group</var> to <var>tallest
-   height</var>.<li><p>Decrement <var>pending rows in group</var> by one.<li><p>Let <var>group cursor</var> point to the next <code id=table-sorting-model:the-tr-element-13><a href=#the-tr-element>tr</a></code> element in <var>rows</var>, if any; otherwise, let it be null.<li><p>If <var>group cursor</var> is not null and <var>pending rows in
-   group</var> is not zero, return to the step labeled <i>group loop</i>.<li><p>Append a new group to <var>groups</var> consisting of the <code id=table-sorting-model:the-tr-element-14><a href=#the-tr-element>tr</a></code>
-   elements in <var>group</var>.<li><p>Empty <var>group</var>.<li><p>If <var>group cursor</var> is not null, then return to the step labeled <i>start
-   group</i>.<li><p>If <var>ignore first group</var> is true, then drop the first group in <var>groups</var> and set <var>ignore first group</var> to false.<li><p><i>Drop leading header groups</i>: If <var>groups</var> is now empty, jump to the
-   step labeled <i>increment loop</i> below.<li><p>If the first group of <var>groups</var> consists of <code id=table-sorting-model:the-tr-element-15><a href=#the-tr-element>tr</a></code> elements
-   whose element children are all <code id=table-sorting-model:the-th-element-13><a href=#the-th-element>th</a></code> elements, then drop the first group in <var>groups</var> and return to the previous step (labeled <i>drop leading header
-   groups</i>).<li><p>Let <var>insertion point</var> be a placeholder in a DOM tree, which can be used
-   to reinsert nodes at a specific point in the DOM. Insert <var>insertion point</var> into
-   the parent of the first <code id=table-sorting-model:the-tr-element-16><a href=#the-tr-element>tr</a></code> element of the first group in <var>groups</var>,
-   immediately before that <code id=table-sorting-model:the-tr-element-17><a href=#the-tr-element>tr</a></code> element.<li>
+         <dt>If <var>row collection cursor</var> points to a <code id=table-sorting-model:the-tbody-element-4><a href=#the-tbody-element>tbody</a></code> element
 
-    <p>Sort the groups in <var>groups</var>, using the following algorithm to decide the
-    relative order of any two groups <var>a</var> and <var>b</var> (the algorithm
-    either returns that <var>a</var> comes before <var>b</var>, or that <var>b</var> comes before <var>a</var>):</p>
+         <dd>
 
-    <ol><li><p>Let <var>key index</var> be an index into <var>key heading
-     cells</var>, initially denoting the first element in the list.<li><p>Let <var>direction</var> be a sort direction, initially <i>ascending</i>. Its
-     other possible value is <i>descending</i>. When <var>direction</var> is
-     <i>toggled</i>, that means that if its value is <i>ascending</i>, it must be changed to
-     <i>descending</i>, and when its value is <i>descending</i>, it must be changed to
-     <i>ascending</i>.<li><p><i>Column loop</i>: Let <var>th</var> be the <var>key index</var>th
-     <code id=table-sorting-model:the-th-element-14><a href=#the-th-element>th</a></code> in <var>key heading cells</var>.<li><p>If <var>th</var>'s <code id=table-sorting-model:attr-th-sorted-10><a href=#attr-th-sorted>sorted</a></code> attribute's
-     <a href=#column-sort-direction id=table-sorting-model:column-sort-direction-3>column sort direction</a> is <i>reversed</i>, then toggle <var>direction</var>.<li><p>Let <var>tentative order</var> be the result of <a href=#comparing-two-row-groups-using-the-th-element id=table-sorting-model:comparing-two-row-groups-using-the-th-element>comparing two row groups
-     using the <code>th</code> element</a> <var>th</var>, with <var>a</var> and
-     <var>b</var> as the rows.<li><p>If <var>tentative order</var> is not "equal", then jump to the step labeled
-     <i>return</i> below.<li><p>Increment <var>key index</var>.<li><p>If <var>key index</var> still denotes a <code id=table-sorting-model:the-th-element-15><a href=#the-th-element>th</a></code> element in <var>key heading cells</var>, then jump back to the step above labeled <i>column
-     loop</i>.<li><p>If <var>a</var>'s <code id=table-sorting-model:the-tr-element-18><a href=#the-tr-element>tr</a></code> elements precede <var>b</var>'s in
-     <a href=#tree-order id=table-sorting-model:tree-order-3>tree order</a>, then let <var>tentative order</var> be "a before b".
-     Otherwise, let <var>tentative order</var> be "b before a".<li><p><i>Return</i>: Return the relative order given by the matching option from the following
-     list:</p>
+          <ol><li><p>Place all the <code id=table-sorting-model:the-tr-element-8><a href=#the-tr-element>tr</a></code> element children of the element pointed to by <var>row collection cursor</var> into <var>rows</var>, in <a href=#tree-order id=table-sorting-model:tree-order-2>tree
+           order</a>.<li><p>If <var>rows</var> is empty, jump to the step labeled <i>increment loop</i>
+           below.</ol>
 
-      <dl class=switch><dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
-       order</var> is "a before b"<dd>Return that <var>a</var> comes before <var>b</var>.<dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
-       order</var> is "b before a"<dd>Return that <var>b</var> comes before <var>a</var>.<dt>If <var>direction</var> is <i>descending</i> and <var>tentative
-       order</var> is "a before b"<dd>Return that <var>b</var> comes before <var>a</var>.<dt>If <var>direction</var> is <i>descending</i> and <var>tentative
-       order</var> is "b before a"<dd>Return that <var>a</var> comes before <var>b</var>.</dl>
+         </dl>
 
-     </ol>
+       <li><p><i>Group</i>: Let <var>groups</var> be an empty list of groups of <code id=table-sorting-model:the-tr-element-9><a href=#the-tr-element>tr</a></code>
+       elements.<li><p>Let <var>group</var> be an empty group of <code id=table-sorting-model:the-tr-element-10><a href=#the-tr-element>tr</a></code> elements.<li><p>Let <var>group cursor</var> be a pointer to an element, initially pointing at the
+       first <code id=table-sorting-model:the-tr-element-11><a href=#the-tr-element>tr</a></code> element in <var>rows</var>.<li>
 
-    <p>When the user agent is required to <dfn id=comparing-two-row-groups-using-the-th-element>compare two row groups using the <code>th</code> element</dfn> <var>th</var>,
-    with <var>a</var> and <var>b</var> being the two row groups respectively, the
-    user agent must run the following steps:</p>
+        <p>Run these substeps:</p>
 
-    <ol><li><p>Let <var>x</var> be the <var>x</var>-coordinate of the slots that
-     <code id=table-sorting-model:the-th-element-16><a href=#the-th-element>th</a></code> covers in its <a href=#concept-table id=table-sorting-model:concept-table-7>table</a>.<li>
+        <ol><li><p><i>Start group</i>: Let <var>pending rows in group</var> be 1.<li>
 
-      <p>Let <var>cell<sub>a</sub></var> be the element corresponding to the <a href=#concept-cell id=table-sorting-model:concept-cell-13>cell</a> in the first <a href=#concept-row id=table-sorting-model:concept-row-4>row</a> of group
-      <var>a</var> that covers the slot in that <a href=#concept-row id=table-sorting-model:concept-row-5>row</a> whose
-      <var>x</var>-coordinate is <var>x</var>.</p>
+          <p>Run these substeps:</p>
 
-      <p>Let <var>cell<sub>b</sub></var> be the element corresponding to the <a href=#concept-cell id=table-sorting-model:concept-cell-14>cell</a> in the first <a href=#concept-row id=table-sorting-model:concept-row-6>row</a> of group
-      <var>b</var> that covers the slot in that <a href=#concept-row id=table-sorting-model:concept-row-7>row</a> whose
-      <var>x</var>-coordinate is <var>x</var>.</p>
+          <ol><li><p><i>Group loop</i>: Append the <code id=table-sorting-model:the-tr-element-12><a href=#the-tr-element>tr</a></code> element pointed to by <var>group
+           cursor</var> to <var>group</var>.<li><p>If there are any <a href=#concept-cell id=table-sorting-model:concept-cell-11>cells</a> whose highest <a href=#concept-row id=table-sorting-model:concept-row-3>row</a>'s element is the one pointed to by <var>group
+           cursor</var>, then let <var>tallest height</var> be the number of rows covered by the
+           tallest such <a href=#concept-cell id=table-sorting-model:concept-cell-12>cell</a>.<li><p>If <var>tallest height</var> is greater than <var>pending rows in
+           group</var> then set <var>pending rows in group</var> to <var>tallest
+           height</var>.<li><p>Decrement <var>pending rows in group</var> by one.<li><p>Let <var>group cursor</var> point to the next <code id=table-sorting-model:the-tr-element-13><a href=#the-tr-element>tr</a></code> element in <var>rows</var>, if any; otherwise, let it be null.<li><p>If <var>group cursor</var> is not null and <var>pending rows in
+           group</var> is not zero, jump back to the step labeled <i>group loop</i>.</ol>
 
-      
+         <li><p>Append a new group to <var>groups</var> consisting of the <code id=table-sorting-model:the-tr-element-14><a href=#the-tr-element>tr</a></code>
+         elements in <var>group</var>.<li><p>Empty <var>group</var>.<li><p>If <var>group cursor</var> is not null, then jump back to the step labeled <i>start
+         group</i>.</ol>
 
-      <p>In either case, if there's no <a href=#concept-cell id=table-sorting-model:concept-cell-15>cell</a> that actually covers
-      the slot, then use the value <i>null</i> instead.</p>
+       <li><p>If <var>ignore first group</var> is true, then drop the first group in <var>groups</var> and set <var>ignore first group</var> to false.<li>
 
-     <li>
+        <p>Run these steps:</p>
 
-      <p>Let <var>type<sub>a</sub></var> and <var>value<sub>a</sub></var> be
-      the <a href=#type-and-value-of-the-cell id=table-sorting-model:type-and-value-of-the-cell>type and value of the cell</a> <var>cell<sub>a</sub></var>, as defined
-      below.</p>
+        <ol><li><p><i>Drop leading header groups</i>: If <var>groups</var> is now empty, jump to the
+         step labeled <i>increment loop</i> below.<li><p>If the first group of <var>groups</var> consists of <code id=table-sorting-model:the-tr-element-15><a href=#the-tr-element>tr</a></code> elements
+         whose element children are all <code id=table-sorting-model:the-th-element-13><a href=#the-th-element>th</a></code> elements, then drop the first group in <var>groups</var> and jump back to the previous step (labeled <i>drop leading header
+         groups</i>).</ol>
 
-      <p>Let <var>type<sub>b</sub></var> and <var>value<sub>b</sub></var> be
-      the <a href=#type-and-value-of-the-cell id=table-sorting-model:type-and-value-of-the-cell-2>type and value of the cell</a> <var>cell<sub>b</sub></var>, as defined
-      below.</p>
+       <li><p>Let <var>insertion point</var> be a placeholder in a DOM tree, which can be used
+       to reinsert nodes at a specific point in the DOM. Insert <var>insertion point</var> into
+       the parent of the first <code id=table-sorting-model:the-tr-element-16><a href=#the-tr-element>tr</a></code> element of the first group in <var>groups</var>,
+       immediately before that <code id=table-sorting-model:the-tr-element-17><a href=#the-tr-element>tr</a></code> element.<li>
 
-      <p>The <dfn id=type-and-value-of-the-cell>type and value of the cell</dfn> <var>cell</var> are computed as follows.</p>
+        <p>Sort the groups in <var>groups</var>, using the following algorithm to decide the
+        relative order of any two groups <var>a</var> and <var>b</var> (the algorithm
+        either returns that <var>a</var> comes before <var>b</var>, or that <var>b</var> comes before <var>a</var>):</p>
 
-      <ol><li><p>If <var>cell</var> is <i>null</i>, then the type is "string" and the value is
-       the empty string; abort these steps.<li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace>inter-element whitespace</a> and nodes other than
-       <a href=#element id=table-sorting-model:element>Element</a> and <a href=#text id=table-sorting-model:text>Text</a> nodes, <var>cell</var> has only one child
-       and that child is a <code id=table-sorting-model:the-data-element><a href=#the-data-element>data</a></code> element, then the value is the value of that
-       <code id=table-sorting-model:the-data-element-2><a href=#the-data-element>data</a></code> element's <code id=table-sorting-model:attr-data-value><a href=#attr-data-value>value</a></code> attribute, if there is
-       one, or the empty string otherwise; the type is "string".</p>
+        <ol><li><p>Let <var>key index</var> be an index into <var>key heading
+         cells</var>, initially denoting the first element in the list.<li><p>Let <var>direction</var> be a sort direction, initially <i>ascending</i>. Its
+         other possible value is <i>descending</i>. When <var>direction</var> is
+         <i>toggled</i>, that means that if its value is <i>ascending</i>, it must be changed to
+         <i>descending</i>, and when its value is <i>descending</i>, it must be changed to
+         <i>ascending</i>.<li>
 
-       <li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-2>inter-element whitespace</a> and nodes other than
-       <a href=#element id=table-sorting-model:element-2>Element</a> and <a href=#text id=table-sorting-model:text-2>Text</a> nodes, <var>cell</var> has only one child
-       and that child is a <code id=table-sorting-model:the-progress-element><a href=#the-progress-element>progress</a></code> element, then the value is the value of that
-       <code id=table-sorting-model:the-progress-element-2><a href=#the-progress-element>progress</a></code> element's <code id=table-sorting-model:attr-progress-value><a href=#attr-progress-value>value</a></code> attribute, if
-       there is one, or the empty string otherwise; the type is "string".</p>
+          <p>Run these substeps:</p>
 
-       <li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-3>inter-element whitespace</a> and nodes other than
-       <a href=#element id=table-sorting-model:element-3>Element</a> and <a href=#text id=table-sorting-model:text-3>Text</a> nodes, <var>cell</var> has only one child
-       and that child is a <code id=table-sorting-model:the-meter-element><a href=#the-meter-element>meter</a></code> element, then the value is the value of that
-       <code id=table-sorting-model:the-meter-element-2><a href=#the-meter-element>meter</a></code> element's <code id=table-sorting-model:attr-meter-value><a href=#attr-meter-value>value</a></code> attribute, if there is
-       one, or the empty string otherwise; the type is "string".</p>
+          <ol><li><p><i>Column loop</i>: Let <var>th</var> be the <var>key index</var>th
+           <code id=table-sorting-model:the-th-element-14><a href=#the-th-element>th</a></code> in <var>key heading cells</var>.<li><p>If <var>th</var>'s <code id=table-sorting-model:attr-th-sorted-10><a href=#attr-th-sorted>sorted</a></code> attribute's
+           <a href=#column-sort-direction id=table-sorting-model:column-sort-direction-3>column sort direction</a> is <i>reversed</i>, then toggle <var>direction</var>.<li><p>Let <var>tentative order</var> be the result of <a href=#comparing-two-row-groups-using-the-th-element id=table-sorting-model:comparing-two-row-groups-using-the-th-element>comparing two row groups
+           using the <code>th</code> element</a> <var>th</var>, with <var>a</var> and
+           <var>b</var> as the rows.<li><p>If <var>tentative order</var> is not "equal", then jump to the step labeled
+           <i>return</i> below.<li><p>Increment <var>key index</var>.<li><p>If <var>key index</var> still denotes a <code id=table-sorting-model:the-th-element-15><a href=#the-th-element>th</a></code> element in <var>key heading cells</var>, then jump back to the step above labeled <i>column
+           loop</i>.</ol>
 
-       <li>
+         <li><p>If <var>a</var>'s <code id=table-sorting-model:the-tr-element-18><a href=#the-tr-element>tr</a></code> elements precede <var>b</var>'s in
+         <a href=#tree-order id=table-sorting-model:tree-order-3>tree order</a>, then let <var>tentative order</var> be "a before b".
+         Otherwise, let <var>tentative order</var> be "b before a".<li><p><i>Return</i>: Return the relative order given by the matching option from the following
+         list:</p>
 
-        <p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-4>inter-element whitespace</a> and nodes other than
-        <a href=#element id=table-sorting-model:element-4>Element</a> and <a href=#text id=table-sorting-model:text-4>Text</a> nodes, <var>cell</var> has only one
-        child and that child is a <code id=table-sorting-model:the-time-element><a href=#the-time-element>time</a></code> element, then the value is the
-        <a href="#machine-readable-equivalent-of-the-element's-contents" id="table-sorting-model:machine-readable-equivalent-of-the-element's-contents">machine-readable equivalent of the element's contents</a>, if any, and the type is
-        the kind of value that is thus obtained
-       (a <a href=#concept-month id=table-sorting-model:concept-month>month</a>,
-        a <a href=#concept-date id=table-sorting-model:concept-date>date</a>,
-        a <a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date>yearless date</a>,
-        a <a href=#concept-time id=table-sorting-model:concept-time>time</a>,
-        a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local>local date and time</a>,
-        a <a href=#concept-timezone id=table-sorting-model:concept-timezone>time-zone offset</a>,
-        a <a href=#concept-datetime id=table-sorting-model:concept-datetime>global date and time</a>,
-        a <a href=#concept-week id=table-sorting-model:concept-week>week</a>,
-        a year, or
-        a <a href=#concept-duration id=table-sorting-model:concept-duration>duration</a>);
-        abort these steps after completing this one.</p>
+          <dl class=switch><dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
+           order</var> is "a before b"<dd>Return that <var>a</var> comes before <var>b</var>.<dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
+           order</var> is "b before a"<dd>Return that <var>b</var> comes before <var>a</var>.<dt>If <var>direction</var> is <i>descending</i> and <var>tentative
+           order</var> is "a before b"<dd>Return that <var>b</var> comes before <var>a</var>.<dt>If <var>direction</var> is <i>descending</i> and <var>tentative
+           order</var> is "b before a"<dd>Return that <var>a</var> comes before <var>b</var>.</dl>
 
-        <p>If there is no machine-readable equivalent, then the type is "string" and the value is
-        the empty string.</p>
+         </ol>
 
-        <p>If the type is
-        a <a href=#concept-month id=table-sorting-model:concept-month-2>month</a>,
-        a <a href=#concept-date id=table-sorting-model:concept-date-2>date</a>,
-        a <a href=#concept-week id=table-sorting-model:concept-week-2>week</a>, or
-        a year,
-        then change the value to be the instant in time (with no time zone) that describes the
-        earliest moment that the value represents, and change the type to be
-        a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-2>local date and time</a>.</p>
+        <p>When the user agent is required to <dfn id=comparing-two-row-groups-using-the-th-element>compare two row groups using the <code>th</code> element</dfn> <var>th</var>,
+        with <var>a</var> and <var>b</var> being the two row groups respectively, the
+        user agent must run the following steps:</p>
 
-        <p class=example>For example, if the cell was <code><td><time>2011-11</time></code> then for sorting purposes the value is
-        interpreted as "2011-11-01T00:00:00.000" and the type is treated as a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-3>local date and time</a> rather than a <a href=#concept-month id=table-sorting-model:concept-month-3>month</a>.</p>
+        <ol><li><p>Let <var>x</var> be the <var>x</var>-coordinate of the slots that
+         <code id=table-sorting-model:the-th-element-16><a href=#the-th-element>th</a></code> covers in its <a href=#concept-table id=table-sorting-model:concept-table-7>table</a>.<li>
 
-        <p class=example>Similarly, if the cell was <code><td><time
-        datetime="2014">MMXIV</time></code> then for sorting purposes the value is interpreted as
-        "2014-01-01T00:00:00.000" and the type is treated as a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-4>local date and time</a> rather than a year.</p>
+          <p>Let <var>cell<sub>a</sub></var> be the element corresponding to the <a href=#concept-cell id=table-sorting-model:concept-cell-13>cell</a> in the first <a href=#concept-row id=table-sorting-model:concept-row-4>row</a> of group
+          <var>a</var> that covers the slot in that <a href=#concept-row id=table-sorting-model:concept-row-5>row</a> whose
+          <var>x</var>-coordinate is <var>x</var>.</p>
 
-       <li><p>The value is the element's <code id=table-sorting-model:textcontent><a href=#textcontent>textContent</a></code>. The type is "string".</ol>
+          <p>Let <var>cell<sub>b</sub></var> be the element corresponding to the <a href=#concept-cell id=table-sorting-model:concept-cell-14>cell</a> in the first <a href=#concept-row id=table-sorting-model:concept-row-6>row</a> of group
+          <var>b</var> that covers the slot in that <a href=#concept-row id=table-sorting-model:concept-row-7>row</a> whose
+          <var>x</var>-coordinate is <var>x</var>.</p>
 
-     <li>
+          
 
-      <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
-      equal, then: return "a before b" if <var>type<sub>a</sub></var> is earlier in the
-      following list than <var>type<sub>b</sub></var>, otherwise, return "b before a";
-      then, abort these steps.</p>
+          <p>In either case, if there's no <a href=#concept-cell id=table-sorting-model:concept-cell-15>cell</a> that actually covers
+          the slot, then use the value <i>null</i> instead.</p>
 
-      <ol class=brief><li><a href=#concept-time id=table-sorting-model:concept-time-2>time</a><li><a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date-2>yearless date</a><li><a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-5>local date and time</a><li><a href=#concept-datetime id=table-sorting-model:concept-datetime-2>global date and time</a><li><a href=#concept-timezone id=table-sorting-model:concept-timezone-2>time-zone offset</a><li><a href=#concept-duration id=table-sorting-model:concept-duration-2>duration</a><li>"string"</ol>
+         <li>
 
-     <li><p>If <var>value<sub>a</sub></var> and <var>value<sub>b</sub></var> are
-     equal, then return "equal" and abort these steps.<li>
+          <p>Let <var>type<sub>a</sub></var> and <var>value<sub>a</sub></var> be
+          the <a href=#type-and-value-of-the-cell id=table-sorting-model:type-and-value-of-the-cell>type and value of the cell</a> <var>cell<sub>a</sub></var>, as defined
+          below.</p>
 
-      <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
-      "string", then: if <var>value<sub>a</sub></var> is earlier than <var>value<sub>b</sub></var> then return "a before b" and abort these steps, otherwise,
-      return "b before a" and abort these steps.</p>
+          <p>Let <var>type<sub>b</sub></var> and <var>value<sub>b</sub></var> be
+          the <a href=#type-and-value-of-the-cell id=table-sorting-model:type-and-value-of-the-cell-2>type and value of the cell</a> <var>cell<sub>b</sub></var>, as defined
+          below.</p>
 
-      <p>Values sort in their natural order, with the following additional constraints:</p>
+          <p>The <dfn id=type-and-value-of-the-cell>type and value of the cell</dfn> <var>cell</var> are computed as follows.</p>
 
-      <p>For <a href=#concept-time id=table-sorting-model:concept-time-3>time</a> values, 00:00:00.000 is the earliest value and
-      23:59:59.999 is the latest value.</p>
+          <ol><li><p>If <var>cell</var> is <i>null</i>, then the type is "string" and the value is
+           the empty string; abort these steps.<li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace>inter-element whitespace</a> and nodes other than
+           <a href=#element id=table-sorting-model:element>Element</a> and <a href=#text id=table-sorting-model:text>Text</a> nodes, <var>cell</var> has only one child
+           and that child is a <code id=table-sorting-model:the-data-element><a href=#the-data-element>data</a></code> element, then the value is the value of that
+           <code id=table-sorting-model:the-data-element-2><a href=#the-data-element>data</a></code> element's <code id=table-sorting-model:attr-data-value><a href=#attr-data-value>value</a></code> attribute, if there is
+           one, or the empty string otherwise; the type is "string".</p>
 
-      <p>For <a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date-3>yearless date</a> values, 01-01 is the earliest
-      value and 12-31 is the latest value; 02-28 is earlier than 02-29 which is earlier than
-      03-01.</p>
+           <li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-2>inter-element whitespace</a> and nodes other than
+           <a href=#element id=table-sorting-model:element-2>Element</a> and <a href=#text id=table-sorting-model:text-2>Text</a> nodes, <var>cell</var> has only one child
+           and that child is a <code id=table-sorting-model:the-progress-element><a href=#the-progress-element>progress</a></code> element, then the value is the value of that
+           <code id=table-sorting-model:the-progress-element-2><a href=#the-progress-element>progress</a></code> element's <code id=table-sorting-model:attr-progress-value><a href=#attr-progress-value>value</a></code> attribute, if
+           there is one, or the empty string otherwise; the type is "string".</p>
 
-      <p>Values that are <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-6>local date and time</a> compare as
-      if they were in the same time zone.</p>
+           <li><p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-3>inter-element whitespace</a> and nodes other than
+           <a href=#element id=table-sorting-model:element-3>Element</a> and <a href=#text id=table-sorting-model:text-3>Text</a> nodes, <var>cell</var> has only one child
+           and that child is a <code id=table-sorting-model:the-meter-element><a href=#the-meter-element>meter</a></code> element, then the value is the value of that
+           <code id=table-sorting-model:the-meter-element-2><a href=#the-meter-element>meter</a></code> element's <code id=table-sorting-model:attr-meter-value><a href=#attr-meter-value>value</a></code> attribute, if there is
+           one, or the empty string otherwise; the type is "string".</p>
 
-      
+           <li>
 
-      <p>For <a href=#concept-timezone id=table-sorting-model:concept-timezone-3>time-zone offset</a> values, -23:59 is the earliest
-      value and +23:59 is the latest value.</p>
+            <p>If, ignoring <a href=#inter-element-whitespace id=table-sorting-model:inter-element-whitespace-4>inter-element whitespace</a> and nodes other than
+            <a href=#element id=table-sorting-model:element-4>Element</a> and <a href=#text id=table-sorting-model:text-4>Text</a> nodes, <var>cell</var> has only one
+            child and that child is a <code id=table-sorting-model:the-time-element><a href=#the-time-element>time</a></code> element, then the value is the
+            <a href="#machine-readable-equivalent-of-the-element's-contents" id="table-sorting-model:machine-readable-equivalent-of-the-element's-contents">machine-readable equivalent of the element's contents</a>, if any, and the type is
+            the kind of value that is thus obtained
+           (a <a href=#concept-month id=table-sorting-model:concept-month>month</a>,
+            a <a href=#concept-date id=table-sorting-model:concept-date>date</a>,
+            a <a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date>yearless date</a>,
+            a <a href=#concept-time id=table-sorting-model:concept-time>time</a>,
+            a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local>local date and time</a>,
+            a <a href=#concept-timezone id=table-sorting-model:concept-timezone>time-zone offset</a>,
+            a <a href=#concept-datetime id=table-sorting-model:concept-datetime>global date and time</a>,
+            a <a href=#concept-week id=table-sorting-model:concept-week>week</a>,
+            a year, or
+            a <a href=#concept-duration id=table-sorting-model:concept-duration>duration</a>);
+            abort these steps after completing this one.</p>
 
-      
+            <p>If there is no machine-readable equivalent, then the type is "string" and the value is
+            the empty string.</p>
 
-     <li>
+            <p>If the type is
+            a <a href=#concept-month id=table-sorting-model:concept-month-2>month</a>,
+            a <a href=#concept-date id=table-sorting-model:concept-date-2>date</a>,
+            a <a href=#concept-week id=table-sorting-model:concept-week-2>week</a>, or
+            a year,
+            then change the value to be the instant in time (with no time zone) that describes the
+            earliest moment that the value represents, and change the type to be
+            a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-2>local date and time</a>.</p>
 
-      <p>Let <var>components<sub>a</sub></var> be the result of <a href=#parsing-the-sort-key id=table-sorting-model:parsing-the-sort-key>parsing the sort
-      key</a> <var>value<sub>a</sub></var>.</p>
+            <p class=example>For example, if the cell was <code><td><time>2011-11</time></code> then for sorting purposes the value is
+            interpreted as "2011-11-01T00:00:00.000" and the type is treated as a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-3>local date and time</a> rather than a <a href=#concept-month id=table-sorting-model:concept-month-3>month</a>.</p>
 
-      <p>Let <var>components<sub>b</sub></var> be the result of <a href=#parsing-the-sort-key id=table-sorting-model:parsing-the-sort-key-2>parsing the sort
-      key</a> <var>value<sub>b</sub></var>.</p>
+            <p class=example>Similarly, if the cell was <code><td><time
+            datetime="2014">MMXIV</time></code> then for sorting purposes the value is interpreted as
+            "2014-01-01T00:00:00.000" and the type is treated as a <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-4>local date and time</a> rather than a year.</p>
 
-      <p>As described below, <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> are tuples consisting of a list of <var>n</var>
-      <i>numbers</i>, a list of <var>n</var> <i>number strings</i>, a list of <var>n</var>+1 <i>non-numeric strings</i>, and a list of 2<var>n</var>+1 <i>raw
-      strings</i>, for any non-negative integer value of <var>n</var> (zero or more).</p>
+           <li><p>The value is the element's <code id=table-sorting-model:textcontent><a href=#textcontent>textContent</a></code>. The type is "string".</ol>
 
-     <li>
+         <li>
 
-      <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison>locale-specific string
-      comparison</a> of <var>components<sub>a</sub></var>'s first <i>non-numeric
-      string</i> and <var>components<sub>b</sub></var>'s first <i>non-numeric string</i>,
-      in the context of <var>th</var>.</p>
+          <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
+          equal, then: return "a before b" if <var>type<sub>a</sub></var> is earlier in the
+          following list than <var>type<sub>b</sub></var>, otherwise, return "b before a";
+          then, abort these steps.</p>
 
-      <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
-      these steps.</p>
+          <ol class=brief><li><a href=#concept-time id=table-sorting-model:concept-time-2>time</a><li><a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date-2>yearless date</a><li><a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-5>local date and time</a><li><a href=#concept-datetime id=table-sorting-model:concept-datetime-2>global date and time</a><li><a href=#concept-timezone id=table-sorting-model:concept-timezone-2>time-zone offset</a><li><a href=#concept-duration id=table-sorting-model:concept-duration-2>duration</a><li>"string"</ol>
 
-     <li>
+         <li><p>If <var>value<sub>a</sub></var> and <var>value<sub>b</sub></var> are
+         equal, then return "equal" and abort these steps.<li>
 
-      <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> both have exactly one <i>number</i>, then run these
-      substeps:</p>
+          <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
+          "string", then: if <var>value<sub>a</sub></var> is earlier than <var>value<sub>b</sub></var> then return "a before b" and abort these steps, otherwise,
+          return "b before a" and abort these steps.</p>
 
-      <ol><li>
+          <p>Values sort in their natural order, with the following additional constraints:</p>
 
-        <p>If <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, return "a before b".</p>
+          <p>For <a href=#concept-time id=table-sorting-model:concept-time-3>time</a> values, 00:00:00.000 is the earliest value and
+          23:59:59.999 is the latest value.</p>
 
-        <p>If <var>components<sub>b</sub></var>'s <i>number</i> is less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a".</p>
+          <p>For <a href=#concept-yearless-date id=table-sorting-model:concept-yearless-date-3>yearless date</a> values, 01-01 is the earliest
+          value and 12-31 is the latest value; 02-28 is earlier than 02-29 which is earlier than
+          03-01.</p>
 
-       <li>
+          <p>Values that are <a href=#concept-datetime-local id=table-sorting-model:concept-datetime-local-6>local date and time</a> compare as
+          if they were in the same time zone.</p>
 
-        <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-2>locale-specific string
-        comparison</a> of <var>components<sub>a</sub></var>'s second <i>non-numeric
-        string</i> and <var>components<sub>b</sub></var>'s second <i>non-numeric
-        string</i>, in the context of <var>th</var>.</p>
+          
 
-        <p>If <var>order</var> is not "equal" then return <var>order</var> and
-        abort these steps.</p>
+          <p>For <a href=#concept-timezone id=table-sorting-model:concept-timezone-3>time-zone offset</a> values, -23:59 is the earliest
+          value and +23:59 is the latest value.</p>
 
-       <li>
+          
 
-        <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-3>locale-specific string
-        comparison</a> of <var>components<sub>a</sub></var>'s <i>number string</i> and
-        <var>components<sub>b</sub></var>'s <i>number string</i>, in the context of <var>th</var>.</p>
+         <li>
 
-        <p>If <var>order</var> is not "equal" then return <var>order</var> and
-        abort these steps.</p>
+          <p>Let <var>components<sub>a</sub></var> be the result of <a href=#parsing-the-sort-key id=table-sorting-model:parsing-the-sort-key>parsing the sort
+          key</a> <var>value<sub>a</sub></var>.</p>
 
-       </ol>
+          <p>Let <var>components<sub>b</sub></var> be the result of <a href=#parsing-the-sort-key id=table-sorting-model:parsing-the-sort-key-2>parsing the sort
+          key</a> <var>value<sub>b</sub></var>.</p>
 
-      <p>Otherwise, run these substeps:</p>
+          <p>As described below, <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> are tuples consisting of a list of <var>n</var>
+          <i>numbers</i>, a list of <var>n</var> <i>number strings</i>, a list of <var>n</var>+1 <i>non-numeric strings</i>, and a list of 2<var>n</var>+1 <i>raw
+          strings</i>, for any non-negative integer value of <var>n</var> (zero or more).</p>
 
-      <ol><li>
+         <li>
 
-        <p>If <var>components<sub>a</sub></var> has zero <i>numbers</i> but <var>components<sub>b</sub></var> has more than zero <i>numbers</i>, return "a before
-        b".</p>
+          <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison>locale-specific string
+          comparison</a> of <var>components<sub>a</sub></var>'s first <i>non-numeric
+          string</i> and <var>components<sub>b</sub></var>'s first <i>non-numeric string</i>,
+          in the context of <var>th</var>.</p>
 
-        <p>If <var>components<sub>b</sub></var> has zero <i>numbers</i> but <var>components<sub>a</sub></var> has more than zero <i>numbers</i>, return "b before
-        a".</p>
+          <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
+          these steps.</p>
 
-       <li>
+         <li>
 
-        
+          <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> both have exactly one <i>number</i>, then run these
+          substeps:</p>
 
-        <p>If <var>components<sub>a</sub></var> has one <i>number</i>, return "a before
-        b".</p>
+          <ol><li>
 
-        <p>If <var>components<sub>b</sub></var> has one <i>number</i>, return "b before
-        a".</p>
+            <p>If <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, return "a before b".</p>
 
-       <li>
+            <p>If <var>components<sub>b</sub></var>'s <i>number</i> is less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a".</p>
 
-        
+           <li>
 
-        <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> have more than one <i>number</i>, run these substeps:</p>
+            <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-2>locale-specific string
+            comparison</a> of <var>components<sub>a</sub></var>'s second <i>non-numeric
+            string</i> and <var>components<sub>b</sub></var>'s second <i>non-numeric
+            string</i>, in the context of <var>th</var>.</p>
 
-        <ol><li><p>Let <var>count</var> be the smaller of the number of <i>numbers</i> in <var>components<sub>a</sub></var> and the number of <i>numbers</i> in <var>components<sub>b</sub></var>.<li><p>For each <i>number</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> from the first to the <var>count</var>th, in
-         order: if <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, then return "a before b" and abort
-         these steps; otherwise, if <var>components<sub>b</sub></var>'s <i>number</i> is
-         less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a"
-         and abort these steps.<li>
+            <p>If <var>order</var> is not "equal" then return <var>order</var> and
+            abort these steps.</p>
 
-          <p>If <var>components<sub>a</sub></var> has fewer <i>numbers</i> than <var>components<sub>b</sub></var>, return "a before b" and abort these steps.</p>
+           <li>
 
-          <p>If <var>components<sub>b</sub></var> has fewer <i>numbers</i> than <var>components<sub>a</sub></var>, return "b before a" and abort these steps.</p>
+            <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-3>locale-specific string
+            comparison</a> of <var>components<sub>a</sub></var>'s <i>number string</i> and
+            <var>components<sub>b</sub></var>'s <i>number string</i>, in the context of <var>th</var>.</p>
 
-         <li><p>Let <var>index</var> be zero.<li>
+            <p>If <var>order</var> is not "equal" then return <var>order</var> and
+            abort these steps.</p>
 
-          <p><i>String loop</i>: Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-4>locale-specific
-          string comparison</a> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>number string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>number string</i>,
-          in the context of <var>th</var>.</p>
+           </ol>
 
-          <p>If <var>order</var> is not "equal" then return <var>order</var> and
-          abort these steps.</p>
+          <p>Otherwise, run these substeps:</p>
 
-         <li>
+          <ol><li>
 
-          <p>Increment <var>index</var>.</p>
+            <p>If <var>components<sub>a</sub></var> has zero <i>numbers</i> but <var>components<sub>b</sub></var> has more than zero <i>numbers</i>, return "a before
+            b".</p>
 
-         <li>
+            <p>If <var>components<sub>b</sub></var> has zero <i>numbers</i> but <var>components<sub>a</sub></var> has more than zero <i>numbers</i>, return "b before
+            a".</p>
 
-          <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-5>locale-specific string
-          comparison</a> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>separator string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>separator
-          string</i>, in the context of <var>th</var>.</p>
+           <li>
 
-          <p>If <var>order</var> is not "equal" then return <var>order</var> and
-          abort these steps.</p>
+            
 
+            <p>If <var>components<sub>a</sub></var> has one <i>number</i>, return "a before
+            b".</p>
+
+            <p>If <var>components<sub>b</sub></var> has one <i>number</i>, return "b before
+            a".</p>
+
+           <li>
+
+            
+
+            <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> have more than one <i>number</i>, run these substeps:</p>
+
+            <ol><li><p>Let <var>count</var> be the smaller of the number of <i>numbers</i> in <var>components<sub>a</sub></var> and the number of <i>numbers</i> in <var>components<sub>b</sub></var>.<li><p>For each <i>number</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> from the first to the <var>count</var>th, in
+             order: if <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, then return "a before b" and abort
+             these steps; otherwise, if <var>components<sub>b</sub></var>'s <i>number</i> is
+             less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a"
+             and abort these steps.<li>
+
+              <p>If <var>components<sub>a</sub></var> has fewer <i>numbers</i> than <var>components<sub>b</sub></var>, return "a before b" and abort these steps.</p>
+
+              <p>If <var>components<sub>b</sub></var> has fewer <i>numbers</i> than <var>components<sub>a</sub></var>, return "b before a" and abort these steps.</p>
+
+             <li><p>Let <var>index</var> be zero.<li>
+
+              <p><i>String loop</i>: Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-4>locale-specific
+              string comparison</a> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>number string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>number string</i>,
+              in the context of <var>th</var>.</p>
+
+              <p>If <var>order</var> is not "equal" then return <var>order</var> and
+              abort these steps.</p>
+
+             <li>
+
+              <p>Increment <var>index</var>.</p>
+
+             <li>
+
+              <p>Let <var>order</var> be the result of a <a href=#locale-specific-string-comparison id=table-sorting-model:locale-specific-string-comparison-5>locale-specific string
+              comparison</a> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>separator string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>separator
+              string</i>, in the context of <var>th</var>.</p>
+
+              <p>If <var>order</var> is not "equal" then return <var>order</var> and
+              abort these steps.</p>
+
+             <li>
+
+              <p>If <var>index</var> is less than the number of <i>numbers</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, jump back
+              to the step labeled <i>string loop</i>.</p>
+
+             </ol>
+
+           </ol>
+
          <li>
 
-          <p>If <var>index</var> is less than the number of <i>numbers</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, return
-          to the step labeled <i>string loop</i>.</p>
+          
 
-         </ol>
+          <p>Let <var>index</var> be zero.</p>
 
-       </ol>
+         <li>
 
-     <li>
+          <p>Run these substeps:</p>
 
-      
+          <ol><li>
 
-      <p>Let <var>index</var> be zero.</p>
+            <p><i>Final loop:</i> Let <var>order</var> be the result of a <a href=#raw-string-comparison id=table-sorting-model:raw-string-comparison>raw string
+            comparison</a> of <var>components<sub>a</sub></var>'s <var>n</var>th
+            <i>raw string</i> and <var>components<sub>b</sub></var>'s <var>n</var>th
+            <i>raw string</i>.</p>
 
-     <li>
+            <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
+            these steps.</p>
 
-      <p><i>Final loop:</i> Let <var>order</var> be the result of a <a href=#raw-string-comparison id=table-sorting-model:raw-string-comparison>raw string
-      comparison</a> of <var>components<sub>a</sub></var>'s <var>n</var>th
-      <i>raw string</i> and <var>components<sub>b</sub></var>'s <var>n</var>th
-      <i>raw string</i>.</p>
+           <li>
 
-      <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
-      these steps.</p>
+            <p>Increment <var>index</var>.</p>
 
-     <li>
+           <li>
 
-      <p>Increment <var>index</var>.</p>
+            <p>If <var>index</var> is less than the number of <i>raw strings</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, jump back
+            to the step labeled <i>final loop</i>.</p>
 
-     <li>
+           </ol>
 
-      <p>If <var>index</var> is less than the number of <i>raw strings</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, return
-      to the step labeled <i>final loop</i>.</p>
+         <li>
 
-     <li>
+          <p>Return "equal".</p>
 
-      <p>Return "equal".</p>
+         </ol>
 
-     </ol>
+       <li><p>Let <var>new order</var> be a list of <code id=table-sorting-model:the-tr-element-19><a href=#the-tr-element>tr</a></code> elements consisting of the
+       <code id=table-sorting-model:the-tr-element-20><a href=#the-tr-element>tr</a></code> elements of all the groups in the newly ordered <var>groups</var>, with
+       the <code id=table-sorting-model:the-tr-element-21><a href=#the-tr-element>tr</a></code> elements being in the same order as the groups to which they belong are in
+       <var>groups</var>, and the <code id=table-sorting-model:the-tr-element-22><a href=#the-tr-element>tr</a></code> elements within each such group themselves
+       being ordered in <a href=#tree-order id=table-sorting-model:tree-order-4>tree order</a>.<li><p><a href=#concept-node-remove id=table-sorting-model:concept-node-remove>Remove</a> all the <code id=table-sorting-model:the-tr-element-23><a href=#the-tr-element>tr</a></code> elements in <var>new order</var> from their parents, in <a href=#tree-order id=table-sorting-model:tree-order-5>tree order</a>.<li><p><a href=#concept-node-insert id=table-sorting-model:concept-node-insert>Insert</a> all the <code id=table-sorting-model:the-tr-element-24><a href=#the-tr-element>tr</a></code> elements in <var>new order</var> into the DOM at the location of <var>insertion point</var>, in
+       the order these elements are found in <var>new order</var>.<li><p>Remove <var>insertion point</var> from the DOM.</ol>
 
-   <li><p>Let <var>new order</var> be a list of <code id=table-sorting-model:the-tr-element-19><a href=#the-tr-element>tr</a></code> elements consisting of the
-   <code id=table-sorting-model:the-tr-element-20><a href=#the-tr-element>tr</a></code> elements of all the groups in the newly ordered <var>groups</var>, with
-   the <code id=table-sorting-model:the-tr-element-21><a href=#the-tr-element>tr</a></code> elements being in the same order as the groups to which they belong are in
-   <var>groups</var>, and the <code id=table-sorting-model:the-tr-element-22><a href=#the-tr-element>tr</a></code> elements within each such group themselves
-   being ordered in <a href=#tree-order id=table-sorting-model:tree-order-4>tree order</a>.<li><p><a href=#concept-node-remove id=table-sorting-model:concept-node-remove>Remove</a> all the <code id=table-sorting-model:the-tr-element-23><a href=#the-tr-element>tr</a></code> elements in <var>new order</var> from their parents, in <a href=#tree-order id=table-sorting-model:tree-order-5>tree order</a>.<li><p><a href=#concept-node-insert id=table-sorting-model:concept-node-insert>Insert</a> all the <code id=table-sorting-model:the-tr-element-24><a href=#the-tr-element>tr</a></code> elements in <var>new order</var> into the DOM at the location of <var>insertion point</var>, in
-   the order these elements are found in <var>new order</var>.<li><p>Remove <var>insertion point</var> from the DOM.<li><p><i>Increment loop</i>: If there are no <code id=table-sorting-model:the-tr-element-25><a href=#the-tr-element>tr</a></code> or <code id=table-sorting-model:the-tbody-element-5><a href=#the-tbody-element>tbody</a></code> children of
-   <var>table</var> that are later siblings of the element pointed to by <var>row
-   collection cursor</var>, then jump to the step labeled <i>end</i> below.<li><p>Let <var>row collection cursor</var> point to the next <code id=table-sorting-model:the-tr-element-26><a href=#the-tr-element>tr</a></code> or
-   <code id=table-sorting-model:the-tbody-element-6><a href=#the-tbody-element>tbody</a></code> child of <var>table</var> that is a later sibling of the element
-   pointed to by <var>row collection cursor</var>.<li><p>Return to the step labeled <i>row loop</i> above.<li><p><i>End</i>: Set <var>table</var>'s <a href=#currently-sorting-flag id=table-sorting-model:currently-sorting-flag-3>currently-sorting flag</a> to
+     <li><p><i>Increment loop</i>: If there are no <code id=table-sorting-model:the-tr-element-25><a href=#the-tr-element>tr</a></code> or <code id=table-sorting-model:the-tbody-element-5><a href=#the-tbody-element>tbody</a></code> children of
+     <var>table</var> that are later siblings of the element pointed to by <var>row
+     collection cursor</var>, then jump to the step labeled <i>end</i> below.<li><p>Let <var>row collection cursor</var> point to the next <code id=table-sorting-model:the-tr-element-26><a href=#the-tr-element>tr</a></code> or
+     <code id=table-sorting-model:the-tbody-element-6><a href=#the-tbody-element>tbody</a></code> child of <var>table</var> that is a later sibling of the element
+     pointed to by <var>row collection cursor</var>.<li><p>Jump back to the step labeled <i>row loop</i> above.</ol>
+
+   <li><p><i>End</i>: Set <var>table</var>'s <a href=#currently-sorting-flag id=table-sorting-model:currently-sorting-flag-3>currently-sorting flag</a> to
    false.</ol>
 
   <p>When a user agent is to <dfn id=parsing-the-sort-key>parse the sort key</dfn> <var>value</var>, it must run the following steps. These return a tuple consisting of a list

Modified: source
===================================================================
--- source	2014-09-17 22:43:04 UTC (rev 8783)
+++ source	2014-09-17 22:58:28 UTC (rev 8784)
@@ -38645,584 +38645,654 @@
    corresponding to a <code>thead</code> element, then set <var>ignore first group</var> to
    true. Otherwise, set it to false.</p></li>
 
-   <li><p><i>Row loop</i>: Let <var>rows</var> be an empty list of <code>tr</code>
-   elements.</p></li>
-
    <li>
 
-    <p>Run the appropriate steps from the following list:</p>
+    <p>Run these substeps:</p>
 
-    <dl class="switch">
+    <ol>
 
-     <dt>If <var>row collection cursor</var> points to a <code>tr</code> element
+     <li><p><i>Row loop</i>: Let <var>rows</var> be an empty list of <code>tr</code>
+     elements.</p></li>
 
-     <dd>
+     <li>
 
+      <p>Run these substeps:</p>
+
       <ol>
 
-       <li><p><i>Collect</i>: Append the element pointed to by <var>row collection
-       cursor</var> to <var>rows</var>.</p></li>
+       <li>
 
-       <li><p>If there are no <code>tr</code> or <code>tbody</code> children of <var>table</var> that are later siblings of the element pointed to by <var>row
-       collection cursor</var>, or if the next such child is a <code>tbody</code> element, then jump
-       to the step labeled <i>group</i> below.</p></li>
+        <p>Run the appropriate steps from the following list:</p>
 
-       <li><p>Let <var>row collection cursor</var> point to the next <code>tr</code> child
-       of <var>table</var> that is a later sibling of the element pointed to by <var>row collection cursor</var>.</p></li>
+        <dl class="switch">
 
-       <li><p>Return to the step labeled <i>collect</i> above.</p></li>
+         <dt>If <var>row collection cursor</var> points to a <code>tr</code> element
 
-      </ol>
+         <dd>
 
-     </dd>
+          <ol>
 
+           <li><p><i>Collect</i>: Append the element pointed to by <var>row collection
+           cursor</var> to <var>rows</var>.</p></li>
 
-     <dt>If <var>row collection cursor</var> points to a <code>tbody</code> element
+           <li><p>If there are no <code>tr</code> or <code>tbody</code> children of <var>table</var> that are later siblings of the element pointed to by <var>row
+           collection cursor</var>, or if the next such child is a <code>tbody</code> element, then jump
+           to the step labeled <i>group</i> below.</p></li>
 
-     <dd>
+           <li><p>Let <var>row collection cursor</var> point to the next <code>tr</code> child
+           of <var>table</var> that is a later sibling of the element pointed to by <var>row collection cursor</var>.</p></li>
 
-      <ol>
+           <li><p>Jump back to the step labeled <i>collect</i> above.</p></li>
 
-       <li><p>Place all the <code>tr</code> element children of the element pointed to by <var>row collection cursor</var> into <var>rows</var>, in <span>tree
-       order</span>.</p></li>
+          </ol>
 
-       <li><p>If <var>rows</var> is empty, jump to the step labeled <i>increment loop</i>
-       below.</p></li>
+         </dd>
 
-      </ol>
 
-     </dd>
+         <dt>If <var>row collection cursor</var> points to a <code>tbody</code> element
 
-    </dl>
+         <dd>
 
-   </li>
+          <ol>
 
-   <li><p><i>Group</i>: Let <var>groups</var> be an empty list of groups of <code>tr</code>
-   elements.</p></li>
+           <li><p>Place all the <code>tr</code> element children of the element pointed to by <var>row collection cursor</var> into <var>rows</var>, in <span>tree
+           order</span>.</p></li>
 
-   <li><p>Let <var>group</var> be an empty group of <code>tr</code> elements.</p></li>
+           <li><p>If <var>rows</var> is empty, jump to the step labeled <i>increment loop</i>
+           below.</p></li>
 
-   <li><p>Let <var>group cursor</var> be a pointer to an element, initially pointing at the
-   first <code>tr</code> element in <var>rows</var>.</p></li>
+          </ol>
 
-   <li><p><i>Start group</i>: Let <var>pending rows in group</var> be 1.</p></li>
+         </dd>
 
-   <li><p><i>Group loop</i>: Append the <code>tr</code> element pointed to by <var>group
-   cursor</var> to <var>group</var>.</p></li>
+        </dl>
 
-   <li><p>If there are any <span data-x="concept-cell">cells</span> whose highest <span
-   data-x="concept-row">row</span>'s element is the one pointed to by <var>group
-   cursor</var>, then let <var>tallest height</var> be the number of rows covered by the
-   tallest such <span data-x="concept-cell">cell</span>.</p></li>
+       </li>
 
-   <li><p>If <var>tallest height</var> is greater than <var>pending rows in
-   group</var> then set <var>pending rows in group</var> to <var>tallest
-   height</var>.</p></li>
+       <li><p><i>Group</i>: Let <var>groups</var> be an empty list of groups of <code>tr</code>
+       elements.</p></li>
 
-   <li><p>Decrement <var>pending rows in group</var> by one.</p></li>
+       <li><p>Let <var>group</var> be an empty group of <code>tr</code> elements.</p></li>
 
-   <li><p>Let <var>group cursor</var> point to the next <code>tr</code> element in <var>rows</var>, if any; otherwise, let it be null.</p></li>
+       <li><p>Let <var>group cursor</var> be a pointer to an element, initially pointing at the
+       first <code>tr</code> element in <var>rows</var>.</p></li>
 
-   <li><p>If <var>group cursor</var> is not null and <var>pending rows in
-   group</var> is not zero, return to the step labeled <i>group loop</i>.</p></li>
+       <li>
 
-   <li><p>Append a new group to <var>groups</var> consisting of the <code>tr</code>
-   elements in <var>group</var>.</p></li>
+        <p>Run these substeps:</p>
 
-   <li><p>Empty <var>group</var>.</p></li>
+        <ol>
 
-   <li><p>If <var>group cursor</var> is not null, then return to the step labeled <i>start
-   group</i>.</p></li>
+         <li><p><i>Start group</i>: Let <var>pending rows in group</var> be 1.</p></li>
 
-   <li><p>If <var>ignore first group</var> is true, then drop the first group in <var>groups</var> and set <var>ignore first group</var> to false.</p></li>
+         <li>
 
-   <li><p><i>Drop leading header groups</i>: If <var>groups</var> is now empty, jump to the
-   step labeled <i>increment loop</i> below.</p></li>
+          <p>Run these substeps:</p>
 
-   <!-- if you insert steps here, update the next step -->
+          <ol>
 
-   <li><p>If the first group of <var>groups</var> consists of <code>tr</code> elements
-   whose element children are all <code>th</code> elements, then drop the first group in <var>groups</var> and return to the previous step (labeled <i>drop leading header
-   groups</i>).</p></li>
+           <li><p><i>Group loop</i>: Append the <code>tr</code> element pointed to by <var>group
+           cursor</var> to <var>group</var>.</p></li>
 
-   <li><p>Let <var>insertion point</var> be a placeholder in a DOM tree, which can be used
-   to reinsert nodes at a specific point in the DOM. Insert <var>insertion point</var> into
-   the parent of the first <code>tr</code> element of the first group in <var>groups</var>,
-   immediately before that <code>tr</code> element.</p></li>
+           <li><p>If there are any <span data-x="concept-cell">cells</span> whose highest <span
+           data-x="concept-row">row</span>'s element is the one pointed to by <var>group
+           cursor</var>, then let <var>tallest height</var> be the number of rows covered by the
+           tallest such <span data-x="concept-cell">cell</span>.</p></li>
 
-   <li>
+           <li><p>If <var>tallest height</var> is greater than <var>pending rows in
+           group</var> then set <var>pending rows in group</var> to <var>tallest
+           height</var>.</p></li>
 
-    <p>Sort the groups in <var>groups</var>, using the following algorithm to decide the
-    relative order of any two groups <var>a</var> and <var>b</var> (the algorithm
-    either returns that <var>a</var> comes before <var>b</var>, or that <var>b</var> comes before <var>a</var>):</p>
+           <li><p>Decrement <var>pending rows in group</var> by one.</p></li>
 
-    <ol>
+           <li><p>Let <var>group cursor</var> point to the next <code>tr</code> element in <var>rows</var>, if any; otherwise, let it be null.</p></li>
 
-     <li><p>Let <var>key index</var> be an index into <var>key heading
-     cells</var>, initially denoting the first element in the list.</p></li>
+           <li><p>If <var>group cursor</var> is not null and <var>pending rows in
+           group</var> is not zero, jump back to the step labeled <i>group loop</i>.</p></li>
 
-     <li><p>Let <var>direction</var> be a sort direction, initially <i>ascending</i>. Its
-     other possible value is <i>descending</i>. When <var>direction</var> is
-     <i>toggled</i>, that means that if its value is <i>ascending</i>, it must be changed to
-     <i>descending</i>, and when its value is <i>descending</i>, it must be changed to
-     <i>ascending</i>.</p></li>
+          </ol>
 
-     <li><p><i>Column loop</i>: Let <var>th</var> be the <var>key index</var>th
-     <code>th</code> in <var>key heading cells</var>.</p></li>
+         </li>
 
-     <li><p>If <var>th</var>'s <code data-x="attr-th-sorted">sorted</code> attribute's
-     <span>column sort direction</span> is <i>reversed</i>, then toggle <var>direction</var>.</p></li>
+         <li><p>Append a new group to <var>groups</var> consisting of the <code>tr</code>
+         elements in <var>group</var>.</p></li>
 
-     <li><p>Let <var>tentative order</var> be the result of <span>comparing two row groups
-     using the <code>th</code> element</span> <var>th</var>, with <var>a</var> and
-     <var>b</var> as the rows.</p></li>
+         <li><p>Empty <var>group</var>.</p></li>
 
-     <li><p>If <var>tentative order</var> is not "equal", then jump to the step labeled
-     <i>return</i> below.</p></li>
+         <li><p>If <var>group cursor</var> is not null, then jump back to the step labeled <i>start
+         group</i>.</p></li>
 
-     <li><p>Increment <var>key index</var>.</p></li>
+        </ol>
 
-     <li><p>If <var>key index</var> still denotes a <code>th</code> element in <var>key heading cells</var>, then jump back to the step above labeled <i>column
-     loop</i>.</p></li>
+       </li>
 
-     <li><p>If <var>a</var>'s <code>tr</code> elements precede <var>b</var>'s in
-     <span>tree order</span>, then let <var>tentative order</var> be "a before b".
-     Otherwise, let <var>tentative order</var> be "b before a".</p></li>
+       <li><p>If <var>ignore first group</var> is true, then drop the first group in <var>groups</var> and set <var>ignore first group</var> to false.</p></li>
 
-     <li><p><i>Return</i>: Return the relative order given by the matching option from the following
-     list:</p>
+       <li>
 
-      <dl class="switch">
+        <p>Run these steps:</p>
 
-       <dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
-       order</var> is "a before b"</dt>
+        <ol>
 
-       <dd>Return that <var>a</var> comes before <var>b</var>.</dd>
+         <li><p><i>Drop leading header groups</i>: If <var>groups</var> is now empty, jump to the
+         step labeled <i>increment loop</i> below.</p></li>
 
+         <!-- if you insert steps here, update the next step -->
 
-       <dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
-       order</var> is "b before a"</dt>
+         <li><p>If the first group of <var>groups</var> consists of <code>tr</code> elements
+         whose element children are all <code>th</code> elements, then drop the first group in <var>groups</var> and jump back to the previous step (labeled <i>drop leading header
+         groups</i>).</p></li>
 
-       <dd>Return that <var>b</var> comes before <var>a</var>.</dd>
+        </ol>
 
+       </li>
 
-       <dt>If <var>direction</var> is <i>descending</i> and <var>tentative
-       order</var> is "a before b"</dt>
+       <li><p>Let <var>insertion point</var> be a placeholder in a DOM tree, which can be used
+       to reinsert nodes at a specific point in the DOM. Insert <var>insertion point</var> into
+       the parent of the first <code>tr</code> element of the first group in <var>groups</var>,
+       immediately before that <code>tr</code> element.</p></li>
 
-       <dd>Return that <var>b</var> comes before <var>a</var>.</dd>
+       <li>
 
+        <p>Sort the groups in <var>groups</var>, using the following algorithm to decide the
+        relative order of any two groups <var>a</var> and <var>b</var> (the algorithm
+        either returns that <var>a</var> comes before <var>b</var>, or that <var>b</var> comes before <var>a</var>):</p>
 
-       <dt>If <var>direction</var> is <i>descending</i> and <var>tentative
-       order</var> is "b before a"</dt>
+        <ol>
 
-       <dd>Return that <var>a</var> comes before <var>b</var>.</dd>
+         <li><p>Let <var>key index</var> be an index into <var>key heading
+         cells</var>, initially denoting the first element in the list.</p></li>
 
-      </dl>
+         <li><p>Let <var>direction</var> be a sort direction, initially <i>ascending</i>. Its
+         other possible value is <i>descending</i>. When <var>direction</var> is
+         <i>toggled</i>, that means that if its value is <i>ascending</i>, it must be changed to
+         <i>descending</i>, and when its value is <i>descending</i>, it must be changed to
+         <i>ascending</i>.</p></li>
 
-     </li>
+         <li>
 
-    </ol>
+          <p>Run these substeps:</p>
 
-    <p>When the user agent is required to <dfn data-x="comparing two row groups using the th
-    element">compare two row groups using the <code>th</code> element</dfn> <var>th</var>,
-    with <var>a</var> and <var>b</var> being the two row groups respectively, the
-    user agent must run the following steps:</p>
+          <ol>
 
-    <ol>
+           <li><p><i>Column loop</i>: Let <var>th</var> be the <var>key index</var>th
+           <code>th</code> in <var>key heading cells</var>.</p></li>
 
-     <li><p>Let <var>x</var> be the <var>x</var>-coordinate of the slots that
-     <code>th</code> covers in its <span data-x="concept-table">table</span>.</p></li>
+           <li><p>If <var>th</var>'s <code data-x="attr-th-sorted">sorted</code> attribute's
+           <span>column sort direction</span> is <i>reversed</i>, then toggle <var>direction</var>.</p></li>
 
-     <li>
+           <li><p>Let <var>tentative order</var> be the result of <span>comparing two row groups
+           using the <code>th</code> element</span> <var>th</var>, with <var>a</var> and
+           <var>b</var> as the rows.</p></li>
 
-      <p>Let <var>cell<sub>a</sub></var> be the element corresponding to the <span
-      data-x="concept-cell">cell</span> in the first <span data-x="concept-row">row</span> of group
-      <var>a</var> that covers the slot in that <span data-x="concept-row">row</span> whose
-      <var>x</var>-coordinate is <var>x</var>.</p>
+           <li><p>If <var>tentative order</var> is not "equal", then jump to the step labeled
+           <i>return</i> below.</p></li>
 
-      <p>Let <var>cell<sub>b</sub></var> be the element corresponding to the <span
-      data-x="concept-cell">cell</span> in the first <span data-x="concept-row">row</span> of group
-      <var>b</var> that covers the slot in that <span data-x="concept-row">row</span> whose
-      <var>x</var>-coordinate is <var>x</var>.</p>
+           <li><p>Increment <var>key index</var>.</p></li>
 
-      <!-- there can't be two cells that cover the slot, unusually, because the only way that can
-      happen is if there's a cell that's extended into this row from above, and the groups, by
-      virtue of the way they are created above, never have cells that extend into them from above.
-      -->
+           <li><p>If <var>key index</var> still denotes a <code>th</code> element in <var>key heading cells</var>, then jump back to the step above labeled <i>column
+           loop</i>.</p></li>
 
-      <p>In either case, if there's no <span data-x="concept-cell">cell</span> that actually covers
-      the slot, then use the value <i>null</i> instead.</p>
+          </ol>
 
-     </li>
+         </li>
 
-     <li>
+         <li><p>If <var>a</var>'s <code>tr</code> elements precede <var>b</var>'s in
+         <span>tree order</span>, then let <var>tentative order</var> be "a before b".
+         Otherwise, let <var>tentative order</var> be "b before a".</p></li>
 
-      <p>Let <var>type<sub>a</sub></var> and <var>value<sub>a</sub></var> be
-      the <span>type and value of the cell</span> <var>cell<sub>a</sub></var>, as defined
-      below.</p>
+         <li><p><i>Return</i>: Return the relative order given by the matching option from the following
+         list:</p>
 
-      <p>Let <var>type<sub>b</sub></var> and <var>value<sub>b</sub></var> be
-      the <span>type and value of the cell</span> <var>cell<sub>b</sub></var>, as defined
-      below.</p>
+          <dl class="switch">
 
-      <p>The <dfn>type and value of the cell</dfn> <var>cell</var> are computed as follows.</p>
+           <dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
+           order</var> is "a before b"</dt>
 
-      <ol>
+           <dd>Return that <var>a</var> comes before <var>b</var>.</dd>
 
-       <li><p>If <var>cell</var> is <i>null</i>, then the type is "string" and the value is
-       the empty string; abort these steps.</p></li>
 
-       <li><p>If, ignoring <span>inter-element whitespace</span> and nodes other than
-       <span>Element</span> and <span>Text</span> nodes, <var>cell</var> has only one child
-       and that child is a <code>data</code> element, then the value is the value of that
-       <code>data</code> element's <code data-x="attr-data-value">value</code> attribute, if there is
-       one, or the empty string otherwise; the type is "string".</p>
+           <dt>If <var>direction</var> is <i>ascending</i> and <var>tentative
+           order</var> is "b before a"</dt>
 
-       <li><p>If, ignoring <span>inter-element whitespace</span> and nodes other than
-       <span>Element</span> and <span>Text</span> nodes, <var>cell</var> has only one child
-       and that child is a <code>progress</code> element, then the value is the value of that
-       <code>progress</code> element's <code data-x="attr-progress-value">value</code> attribute, if
-       there is one, or the empty string otherwise; the type is "string".</p>
+           <dd>Return that <var>b</var> comes before <var>a</var>.</dd>
 
-       <li><p>If, ignoring <span>inter-element whitespace</span> and nodes other than
-       <span>Element</span> and <span>Text</span> nodes, <var>cell</var> has only one child
-       and that child is a <code>meter</code> element, then the value is the value of that
-       <code>meter</code> element's <code data-x="attr-meter-value">value</code> attribute, if there is
-       one, or the empty string otherwise; the type is "string".</p>
 
-       <li>
+           <dt>If <var>direction</var> is <i>descending</i> and <var>tentative
+           order</var> is "a before b"</dt>
 
-        <p>If, ignoring <span>inter-element whitespace</span> and nodes other than
-        <span>Element</span> and <span>Text</span> nodes, <var>cell</var> has only one
-        child and that child is a <code>time</code> element, then the value is the
-        <span>machine-readable equivalent of the element's contents</span>, if any, and the type is
-        the kind of value that is thus obtained
-       (a <span data-x="concept-month">month</span>,
-        a <span data-x="concept-date">date</span>,
-        a <span data-x="concept-yearless-date">yearless date</span>,
-        a <span data-x="concept-time">time</span>,
-        a <span data-x="concept-datetime-local">local date and time</span>,
-        a <span data-x="concept-timezone">time-zone offset</span>,
-        a <span data-x="concept-datetime">global date and time</span>,
-        a <span data-x="concept-week">week</span>,
-        a year, or
-        a <span data-x="concept-duration">duration</span>);
-        abort these steps after completing this one.</p>
+           <dd>Return that <var>b</var> comes before <var>a</var>.</dd>
 
-        <p>If there is no machine-readable equivalent, then the type is "string" and the value is
-        the empty string.</p>
 
-        <p>If the type is
-        a <span data-x="concept-month">month</span>,
-        a <span data-x="concept-date">date</span>,
-        a <span data-x="concept-week">week</span>, or
-        a year,
-        then change the value to be the instant in time (with no time zone) that describes the
-        earliest moment that the value represents, and change the type to be
-        a <span data-x="concept-datetime-local">local date and time</span>.</p>
+           <dt>If <var>direction</var> is <i>descending</i> and <var>tentative
+           order</var> is "b before a"</dt>
 
-        <p class="example">For example, if the cell was <code
-        data-x=""><td><time>2011-11</time></code> then for sorting purposes the value is
-        interpreted as "2011-11-01T00:00:00.000" and the type is treated as a <span
-        data-x="concept-datetime-local">local date and time</span> rather than a <span
-        data-x="concept-month">month</span>.</p>
+           <dd>Return that <var>a</var> comes before <var>b</var>.</dd>
 
-        <p class="example">Similarly, if the cell was <code data-x=""><td><time
-        datetime="2014">MMXIV</time></code> then for sorting purposes the value is interpreted as
-        "2014-01-01T00:00:00.000" and the type is treated as a <span
-        data-x="concept-datetime-local">local date and time</span> rather than a year.</p>
+          </dl>
 
-       </li>
+         </li>
 
-       <li><p>The value is the element's <code>textContent</code>. The type is "string".</p></li>
+        </ol>
 
-      </ol>
+        <p>When the user agent is required to <dfn data-x="comparing two row groups using the th
+        element">compare two row groups using the <code>th</code> element</dfn> <var>th</var>,
+        with <var>a</var> and <var>b</var> being the two row groups respectively, the
+        user agent must run the following steps:</p>
 
-     </li>
+        <ol>
 
-     <li>
+         <li><p>Let <var>x</var> be the <var>x</var>-coordinate of the slots that
+         <code>th</code> covers in its <span data-x="concept-table">table</span>.</p></li>
 
-      <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
-      equal, then: return "a before b" if <var>type<sub>a</sub></var> is earlier in the
-      following list than <var>type<sub>b</sub></var>, otherwise, return "b before a";
-      then, abort these steps.</p>
+         <li>
 
-      <ol class="brief">
-       <li><span data-x="concept-time">time</span></li>
-       <li><span data-x="concept-yearless-date">yearless date</span></li>
-       <li><span data-x="concept-datetime-local">local date and time</span></li>
-       <li><span data-x="concept-datetime">global date and time</span></li>
-       <li><span data-x="concept-timezone">time-zone offset</span></li>
-       <li><span data-x="concept-duration">duration</span></li>
-       <li>"string"</li>
-      </ol>
+          <p>Let <var>cell<sub>a</sub></var> be the element corresponding to the <span
+          data-x="concept-cell">cell</span> in the first <span data-x="concept-row">row</span> of group
+          <var>a</var> that covers the slot in that <span data-x="concept-row">row</span> whose
+          <var>x</var>-coordinate is <var>x</var>.</p>
 
-     </li>
+          <p>Let <var>cell<sub>b</sub></var> be the element corresponding to the <span
+          data-x="concept-cell">cell</span> in the first <span data-x="concept-row">row</span> of group
+          <var>b</var> that covers the slot in that <span data-x="concept-row">row</span> whose
+          <var>x</var>-coordinate is <var>x</var>.</p>
 
-     <li><p>If <var>value<sub>a</sub></var> and <var>value<sub>b</sub></var> are
-     equal, then return "equal" and abort these steps.</p></li>
+          <!-- there can't be two cells that cover the slot, unusually, because the only way that can
+          happen is if there's a cell that's extended into this row from above, and the groups, by
+          virtue of the way they are created above, never have cells that extend into them from above.
+          -->
 
-     <li>
+          <p>In either case, if there's no <span data-x="concept-cell">cell</span> that actually covers
+          the slot, then use the value <i>null</i> instead.</p>
 
-      <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
-      "string", then: if <var>value<sub>a</sub></var> is earlier than <var>value<sub>b</sub></var> then return "a before b" and abort these steps, otherwise,
-      return "b before a" and abort these steps.</p>
+         </li>
 
-      <p>Values sort in their natural order, with the following additional constraints:</p>
+         <li>
 
-      <p>For <span data-x="concept-time">time</span> values, 00:00:00.000 is the earliest value and
-      23:59:59.999 is the latest value.</p>
+          <p>Let <var>type<sub>a</sub></var> and <var>value<sub>a</sub></var> be
+          the <span>type and value of the cell</span> <var>cell<sub>a</sub></var>, as defined
+          below.</p>
 
-      <p>For <span data-x="concept-yearless-date">yearless date</span> values, 01-01 is the earliest
-      value and 12-31 is the latest value; 02-28 is earlier than 02-29 which is earlier than
-      03-01.</p>
+          <p>Let <var>type<sub>b</sub></var> and <var>value<sub>b</sub></var> be
+          the <span>type and value of the cell</span> <var>cell<sub>b</sub></var>, as defined
+          below.</p>
 
-      <p>Values that are <span data-x="concept-datetime-local">local date and time</span> compare as
-      if they were in the same time zone.</p>
+          <p>The <dfn>type and value of the cell</dfn> <var>cell</var> are computed as follows.</p>
 
-      <!-- no ambiguity for <span data-x="concept-datetime">global date and time</span> -->
+          <ol>
 
-      <p>For <span data-x="concept-timezone">time-zone offset</span> values, -23:59 is the earliest
-      value and +23:59 is the latest value.</p>
+           <li><p>If <var>cell</var> is <i>null</i>, then the type is "string" and the value is
+           the empty string; abort these steps.</p></li>
 
-      <!-- MONTHS: <span data-x="concept-duration">duration</span> is unambiguous until we add months -->
+           <li><p>If, ignoring <span>inter-element whitespace</span> and nodes other than
+           <span>Element</span> and <span>Text</span> nodes, <var>cell</var> has only one child
+           and that child is a <code>data</code> element, then the value is the value of that
+           <code>data</code> element's <code data-x="attr-data-value">value</code> attribute, if there is
+           one, or the empty string otherwise; the type is "string".</p>
 
-     </li>
+           <li><p>If, ignoring <span>inter-element whitespace</span> and nodes other than
+           <span>Element</span> and <span>Text</span> nodes, <var>cell</var> has only one child
+           and that child is a <code>progress</code> element, then the value is the value of that
+           <code>progress</code> element's <code data-x="attr-progress-value">value</code> attribute, if
+           there is one, or the empty string otherwise; the type is "string".</p>
 
-     <!-- At this point we know that they are both strings and they're not equal. -->
+           <li><p>If, ignoring <span>inter-element whitespace</span> and nodes other than
+           <span>Element</span> and <span>Text</span> nodes, <var>cell</var> has only one child
+           and that child is a <code>meter</code> element, then the value is the value of that
+           <code>meter</code> element's <code data-x="attr-meter-value">value</code> attribute, if there is
+           one, or the empty string otherwise; the type is "string".</p>
 
-     <li>
+           <li>
 
-      <p>Let <var>components<sub>a</sub></var> be the result of <span>parsing the sort
-      key</span> <var>value<sub>a</sub></var>.</p>
+            <p>If, ignoring <span>inter-element whitespace</span> and nodes other than
+            <span>Element</span> and <span>Text</span> nodes, <var>cell</var> has only one
+            child and that child is a <code>time</code> element, then the value is the
+            <span>machine-readable equivalent of the element's contents</span>, if any, and the type is
+            the kind of value that is thus obtained
+           (a <span data-x="concept-month">month</span>,
+            a <span data-x="concept-date">date</span>,
+            a <span data-x="concept-yearless-date">yearless date</span>,
+            a <span data-x="concept-time">time</span>,
+            a <span data-x="concept-datetime-local">local date and time</span>,
+            a <span data-x="concept-timezone">time-zone offset</span>,
+            a <span data-x="concept-datetime">global date and time</span>,
+            a <span data-x="concept-week">week</span>,
+            a year, or
+            a <span data-x="concept-duration">duration</span>);
+            abort these steps after completing this one.</p>
 
-      <p>Let <var>components<sub>b</sub></var> be the result of <span>parsing the sort
-      key</span> <var>value<sub>b</sub></var>.</p>
+            <p>If there is no machine-readable equivalent, then the type is "string" and the value is
+            the empty string.</p>
 
-      <p>As described below, <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> are tuples consisting of a list of <var>n</var>
-      <i>numbers</i>, a list of <var>n</var> <i>number strings</i>, a list of <var>n</var>+1 <i>non-numeric strings</i>, and a list of 2<var>n</var>+1 <i>raw
-      strings</i>, for any non-negative integer value of <var>n</var> (zero or more).</p>
+            <p>If the type is
+            a <span data-x="concept-month">month</span>,
+            a <span data-x="concept-date">date</span>,
+            a <span data-x="concept-week">week</span>, or
+            a year,
+            then change the value to be the instant in time (with no time zone) that describes the
+            earliest moment that the value represents, and change the type to be
+            a <span data-x="concept-datetime-local">local date and time</span>.</p>
 
-     </li>
+            <p class="example">For example, if the cell was <code
+            data-x=""><td><time>2011-11</time></code> then for sorting purposes the value is
+            interpreted as "2011-11-01T00:00:00.000" and the type is treated as a <span
+            data-x="concept-datetime-local">local date and time</span> rather than a <span
+            data-x="concept-month">month</span>.</p>
 
-     <li>
+            <p class="example">Similarly, if the cell was <code data-x=""><td><time
+            datetime="2014">MMXIV</time></code> then for sorting purposes the value is interpreted as
+            "2014-01-01T00:00:00.000" and the type is treated as a <span
+            data-x="concept-datetime-local">local date and time</span> rather than a year.</p>
 
-      <p>Let <var>order</var> be the result of a <span>locale-specific string
-      comparison</span> of <var>components<sub>a</sub></var>'s first <i>non-numeric
-      string</i> and <var>components<sub>b</sub></var>'s first <i>non-numeric string</i>,
-      in the context of <var>th</var>.</p>
+           </li>
 
-      <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
-      these steps.</p>
+           <li><p>The value is the element's <code>textContent</code>. The type is "string".</p></li>
 
-     </li>
+          </ol>
 
-     <li>
+         </li>
 
-      <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> both have exactly one <i>number</i>, then run these
-      substeps:</p>
+         <li>
 
-      <ol>
+          <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
+          equal, then: return "a before b" if <var>type<sub>a</sub></var> is earlier in the
+          following list than <var>type<sub>b</sub></var>, otherwise, return "b before a";
+          then, abort these steps.</p>
 
-       <li>
+          <ol class="brief">
+           <li><span data-x="concept-time">time</span></li>
+           <li><span data-x="concept-yearless-date">yearless date</span></li>
+           <li><span data-x="concept-datetime-local">local date and time</span></li>
+           <li><span data-x="concept-datetime">global date and time</span></li>
+           <li><span data-x="concept-timezone">time-zone offset</span></li>
+           <li><span data-x="concept-duration">duration</span></li>
+           <li>"string"</li>
+          </ol>
 
-        <p>If <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, return "a before b".</p>
+         </li>
 
-        <p>If <var>components<sub>b</sub></var>'s <i>number</i> is less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a".</p>
+         <li><p>If <var>value<sub>a</sub></var> and <var>value<sub>b</sub></var> are
+         equal, then return "equal" and abort these steps.</p></li>
 
-       </li>
+         <li>
 
-       <li>
+          <p>If <var>type<sub>a</sub></var> and <var>type<sub>b</sub></var> are not
+          "string", then: if <var>value<sub>a</sub></var> is earlier than <var>value<sub>b</sub></var> then return "a before b" and abort these steps, otherwise,
+          return "b before a" and abort these steps.</p>
 
-        <p>Let <var>order</var> be the result of a <span>locale-specific string
-        comparison</span> of <var>components<sub>a</sub></var>'s second <i>non-numeric
-        string</i> and <var>components<sub>b</sub></var>'s second <i>non-numeric
-        string</i>, in the context of <var>th</var>.</p>
+          <p>Values sort in their natural order, with the following additional constraints:</p>
 
-        <p>If <var>order</var> is not "equal" then return <var>order</var> and
-        abort these steps.</p>
+          <p>For <span data-x="concept-time">time</span> values, 00:00:00.000 is the earliest value and
+          23:59:59.999 is the latest value.</p>
 
-       </li>
+          <p>For <span data-x="concept-yearless-date">yearless date</span> values, 01-01 is the earliest
+          value and 12-31 is the latest value; 02-28 is earlier than 02-29 which is earlier than
+          03-01.</p>
 
-       <li>
+          <p>Values that are <span data-x="concept-datetime-local">local date and time</span> compare as
+          if they were in the same time zone.</p>
 
-        <p>Let <var>order</var> be the result of a <span>locale-specific string
-        comparison</span> of <var>components<sub>a</sub></var>'s <i>number string</i> and
-        <var>components<sub>b</sub></var>'s <i>number string</i>, in the context of <var>th</var>.</p>
+          <!-- no ambiguity for <span data-x="concept-datetime">global date and time</span> -->
 
-        <p>If <var>order</var> is not "equal" then return <var>order</var> and
-        abort these steps.</p>
+          <p>For <span data-x="concept-timezone">time-zone offset</span> values, -23:59 is the earliest
+          value and +23:59 is the latest value.</p>
 
-       </li>
+          <!-- MONTHS: <span data-x="concept-duration">duration</span> is unambiguous until we add months -->
 
-      </ol>
+         </li>
 
-      <p>Otherwise, run these substeps:</p>
+         <!-- At this point we know that they are both strings and they're not equal. -->
 
-      <ol>
+         <li>
 
-       <li>
+          <p>Let <var>components<sub>a</sub></var> be the result of <span>parsing the sort
+          key</span> <var>value<sub>a</sub></var>.</p>
 
-        <p>If <var>components<sub>a</sub></var> has zero <i>numbers</i> but <var>components<sub>b</sub></var> has more than zero <i>numbers</i>, return "a before
-        b".</p>
+          <p>Let <var>components<sub>b</sub></var> be the result of <span>parsing the sort
+          key</span> <var>value<sub>b</sub></var>.</p>
 
-        <p>If <var>components<sub>b</sub></var> has zero <i>numbers</i> but <var>components<sub>a</sub></var> has more than zero <i>numbers</i>, return "b before
-        a".</p>
+          <p>As described below, <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> are tuples consisting of a list of <var>n</var>
+          <i>numbers</i>, a list of <var>n</var> <i>number strings</i>, a list of <var>n</var>+1 <i>non-numeric strings</i>, and a list of 2<var>n</var>+1 <i>raw
+          strings</i>, for any non-negative integer value of <var>n</var> (zero or more).</p>
 
-       </li>
+         </li>
 
-       <li>
+         <li>
 
-        <!-- either an=bn=0, an=1 bn>1, bn=1 an>1, or an and bn > 1. -->
+          <p>Let <var>order</var> be the result of a <span>locale-specific string
+          comparison</span> of <var>components<sub>a</sub></var>'s first <i>non-numeric
+          string</i> and <var>components<sub>b</sub></var>'s first <i>non-numeric string</i>,
+          in the context of <var>th</var>.</p>
 
-        <p>If <var>components<sub>a</sub></var> has one <i>number</i>, return "a before
-        b".</p>
+          <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
+          these steps.</p>
 
-        <p>If <var>components<sub>b</sub></var> has one <i>number</i>, return "b before
-        a".</p>
+         </li>
 
-       </li>
+         <li>
 
-       <li>
+          <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> both have exactly one <i>number</i>, then run these
+          substeps:</p>
 
-        <!-- either an=bn=0, or an and bn > 1. -->
+          <ol>
 
-        <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> have more than one <i>number</i>, run these substeps:</p>
+           <li>
 
-        <ol>
+            <p>If <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, return "a before b".</p>
 
-         <li><p>Let <var>count</var> be the smaller of the number of <i>numbers</i> in <var>components<sub>a</sub></var> and the number of <i>numbers</i> in <var>components<sub>b</sub></var>.</p></li>
+            <p>If <var>components<sub>b</sub></var>'s <i>number</i> is less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a".</p>
 
-         <li><p>For each <i>number</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> from the first to the <var>count</var>th, in
-         order: if <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, then return "a before b" and abort
-         these steps; otherwise, if <var>components<sub>b</sub></var>'s <i>number</i> is
-         less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a"
-         and abort these steps.</p></li>
+           </li>
 
-         <li>
+           <li>
 
-          <p>If <var>components<sub>a</sub></var> has fewer <i>numbers</i> than <var>components<sub>b</sub></var>, return "a before b" and abort these steps.</p>
+            <p>Let <var>order</var> be the result of a <span>locale-specific string
+            comparison</span> of <var>components<sub>a</sub></var>'s second <i>non-numeric
+            string</i> and <var>components<sub>b</sub></var>'s second <i>non-numeric
+            string</i>, in the context of <var>th</var>.</p>
 
-          <p>If <var>components<sub>b</sub></var> has fewer <i>numbers</i> than <var>components<sub>a</sub></var>, return "b before a" and abort these steps.</p>
+            <p>If <var>order</var> is not "equal" then return <var>order</var> and
+            abort these steps.</p>
 
-         </li>
+           </li>
 
-         <!-- at this point, we know /a/ and /b/ have the same number of components -->
+           <li>
 
-         <li><p>Let <var>index</var> be zero.</p></li>
+            <p>Let <var>order</var> be the result of a <span>locale-specific string
+            comparison</span> of <var>components<sub>a</sub></var>'s <i>number string</i> and
+            <var>components<sub>b</sub></var>'s <i>number string</i>, in the context of <var>th</var>.</p>
 
-         <li>
+            <p>If <var>order</var> is not "equal" then return <var>order</var> and
+            abort these steps.</p>
 
-          <p><i>String loop</i>: Let <var>order</var> be the result of a <span>locale-specific
-          string comparison</span> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>number string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>number string</i>,
-          in the context of <var>th</var>.</p>
+           </li>
 
-          <p>If <var>order</var> is not "equal" then return <var>order</var> and
-          abort these steps.</p>
+          </ol>
 
-         </li>
+          <p>Otherwise, run these substeps:</p>
 
-         <li>
+          <ol>
 
-          <p>Increment <var>index</var>.</p>
+           <li>
 
-         </li>
+            <p>If <var>components<sub>a</sub></var> has zero <i>numbers</i> but <var>components<sub>b</sub></var> has more than zero <i>numbers</i>, return "a before
+            b".</p>
 
-         <li>
+            <p>If <var>components<sub>b</sub></var> has zero <i>numbers</i> but <var>components<sub>a</sub></var> has more than zero <i>numbers</i>, return "b before
+            a".</p>
 
-          <p>Let <var>order</var> be the result of a <span>locale-specific string
-          comparison</span> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>separator string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>separator
-          string</i>, in the context of <var>th</var>.</p>
+           </li>
 
-          <p>If <var>order</var> is not "equal" then return <var>order</var> and
-          abort these steps.</p>
+           <li>
 
+            <!-- either an=bn=0, an=1 bn>1, bn=1 an>1, or an and bn > 1. -->
+
+            <p>If <var>components<sub>a</sub></var> has one <i>number</i>, return "a before
+            b".</p>
+
+            <p>If <var>components<sub>b</sub></var> has one <i>number</i>, return "b before
+            a".</p>
+
+           </li>
+
+           <li>
+
+            <!-- either an=bn=0, or an and bn > 1. -->
+
+            <p>If <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> have more than one <i>number</i>, run these substeps:</p>
+
+            <ol>
+
+             <li><p>Let <var>count</var> be the smaller of the number of <i>numbers</i> in <var>components<sub>a</sub></var> and the number of <i>numbers</i> in <var>components<sub>b</sub></var>.</p></li>
+
+             <li><p>For each <i>number</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var> from the first to the <var>count</var>th, in
+             order: if <var>components<sub>a</sub></var>'s <i>number</i> is less than <var>components<sub>b</sub></var>'s <i>number</i>, then return "a before b" and abort
+             these steps; otherwise, if <var>components<sub>b</sub></var>'s <i>number</i> is
+             less than <var>components<sub>a</sub></var>'s <i>number</i>, return "b before a"
+             and abort these steps.</p></li>
+
+             <li>
+
+              <p>If <var>components<sub>a</sub></var> has fewer <i>numbers</i> than <var>components<sub>b</sub></var>, return "a before b" and abort these steps.</p>
+
+              <p>If <var>components<sub>b</sub></var> has fewer <i>numbers</i> than <var>components<sub>a</sub></var>, return "b before a" and abort these steps.</p>
+
+             </li>
+
+             <!-- at this point, we know /a/ and /b/ have the same number of components -->
+
+             <li><p>Let <var>index</var> be zero.</p></li>
+
+             <li>
+
+              <p><i>String loop</i>: Let <var>order</var> be the result of a <span>locale-specific
+              string comparison</span> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>number string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>number string</i>,
+              in the context of <var>th</var>.</p>
+
+              <p>If <var>order</var> is not "equal" then return <var>order</var> and
+              abort these steps.</p>
+
+             </li>
+
+             <li>
+
+              <p>Increment <var>index</var>.</p>
+
+             </li>
+
+             <li>
+
+              <p>Let <var>order</var> be the result of a <span>locale-specific string
+              comparison</span> of <var>components<sub>a</sub></var>'s <var>index</var>th <i>separator string</i> and <var>components<sub>b</sub></var>'s <var>index</var>th <i>separator
+              string</i>, in the context of <var>th</var>.</p>
+
+              <p>If <var>order</var> is not "equal" then return <var>order</var> and
+              abort these steps.</p>
+
+             </li>
+
+             <li>
+
+              <p>If <var>index</var> is less than the number of <i>numbers</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, jump back
+              to the step labeled <i>string loop</i>.</p>
+
+             </li>
+
+            </ol>
+
+           </li>
+
+          </ol>
+
          </li>
 
          <li>
 
-          <p>If <var>index</var> is less than the number of <i>numbers</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, return
-          to the step labeled <i>string loop</i>.</p>
+          <!-- at this point, we know /a/ and /b/ have the same number of components -->
 
+          <p>Let <var>index</var> be zero.</p>
+
          </li>
 
-        </ol>
+         <li>
 
-       </li>
+          <p>Run these substeps:</p>
 
-      </ol>
+          <ol>
 
-     </li>
+           <li>
 
-     <li>
+            <p><i>Final loop:</i> Let <var>order</var> be the result of a <span>raw string
+            comparison</span> of <var>components<sub>a</sub></var>'s <var>n</var>th
+            <i>raw string</i> and <var>components<sub>b</sub></var>'s <var>n</var>th
+            <i>raw string</i>.</p>
 
-      <!-- at this point, we know /a/ and /b/ have the same number of components -->
+            <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
+            these steps.</p>
 
-      <p>Let <var>index</var> be zero.</p>
+           </li>
 
-     </li>
+           <li>
 
-     <li>
+            <p>Increment <var>index</var>.</p>
 
-      <p><i>Final loop:</i> Let <var>order</var> be the result of a <span>raw string
-      comparison</span> of <var>components<sub>a</sub></var>'s <var>n</var>th
-      <i>raw string</i> and <var>components<sub>b</sub></var>'s <var>n</var>th
-      <i>raw string</i>.</p>
+           </li>
 
-      <p>If <var>order</var> is not "equal" then return <var>order</var> and abort
-      these steps.</p>
+           <li>
 
-     </li>
+            <p>If <var>index</var> is less than the number of <i>raw strings</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, jump back
+            to the step labeled <i>final loop</i>.</p>
 
-     <li>
+           </li>
 
-      <p>Increment <var>index</var>.</p>
+          </ol>
 
-     </li>
+         </li>
 
-     <li>
+         <li>
 
-      <p>If <var>index</var> is less than the number of <i>raw strings</i> in <var>components<sub>a</sub></var> and <var>components<sub>b</sub></var>, return
-      to the step labeled <i>final loop</i>.</p>
+          <p>Return "equal".</p>
 
-     </li>
+         </li>
 
-     <li>
+        </ol>
 
-      <p>Return "equal".</p>
+       </li>
 
-     </li>
 
-    </ol>
+       <li><p>Let <var>new order</var> be a list of <code>tr</code> elements consisting of the
+       <code>tr</code> elements of all the groups in the newly ordered <var>groups</var>, with
+       the <code>tr</code> elements being in the same order as the groups to which they belong are in
+       <var>groups</var>, and the <code>tr</code> elements within each such group themselves
+       being ordered in <span>tree order</span>.</p></li>
 
-   </li>
+       <li><p><span data-x="concept-node-remove">Remove</span> all the <code>tr</code> elements in <var>new order</var> from their parents, in <span>tree order</span>.</p></li>
 
+       <li><p><span data-x="concept-node-insert">Insert</span> all the <code>tr</code> elements in <var>new order</var> into the DOM at the location of <var>insertion point</var>, in
+       the order these elements are found in <var>new order</var>.</p></li>
 
-   <li><p>Let <var>new order</var> be a list of <code>tr</code> elements consisting of the
-   <code>tr</code> elements of all the groups in the newly ordered <var>groups</var>, with
-   the <code>tr</code> elements being in the same order as the groups to which they belong are in
-   <var>groups</var>, and the <code>tr</code> elements within each such group themselves
-   being ordered in <span>tree order</span>.</p></li>
+       <!-- done with this set of rows -->
 
-   <li><p><span data-x="concept-node-remove">Remove</span> all the <code>tr</code> elements in <var>new order</var> from their parents, in <span>tree order</span>.</p></li>
+       <li><p>Remove <var>insertion point</var> from the DOM.</p></li>
 
-   <li><p><span data-x="concept-node-insert">Insert</span> all the <code>tr</code> elements in <var>new order</var> into the DOM at the location of <var>insertion point</var>, in
-   the order these elements are found in <var>new order</var>.</p></li>
+      </ol>
 
-   <!-- done with this set of rows -->
+     </li>
 
-   <li><p>Remove <var>insertion point</var> from the DOM.</p></li>
+     <li><p><i>Increment loop</i>: If there are no <code>tr</code> or <code>tbody</code> children of
+     <var>table</var> that are later siblings of the element pointed to by <var>row
+     collection cursor</var>, then jump to the step labeled <i>end</i> below.</p></li>
 
-   <li><p><i>Increment loop</i>: If there are no <code>tr</code> or <code>tbody</code> children of
-   <var>table</var> that are later siblings of the element pointed to by <var>row
-   collection cursor</var>, then jump to the step labeled <i>end</i> below.</p></li>
+     <li><p>Let <var>row collection cursor</var> point to the next <code>tr</code> or
+     <code>tbody</code> child of <var>table</var> that is a later sibling of the element
+     pointed to by <var>row collection cursor</var>.</p></li>
 
-   <li><p>Let <var>row collection cursor</var> point to the next <code>tr</code> or
-   <code>tbody</code> child of <var>table</var> that is a later sibling of the element
-   pointed to by <var>row collection cursor</var>.</p></li>
+     <li><p>Jump back to the step labeled <i>row loop</i> above.</p></li>
 
-   <li><p>Return to the step labeled <i>row loop</i> above.</p></li>
+    </ol>
 
+   </li>
+
    <li><p><i>End</i>: Set <var>table</var>'s <span>currently-sorting flag</span> to
    false.</p></li>
 



More information about the Commit-Watchers mailing list