Skip to content

Navigation Menu

Sign in
Appearance settings
Sign up
Appearance settings

Commit 9e58c46

Browse filesBrowse the repository at this point in the historyBrowse files
tabatkinssvgeesus
authored andcommitted
Simplify the behavior of the 'contain' keyword. #363
1 parent f192795 commit 9e58c46
Copy full SHA for 9e58c46

1 file changed

+29-5Lines changed: 29 additions & 5 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎motion-1/Overview.bs‎

Copy file name to clipboardExpand all lines: motion-1/Overview.bs
+29-5Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -310,13 +310,37 @@ Its arguments are:
310310

311311
: <dfn>contain</dfn>
312312
::
313-
The used value of 'offset-distance' is clamped so that the box is entirely contained within the path.
314-
315-
If no 'offset-distance' would lead to the box being enclosed by the path, the path size is minimally increased so that such an 'offset-distance' exists.
316-
317-
Issue: Not clear what this actually means. See <a href="https://github.com/w3c/fxtf-drafts/issues/363">Issue 363</a>.
313+
The length of the [=offset path=] is reduced
314+
so that the element stays within the [=containing block=]
315+
even at ''offset-distance: 100%''.
316+
317+
Specifically, the path's length is reduced
318+
by half the width or half the height of the element's border box,
319+
whichever is larger,
320+
and floored at zero.
321+
322+
<div class=note>
323+
This behavior is optimized for a particular case--
324+
the element's width and height are equal or nearly so;
325+
the element is either completely rounded by 'border-radius'
326+
or the corners aren't relevant to its appearance;
327+
the ''ray()'' uses ''closest-side'' positioning;
328+
and 'anchor-position' is set to ''center''.
329+
330+
Under these conditions,
331+
which are common for situations
332+
like positioning elements around the edge of a round clock face,
333+
this ensures that each element is positioned
334+
fairly snugly against the inner edge of the clock face
335+
at ''offset-distance: 100%''.
336+
337+
In other conditions this will act <em>similarly</em>
338+
but might not give quite as optimal a result.
339+
</div>
318340
</dl>
319341

342+
Issue: all of these examples need to be rewritten.
343+
320344
<div class=example>
321345
Here are some examples. The first example shows that some parts of boxes are outside of the <a>offset path</a>.
322346
<pre><code highlight=html>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.