Merge

Author: bert-github

css-box/Overview.src.html

@@ -801,6 +801,11 @@ <h2>Introduction &amp; definitions</h2>
 the first paragraph, and so on, until the bottom (C edge) of the last
 paragraph becomes the bottom (foot edge) of the document.
 
+<p>An element is called <dfn>orthogonal</dfn> if it either a
+<em>vertical</em> element with a <em>horizontal</em> <em>containing
+block</em> or a <em>horizontal</em> element with a <em>vertical</em>
+<em>containing block.</em> An <dfn>orthogonal flow</dfn> is a
+<em>flow</em> whose <em>flow root</em> is an orthogonal element.
 
 
 <h2>The viewport and the canvas</h2>
@@ -876,10 +881,12 @@ <h2 id=flows>Flows</h2>
   <!-- <li>The value of 'position' is 'absolute' or 'fixed' (see
   [CSS3POS]). -->
 
-  <li>The box is vertical and its parent is horizontal. <span
-  class=issue>[Add link to the relevant section.]</span>
+  <li>The box is <span>vertical</span> and its parent is
+  <span>horizontal.</span> <span class=issue>[Add link to the relevant
+  section.]</span>
 
-  <li>The box is horizontal and its parent is vertical.
+  <li>The box is <span>horizontal</span> and its parent is
+  <span>vertical.</span>
 
   <!-- <li>The value of 'transform' is not 'none'. -->
 
@@ -2964,9 +2971,111 @@ <h3 id=blockwidth>Block-level, non-replaced elements
 calculated from their computed values, with any ''auto'' values
 replaced by 0.
 
-<p>If the computed value of the <span>block flow dimension</span> is
+<div class=note>
+
+  <p>The complexity of this section comes from the fact that ''auto''
+  values on 'width' and 'height' are resolved differently for
+  <em>horizontal</em> and for <em>vertical</em> elements, and
+  differently for parallel flows then for <span>orthogonal
+  flows</span> (i.e., when the <em>containing block</em> is horizontal
+  and the element itself vertical, or vice-versa). In paginated
+  contexts, the element may further be split into boxes of unequal
+  sizes.
+
+  <p>The are three principles. The first is: If the element's size in
+  the direction of the <em title="containing block">containing
+  block's</em> <em>inline dimension</em> (i.e., between the <em>B
+  edge</em> and the <em>D edge</em>) is ''auto'', then that size is
+  the same as the containing block (minus the element's own margins,
+  padding and borders, if applicable).
+
+  <p>The second principle applies to orthogonal flows only, and only
+  if they are not in a paginated environment: If an element is
+  orthogonal and its inline dimension (i.e., the distance between its
+  <em>A edge</em> and <em>C edge</em>) is ''auto'', then it is treated
+  as a <a
+  href="http://www.w3.org/TR/css3-multicol/#multi-column-element"
+  >multi-column element</a> [[!CSS3COL]] and 'column-width', if not
+  already set, is set to a value derived from the containing block's
+  size and the <span>initial containing block</span>
+
+  <p>The last principle applies to orthogonal flows in a paginated
+  environment, e.g., in paged media or inside a multi-column element:
+  Just like in a non-paginated environment, if an element is
+  orthogonal and its inline dimension is ''auto'', then it is treated
+  as a <a
+  href="http://www.w3.org/TR/css3-multicol/#multi-column-element"
+  >multi-column element</a> [[!CSS3COL]] and 'column-width', if not
+  already set, is set to a certain value. But, in addition, if that
+  means that the first column would be so wide as stick out of the
+  page or column (the <a
+  href="http://www.w3.org/TR/css3-break/Overview.html#fragmentainer"
+  >“fragmentainer,”</a> see [[CSS3-BREAK]]), then that first column is
+  made narrower until it fits. But not narrower than
+  ''min-content''. (If at that size it still doesn't fit, it may
+  instead be moved to the next page/column or, if that is not
+  possible, overflow.)
+
+</div>
+
+
+
+  <p>In a paginated environment, in particular inside a page or a
+  column with a fixed height, it may be that such a vertical element
+  with ''auto'' height would be too tall and would stick out below the
+  page or column. In that case, it is laid out with a smaller line
+  length, such that it doesn't stick out. (But not smaller than
+  ''min-content'')
+
+  <p>Whether in a paginated environment or not, such a vertical
+  element, including its margin, padding and border, may be too wide
+  for its containing block. In that case it is paginated. The
+  different fragments that result from that may have a different line
+  lengths in that case, e.g., in the case of the following figure. The
+  fragments each have the top and bottom margin, padding and border of
+  the element (although in a paginated environment, some of those
+  margins disappear).
+
+  <div class=figure>
+  <p><img src="paginated-ortho" alt="Two pages of a book">
+
+  <p class=caption>A horizontal text (represented by letters A, B, C…)
+  containing a section with vertical text (represented by digits 1, 2,
+  3…). The document is paginated and the vertical text ends up split
+  over two pages. Note that the fragment of vertical text on the first
+  page has a longer line length (<em>inline dimension</em>) than the
+  fragment on the second page.
+  </div>
+
+  <p>If the containing block is vertical, the situation is analogous,
+  but with width and height changing roles:
+
+  <p>The height of the element itself is either as specified, or, if
+  it is ''auto'', calculated from the containing block's height by
+  subtracting the element's own margins, padding and border. (Which of
+  those are subtracted is determined by 'box-sizing'.)
+
+  <p>If the element is vertical, i.e., the same as its containing
+  block, this height is then used as the line length (<em>inline
+  dimension</em>) for laying out the element. And if the element is
+  horizontal, i.e., orthogonal to the containing block, its width is
+  used as line length, or, if that width is ''auto'', ''max-content is
+  used instead.
+
+  <p>If such a horizontal element with ''auto'' width would stick out
+  of the side of a page or a fixed-length column when set with
+  ''max-content'', it is instead laid out to a smaller width (but not
+  narrower than ''min-content'').
+
+  <p>If a horizontal element, including its margin, padding and
+  border, is too tall for its containing block, it is paginated.
+</div>
+
+
+
+<p>If the computed value of the <span>block dimension</span> is
 not ''auto'', then the used value is calculated by evaluating the
-computed value. Otherwise, the <span>block flow dimension</span> is
+computed value. Otherwise, the <span>block dimension</span> is
 the distance between two edges that are defined as follows:
 
 <ul>

css-break/Overview.src.html

@@ -1,21 +1,21 @@
-<!DOCTYPE html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
+<!DOCTYPE html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
 <html lang="en">
 <head profile="http://www.w3.org/2006/03/hcard">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>CSS Fragmentation Module Level 3</title>
   <link rel="stylesheet" type="text/css" href="../default.css">
-  <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
+  <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
 </head>
 <body>
   <div class="head">
     <!--logo-->
-    <h1 id="css-fragmentation-module">CSS Fragmentation Module Level 3:<br>
-    Breaking the Web, one fragment at a time</h1>
+    <h1 id="css-fragmentation-module">CSS Fragmentation Module Level 3</h1>
+    <h2 id=subtitle class="no-num no-toc">Breaking the Web, one
+    fragment at a time</h2>
     <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
     <dl>
       <dt>This version:</dt>
-      <!--<dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/</a></dd>-->
-      <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a></dd>
+      <dd><a href="[VERSION]">[VERSION]</a></dd>
 
       <dt>Latest version:</dt>
       <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/css3-break/</a></dd>
@@ -61,6 +61,9 @@ <h2 class="no-num no-toc" id="status">
 Status of this document</h2>
   <!--status-->
   <!--<p>The following features are at risk: &hellip;</p>-->
+  <p>
+    See the <a href="#changes" >Changes section</a> for significant
+    changes since the previous draft.
 
 <h2 class="no-num no-toc" id="contents">
 Table of contents</h2>
@@ -1154,7 +1157,7 @@ <h4 id="joining-boxes">
       and fragments from subsequent lines are put to the right of it.
       In a right-to-left containing block,
       the first fragment is the rightmost on the first line
-      and subsequent fragments are put to the left of it.</p>
+      and subsequent fragments are put to the left of it.
     </dd>
 
     <dt>For boxes broken across columns</dt>
@@ -1396,7 +1399,7 @@ <h2 class="no-num" id="changes">
     <li>Defined that boxes <a href="#box-splitting">extend to the bottom of the page</a> when broken.
     <li>Defined breaking of <a href="#transforms">transformed/positioned content</a>.
     <li>Defined 1px minimum extent of fragmentainers to ensure progress.
-    <li>Clarified fragmentation of <a href="#paraparal-flows">parallel flows</a>.
+    <li>Clarified fragmentation of <a href="#parallel-flows">parallel flows</a>.
     <li>Defined handling of overflowing content (as parallel content).
     <li>Clarified <a href="#varying-size-boxes">float fragmentation</a> in varying-size fragmentainers.
     <li>Various other clarifications.

css-template/Overview.src.html

@@ -2237,6 +2237,10 @@ <h2 id=absolute>Elements with 'display' or ''grid'' or
 automatically with either extra rows or extra columns, if there are
 more children than predefined slots.
 
+<p>Note that the template of a grid container is also mirrored and/or
+rotated depending on the 'writing-mode' and 'direction' of the grid
+container, unlike the template of a grid element.
+
 <!--=================================================================-->
 
 <h2>Styling slots</h2>
@@ -2269,6 +2273,8 @@ <h3 id=slot-pseudo>The ''::slot()'' pseudo-element</h3>
 <ul>
 <li>background properties
 
+<li>'box-shadow'
+
 <li>'vertical-align' (see <a href="#vertical-alignment" >“vertical
 alignment”</a> below)
 
@@ -2287,6 +2293,8 @@ <h3 id=slot-pseudo>The ''::slot()'' pseudo-element</h3>
 
 <li>margin properties
 
+<li>outline properties
+
 <li>'box-decoration-break'
 
 <li>column properties
@@ -2296,6 +2304,12 @@ <h3 id=slot-pseudo>The ''::slot()'' pseudo-element</h3>
 
 <li>'opacity'
 
+<li>transform properties
+
+<li>mask properties
+
+<li>'filter'
+
 <li>'content' (see <a href="#content" >“Slots and the 'content'
 property”</a> below)
 </ul>
@@ -3949,7 +3963,7 @@ <h4 id=select-after-pseudo>Style the contents of slots (region-based
 
 <h4>Orient the grid with writing mode vs orient the slots</h4>
 
-<p>A grid can contain vertical text, but the grid itself probably
+<p>A grid can contain vertical text, but the grid itself
 doesn't need to be rotated or flipped. Indeed, it would be confusing
 if it did. In other words, the following element has vertical text in
 the top right slot and an image in the bottom right slot:
@@ -3967,6 +3981,15 @@ <h4>Orient the grid with writing mode vs orient the slots</h4>
 themselves can have a writing mode (by default the one “inherited”
 from the grid element).
 
+<p>This is different for <em>container elements,</em> i.e., elements
+with a 'display' of ''grid'' or ''inline-grid'', as those are designed
+for graphical user interfaces, where it is sometimes useful to swap a
+row of buttons, e.g., in a different language. Grids inside other
+elements (''block'', ''list-item'', ''inline-block'', ''table-cell'',
+etc.) are more likely to depend on the orientation of the page
+(landscape/portrait, recto/verso); but that has to be handled
+explicitly by the designer by means of media queries and selectors.
+
 <!--=================================================================-->
 
 <h4>Indicating the default slot ('*' vs '@')</h4>