You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: motion-1/Overview.bs
+29-5Lines changed: 29 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -310,13 +310,37 @@ Its arguments are:
310
310
311
311
: <dfn>contain</dfn>
312
312
::
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>
318
340
</dl>
319
341
342
+
Issue: all of these examples need to be rewritten.
343
+
320
344
<div class=example>
321
345
Here are some examples. The first example shows that some parts of boxes are outside of the <a>offset path</a>.
0 commit comments