[css-break][css-background] Define better handling of backgrounds whose height is derived from the box's width when applied to boxes fragmented across varying-size fragmentainers.

Author: fantasai

css-break/Overview.html

@@ -1469,13 +1469,13 @@ <h4 id=joining-boxes><span class=secno>5.4.1. </span> Joining Boxes for
   <p>If the box fragments have different widths (heights, if the fragments
    are joined horizontally), then each piece draws its portion of the
    background assuming that the whole element has the same width (height) as
-   this piece. This ensures that right-aligned images stay aligned to the
-   right edge, left-aligned images stay aligned to the left edge, and
-   centered images stay centered. <!-- ISSUE
-  In order to preserve continuity in the other dimension,
-  heights (widths) and horizontal (vertical) positions of the images
-  are not recalculated despite any intrinsic aspect ratio relations.
--->
+   this piece. However, if the used height (width) of an image is derived
+   from the width (height) of the box, then it is calculated using the widest
+   fragment's width and maintained as a fixed size. This ensures that
+   right-aligned images stay aligned to the right edge, left-aligned images
+   stay aligned to the left edge, centered images stay centered, and
+   stretched images cover the background area as intended while preserving
+   continuity across fragments.
 
   <h3 id=transforms><span class=secno>5.5. </span> Transforms, Positioning,
    and Pagination</h3>
@@ -1681,7 +1681,9 @@ <h2 class=no-num id=changes> Changes</h2>
   <ul>
    <li>Added definition of ‘<a href="#box-decoration-break"><code
     class=property>box-decoration-break</code></a>’ (moved from <a
-    href="#ref-CSS3BG" rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>).
+    href="#ref-CSS3BG" rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>) and
+    defined better handling of aspect-ratio-sized images in variable-sized
+    fragments.
 
    <li>Added ‘<code class=css>any</code>’ value to ‘<a
     href="#break-before"><code class=property>break-before</code></a>’ and

css-break/Overview.src.html

@@ -1170,14 +1170,14 @@ <h4 id="joining-boxes">
   (heights, if the fragments are joined horizontally),
   then each piece draws its portion of the background
   assuming that the whole element has the same width (height) as this piece.
+  However, if the used height (width) of an image is derived from the width (height) of the box,
+  then it is calculated using the widest fragment's width
+  and maintained as a fixed size.
   This ensures that right-aligned images stay aligned to the right edge,
   left-aligned images stay aligned to the left edge,
-  and centered images stay centered.
-<!-- ISSUE
-  In order to preserve continuity in the other dimension,
-  heights (widths) and horizontal (vertical) positions of the images
-  are not recalculated despite any intrinsic aspect ratio relations.
--->
+  centered images stay centered,
+  and stretched images cover the background area as intended
+  while preserving continuity across fragments.
 
 <h3 id="transforms">
 Transforms, Positioning, and Pagination</h3>
@@ -1372,7 +1372,8 @@ <h2 class="no-num" id="changes">
     <a href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">29 August 2012 Working Draft</a>:
 
   <ul>
-    <li>Added definition of 'box-decoration-break' (moved from [[CSS3BG]]).
+    <li>Added definition of 'box-decoration-break' (moved from [[CSS3BG]])
+      and defined better handling of aspect-ratio-sized images in variable-sized fragments.
     <li>Added ''any'' value to 'break-before' and 'break-after'.
     <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>.