FFFF [css-break][css-background] Move box-decoration-break per WG resoluti… · w3c/csswg-drafts@51d6849 · GitHub
Skip to content

Commit 51d6849

Browse files
committed
[css-break][css-background] Move box-decoration-break per WG resolution <http://lists.w3.org/Archives/Public/www-style/2013Feb/0381.html>. Clean up markup/prose a bit.
--HG-- rename : css-backgrounds/box-break.png => css-break/box-break.png
1 parent 4a8df42 commit 51d6849

4 files changed

Lines changed: 398 additions & 161 deletions

File tree

css-backgrounds/Overview.src.html

Lines changed: 9 additions & 117 deletions
10BC0
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ <h2 class="no-num no-toc" id="status">Status of this document</h2>
8989

9090
<p>The following features are at-risk and may be dropped at the
9191
end of the CR period if there has not been enough interest from
92-
implementers: 'box-decoration-break', animatability of 'box-shadow'
92+
implementers: animatability of 'box-shadow'
9393

9494
<p>The CSS WG maintains an <a href="http://www.w3.org/Style/CSS/Tracker/products/11">issues
9595
list</a> for this module. A <a href="http://www.w3.org/Style/CSS/Test/">test
@@ -129,7 +129,7 @@ <h2 id="introduction">Introduction</h2>
129129
Additionally the box may be given a "drop-shadow" effect with the
130130
'box-shadow' property.
131131

132-
<p>If an element is broken into multiple boxes, 'box-decoration-break'
132+
<p>If an element is broken into multiple boxes, 'box-decoration-break' [[CSS3-BREAK]]
133133
defines how the borders and background are divided over the various boxes.
134134
(An element can result in more than one box if it is broken at the
135135
end of a line, at the end of a column or at the end of a page; and
@@ -958,9 +958,10 @@ <h3 id="the-background-origin">Positioning Area: the 'background-origin' propert
958958

959959
<p>For elements rendered as a single box, specifies the
960960
<dfn id="background-positioning-area">background positioning area</dfn>.
961-
For elements rendered as multiple boxes (e.g., inline boxes on several
962-
lines, boxes on several pages) specifies which boxes 'box-decoration-break'
963-
operates on to determine the background positioning area(s).
961+
For elements rendered as multiple boxes
962+
(e.g., inline boxes on several lines, boxes on several pages),
963+
specifies which boxes 'box-decoration-break' [[CSS3-BREAK]] operates on
964+
to determine the background positioning area(s).
964965

965966
<dl>
966967
<dt><dfn title="''padding-box''!!'background-origin' value">
@@ -2751,119 +2752,10 @@ <h3 id=border-image-tables>Effect on Tables</h3>
27512752

27522753
<h2 id="misc">Miscellaneous Effects</h2>
27532754

2754-
<h3 id="the-box-decoration-break">Drawing at Breaks: the 'box-decoration-break' property</h3>
2755-
2756-
<table class=propdef>
2757-
<tr>
2758-
<th>Name:
2759-
<td><dfn>box-decoration-break</dfn>
2760-
<tr>
2761-
<th><a href="#values">Value</a>:
2762-
<td>slice | clone
2763-
<tr>
2764-
<th>Initial:
2765-
<td>slice
2766-
<tr>
2767-
<th>Applies to:
2768-
<td>all elements
2769-
<tr>
2770-
<th>Inherited:
2771-
<td>no
2772-
<tr>
2773-
<th>Percentages:
2774-
<td>N/A
2775-
<tr>
2776-
<th>Media:
2777-
<td>visual
2778-
<tr>
2779-
<th>Computed value:
2780-
<td>as specified
2781-
<tr>
2782-
<th>Animatable:
2783-
<td>no
2784-
</table>
2785-
2786-
<p>When a box is broken at a page break, column break, or, for inline
2787-
elements, at a line break<!-- ISSUE-182-->, the
2788-
'box-decoration-break' property specifies
2789-
whether box fragments are treated as broken fragments of one continuous box,
2790-
or whether each fragment is individually wrapped with the border and padding.
2791-
For backgrounds it defines how the <span class=index>background
2792-
positioning area</span> is derived from these multiple fragments and how
2793-
the element's background is drawn within them. Values have the following
2794-
meanings:
2795-
2796-
<dl>
2797-
<dt><dfn>''clone''</dfn>
2798-
<dd>Each box fragment is independently wrapped with the border and padding.
2799-
The 'border-radius' and 'border-image' and 'box-shadow', if any,
2800-
are applied to each fragment independently. The background is drawn
2801-
independently in each fragment of the element. A no-repeat background
2802-
image will thus be rendered once in each fragment of the element.
2803-
2804-
<dt><dfn>''slice''</dfn>
2805-
<dd><p>No border and no padding are inserted at a break. No box-shadow
2806-
is drawn at a broken edge; 'border-radius' does not apply to its
2807-
corners; and the 'border-image' is rendered for the whole box as if
2808-
it were unbroken. The effect is as though the element were rendered
2809-
with no breaks present, and then sliced by the breaks afterward.
2810-
2811-
<p>Backgrounds are drawn as if, after the element has been laid out
2812-
(including any justification, bidi reordering, page breaks, etc.),
2813-
all the element's box fragments were taken and put one after the
2814-
other in visual order. The background is applied to the bounding box
2815-
of this composite box and then the fragments are put back, with each
2816-
with its share of the background.</p>
2817-
2818-
<p>For boxes broken across lines, first fragments on the same line are
2819-
connected in visual order. Then fragments on subsequent lines are
2820-
ordered according to the element's inline progression direction and
2821-
aligned on the baseline.
2822-
For example in a left-to-right containing block ('direction' is
2823-
''ltr''), the first fragment is the leftmost fragment on the first
2824-
line and fragments from subsequent lines are put to the right of it.
2825-
In a right-to-left containing block, the first fragment is the
2826-
rightmost on the first line and subsequent fragments are put to the
2827-
left of it.</p>
2828-
2829-
<p>For boxes broken across columns, the columns are treated as
2830-
one continuous element, as if the column boxes were glued together
2831-
in the block progression direction of the multi-column element.
2832-
For boxes broken across pages, the page content areas are glued
2833-
together in the block progression direction of the root element.
2834-
In these cases, if the box fragments have different widths (heights,
2835-
if the root element / multi-column element is in a vertical writing
2836-
mode), then each piece draws its background assuming that the
2837-
whole element has the same width (height) as this piece. This
2838-
ensures that right-aligned images stay aligned to the right edge,
2839-
left-aligned images stay aligned to the left edge, and centered
2840-
images stay centered.
2841-
</dl>
2842-
2843-
<div class="figure">
2844-
<p><img alt="Illustration: (1) a single box cut in two in between
2845-
two lines of text by a page break and (2) two boxes, one before and
2846-
one after the page break, both with a border all around and their
2847-
own background image" src="box-break.png">
2848-
2849-
<p class=caption>Two possibilities for
2850-
'box-decoration-break': on the left, the value
2851-
''slice'', on the right the value ''clone''.
2852-
< 8096 /div>
2853-
28542755
<p class=note>
2855-
For inline elements, which side of a fragment is the broken edge is
2856-
determined by the parent element's inline progression direction.
2857-
For example, if an inline element whose parent has ''direction: rtl''
2858-
breaks across two lines, the <em>left</em> edge of the fragment on
2859-
the first line will be the broken edge. (Note in particular that
2860-
neither the element's own 'direction' nor its containing block's
2861-
'direction' is used.) See [[CSS3-WRITING-MODES]].
2862-
2863-
<p>UAs may also apply 'box-decoration-break' to control rendering
2864-
at bidi-imposed breaks, i.e. when bidi reordering causes an inline
2865-
to split into non-contiguous fragments. Otherwise such breaks are
2866-
always handled as ''slice''.
2756+
The 'box-decoration-break' property,
2757+
which defines how backgrounds and borders apply to a fragmented box,
2758+
has been moved to the <a href="http://www.w3.org/TR/css3-break/">CSS Fragmentation Module</a>. [[CSS3-BREAK]]
28672759

28682760
<h3 id="the-box-shadow">Drop Shadows: the 'box-shadow' property</h3>
28692761

0 commit comments

Comments
 (0)