1.1 --- a/motion-1/Overview.bs Sat Nov 24 21:24:38 2018 +0100
1.2 +++ b/motion-1/Overview.bs Sat Nov 24 23:38:17 2018 +0100
1.3 @@ -1,5 +1,5 @@
1.4 -<h1>Motion Path Module Level 1</h1>
1.5 <pre class='metadata'>
1.6 +Title: Motion Path Module Level 1
1.7 Shortname: motion
1.8 Level: 1
1.9 Status: ED
1.10 @@ -8,7 +8,6 @@
1.11 Previous Version: https://www.w3.org/TR/2017/WD-motion-1-20170711/
1.12 Previous Version: https://www.w3.org/TR/2015/WD-motion-1-20150409/
1.13 Group: fxtf
1.14 -Link Defaults: css-shapes-1 (type) <basic-shape>, css-transforms-1 (property) transform/transform-origin
1.15 Editor: Dirk Schulze, Adobe Inc., [email protected], w3cid 51803
1.16 Editor: Shane Stephens, Google, [email protected], w3cid 47691
1.17 Editor: Jihye Hong, LG Electronics, [email protected], w3cid 79168
1.18 @@ -16,51 +15,50 @@
1.19 Test Suite: https://github.com/web-platform-tests/wpt/tree/master/css/motion
1.20 Abstract: Motion path allows authors to position any graphical object and animate it along an author specified path.
1.21 </pre>
1.22 -
1.23 -<pre class="anchors">
1.24 -url: https://svgwg.org/svg2-draft/shapes.html#TermShapeElement; type: dfn; spec: SVG2; text: shape element
1.25 -url: https://www.w3.org/TR/SVG11/struct.html#DefsElement; spec: SVG11; type: element; text: defs
1.26 +<pre class=link-defaults>
1.27 +spec:css-transforms-1; type:dfn;
1.28 + text:local coordinate system
1.29 </pre>
1.30
1.31 +<style>
1.32 + /* Style for bikeshed variant of switch/case <dl>s */
1.33 + div.switch dl > dd > ol.only {
1.34 + margin-left: 0;
1.35 + }
1.36
1.37 -<style>
1.38 - /* Style for bikeshed variant of switch/case <dl>s */
1.39 - div.switch dl > dd > ol.only {
1.40 - margin-left: 0;
1.41 - }
1.42 + div.switch dl > dd > ol.algorithm {
1.43 + margin-left: -2em;
1.44 + }
1.45
1.46 - div.switch dl > dd > ol.algorithm {
1.47 - margin-left: -2em;
1.48 - }
1.49 + div.switch dl {
1.50 + padding-left: 2em;
1.51 + }
1.52 +editors
1.53 + div.switch dl > dt {
1.54 + text-indent: -1.5em;
1.55 + margin-top: 1em;
1.56 + }
1.57
1.58 - div.switch dl {
1.59 - padding-left: 2em;
1.60 - }
1.61 -editors
1.62 - div.switch dl > dt {
1.63 - text-indent: -1.5em;
1.64 - margin-top: 1em;
1.65 - }
1.66 + div.switch dl > dt + dt {
1.67 + margin-top: 0;
1.68 + }
1.69
1.70 - div.switch dl > dt + dt {
1.71 - margin-top: 0;
1.72 - }
1.73 + div.switch dl > dt > p {
1.74 + display: inline;
1.75 + }
1.76
1.77 - div.switch dl > dt > p {
1.78 - display: inline;
1.79 - }
1.80 -
1.81 - div.switch dl > dt:before {
1.82 - content: '\21AA';
1.83 - padding: 0 0.5em 0 0;
1.84 - display: inline-block;
1.85 - width: 1em;
1.86 - text-align: right;
1.87 - line-height: 0.5em;
1.88 - }
1.89 + div.switch dl > dt:before {
1.90 + content: '\21AA';
1.91 + padding: 0 0.5em 0 0;
1.92 + display: inline-block;
1.93 + width: 1em;
1.94 + text-align: right;
1.95 + line-height: 0.5em;
1.96 + }
1.97 </style>
1.98
1.99 -<h2 id="intro">Introduction</h2>
1.100 +Introduction {#intro}
1.101 +=====================
1.102
1.103 <em>This section is not normative.</em>
1.104
1.105 @@ -68,33 +66,41 @@
1.106
1.107 This specification allows authors to specify a path. The object can be positioned, transitioned and animated along this path over a given period of time. The time may be static if no animation was specified.
1.108
1.109 -<div class="example">
1.110 - <p>In the following example, a schematic of an air plane is animated along a path. The plane faces in the direction of the path at each position on the path.
1.111 - <figure>
1.112 +<div class=example>
1.113 +In the following example, a schematic of an air plane is animated along a path. The plane faces in the direction of the path at each position on the path.
1.114 +
1.115 +<figure>
1.116 <img src="images/motion-path.svg" width="470" height="120" alt="Example Path">
1.117 <p class=caption>A black plane at different positions on a blue dotted path, rotated in the direction of the path.</p>
1.118 - </figure>
1.119 +</figure>
1.120 </div>
1.121
1.122 -<h2 id="placement">Module interactions</h2>
1.123
1.124 -This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied. These effects are applied after <a href="https://www.w3.org/TR/css-display-3/#box">box</a>es have been sized and positioned according to the <a href="https://www.w3.org/TR/CSS2/visuren.html" lt="Visual formatting model">Visual formatting model</a> from [[!CSS21]]. Some values of 'offset-path' and 'offset-position' result in the creation of a <a spec="css21">stacking context</a> and <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>.
1.125 +Module interactions {#placement}
1.126 +================================
1.127 +
1.128 +This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied. These effects are applied after <a href="https://www.w3.org/TR/css-display-3/#box">box</a>es have been sized and positioned according to the <a href="https://www.w3.org/TR/CSS2/visuren.html" lt="Visual formatting model">Visual formatting model</a> from [[!CSS21]]. Some values of 'offset-path' and 'offset-position' result in the creation of a <a>stacking context</a> and <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>.
1.129
1.130 Some CSS properties in this specification manipulate the user coordinate system of the element by transformations. These transformations are pre-multiplied to transformations specified by the 'transform' property or deriving properties defined in CSS Transform Module Level 1 [[!CSS-TRANSFORMS-1]], and post-multiplied to transformations specified by the individual transform properties 'translate', 'scale', and 'rotate', as <a href="https://drafts.csswg.org/css-transforms-2/#ctm">explained</a> in <a href="https://drafts.csswg.org/css-transforms-2/">CSS Transform Module Level 2</a>.
1.131
1.132 -<h2 id="values">Values</h2>
1.133 +
1.134 +Values {#values}
1.135 +================
1.136
1.137 This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS21]]. Basic shapes are defined in CSS Shapes Module Level 1 [[!CSS-SHAPES]]. Value types not defined in these specifications are defined in CSS Values and Units Module Level 3 [[!CSS3VAL]].
1.138
1.139 In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept CSS-wide keywords such as <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-initial">initial</a> and <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">inherit</a> as their property value [[!CSS3VAL]]. For readability it has not been repeated explicitly.
1.140
1.141 -<h2 id="motion-paths-overview">Motion Paths</h2>
1.142 +
1.143 +Motion Paths {#motion-paths-overview}
1.144 +=====================================
1.145
1.146 The Motion Path module allows specifying the position of a box as the distance ('offset-distance') of the box's <a>anchor point</a> ('offset-anchor') along a geometrical path ('offset-path') defined against the coordinates ('offset-position') of its containing block. The box's orientation can optionally be specified as a rotation ('offset-rotate') with respect to the direction of the path at that point.
1.147
1.148 -<h3 id="offset-path-property">Define a path: The 'offset-path' property</h3>
1.149 +Define a path: The 'offset-path' property {#offset-path-property}
1.150 +-----------------------------------------------------------------
1.151
1.152 -<pre class='propdef'>
1.153 +<pre class=propdef>
1.154 Name: offset-path
1.155 Value: none | ''ray()'' | <a href="#offsetpath-pathfunc">path()</a> | <<url>> | [ <<basic-shape>> || <<geometry-box>> ]
1.156 Initial: none
1.157 @@ -106,349 +112,320 @@
1.158 Animatable: as <<angle>>, <<basic-shape>> or <a href="#offsetpath-pathfunc">path()</a>
1.159 </pre>
1.160
1.161 -Specifies the <a>offset path</a>, a geometrical path the box gets positioned on.
1.162 -An <dfn>offset path</dfn> is either a specified path with one or multiple sub-paths or the geometry
1.163 -of a not styled basic shape.
1.164 +Specifies the <a>offset path</a>, a geometrical path the box gets positioned on. An <dfn>offset path</dfn> is either a specified path with one or multiple sub-paths or the geometry of a not styled basic shape.
1.165
1.166 A path may consist of a ''ray()'' or a <<basic-shape>> like <<circle()>>, <<inset()>> or <<polygon()>>. To allow authors to specify curves and sub-paths, this specification adds <a href="#offsetpath-pathfunc">path()</a> in addition to the existing <<basic-shape>> functions. The <a href="#offsetpath-pathfunc">path()</a> takes an SVG Path string as input [[!SVG2]]. As another option, authors may reference an SVG <a>shape element</a> by <<url>> which is used as the path.
1.167
1.168 -In this specification, a direction (or rotation) of ''0 degree'' is equivalent to the direction of
1.169 -the negative y-axis in the object's <a>local coordinate system</a>.
1.170 -E.g. A rotation of ''0 degree'' points to the upper side of the UA if the object
1.171 -and its ancestors have no transformation applied.
1.172 +In this specification, a direction (or rotation) of ''0 degree'' is equivalent to the direction of the negative y-axis in the object's <a>local coordinate system</a>. E.g. A rotation of ''0 degree'' points to the upper side of the UA if the object and its ancestors have no transformation applied.
1.173
1.174 Values have the following meanings:
1.175
1.176 <dl dfn-for=offsetpath dfn-type=value>
1.177 - <dt><dfn>ray()</dfn> = ray( [ <<angle>> && <<size>> && contain? ] )</dt>
1.178 - <dd>
1.179 - <dl>
1.180 - <dt><<angle>></dt>
1.181 - <dd>
1.182 - The <a>offset path</a> is a line segment that starts from the position of the box and proceeds in the
1.183 - direction defined by the specified <<angle>>. As with
1.184 - <a href="https://www.w3.org/TR/css3-images/#gradients">CSS gradients</a>, <<angle>> values are interpreted
1.185 - as bearing angles, with ''0deg'' pointing up and positive angles representing clockwise rotation.
1.186 + : <dfn>ray()</dfn> = ray( [ <<angle>> && <<size>> && contain? ] )
1.187 + ::
1.188 + : <<angle>>
1.189 + ::
1.190 + The <a>offset path</a> is a line segment that starts from the position of the box and proceeds in the direction defined by the specified <<angle>>. As with <a href="https://www.w3.org/TR/css3-images/#gradients">CSS gradients</a>, <<angle>> values are interpreted as bearing angles, with ''0deg'' pointing up and positive angles representing clockwise rotation.
1.191
1.192 - <p class="note">Note: Defining an <a>offset path</a> with <<angle>>,
1.193 - the box can be positioned with the used of polar coordinates.
1.194 - The polar coordinate system is a two-dimensional coordinate system in which each point on a plane
1.195 - is determined by a distance from a fixed point and an angle from a fixed line.
1.196 - The fixed point which is similar to the origin of a Cartesian coordinate system is called the pole,
1.197 - and the fixed line which is a ray from the pole is the polar axis.
1.198 - This coordinate system specifies the position of a point with a certain distance from the pole
1.199 - and a certain angle measured from the polar axis to the segment connecting the pole.
1.200 - In mathematical theory, the polar axis is commonly defined as the positive direction
1.201 - of the x axis, but we consider the polar axis as the positive direction of the y axis
1.202 - for consistency with other CSS specifications such as [[!CSS3VAL]], <<angle>> value.
1.203 - (as the preceding line doesn't have "x axis position")
1.204 - </p>
1.205 - </dd>
1.206 + Note: Defining an <a>offset path</a> with <<angle>>, the box can be positioned with the used of polar coordinates. The polar coordinate system is a two-dimensional coordinate system in which each point on a plane is determined by a distance from a fixed point and an angle from a fixed line. The fixed point which is similar to the origin of a Cartesian coordinate system is called the pole, and the fixed line which is a ray from the pole is the polar axis. This coordinate system specifies the position of a point with a certain distance from the pole and a certain angle measured from the polar axis to the segment connecting the pole. In mathematical theory, the polar axis is commonly defined as the positive direction of the x axis, but we consider the polar axis as the positive direction of the y axis for consistency with other CSS specifications such as [[!CSS3VAL]], <<angle>> value. (as the preceding line doesn't have "x axis position")
1.207
1.208 - <dt><dfn for=offsetpath><size></dfn></dt>
1.209 - <dd>Decides the path length used when 'offset-distance' is expressed as a percentage, using the distance to the containing box. For <<size>> values other than <a href="#size-sides">sides</a>, the path length is independent of <<angle>>.
1.210 + : <dfn for=offsetpath><size></dfn>
1.211 + ::
1.212 + Decides the path length used when 'offset-distance' is expressed as a percentage, using the distance to the containing box. For <<size>> values other than <a href="#size-sides">sides</a>, the path length is independent of <<angle>>.
1.213
1.214 - It is defined as
1.215 + It is defined as:
1.216
1.217 - <b><size></b> = [ closest-side | closest-corner | farthest-side | farthest-corner | sides ]
1.218 + <b><size></b> = [ closest-side | closest-corner | farthest-side | farthest-corner | sides ]
1.219
1.220 - <dl dfn-for="<size>">
1.221 - <dt><dfn for="<size>" id=size-closest-side>closest-side</dfn></dt>
1.222 - <dd>The perpendicular distance is measured between the initial position and the
1.223 - closest side of the box from it.</dd>
1.224 + <dl dfn-for="<size>">
1.225 + : <dfn for="<size>" id=size-closest-side>closest-side</dfn>
1.226 + :: The perpendicular distance is measured between the initial position and the closest side of the box from it.
1.227 + : <dfn for="<size>" id=size-closest-corner>closest-corner</dfn>
1.228 + :: The distance is measured between the initial position and the closest corner of the box from it.
1.229 + : <dfn for="<size>" id=size-farthest-side>farthest-side</dfn>
1.230 + :: The perpendicular distance is measured between the initial position and the farthest side of the box from it.
1.231 + : <dfn for="<size>" id=size-farthest-corner>farthest-corner</dfn>
1.232 + :: The distance is measured between the initial position and the farthest corner of the box from it.
1.233 + : <dfn for="<size>" id=size-sides>sides</dfn>
1.234 + :: The distance is measured between the initial position and the intersection of the ray with the box. If the initial position is not within the box, the distance is 0.
1.235 + </dl>
1.236
1.237 - <dt><dfn for="<size>" id=size-closest-corner>closest-corner</dfn></dt>
1.238 - <dd>The distance is measured between the initial position and the closest corner
1.239 - of the box from it.</dd>
1.240 + Note: When the initial position is on one of the edges of the containing block, the closest side takes the edge that the initial position is on, and thus the path length used for percentage 'offset-distance' values is 0.
1.241
1.242 - <dt><dfn for="<size>" id=size-farthest-side>farthest-side</dfn></dt>
1.243 - <dd>The perpendicular distance is measured between the initial position and the
1.244 - farthest side of the box from it.</dd>
1.245 + Note: When <a href="#size-closest-side">closest-side</a> or <a href="#size-farthest-side">farthest-side</a> are used, and the initial position is outside the box, the sides are considered to extend indefinitely.
1.246
1.247 - <dt><dfn for="<size>" id=size-farthest-corner>farthest-corner</dfn></dt>
1.248 - <dd>The distance is measured between the initial position and the farthest corner
1.249 - of the box from it.</dd>
1.250 + : <dfn>contain</dfn>
1.251 + ::
1.252 + The used value of 'offset-distance' is clamped so that the box is entirely contained within the path.
1.253
1.254 - <dt><dfn for="<size>" id=size-sides>sides</dfn></dt>
1.255 - <dd>The distance is measured between the initial position and the intersection of the ray with the box. If the initial position is not within the box, the distance is 0.</dd>
1.256 - </dl>
1.257 - <p class='note'>Note: When the initial position is on one of the edges of
1.258 - the containing block, the closest side takes the edge that the initial position
1.259 - is on, and thus the path length used for percentage 'offset-distance' values is 0.</p>
1.260 - <p class='note'>Note: When <a href="#size-closest-side">closest-side</a> or
1.261 - <a href="#size-farthest-side">farthest-side</a> are used, and the initial
1.262 - position is outside the box, the sides are considered to extend indefinitely.</p>
1.263 - </dd>
1.264 + 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.
1.265
1.266 - <dt><dfn>contain</dfn></dt>
1.267 - <dd>
1.268 - The used value of 'offset-distance' is clamped so that the box is entirely contained within the path.
1.269 + <div class=example>
1.270 + Here are some examples. The first example shows that some parts of boxes are outside of the <a>offset path</a>.
1.271 + <pre><code highlight=html>
1.272 + <style>
1.273 + body {
1.274 + transform-style: preserve-3d;
1.275 + width: 200px;
1.276 + height: 200px;
1.277 + }
1.278 + .box {
1.279 + width: 50px;
1.280 + height: 50px;
1.281 + offset-position: 50% 50%;
1.282 + offset-distance: 100%;
1.283 + offset-rotate: 0deg;
1.284 + }
1.285 + #redBox {
1.286 + background-color: red;
1.287 + offset-path: ray(45deg closest-side);
1.288 + }
1.289 + #blueBox {
1.290 + background-color: blue;
1.291 + offset-path: ray(180deg closest-side);
1.292 + }
1.293 + </style>
1.294 + <body>
1.295 + <div class="box" id="redBox"></div>
1.296 + <div class="box" id="blueBox"></div>
1.297 + </body>
1.298 + </code></pre>
1.299 + <figure>
1.300 + <img alt="An image of boxes positioned without contain" src="images/offset_distance_without_contain.png" style="width: 200px;"/>
1.301 + <figcaption>'offset-path' without 'contain'</figcaption>
1.302 + </figure>
1.303
1.304 - 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.
1.305 - </dd>
1.306 - </dl>
1.307 + In the second example, 'contain' is given to the 'offset-path' value of each box
1.308 + to avoid overflowing.
1.309 + <pre><code highlight=html>
1.310 + <style>
1.311 + body {
1.312 + transform-style: preserve-3d;
1.313 + width: 200px;
1.314 + height: 200px;
1.315 + }
1.316 + .box {
1.317 + width: 50px;
1.318 + height: 50px;
1.319 + offset-position: 50% 50%;
1.320 + offset-distance: 100%;
1.321 + offset-rotate: 0deg;
1.322 + }
1.323 + #redBox {
1.324 + background-color: red;
1.325 + offset-path: ray(45deg closest-side contain);
1.326 + }
1.327 + #blueBox {
1.328 + background-color: blue;
1.329 + offset-path: ray(180deg closest-side contain);
1.330 + }
1.331 + </style>
1.332 + <body>
1.333 + <div class="box" id="redBox"></div>
1.334 + <div class="box" id="blueBox"></div>
1.335 + </body>
1.336 + </code></pre>
1.337 + <figure>
1.338 + <img alt="An image of boxes positioned with contain" src="images/offset_distance_with_contain.png" style="width: 200px;"/>
1.339 + <figcaption>'offset-path' with 'contain'</figcaption>
1.340 + </figure>
1.341
1.342 - <div class='example'>
1.343 - Here are some examples.
1.344 - The first example shows that some parts of boxes are outside of the <a>offset path</a>.
1.345 - <pre class="lang-html">
1.346 - <style>
1.347 - body {
1.348 - transform-style: preserve-3d;
1.349 - width: 200px;
1.350 - height: 200px;
1.351 - }
1.352 - .box {
1.353 - width: 50px;
1.354 - height: 50px;
1.355 - offset-position: 50% 50%;
1.356 - offset-distance: 100%;
1.357 - offset-rotate: 0deg;
1.358 - }
1.359 - #redBox {
1.360 - background-color: red;
1.361 - offset-path: ray(45deg closest-side);
1.362 - }
1.363 - #blueBox {
1.364 - background-color: blue;
1.365 - offset-path: ray(180deg closest-side);
1.366 - }
1.367 - </style>
1.368 - <body>
1.369 - <div class="box" id="redBox"></div>
1.370 - <div class="box" id="blueBox"></div>
1.371 - </body>
1.372 - </pre>
1.373 - <figure>
1.374 - <img alt="An image of boxes positioned without contain" src="images/offset_distance_without_contain.png" style="width: 200px;"/>
1.375 - <figcaption>'offset-path' without 'contain'</figcaption>
1.376 - </figure>
1.377 + In the third example, the path size is increased so that the box can be contained. The <a>used offset distance</a> is negative.
1.378 + <pre><code highlight=html>
1.379 + <style>
1.380 + body {
1.381 + transform-style: preserve-3d;
1.382 + width: 250px;
1.383 + height: 250px;
1.384 + }
1.385 + .box {
1.386 + width: 60%;
1.387 + height: 10%;
1.388
1.389 - In the second example, 'contain' is given to the 'offset-path' value of each box
1.390 - to avoid overflowing.
1.391 - <pre class="lang-html">
1.392 - <style>
1.393 - body {
1.394 - transform-style: preserve-3d;
1.395 - width: 200px;
1.396 - height: 200px;
1.397 - }
1.398 - .box {
1.399 - width: 50px;
1.400 - height: 50px;
1.401 - offset-position: 50% 50%;
1.402 - offset-distance: 100%;
1.403 - offset-rotate: 0deg;
1.404 - }
1.405 - #redBox {
1.406 - background-color: red;
1.407 - offset-path: ray(45deg closest-side contain);
1.408 - }
1.409 - #blueBox {
1.410 - background-color: blue;
1.411 - offset-path: ray(180deg closest-side contain);
1.412 - }
1.413 - </style>
1.414 - <body>
1.415 - <div class="box" id="redBox"></div>
1.416 - <div class="box" id="blueBox"></div>
1.417 - </body>
1.418 - </pre>
1.419 - <figure>
1.420 - <img alt="An image of boxes positioned with contain" src="images/offset_distance_with_contain.png" style="width: 200px;"/>
1.421 - <figcaption>'offset-path' with 'contain'</figcaption>
1.422 - </figure>
1.423 + offset-position: 20% 20%;
1.424 + offset-distance: 0%;
1.425 + offset-rotate: 0deg;
1.426 + offset-anchor: 200% -300%;
1.427 + }
1.428 + #blueBox {
1.429 + background-color: blue;
1.430 + offset-path: ray(-90deg closest-side contain);
1.431 + }
1.432 + </style>
1.433 + <body>
1.434 + <div class="box" id="blueBox"></div>
1.435 + </body>
1.436 + </code></pre>
1.437 + <figure>
1.438 + <img alt="An image of an increased path size" src="images/increase-size.svg" style="width: 400px; height: 335;"/>
1.439 + <figcaption>'offset-path' with path size increased</figcaption>
1.440 + </figure>
1.441
1.442 - In the third example, the path size is increased so that the box can be contained. The <a>used offset distance</a> is negative.
1.443 - <pre class="lang-html">
1.444 - <style>
1.445 - body {
1.446 - transform-style: preserve-3d;
1.447 - width: 250px;
1.448 - height: 250px;
1.449 - }
1.450 - .box {
1.451 - width: 60%;
1.452 - height: 10%;
1.453 + In the fourth example, the initial position is outside the containing block.
1.454 + <pre><code highlight=html>
1.455 + <style>
1.456 + #container {
1.457 + transform-style: preserve-3d;
1.458 + width: 200px;
1.459 + height: 200px;
1.460 + }
1.461 + .box {
1.462 + width: 20%;
1.463 + height: 20%;
1.464 + offset-position: 140% 70%;
1.465 + offset-distance: 100%;
1.466 + }
1.467 + #redBox {
1.468 + background-color: red;
1.469 + offset-path: ray(-90deg sides);
1.470 + }
1.471 + #blueBox {
1.472 + background-color: blue;
1.473 + offset-path: ray(180deg closest-side);
1.474 + }
1.475 + </style>
1.476 + <div id="container">
1.477 + <div class="box" id="redBox"></div>
1.478 + <div class="box" id="blueBox"></div>
1.479 + </div>
1.480 + </code></pre>
1.481 + <figure>
1.482 + <img alt="An image with initial position outside the containing block" src="images/initial-outside.svg" style="width: 700px;" />
1.483 + <figcaption>Initial position outside the containing block</figcaption>
1.484 + </figure>
1.485 + </div>
1.486
1.487 - offset-position: 20% 20%;
1.488 - offset-distance: 0%;
1.489 - offset-rotate: 0deg;
1.490 - offset-anchor: 200% -300%;
1.491 - }
1.492 - #blueBox {
1.493 - background-color: blue;
1.494 - offset-path: ray(-90deg closest-side contain);
1.495 - }
1.496 - </style>
1.497 - <body>
1.498 - <div class="box" id="blueBox"></div>
1.499 - </body>
1.500 - </pre>
1.501 - <figure>
1.502 - <img alt="An image of an increased path size" src="images/increase-size.svg" style="width: 400px; height: 335;"/>
1.503 - <figcaption>'offset-path' with path size increased</figcaption>
1.504 - </figure>
1.505 + : <<basic-shape>> || <<geometry-box>>
1.506 + ::
1.507 + The <a>offset path</a> is a basic shape as specified in CSS Shapes [[!CSS-SHAPES]].
1.508
1.509 - In the fourth example, the initial position is outside the containing block.
1.510 - <pre class="lang-html">
1.511 - <style>
1.512 - #container {
1.513 - transform-style: preserve-3d;
1.514 - width: 200px;
1.515 - height: 200px;
1.516 - }
1.517 - .box {
1.518 - width: 20%;
1.519 - height: 20%;
1.520 - offset-position: 140% 70%;
1.521 - offset-distance: 100%;
1.522 - }
1.523 - #redBox {
1.524 - background-color: red;
1.525 - offset-path: ray(-90deg sides);
1.526 - }
1.527 - #blueBox {
1.528 - background-color: blue;
1.529 - offset-path: ray(180deg closest-side);
1.530 - }
1.531 - </style>
1.532 - <div id="container">
1.533 - <div class="box" id="redBox"></div>
1.534 - <div class="box" id="blueBox"></div>
1.535 - </div>
1.536 - </pre>
1.537 - <figure>
1.538 - <img alt="An image with initial position outside the containing block" src="images/initial-outside.svg" style="width: 700px;" />
1.539 - <figcaption>Initial position outside the containing block</figcaption>
1.540 - </figure>
1.541 - </div>
1.542 + 'offset-position' is ignored for circle and ellipse basic shapes with explicit center positions, and for other types of basic shapes. If a circle or ellipse basic shape has no explicit center position, the shape is centered at the ''initial position'' of the path, as described in 'offset-position'.
1.543
1.544 - <dt><<basic-shape>> || <<geometry-box>></dt>
1.545 - <dd>The <a>offset path</a> is a basic shape as specified in CSS Shapes [[!CSS-SHAPES]].
1.546 + The <dfn>initial position</dfn> and <dfn>initial direction</dfn> of the path describe the position of the box along the path when 'offset-distance' begins increasing from ''0%''.
1.547
1.548 - 'offset-position' is ignored for circle and ellipse basic shapes with explicit center positions, and for other types of basic shapes. If a circle or ellipse basic shape has no explicit center position, the shape is centered at the ''initial position'' of the path, as described in 'offset-position'.
1.549 + The ''initial position'' for basic shapes are defined as follows:
1.550
1.551 - The <dfn>initial position</dfn> and <dfn>initial direction</dfn> of the path describe the position of the box along the path when 'offset-distance' begins increasing from ''0%''.
1.552 + : <<circle()>>
1.553 + : <<ellipse()>>
1.554 + ::
1.555 + The ''initial position'' is defined by the point where a horizontal tangent to the circle/ellipse would reach the top vertical position.
1.556 + : <<inset()>>
1.557 + ::
1.558 + The ''initial position'' is the left end of the top horizontal line, immediately to the right of any 'border-radius' arc.
1.559 + : <<polygon()>>
1.560 + ::
1.561 + The ''initial position'' is defined by the first coordinate pair of the polygon.
1.562
1.563 - The ''initial position'' for basic shapes are defined as follows:
1.564 - <dl>
1.565 - <dt><<circle()>></dt>
1.566 - <dt><<ellipse()>></dt>
1.567 - <dd>The ''initial position'' is defined by the point where a horizontal tangent
1.568 - to the circle/ellipse would reach the top vertical position.</dd>
1.569 - <dt><<inset()>></dt>
1.570 - <dd>The ''initial position'' is the left end of the top horizontal line, immediately to the right of any 'border-radius' arc.</dd>
1.571 - <dt><<polygon()>></dt>
1.572 - <dd>The ''initial position'' is defined by the first coordinate pair
1.573 - of the polygon.
1.574 - The ''initial direction'' is defined by the vector connecting
1.575 - the ''initial position'' with the next following coordinate pair
1.576 - that isn't equal to the ''initial position''.</dd>
1.577 - </dl>
1.578 + The ''initial direction'' is defined by the vector connecting.
1.579
1.580 - The <<geometry-box>> specified in combination with a <<basic-shape>> provides the reference box for the <<basic-shape>>. If no reference box is specified, the border-box will be used as reference box.
1.581 - If <<geometry-box>> is supplied without a <<basic-shape>>, the ''initial position'' is the left end of the top horizontal line, immediately to the right of any 'border-radius' arc, and the ''initial direction'' is to the right.
1.582 + the ''initial position'' with the next following coordinate pair that isn't equal to the ''initial position''.
1.583
1.584 - Apart from polygons with non-zero length, the ''initial direction'' is 90 degrees (i.e. to the right).
1.585 - <p class="note">Note: This gives ''0deg'' rotation when 'offset-rotate' is ''auto''.</p>
1.586 + The <<geometry-box>> specified in combination with a <<basic-shape>> provides the reference box for the <<basic-shape>>. If no reference box is specified, the border-box will be used as reference box.
1.587
1.588 - <div class='example'>
1.589 - This example shows how <geometry-box> <a>offset path</a> works in combination with 'border-radius'.
1.590 + If <<geometry-box>> is supplied without a <<basic-shape>>, the ''initial position'' is the left end of the top horizontal line, immediately to the right of any 'border-radius' arc, and the ''initial direction'' is to the right.
1.591
1.592 - <pre class="lang-html">
1.593 - <style>
1.594 - body {
1.595 - width: 500px;
1.596 - height: 300px;
1.597 - border-radius: 80px;
1.598 - border: dashed aqua;
1.599 - margin: 0;
1.600 - }
1.601 - #blueBox {
1.602 - width: 40px;
1.603 - height: 20px;
1.604 - background-color: blue;
1.605 - offset-path: margin-box;
1.606 - }
1.607 - </style>
1.608 - <body>
1.609 - <div id="blueBox"></div>
1.610 - </body>
1.611 - </pre>
1.612 - <figure>
1.613 - <img alt="An image of example for geometry-box with border-radius" src="images/geometry-box.svg" style="width: 470px; text-align: center"/>
1.614 - <figcaption>The ''initial position'' is the left end of the top horizontal line.</figcaption>
1.615 - </figure>
1.616 - </div>
1.617 - <div class='example'>
1.618 - This example uses a circle with implicit center position.
1.619 - <pre class="lang-html">
1.620 - <style>
1.621 - body {
1.622 - width: 323px;
1.623 - height: 131px;
1.624 - margin: 0px;
1.625 - border: 2px solid black;
1.626 - padding: 8px;
1.627 - transform-style: preserve-3d;
1.628 - }
1.629 - .item {
1.630 - width: 90px;
1.631 - height: 40px;
1.632 - background-color: violet;
1.633 - }
1.634 - #middle {
1.635 - offset-position: auto;
1.636 - offset-path: circle(60%) margin-box;
1.637 - offset-distance: 25%;
1.638 - offset-anchor: left top;
1.639 - }
1.640 - </style>
1.641 - <body>
1.642 - <div class="item"></div>
1.643 - <div class="item" id="middle"></div>
1.644 - <div class="item"></div>
1.645 - </body>
1.646 - </pre>
1.647 - <figure>
1.648 - <img src="images/normal-flow.svg" width="505" height="324" alt="Normal flow determining circle center">
1.649 - <figcaption>The circle center is determined by normal flow.</figcaption>
1.650 - </figure>
1.651 - </div>
1.652 - </dd>
1.653 + Apart from polygons with non-zero length, the ''initial direction'' is 90 degrees (i.e. to the right).
1.654
1.655 - <dt><dfn for=offsetpath type=function id=offsetpath-pathfunc>path()</dfn> = path(<<string>>)</dt>
1.656 - <dd>The <<string>> represents an SVG Path data string.
1.657 - The path data string must be conform to the grammar and parsing rules of SVG 1.1 [[!SVG11]].
1.658 - The ''initial position'' is defined by the first “move to†argument in the path string. For the ''initial direction'' follow SVG 1.1 [[!SVG11]].
1.659 - </dd>
1.660 + Note: This gives ''0deg'' rotation when 'offset-rotate' is ''auto''.
1.661
1.662 - <dt><<url>></dt>
1.663 - <dd>References an SVG <a>shape element</a> and uses its geometry as <a>offset path</a>.
1.664 - See SVG 1.1 for more information about the ''initial position'' and ''initial direction'' [[!SVG11]].
1.665 - </dd>
1.666 + <div class=example>
1.667 + This example shows how <geometry-box> <a>offset path</a> works in combination with 'border-radius'.
1.668
1.669 - <dt><dfn for=offsetpath id=offsetpath-none>none</dfn></dt>
1.670 - <dd>No <a>offset path</a> gets created. When 'offset-path' is <a href="#offsetpath-none">none</a>, 'offset-distance' and 'offset-rotate' have no effect.</dd>
1.671 + <pre><code highlight=html>
1.672 + <style>
1.673 + body {
1.674 + width: 500px;
1.675 + height: 300px;
1.676 + border-radius: 80px;
1.677 + border: dashed aqua;
1.678 + margin: 0;
1.679 + }
1.680 + #blueBox {
1.681 + width: 40px;
1.682 + height: 20px;
1.683 + background-color: blue;
1.684 + offset-path: margin-box;
1.685 + }
1.686 + </style>
1.687 + <body>
1.688 + <div id="blueBox"></div>
1.689 + </body>
1.690 + </code></pre>
1.691 + <figure>
1.692 + <img alt="An image of example for geometry-box with border-radius" src="images/geometry-box.svg" style="width: 470px; text-align: center"/>
1.693 + <figcaption>The ''initial position'' is the left end of the top horizontal line.</figcaption>
1.694 + </figure>
1.695 + </div>
1.696 +
1.697 + <div class=example>
1.698 + This example uses a circle with implicit center position.
1.699 + <pre><code highlight=html>
1.700 + <style>
1.701 + body {
1.702 + width: 323px;
1.703 + height: 131px;
1.704 + margin: 0px;
1.705 + border: 2px solid black;
1.706 + padding: 8px;
1.707 + transform-style: preserve-3d;
1.708 + }
1.709 + .item {
1.710 + width: 90px;
1.711 + height: 40px;
1.712 + background-color: violet;
1.713 + }
1.714 + #middle {
1.715 + offset-position: auto;
1.716 + offset-path: circle(60%) margin-box;
1.717 + offset-distance: 25%;
1.718 + offset-anchor: left top;
1.719 + }
1.720 + </style>
1.721 + <body>
1.722 + <div class="item"></div>
1.723 + <div class="item" id="middle"></div>
1.724 + <div class="item"></div>
1.725 + </body>
1.726 + </code></pre>
1.727 + <figure>
1.728 + <img src="images/normal-flow.svg" width="505" height="324" alt="Normal flow determining circle center">
1.729 + <figcaption>The circle center is determined by normal flow.</figcaption>
1.730 + </figure>
1.731 + </div>
1.732 +
1.733 + : <dfn for=offsetpath type=function id=offsetpath-pathfunc>path()</dfn> = path(<<string>>)
1.734 + ::
1.735 + The <<string>> represents an SVG Path data string.
1.736 + The path data string must be conform to the grammar and parsing rules of SVG 1.1 [[!SVG11]].
1.737 + The ''initial position'' is defined by the first “move to†argument in the path string. For the ''initial direction'' follow SVG 1.1 [[!SVG11]].
1.738 +
1.739 + : <<url>>
1.740 + ::
1.741 + References an SVG <a>shape element</a> and uses its geometry as <a>offset path</a>.
1.742 + See SVG 1.1 for more information about the ''initial position'' and ''initial direction'' [[!SVG11]].
1.743 +
1.744 + : <dfn for=offsetpath id=offsetpath-none>none</dfn>
1.745 + ::
1.746 + No <a>offset path</a> gets created. When 'offset-path' is <a href="#offsetpath-none">none</a>, 'offset-distance' and 'offset-rotate' have no effect.
1.747 </dl>
1.748
1.749 -A computed value of other than <a href="#offsetpath-none">none</a> results in the creation of a <a spec="css21">stacking context</a> [[!CSS21]] and <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>, per usual for <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">transforms</a>.
1.750 +A computed value of other than <a href="#offsetpath-none">none</a> results in the creation of a <a>stacking context</a> [[!CSS21]] and <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>, per usual for <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">transforms</a>.
1.751
1.752 A reference that fails to download, is not a reference to an SVG <a>shape element</a>, or is non-existent, is treated as equivalent to <code>path("m 0 0")</code>.
1.753 -<p class='note'>Note: This is a zero length path with <a href="https://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes">directionality</a> aligned with the positive x-axis.</p>
1.754 +
1.755 +Note: This is a zero length path with <a href="https://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes">directionality</a> aligned with the positive x-axis.</p>
1.756
1.757 See the section <a href="#calculating-path-transform">“Calculating the path transformâ€</a> for how to use the <a>offset path</a> to compute the transform.
1.758
1.759 -For SVG <a>shape element</a>s without associated CSS layout box, the <a>used value</a> for <a value for=mask-clip>content-box</a>,
1.760 -<a value for=mask-clip>padding-box</a>, <a value for=mask-clip>border-box</a> and <a value for=mask-clip>margin-box</a> is
1.761 -<a value for=clip-path>fill-box</a>.
1.762 +For SVG <a>shape element</a>s without associated CSS layout box, the <a>used value</a> for <a value for=mask-clip>content-box</a>, <a value for=mask-clip>padding-box</a>, <a value for=mask-clip>border-box</a> and <a value for=mask-clip>margin-box</a> is <a value for=clip-path>fill-box</a>.
1.763
1.764 -For <a>shape element</a>s with associated CSS layout box, the <a>used value</a> for <a value for=clip-path>fill-box</a>,
1.765 -<a value for=clip-path>stroke-box</a> and <a value for=clip-path>view-box</a> is <a value for=mask-clip>border-box</a>.
1.766 +For <a>shape element</a>s with associated CSS layout box, the <a>used value</a> for <a value for=clip-path>fill-box</a>, <a value for=clip-path>stroke-box</a> and <a value for=clip-path>view-box</a> is <a value for=mask-clip>border-box</a>.
1.767
1.768 -<h3 id="offset-distance-property">Position on the path: The 'offset-distance' property</h3>
1.769 -<pre class='propdef'>
1.770 +
1.771 +Position on the path: The 'offset-distance' property {#offset-distance-property}
1.772 +--------------------------------------------------------------------------------
1.773 +
1.774 +<pre class=propdef>
1.775 Name: offset-distance
1.776 Value: <<length-percentage>>
1.777 Initial: 0
1.778 @@ -463,157 +440,154 @@
1.779 Specifies the position of the box as a distance along the <a>offset path</a>.
1.780
1.781 <dl dfn-for="offset-distance" dfn-type="value">
1.782 -<dt><<length-percentage>></dt>
1.783 -<dd>Specifies the distance from the ''initial position'' of the <a>offset path</a> to the position of the box’s <a>anchor point</a>.
1.784 + : <<length-percentage>>
1.785 + ::
1.786 + Specifies the distance from the ''initial position'' of the <a>offset path</a> to the position of the box’s <a>anchor point</a>.
1.787
1.788 -Percentages are relative to the length of the <a>offset path</a>--
1.789 -that is, the distance between
1.790 -the ''initial position'' and the end position of the <a>offset path</a>.</dd>
1.791 + Percentages are relative to the length of the <a>offset path</a>-- that is, the distance between the ''initial position'' and the end position of the <a>offset path</a>.
1.792 </dl>
1.793
1.794 -<h4 id="calculating-the-computed-distance-along-a-path">Calculating the computed distance along a path</h4>
1.795 +### Calculating the computed distance along a path ### {#calculating-the-computed-distance-along-a-path}
1.796
1.797 Processing the distance along an <a>offset path</a> operates differently depending upon the nature of the <a>offset path</a>:
1.798
1.799 -* References to <<angle>> <a>offset path</a>s with contain are unclosed intervals.
1.800 -* References to <<angle>> <a>offset path</a>s without contain are unbounded rays.
1.801 -* All basic CSS shapes are closed loops.
1.802 -* <a>Offset path</a>s (including references to SVG Paths) are closed loops only if the final command
1.803 - in the path list is a closepath command ("z" or "Z"), otherwise they are unclosed intervals.
1.804 -* References to SVG circles, ellipses, images, polygons and rects are closed loops.
1.805 -* References to SVG lines and polylines are unclosed intervals.
1.806 +* References to <<angle>> <a>offset path</a>s with contain are unclosed intervals.
1.807 +* References to <<angle>> <a>offset path</a>s without contain are unbounded rays.
1.808 +* All basic CSS shapes are closed loops.
1.809 +* <a>Offset path</a>s (including references to SVG Paths) are closed loops only if the final command in the path list is a closepath command ("z" or "Z"), otherwise they are unclosed intervals.
1.810 +* References to SVG circles, ellipses, images, polygons and rects are closed loops.
1.811 +* References to SVG lines and polylines are unclosed intervals.
1.812
1.813 To determine the <dfn>used offset distance</dfn> for a given <a>offset path</a> and <dfn>offset distance</dfn>:
1.814
1.815 -<div class="switch">
1.816 +1. Let the <dfn>total length</dfn> be the total length of <a>offset path</a> with all sub-paths.
1.817 +2. Convert <a>offset distance</a> to pixels, with 100% being converted to <a>total length</a>.
1.818 +3. <dl class=switch>
1.819 + : If <a>offset path</a> is an unbounded ray:
1.820 + :: Let <a>used offset distance</a> be equal to <a>offset distance</a>.
1.821 + : Otherwise if <a>offset path</a> is an <<angle>> path with contain:
1.822 + :: Let <a>used offset distance</a> be equal to <a>offset distance</a>, clamped so that the box lies entirely within the path.
1.823 + : If <a>offset path</a> is any other unclosed interval:
1.824 + :: Let <a>used offset distance</a> be equal to <a>offset distance</a> clamped by 0 and the total length of the path.
1.825 + : Otherwise <a>offset path</a> is a closed loop:
1.826 + :: Let <a>used offset distance</a> be equal to <a>offset distance</a> modulus the total length of the path. If the total length of the path is 0, <a>used offset distance</a> is also 0.
1.827 + </dl>
1.828
1.829 -1. Let the <dfn>total length</dfn> be the total length of <a>offset path</a> with all
1.830 - sub-paths.
1.831 +<div class=example>
1.832 +This example shows boxes placed along an unclosed interval.
1.833
1.834 -2.
1.835 - Convert <a>offset distance</a> to pixels, with 100% being converted to <a>total length</a>.
1.836 -
1.837 -3.
1.838 - : If <a>offset path</a> is an unbounded ray:
1.839 - :: Let <a>used offset distance</a> be equal to <a>offset distance</a>.
1.840 - : Otherwise if <a>offset path</a> is an <<angle>> path with contain:
1.841 - :: Let <a>used offset distance</a> be equal to <a>offset distance</a>, clamped so that the box lies entirely within the path.
1.842 - : If <a>offset path</a> is any other unclosed interval:
1.843 - :: Let <a>used offset distance</a> be equal to <a>offset distance</a> clamped by 0 and the total length of the path.
1.844 - : Otherwise <a>offset path</a> is a closed loop:
1.845 - :: Let <a>used offset distance</a> be equal to <a>offset distance</a> modulus the total length of the path. If the total length of the path is 0, <a>used offset distance</a> is also 0.
1.846 -
1.847 -</div>
1.848 -
1.849 -<div class='example'>
1.850 -This example shows boxes placed along an unclosed interval.
1.851 -<pre class="lang-html">
1.852 - <style>
1.853 - .item {
1.854 - width: 100px;
1.855 - height: 40px;
1.856 - offset-position: 0% 0%;
1.857 - offset-path: path('m 0 0 h 200 v 150');
1.858 - }
1.859 - #box1 {
1.860 - background-color: red;
1.861 - offset-distance: -280%;
1.862 - }
1.863 - #box2 {
1.864 - background-color: green;
1.865 - offset-distance: 190%;
1.866 - }
1.867 - </style>
1.868 - <body>
1.869 - <div class="item" id="box1"></div>
1.870 - <div class="item" id="box2"></div>
1.871 - </body>
1.872 -</pre>
1.873 +<pre><code highlight=html>
1.874 +<style>
1.875 + .item {
1.876 + width: 100px;
1.877 + height: 40px;
1.878 + offset-position: 0% 0%;
1.879 + offset-path: path('m 0 0 h 200 v 150');
1.880 + }
1.881 + #box1 {
1.882 + background-color: red;
1.883 + offset-distance: -280%;
1.884 + }
1.885 + #box2 {
1.886 + background-color: green;
1.887 + offset-distance: 190%;
1.888 + }
1.889 +</style>
1.890 +<body>
1.891 + <div class="item" id="box1"></div>
1.892 + <div class="item" id="box2"></div>
1.893 +</body>
1.894 +</code></pre>
1.895 <figure>
1.896 - <img src="images/offset-distance-unclosed.svg" style="width: 700px;"
1.897 - alt="An example of boxes placed along an unclosed interval"/>
1.898 - <figcaption>An example of boxes placed along an unclosed interval</figcaption>
1.899 + <img src="images/offset-distance-unclosed.svg" style="width: 700px;"
1.900 + alt="An example of boxes placed along an unclosed interval"/>
1.901 + <figcaption>An example of boxes placed along an unclosed interval</figcaption>
1.902 </figure>
1.903 </div>
1.904
1.905 -<div class='example'>
1.906 +<div class=example>
1.907 This example shows boxes placed along a closed interval.
1.908 -<pre class="lang-html">
1.909 - <style>
1.910 - .item {
1.911 - width: 100px;
1.912 - height: 40px;
1.913 - offset-position: 0% 0%;
1.914 - offset-path: path('m 0 0 h 200 v 150 z');
1.915 - }
1.916 - #box1 {
1.917 - background-color: red;
1.918 - offset-distance: -280%;
1.919 - }
1.920 - #box2 {
1.921 - background-color: green;
1.922 - offset-distance: 190%;
1.923 - }
1.924 - </style>
1.925 - <body>
1.926 - <div class="item" id="box1"></div>
1.927 - <div class="item" id="box2"></div>
1.928 - </body>
1.929 -</pre>
1.930 +
1.931 +<pre><code highlight=html>
1.932 +<style>
1.933 + .item {
1.934 + width: 100px;
1.935 + height: 40px;
1.936 + offset-position: 0% 0%;
1.937 + offset-path: path('m 0 0 h 200 v 150 z');
1.938 + }
1.939 + #box1 {
1.940 + background-color: red;
1.941 + offset-distance: -280%;
1.942 + }
1.943 + #box2 {
1.944 + background-color: green;
1.945 + offset-distance: 190%;
1.946 + }
1.947 +</style>
1.948 +<body>
1.949 + <div class="item" id="box1"></div>
1.950 + <div class="item" id="box2"></div>
1.951 +</body>
1.952 +</code></pre>
1.953 <figure>
1.954 - <img src="images/offset-distance-closed.svg" style="width: 700px;"
1.955 - alt="An example of boxes placed along a closed interval"/>
1.956 - <figcaption>An example of boxes placed along a closed interval</figcaption>
1.957 + <img src="images/offset-distance-closed.svg" style="width: 700px;"
1.958 + alt="An example of boxes placed along a closed interval"/>
1.959 + <figcaption>An example of boxes placed along a closed interval</figcaption>
1.960 </figure>
1.961 </div>
1.962
1.963 -<div class='example'>
1.964 +<div class=example>
1.965 This example shows a way to align boxes within the polar coordinate system using 'offset-path', 'offset-distance'.
1.966 -<pre class="lang-html">
1.967 - <style>
1.968 - body {
1.969 - transform-style: preserve-3d;
1.970 - width: 300px;
1.971 - height: 300px;
1.972 - border: dashed gray;
1.973 - border-radius: 50%;
1.974 - }
1.975 - .circleBox {
1.976 - position: absolute;
1.977 - left: 50%;
1.978 - top: 50%;
1.979 - width: 40px;
1.980 - height: 40px;
1.981 - background-color: red;
1.982 - border-radius: 50%;
1.983 - }
1.984 - #circle1 {
1.985 - offset-path: ray(0deg farthest-side);
1.986 - offset-distance: 50%;
1.987 - }
1.988 - #circle2 {
1.989 - offset-path: ray(90deg farthest-side);
1.990 - offset-distance: 20%;
1.991 - }
1.992 - #circle3 {
1.993 - offset-path: ray(225deg farthest-side);
1.994 - offset-distance: 100%;
1.995 - }
1.996 - </style>
1.997 - <body>
1.998 - <div class="circleBox" id="circle1"></div>
1.999 - <div class="circleBox" id="circle2"></div>
1.1000 - <div class="circleBox" id="circle3"></div>
1.1001 - </body>
1.1002 -</pre>
1.1003 +
1.1004 +<pre><code highlight=html>
1.1005 +<style>
1.1006 + body {
1.1007 + transform-style: preserve-3d;
1.1008 + width: 300px;
1.1009 + height: 300px;
1.1010 + border: dashed gray;
1.1011 + border-radius: 50%;
1.1012 + }
1.1013 + .circleBox {
1.1014 + position: absolute;
1.1015 + left: 50%;
1.1016 + top: 50%;
1.1017 + width: 40px;
1.1018 + height: 40px;
1.1019 + background-color: red;
1.1020 + border-radius: 50%;
1.1021 + }
1.1022 + #circle1 {
1.1023 + offset-path: ray(0deg farthest-side);
1.1024 + offset-distance: 50%;
1.1025 + }
1.1026 + #circle2 {
1.1027 + offset-path: ray(90deg farthest-side);
1.1028 + offset-distance: 20%;
1.1029 + }
1.1030 + #circle3 {
1.1031 + offset-path: ray(225deg farthest-side);
1.1032 + offset-distance: 100%;
1.1033 + }
1.1034 +</style>
1.1035 +<body>
1.1036 + <div class="circleBox" id="circle1"></div>
1.1037 + <div class="circleBox" id="circle2"></div>
1.1038 + <div class="circleBox" id="circle3"></div>
1.1039 +</body>
1.1040 +</code></pre>
1.1041 <figure>
1.1042 - <img alt="An image of three boxes positioned to polar coordinates" src="images/simple_offset_position.png" style="width: 300px;"/>
1.1043 - <figcaption>An example of positioning box in polar coordinates</figcaption>
1.1044 + <img alt="An image of three boxes positioned to polar coordinates" src="images/simple_offset_position.png" style="width: 300px;"/>
1.1045 + <figcaption>An example of positioning box in polar coordinates</figcaption>
1.1046 </figure>
1.1047 </div>
1.1048
1.1049 -<h3 id="offset-position-property">Define the starting point of the path: The 'offset-position' property</h3>
1.1050 -<pre class='propdef'>
1.1051 +
1.1052 +Define the starting point of the path: The 'offset-position' property {#offset-position-property}
1.1053 +-------------------------------------------------------------------------------------------------
1.1054 +
1.1055 +<pre class=propdef>
1.1056 Name: offset-position
1.1057 Applies to: <a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">transformable elements</a>
1.1058 Value: auto | <<position>>
1.1059 @@ -625,222 +599,232 @@
1.1060 Animatable: as <a href="https://www.w3.org/TR/css3-transitions/#animtype-lpcalc">position</a>
1.1061 </pre>
1.1062
1.1063 -Specifies the ''initial position'' of the <a>offset path</a>.
1.1064 -If 'position' is specified with ''static'', 'offset-position' would be ignored.
1.1065 +Specifies the ''initial position'' of the <a>offset path</a>. If 'position' is specified with ''static'', 'offset-position' would be ignored.
1.1066
1.1067 Values are defined as follows:
1.1068 <dl dfn-for="offset-position" dfn-type="value">
1.1069 -<dt><var>auto</var></dt>
1.1070 -<dd>Indicates the ''initial position'' is the position of the box specified with 'position' property.
1.1071 + : <var>auto</var>
1.1072 + ::
1.1073 + Indicates the ''initial position'' is the position of the box specified with 'position' property.
1.1074
1.1075 -<p class='note'>Note: When 'position' is ''static'' and 'offset-position' is ''auto'' (and not ignored due to 'offset-path'), we have positioning relative to <a href="https://drafts.csswg.org/css-position-3/#normal-flow">normal flow</a>.</p></dd>
1.1076 + Note: When 'position' is ''static'' and 'offset-position' is ''auto'' (and not ignored due to 'offset-path'), we have positioning relative to <a href="https://drafts.csswg.org/css-position-3/#normal-flow">normal flow</a>.
1.1077
1.1078 -<dt><<position>></dt>
1.1079 -<dd>Specifies the ''initial position'',
1.1080 -with the the containing block as the positioning area
1.1081 -and a dimensionless point (zero-sized box) as the object area.
1.1082 + : <<position>>
1.1083 + ::
1.1084 + Specifies the ''initial position'', with the the containing block as the positioning area and a dimensionless point (zero-sized box) as the object area.
1.1085
1.1086 -<p class='note'>Note: This is similar to absolute positioning, except that 'offset-position' does not prevent boxes from impacting the layout of later siblings.</p></dd>
1.1087 + Note: This is similar to absolute positioning, except that 'offset-position' does not prevent boxes from impacting the layout of later siblings.
1.1088 </dl>
1.1089
1.1090 -A computed value of other than ''auto'' results in the creation of a <a spec="css21">stacking context</a> [[!CSS21]] and <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>, per usual for <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">transforms</a>.
1.1091 +A computed value of other than ''auto'' results in the creation of a <a>stacking context</a> [[!CSS21]] and <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>, per usual for <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">transforms</a>.
1.1092
1.1093 'offset-position' is ignored if 'offset-path' is a geometry-box, or a basic shape (other than a circle or ellipse with implicit center). In these cases, the geometry-box or basic shape specifies the ''initial position''.
1.1094
1.1095 -<div class='example'>
1.1096 +<div class=example>
1.1097 This example shows positioning a box with 'offset-position'.
1.1098 -<pre class="lang-html">
1.1099 - <style>
1.1100 +
1.1101 +<pre><code highlight=html>
1.1102 +<style>
1.1103 #wrap {
1.1104 - position: relative;
1.1105 - width: 300px;
1.1106 - height: 300px;
1.1107 - border: 1px solid black;
1.1108 + position: relative;
1.1109 + width: 300px;
1.1110 + height: 300px;
1.1111 + border: 1px solid black;
1.1112 }
1.1113
1.1114 #box {
1.1115 - width: 100px;
1.1116 - height: 100px;
1.1117 - background-color: green;
1.1118 - position: absolute;
1.1119 - top: 100px;
1.1120 - left: 80px;
1.1121 - offset-position: auto;
1.1122 - offset-anchor: center;
1.1123 - offset-path: ray(45deg);
1.1124 + width: 100px;
1.1125 + height: 100px;
1.1126 + background-color: green;
1.1127 + position: absolute;
1.1128 + top: 100px;
1.1129 + left: 80px;
1.1130 + offset-position: auto;
1.1131 + offset-anchor: center;
1.1132 + offset-path: ray(45deg);
1.1133 }
1.1134 - </style>
1.1135 - <body>
1.1136 +</style>
1.1137 +<body>
1.1138 <div id="wrap">
1.1139 - <div id="box"></div>
1.1140 + <div id="box"></div>
1.1141 </div>
1.1142 - </body>
1.1143 -</pre>
1.1144 +</body>
1.1145 +</code></pre>
1.1146 <figure>
1.1147 - <img alt="An image of offset-position: auto" src="images/offset_position_auto.png" width="300"/>
1.1148 - <figcaption>An example when ''auto'' is given to 'offset-position'</figcaption>
1.1149 + <img alt="An image of offset-position: auto" src="images/offset_position_auto.png" width="300"/>
1.1150 + <figcaption>An example when ''auto'' is given to 'offset-position'</figcaption>
1.1151 </figure>
1.1152 </div>
1.1153 -<div class='example'>
1.1154 +
1.1155 +<div class=example>
1.1156 This example shows the interaction with the 'transform' property, and with an individual transform property ('rotate'). The motion path transform is a vertical translation moving ('left', 'top') to 'offset-position'.
1.1157 -<pre class="lang-html">
1.1158 - <style>
1.1159 +
1.1160 +<pre><code highlight=html>
1.1161 +<style>
1.1162 #wrap {
1.1163 - transform-style: preserve-3d;
1.1164 - width: 400px;
1.1165 - height: 350px;
1.1166 + transform-style: preserve-3d;
1.1167 + width: 400px;
1.1168 + height: 350px;
1.1169 }
1.1170 .item {
1.1171 - position: absolute;
1.1172 - left: 200px;
1.1173 - top: 0px;
1.1174 - offset-position: 200px 100px; /* translates by 0px,100px */
1.1175 - offset-anchor: left top;
1.1176 - transform-origin: left top;
1.1177 - width: 130px;
1.1178 - height: 80px;
1.1179 - border-top-right-radius: 23px;
1.1180 + position: absolute;
1.1181 + left: 200px;
1.1182 + top: 0px;
1.1183 + offset-position: 200px 100px; /* translates by 0px,100px */
1.1184 + offset-anchor: left top;
1.1185 + transform-origin: left top;
1.1186 + width: 130px;
1.1187 + height: 80px;
1.1188 + border-top-right-radius: 23px;
1.1189 }
1.1190 #box1 {
1.1191 - background-color: tomato;
1.1192 - offset-position: auto;
1.1193 + background-color: tomato;
1.1194 + offset-position: auto;
1.1195 }
1.1196 #box2 {
1.1197 - background-color: green;
1.1198 + background-color: green;
1.1199 }
1.1200 #box3 {
1.1201 - background-color: navy;
1.1202 - rotate: 90deg; /* applied before motion path transform */
1.1203 + background-color: navy;
1.1204 + rotate: 90deg; /* applied before motion path transform */
1.1205 }
1.1206 #box4 {
1.1207 - background-color: gold;
1.1208 - transform: rotate(90deg); /* applied after motion path transform */
1.1209 + background-color: gold;
1.1210 + transform: rotate(90deg); /* applied after motion path transform */
1.1211 }
1.1212 - </style>
1.1213 - <body>
1.1214 +</style>
1.1215 +<body>
1.1216 <div id="wrap">
1.1217 - <div class="item" id="box1"></div>
1.1218 - <div class="item" id="box2"></div>
1.1219 - <div class="item" id="box3"></div>
1.1220 - <div class="item" id="box4"></div>
1.1221 + <div class="item" id="box1"></div>
1.1222 + <div class="item" id="box2"></div>
1.1223 + <div class="item" id="box3"></div>
1.1224 + <div class="item" id="box4"></div>
1.1225 </div>
1.1226 - </body>
1.1227 -</pre>
1.1228 +</body>
1.1229 +</code></pre>
1.1230 <figure>
1.1231 - <img alt="An example when motion path and other transforms interact" src="images/position-transform.svg" width="400" height="350"/>
1.1232 - <figcaption>An example when motion path and other transforms interact</figcaption>
1.1233 + <img alt="An example when motion path and other transforms interact" src="images/position-transform.svg" width="400" height="350"/>
1.1234 + <figcaption>An example when motion path and other transforms interact</figcaption>
1.1235 </figure>
1.1236 </div>
1.1237 -<div class='example'>
1.1238 +
1.1239 +<div class=example>
1.1240 This example uses 'position' ''static'', so 'offset-position' generates translations from the <a href="https://drafts.csswg.org/css-position/#normal-flow">normal flow</a> positions. By amplifying these translations using 'scale', the normal flow is rotated 180 degrees around the 'offset-position', and the boxes are exploded away from each other.
1.1241 -<pre class="lang-html">
1.1242 - <style>
1.1243 +
1.1244 +<pre><code highlight=html>
1.1245 +<style>
1.1246 #wrap {
1.1247 - transform-style: preserve-3d;
1.1248 - width: 500px;
1.1249 - height: 250px;
1.1250 - line-height: 0px;
1.1251 + transform-style: preserve-3d;
1.1252 + width: 500px;
1.1253 + height: 250px;
1.1254 + line-height: 0px;
1.1255 }
1.1256 span {
1.1257 - position: static;
1.1258 - display: inline-block;
1.1259 - width: 100px;
1.1260 - height: 50px;
1.1261 - border-top-right-radius: 23px;
1.1262 - scale: 2.5 2.5; /* applied before motion path transform */
1.1263 - offset-position: center;
1.1264 - transform: scale(0.4); /* applied after motion path transform */
1.1265 + position: static;
1.1266 + display: inline-block;
1.1267 + width: 100px;
1.1268 + height: 50px;
1.1269 + border-top-right-radius: 23px;
1.1270 + scale: 2.5 2.5; /* applied before motion path transform */
1.1271 + offset-position: center;
1.1272 + transform: scale(0.4); /* applied after motion path transform */
1.1273 }
1.1274 #box1 {
1.1275 - background-color: tomato;
1.1276 + background-color: tomato;
1.1277 }
1.1278 #box2 {
1.1279 - background-color: green;
1.1280 + background-color: green;
1.1281 }
1.1282 #box3 {
1.1283 - background-color: navy;
1.1284 + background-color: navy;
1.1285 }
1.1286 #box4 {
1.1287 - background-color: gold;
1.1288 + background-color: gold;
1.1289 }
1.1290 - </style>
1.1291 - <body>
1.1292 +</style>
1.1293 +<body>
1.1294 <div id="wrap">
1.1295 - <div>
1.1296 - <span id="box1"></span><span id="box2"></span>
1.1297 - </div>
1.1298 - <div>
1.1299 - <span id="box3"></span><span id="box4"></span>
1.1300 - </div>
1.1301 + <div>
1.1302 + <span id="box1"></span><span id="box2"></span>
1.1303 + </div>
1.1304 + <div>
1.1305 + <span id="box3"></span><span id="box4"></span>
1.1306 + </div>
1.1307 </div>
1.1308 - </body>
1.1309 -</pre>
1.1310 +</body>
1.1311 +</code></pre>
1.1312 <figure>
1.1313 - <img alt="An example when motion path and scale interact" src="images/position-scale.svg" width="604" height="304"/>
1.1314 - <figcaption>An example when motion path and scale interact</figcaption>
1.1315 + <img alt="An example when motion path and scale interact" src="images/position-scale.svg" width="604" height="304"/>
1.1316 + <figcaption>An example when motion path and scale interact</figcaption>
1.1317 </figure>
1.1318 </div>
1.1319 -<div class='example'>
1.1320 +
1.1321 +<div class=example>
1.1322 In this example, each 'offset-position' value is ignored as 'offset-path' is a <<geometry-box>>, but the other offset properties combine to have an effect equivalent to that for 'offset-position' 'right bottom'.
1.1323 -<pre class="lang-html">
1.1324 - <style>
1.1325 +
1.1326 +<pre><code highlight=html>
1.1327 +<style>
1.1328 #wrap {
1.1329 - transform-style: preserve-3d;
1.1330 - width: 540px;
1.1331 - height: 420px;
1.1332 + transform-style: preserve-3d;
1.1333 + width: 540px;
1.1334 + height: 420px;
1.1335 }
1.1336 .item {
1.1337 - position: absolute;
1.1338 - width: 90px;
1.1339 - height: 70px;
1.1340 - border-top-right-radius: 23px;
1.1341 - scale: 0.8 0.8; /* applied before motion path transform */
1.1342 - offset-path: padding-box;
1.1343 - offset-distance: 50%;
1.1344 - offset-rotate: 0deg;
1.1345 - offset-anchor: right bottom;
1.1346 - transform: scale(1.25); /* applied after motion path transform */
1.1347 + position: absolute;
1.1348 + width: 90px;
1.1349 + height: 70px;
1.1350 + border-top-right-radius: 23px;
1.1351 + scale: 0.8 0.8; /* applied before motion path transform */
1.1352 + offset-path: padding-box;
1.1353 + offset-distance: 50%;
1.1354 + offset-rotate: 0deg;
1.1355 + offset-anchor: right bottom;
1.1356 + transform: scale(1.25); /* applied after motion path transform */
1.1357 }
1.1358 #box1 {
1.1359 - background-color: tomato;
1.1360 - position: static;
1.1361 - offset-position: auto; /* ignored */
1.1362 + background-color: tomato;
1.1363 + position: static;
1.1364 + offset-position: auto; /* ignored */
1.1365 }
1.1366 #box2 {
1.1367 - background-color: green;
1.1368 - right: 0px;
1.1369 - top: 0px;
1.1370 - offset-position: 23% 45%; /* ignored */
1.1371 + background-color: green;
1.1372 + right: 0px;
1.1373 + top: 0px;
1.1374 + offset-position: 23% 45%; /* ignored */
1.1375 }
1.1376 #box3 {
1.1377 - background-color: navy;
1.1378 - left: 0px;
1.1379 - bottom: 0px;
1.1380 - offset-position: 34% 56px; /* ignored */
1.1381 + background-color: navy;
1.1382 + left: 0px;
1.1383 + bottom: 0px;
1.1384 + offset-position: 34% 56px; /* ignored */
1.1385 }
1.1386 #box4 {
1.1387 - background-color: gold;
1.1388 - right: 0px;
1.1389 - bottom: 0px;
1.1390 - offset-position: 45px 67px; /* ignored */
1.1391 + background-color: gold;
1.1392 + right: 0px;
1.1393 + bottom: 0px;
1.1394 + offset-position: 45px 67px; /* ignored */
1.1395 }
1.1396 - </style>
1.1397 - <body>
1.1398 +</style>
1.1399 +<body>
1.1400 <div id="wrap">
1.1401 - <div class="item" id="box1"></div>
1.1402 - <div class="item" id="box2"></div>
1.1403 - <div class="item" id="box3"></div>
1.1404 - <div class="item" id="box4"></div>
1.1405 + <div class="item" id="box1"></div>
1.1406 + <div class="item" id="box2"></div>
1.1407 + <div class="item" id="box3"></div>
1.1408 + <div class="item" id="box4"></div>
1.1409 </div>
1.1410 - </body>
1.1411 -</pre>
1.1412 +</body>
1.1413 +</code></pre>
1.1414 <figure>
1.1415 - <img alt="An example when offset-position is ignored" src="images/position-absolute.svg" width="550" height="430"/>
1.1416 - <figcaption>An example when offset-position is ignored</figcaption>
1.1417 + <img alt="An example when offset-position is ignored" src="images/position-absolute.svg" width="550" height="430"/>
1.1418 + <figcaption>An example when offset-position is ignored</figcaption>
1.1419 </figure>
1.1420 </div>
1.1421 -<h3 id="offset-anchor-property">Define an anchor point: The 'offset-anchor' property</h3>
1.1422 -<pre class='propdef'>
1.1423 +
1.1424 +
1.1425 +Define an anchor point: The 'offset-anchor' property {#offset-anchor-property}
1.1426 +------------------------------------------------------------------------------
1.1427 +
1.1428 +<pre class=propdef>
1.1429 Name: offset-anchor
1.1430 Applies to: <a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">transformable elements</a>
1.1431 Value: auto | <<position>>
1.1432 @@ -852,197 +836,189 @@
1.1433 Animatable: as <<position>>
1.1434 </pre>
1.1435
1.1436 -Defines an <a>anchor point</a> of the box positioned along the <a>offset path</a>.
1.1437 -The <dfn>anchor point</dfn> specifies the point of the box which is to be considered
1.1438 -as the point that is moved along the <a>offset path</a>.
1.1439 +Defines an <a>anchor point</a> of the box positioned along the <a>offset path</a>. The <dfn>anchor point</dfn> specifies the point of the box which is to be considered as the point that is moved along the <a>offset path</a>.
1.1440
1.1441 Values have the following meanings:
1.1442 <dl dfn-for="offset-anchor" dfn-type="value">
1.1443 -<dt><var>auto</var></dt>
1.1444 -<dd>Computes to the value from 'offset-position', provided 'offset-path'
1.1445 - is <a href="#offsetpath-none">none</a> and 'offset-position' is not ''auto''. Otherwise, computes
1.1446 - to the value from 'transform-origin'. When ''auto'' is given to
1.1447 - 'offset-anchor', and 'offset-path' is <a href="#offsetpath-none">none</a>, 'offset-position'
1.1448 - behaves similar to 'background-position'.
1.1449 -</dd>
1.1450 -<dt><<position>></dt>
1.1451 -<dd>
1.1452 - <dl>
1.1453 - <dt><<percentage>></dt>
1.1454 - <dd>A percentage for the horizontal offset is relative to width of content area.
1.1455 - A percentage for the vertical offset is relative to the height of the content area.
1.1456 - For example, with a value pair of '100%, 0%', an <a>anchor point</a> is on the upper right corner of the box.</dd>
1.1457 -
1.1458 - <dt><<length>></dt>
1.1459 - <dd>A length value gives a length offset from the upper left corner of the box's content area.</dd>
1.1460 - </dl>
1.1461 -</dd>
1.1462 + : <var>auto</var>
1.1463 + ::
1.1464 + Computes to the value from 'offset-position', provided 'offset-path' is <a href="#offsetpath-none">none</a> and 'offset-position' is not ''auto''. Otherwise, computes to the value from 'transform-origin'. When ''auto'' is given to 'offset-anchor', and 'offset-path' is <a href="#offsetpath-none">none</a>, 'offset-position' behaves similar to 'background-position'.
1.1465 + : <<position>>
1.1466 + ::
1.1467 + : <<percentage>>
1.1468 + ::
1.1469 + A percentage for the horizontal offset is relative to width of content area. A percentage for the vertical offset is relative to the height of the content area. For example, with a value pair of '100%, 0%', an <a>anchor point</a> is on the upper right corner of the box.
1.1470 + : <<length>>
1.1471 + :: A length value gives a length offset from the upper left corner of the box's content area.
1.1472 </dl>
1.1473
1.1474 -<div class='example'>
1.1475 +<div class=example>
1.1476 The following explains how to set the <a>anchor point</a> of the box.
1.1477
1.1478 -<pre class="lang-css">
1.1479 - #plane {
1.1480 - offset-anchor: center;
1.1481 - }
1.1482 -</pre>
1.1483 +<pre><code highlight=html>
1.1484 +#plane {
1.1485 + offset-anchor: center;
1.1486 +}
1.1487 +</code></pre>
1.1488
1.1489 The red dot in the middle of the shape indicates the <a>anchor point</a> of the shape.
1.1490 <figure>
1.1491 - <img src="images/plane.svg" width="160" height="140" alt="Shape with its anchor point">
1.1492 - <figcaption>A red dot in the middle of a plane shape indicates the shape's <a>anchor point</a>.</figcaption>
1.1493 + <img src="images/plane.svg" width="160" height="140" alt="Shape with its anchor point">
1.1494 + <figcaption>A red dot in the middle of a plane shape indicates the shape's <a>anchor point</a>.</figcaption>
1.1495 </figure>
1.1496 </div>
1.1497
1.1498 -<div class='example'>
1.1499 +<div class=example>
1.1500 This example shows an alignment of four boxes with different <a>anchor point</a>s.
1.1501
1.1502 -<pre class="lang-html">
1.1503 - <style>
1.1504 - body {
1.1505 - transform-style: preserve-3d;
1.1506 - width: 300px;
1.1507 - height: 300px;
1.1508 - border: 2px solid gray;
1.1509 - border-radius: 50%;
1.1510 - }
1.1511 - .box {
1.1512 - width: 50px;
1.1513 - height: 50px;
1.1514 - background-color: orange;
1.1515 - offset-position: 50% 50%;
1.1516 - offset-distance: 100%;
1.1517 - offset-rotate: 0deg;
1.1518 - }
1.1519 - #item1 {
1.1520 - offset-path: ray(45deg closest-side);
1.1521 - offset-anchor: right top;
1.1522 - }
1.1523 - #item2 {
1.1524 - offset-path: ray(135deg closest-side);
1.1525 - offset-anchor: right bottom;
1.1526 - }
1.1527 - #item3 {
1.1528 - offset-path: ray(225deg closest-side);
1.1529 - offset-anchor: left bottom;
1.1530 - }
1.1531 - #item4 {
1.1532 - offset-path: ray(315deg closest-side);
1.1533 - offset-anchor: left top;
1.1534 - }
1.1535 - </style>
1.1536 - <body>
1.1537 - <div class="box" id="item1"></div>
1.1538 - <div class="box" id="item2"></div>
1.1539 - <div class="box" id="item3"></div>
1.1540 - <div class="box" id="item4"></div>
1.1541 - </body>
1.1542 -</pre>
1.1543 +<pre><code highlight=html>
1.1544 +<style>
1.1545 + body {
1.1546 + transform-style: preserve-3d;
1.1547 + width: 300px;
1.1548 + height: 300px;
1.1549 + border: 2px solid gray;
1.1550 + border-radius: 50%;
1.1551 + }
1.1552 + .box {
1.1553 + width: 50px;
1.1554 + height: 50px;
1.1555 + background-color: orange;
1.1556 + offset-position: 50% 50%;
1.1557 + offset-distance: 100%;
1.1558 + offset-rotate: 0deg;
1.1559 + }
1.1560 + #item1 {
1.1561 + offset-path: ray(45deg closest-side);
1.1562 + offset-anchor: right top;
1.1563 + }
1.1564 + #item2 {
1.1565 + offset-path: ray(135deg closest-side);
1.1566 + offset-anchor: right bottom;
1.1567 + }
1.1568 + #item3 {
1.1569 + offset-path: ray(225deg closest-side);
1.1570 + offset-anchor: left bottom;
1.1571 + }
1.1572 + #item4 {
1.1573 + offset-path: ray(315deg closest-side);
1.1574 + offset-anchor: left top;
1.1575 + }
1.1576 +</style>
1.1577 +<body>
1.1578 + <div class="box" id="item1"></div>
1.1579 + <div class="box" id="item2"></div>
1.1580 + <div class="box" id="item3"></div>
1.1581 + <div class="box" id="item4"></div>
1.1582 +</body>
1.1583 +</code></pre>
1.1584 <figure>
1.1585 - <img src="images/offset_anchor.png" alt="An example of offset-anchor" style="width: 300px;">
1.1586 - <figcaption>An example of 'offset-anchor'</figcaption>
1.1587 + <img src="images/offset_anchor.png" alt="An example of offset-anchor" style="width: 300px;">
1.1588 + <figcaption>An example of 'offset-anchor'</figcaption>
1.1589 </figure>
1.1590 </div>
1.1591
1.1592 -<div class='example'>
1.1593 +<div class=example>
1.1594 This example shows boxes centered at their offset-position.
1.1595
1.1596 -<pre class="lang-html">
1.1597 - <style>
1.1598 - body {
1.1599 - width: 500px;
1.1600 - height: 500px;
1.1601 - }
1.1602 - .box {
1.1603 - background-color: mediumpurple;
1.1604 - offset-path: none;
1.1605 - offset-anchor: center;
1.1606 - }
1.1607 - #item1 {
1.1608 - offset-position: 90% 20%;
1.1609 - width: 60%;
1.1610 - height: 20%;
1.1611 - }
1.1612 - #item2 {
1.1613 - offset-position: 100% 100%;
1.1614 - width: 30%;
1.1615 - height: 10%;
1.1616 - }
1.1617 - #item3 {
1.1618 - offset-position: 50% 100%;
1.1619 - width: 20%;
1.1620 - height: 60%;
1.1621 - }
1.1622 - #item4 {
1.1623 - offset-position: 0% 100%;
1.1624 - width: 30%;
1.1625 - height: 90%;
1.1626 - }
1.1627 - </style>
1.1628 - <body>
1.1629 - <div class="box" id="item1"></div>
1.1630 - <div class="box" id="item2"></div>
1.1631 - <div class="box" id="item3"></div>
1.1632 - <div class="box" id="item4"></div>
1.1633 - </body>
1.1634 -</pre>
1.1635 +<pre><code highlight=html>
1.1636 +<style>
1.1637 + body {
1.1638 + width: 500px;
1.1639 + height: 500px;
1.1640 + }
1.1641 + .box {
1.1642 + background-color: mediumpurple;
1.1643 + offset-path: none;
1.1644 + offset-anchor: center;
1.1645 + }
1.1646 + #item1 {
1.1647 + offset-position: 90% 20%;
1.1648 + width: 60%;
1.1649 + height: 20%;
1.1650 + }
1.1651 + #item2 {
1.1652 + offset-position: 100% 100%;
1.1653 + width: 30%;
1.1654 + height: 10%;
1.1655 + }
1.1656 + #item3 {
1.1657 + offset-position: 50% 100%;
1.1658 + width: 20%;
1.1659 + height: 60%;
1.1660 + }
1.1661 + #item4 {
1.1662 + offset-position: 0% 100%;
1.1663 + width: 30%;
1.1664 + height: 90%;
1.1665 + }
1.1666 +</style>
1.1667 +<body>
1.1668 + <div class="box" id="item1"></div>
1.1669 + <div class="box" id="item2"></div>
1.1670 + <div class="box" id="item3"></div>
1.1671 + <div class="box" id="item4"></div>
1.1672 +</body>
1.1673 +</code></pre>
1.1674 <figure>
1.1675 - <img src="images/offset_anchor_center.svg" alt="An example of offset-anchor: center">
1.1676 - <figcaption>An example of 'offset-anchor: center'</figcaption>
1.1677 + <img src="images/offset_anchor_center.svg" alt="An example of offset-anchor: center">
1.1678 + <figcaption>An example of 'offset-anchor: center'</figcaption>
1.1679 </figure>
1.1680 </div>
1.1681
1.1682 -<div class='example'>
1.1683 +<div class=example>
1.1684 This example shows how offset-anchor computes to their offset-position.
1.1685
1.1686 -<pre class="lang-html">
1.1687 - <style>
1.1688 - body {
1.1689 - width: 500px;
1.1690 - height: 500px;
1.1691 - }
1.1692 - .box {
1.1693 - background-color: mediumpurple;
1.1694 - offset-path: none;
1.1695 - offset-anchor: auto;
1.1696 - }
1.1697 - #item1 {
1.1698 - offset-position: 90% 20%;
1.1699 - width: 60%;
1.1700 - height: 20%;
1.1701 - }
1.1702 - #item2 {
1.1703 - offset-position: 100% 100%;
1.1704 - width: 30%;
1.1705 - height: 10%;
1.1706 - }
1.1707 - #item3 {
1.1708 - offset-position: 50% 100%;
1.1709 - width: 20%;
1.1710 - height: 60%;
1.1711 - }
1.1712 - #item4 {
1.1713 - offset-position: 0% 100%;
1.1714 - width: 30%;
1.1715 - height: 90%;
1.1716 - }
1.1717 - </style>
1.1718 - <body>
1.1719 - <div class="box" id="item1"></div>
1.1720 - <div class="box" id="item2"></div>
1.1721 - <div class="box" id="item3"></div>
1.1722 - <div class="box" id="item4"></div>
1.1723 - </body>
1.1724 -</pre>
1.1725 +<pre><code highlight=html>
1.1726 +<style>
1.1727 + body {
1.1728 + width: 500px;
1.1729 + height: 500px;
1.1730 + }
1.1731 + .box {
1.1732 + background-color: mediumpurple;
1.1733 + offset-path: none;
1.1734 + offset-anchor: auto;
1.1735 + }
1.1736 + #item1 {
1.1737 + offset-position: 90% 20%;
1.1738 + width: 60%;
1.1739 + height: 20%;
1.1740 + }
1.1741 + #item2 {
1.1742 + offset-position: 100% 100%;
1.1743 + width: 30%;
1.1744 + height: 10%;
1.1745 + }
1.1746 + #item3 {
1.1747 + offset-position: 50% 100%;
1.1748 + width: 20%;
1.1749 + height: 60%;
1.1750 + }
1.1751 + #item4 {
1.1752 + offset-position: 0% 100%;
1.1753 + width: 30%;
1.1754 + height: 90%;
1.1755 + }
1.1756 +</style>
1.1757 +<body>
1.1758 + <div class="box" id="item1"></div>
1.1759 + <div class="box" id="item2"></div>
1.1760 + <div class="box" id="item3"></div>
1.1761 + <div class="box" id="item4"></div>
1.1762 +</body>
1.1763 +</code></pre>
1.1764 <figure>
1.1765 - <img src="images/offset_anchor_auto.svg" alt="An example of offset-anchor: auto">
1.1766 - <figcaption>An example of 'offset-anchor: auto'</figcaption>
1.1767 + <img src="images/offset_anchor_auto.svg" alt="An example of offset-anchor: auto">
1.1768 + <figcaption>An example of 'offset-anchor: auto'</figcaption>
1.1769 </figure>
1.1770 </div>
1.1771
1.1772 -<h3 id="offset-rotate-property">Rotation at point: The 'offset-rotate' property</h3>
1.1773 -<pre class='propdef'>
1.1774 +
1.1775 +Rotation at point: The 'offset-rotate' property {#offset-rotate-property}
1.1776 +-------------------------------------------------------------------------
1.1777 +
1.1778 +<pre class=propdef>
1.1779 Name: offset-rotate
1.1780 Value: [ auto | reverse ] || <<angle>>
1.1781 Initial: auto
1.1782 @@ -1059,211 +1035,190 @@
1.1783 Values have the following meanings:
1.1784
1.1785 <dl dfn-for="offset-rotate" dfn-type="value">
1.1786 -<dt><dfn>auto</dfn></dt>
1.1787 -<dd>Indicates that the object is rotated (over time if 'offset-distance' is animated) by
1.1788 -the angle of the direction
1.1789 -(i.e., directional tangent vector) of the <a>offset path</a>, relative to the positive x-axis.
1.1790 -If specified in combination with <<angle>>, the computed value of <<angle>> is added
1.1791 -to the computed value of ''auto''.</dd>
1.1792 + : <dfn>auto</dfn>
1.1793 + ::
1.1794 + Indicates that the object is rotated (over time if 'offset-distance' is animated) by the angle of the direction (i.e., directional tangent vector) of the <a>offset path</a>, relative to the positive x-axis. If specified in combination with <<angle>>, the computed value of <<angle>> is added to the computed value of ''auto''.
1.1795
1.1796 -<p class='note'>Note: For ray paths, the rotation implied by ''auto'' is 90 degrees less than the ray's bearing <<angle>>.</p>
1.1797 + Note: For ray paths, the rotation implied by ''auto'' is 90 degrees less than the ray's bearing <<angle>>.
1.1798
1.1799 -<dt><dfn>reverse</dfn></dt>
1.1800 -<dd>Indicates that the object is rotated (over time if 'offset-distance' is animated) by
1.1801 - the angle of the direction
1.1802 -(i.e., directional tangent vector) of the <a>offset path</a>, relative to the positive x-axis, plus 180 degrees.
1.1803 - If specified in combination with <<angle>>, the computed value of <<angle>> is added
1.1804 - to the computed value of ''reverse''.
1.1805 + : <dfn>reverse</dfn>
1.1806 + ::
1.1807 + Indicates that the object is rotated (over time if 'offset-distance' is animated) by the angle of the direction (i.e., directional tangent vector) of the <a>offset path</a>, relative to the positive x-axis, plus 180 degrees. If specified in combination with <<angle>>, the computed value of <<angle>> is added to the computed value of ''reverse''.
1.1808
1.1809 - <p class="note">Note: This is the same as specifying ''auto 180deg''.</p>
1.1810 -</dd>
1.1811 -
1.1812 -<dt><<angle>></dt>
1.1813 -<dd>Indicates that the box has a constant clockwise rotation transformation applied
1.1814 -to it by the specified rotation angle.
1.1815 -See definitions of ''auto'' or ''reverse'' if specified in combination with
1.1816 -either one of the keywords.</dd>
1.1817 + Note: This is the same as specifying ''auto 180deg''.
1.1818 + : <<angle>>
1.1819 + ::
1.1820 + Indicates that the box has a constant clockwise rotation transformation applied to it by the specified rotation angle. See definitions of ''auto'' or ''reverse'' if specified in combination with either one of the keywords.
1.1821 </dl>
1.1822
1.1823 When the <a>offset path</a> is a zero length path, the value of 'offset-rotate' is 0 degree, the direction of the positive x-axis.
1.1824
1.1825 If the <a>offset path</a> is composed of multiple line segments, the orientation at the connection between the segments is the same as the direction of the previous segment.
1.1826
1.1827 -<p class="note">Note: The rotation described here does not override or replace any rotation defined by the 'transform' property.</p>
1.1828 +Note: The rotation described here does not override or replace any rotation defined by the 'transform' property.
1.1829
1.1830 -<div class="example">
1.1831 -The following examples use the shape of a plane.
1.1832 -The red dot in the middle of the shape indicates the <a>anchor point</a> of the shape.
1.1833 -When no offset properties are set, the shape is not translated or rotated along the path.
1.1834 +<div class=example>
1.1835 +The following examples use the shape of a plane. The red dot in the middle of the shape indicates the <a>anchor point</a> of the shape. When no offset properties are set, the shape is not translated or rotated along the path.
1.1836 +
1.1837 <figure>
1.1838 - <img src="images/offset-initial.svg" width="470" height="120" alt="Path without offset">
1.1839 - <figcaption>A black plane at the beginning of the path, with no offset properties set.</figcaption>
1.1840 + <img src="images/offset-initial.svg" width="470" height="120" alt="Path without offset">
1.1841 + <figcaption>A black plane at the beginning of the path, with no offset properties set.</figcaption>
1.1842 </figure>
1.1843
1.1844 -When the shape's <a>anchor point</a> is placed at different positions along the path and
1.1845 -'offset-rotate' is ''0deg'', the shape is not rotated.
1.1846 +When the shape's <a>anchor point</a> is placed at different positions along the path and 'offset-rotate' is ''0deg'', the shape is not rotated.
1.1847 +
1.1848 <figure>
1.1849 - <img src="images/offset-rotate-none.svg" width="470" height="120" alt="Path without rotation">
1.1850 - <figcaption>A black plane at different positions on a blue dotted path without
1.1851 - rotation transforms.</figcaption>
1.1852 + <img src="images/offset-rotate-none.svg" width="470" height="120" alt="Path without rotation">
1.1853 + <figcaption>A black plane at different positions on a blue dotted path without
1.1854 + rotation transforms.</figcaption>
1.1855 </figure>
1.1856
1.1857 -If the 'offset-rotate' property is set to ''auto'', and the shape's <a>anchor point</a> is
1.1858 -placed at different positions along the path,
1.1859 -the shape is rotated based on the gradient at the current position and faces
1.1860 -the direction of the path at this position.
1.1861 +If the 'offset-rotate' property is set to ''auto'', and the shape's <a>anchor point</a> is placed at different positions along the path, the shape is rotated based on the gradient at the current position and faces the direction of the path at this position.
1.1862
1.1863 <figure>
1.1864 - <img src="images/offset-rotate-auto.svg" width="470" height="120" alt="Path with auto rotation">
1.1865 - <figcaption>A black plane at different positions on a blue dotted path,
1.1866 - rotated in the direction of the path.</figcaption>
1.1867 + <img src="images/offset-rotate-auto.svg" width="470" height="120" alt="Path with auto rotation">
1.1868 + <figcaption>A black plane at different positions on a blue dotted path,
1.1869 + rotated in the direction of the path.</figcaption>
1.1870 </figure>
1.1871
1.1872 -In this example, the 'offset-rotate' property is set to ''reverse''.
1.1873 -The plane faces the opposite direction of the path at each position on the path.
1.1874 +In this example, the 'offset-rotate' property is set to ''reverse''. The plane faces the opposite direction of the path at each position on the path.
1.1875 +
1.1876 <figure>
1.1877 - <img src="images/offset-rotate-reverse.svg" width="470" height="120" alt="Path with reverse auto rotation">
1.1878 - <figcaption>A black plane at different positions on a blue dotted path,
1.1879 - rotated in the opposite direction of the path.</figcaption>
1.1880 + <img src="images/offset-rotate-reverse.svg" width="470" height="120" alt="Path with reverse auto rotation">
1.1881 + <figcaption>A black plane at different positions on a blue dotted path,
1.1882 + rotated in the opposite direction of the path.</figcaption>
1.1883 </figure>
1.1884
1.1885 -The last example sets the 'offset-rotate' property to ''-45deg''.
1.1886 -The shape is rotated anticlockwise by 45 degree once and keeps the rotation at each position
1.1887 -on the path.
1.1888 +The last example sets the 'offset-rotate' property to ''-45deg''. The shape is rotated anticlockwise by 45 degree once and keeps the rotation at each position on the path.
1.1889 +
1.1890 <figure>
1.1891 - <img src="images/offset-rotate-45.svg" width="470" height="120" alt="Path with fixed rotation">
1.1892 - <figcaption>A black plane at different positions on a blue dotted path,
1.1893 - rotated by a fixed amount of degree.</figcaption>
1.1894 + <img src="images/offset-rotate-45.svg" width="470" height="120" alt="Path with fixed rotation">
1.1895 + <figcaption>A black plane at different positions on a blue dotted path,
1.1896 + rotated by a fixed amount of degree.</figcaption>
1.1897 </figure>
1.1898 </div>
1.1899
1.1900 -<div class='example'>
1.1901 +<div class=example>
1.1902 This example shows how ''auto'' or ''reverse'' work when specified in combination
1.1903 with <<angle>>.
1.1904 The computed value of <<angle>> is added to the computed value of ''auto'' or ''reverse''.
1.1905
1.1906 -<pre class="lang-html">
1.1907 - <style>
1.1908 - body {
1.1909 - width: 300px;
1.1910 - height: 300px;
1.1911 - margin: 0px;
1.1912 - border: solid gray;
1.1913 - border-radius: 50%;
1.1914 - }
1.1915 - .circle {
1.1916 - offset-position: 150px 150px;
1.1917 - offset-distance: 86%;
1.1918 - width: 42px;
1.1919 - height: 42px;
1.1920 - background-color: mediumpurple;
1.1921 - border-radius: 50%;
1.1922 - display: flex;
1.1923 - align-items: center;
1.1924 - justify-content: center;
1.1925 - }
1.1926 - #item1 {
1.1927 - offset-path: ray(0deg closest-side);
1.1928 - offset-rotate: auto 90deg;
1.1929 - }
1.1930 - #item2 {
1.1931 - offset-path: ray(45deg closest-side);
1.1932 - offset-rotate: auto 90deg;
1.1933 - }
1.1934 - #item3 {
1.1935 - offset-path: ray(135deg closest-side);
1.1936 - offset-rotate: auto -90deg;
1.1937 - }
1.1938 - #item4 {
1.1939 - offset-path: ray(180deg closest-side);
1.1940 - offset-rotate: auto -90deg;
1.1941 - }
1.1942 - #item5 {
1.1943 - offset-path: ray(225deg closest-side);
1.1944 - offset-rotate: reverse 90deg;
1.1945 - }
1.1946 - #item6 {
1.1947 - offset-path: ray(-45deg closest-side);
1.1948 - offset-rotate: reverse -90deg;
1.1949 - }
1.1950 - </style>
1.1951 - <body>
1.1952 - <div class="circle" id="item1">1</div>
1.1953 - <div class="circle" id="item2">2</div>
1.1954 - <div class="circle" id="item3">3</div>
1.1955 - <div class="circle" id="item4">4</div>
1.1956 - <div class="circle" id="item5">5</div>
1.1957 - <div class="circle" id="item6">6</div>
1.1958 - </body>
1.1959 -</pre>
1.1960 +<pre><code highlight=html>
1.1961 +<style>
1.1962 + body {
1.1963 + width: 300px;
1.1964 + height: 300px;
1.1965 + margin: 0px;
1.1966 + border: solid gray;
1.1967 + border-radius: 50%;
1.1968 + }
1.1969 + .circle {
1.1970 + offset-position: 150px 150px;
1.1971 + offset-distance: 86%;
1.1972 + width: 42px;
1.1973 + height: 42px;
1.1974 + background-color: mediumpurple;
1.1975 + border-radius: 50%;
1.1976 + display: flex;
1.1977 + align-items: center;
1.1978 + justify-content: center;
1.1979 + }
1.1980 + #item1 {
1.1981 + offset-path: ray(0deg closest-side);
1.1982 + offset-rotate: auto 90deg;
1.1983 + }
1.1984 + #item2 {
1.1985 + offset-path: ray(45deg closest-side);
1.1986 + offset-rotate: auto 90deg;
1.1987 + }
1.1988 + #item3 {
1.1989 + offset-path: ray(135deg closest-side);
1.1990 + offset-rotate: auto -90deg;
1.1991 + }
1.1992 + #item4 {
1.1993 + offset-path: ray(180deg closest-side);
1.1994 + offset-rotate: auto -90deg;
1.1995 + }
1.1996 + #item5 {
1.1997 + offset-path: ray(225deg closest-side);
1.1998 + offset-rotate: reverse 90deg;
1.1999 + }
1.2000 + #item6 {
1.2001 + offset-path: ray(-45deg closest-side);
1.2002 + offset-rotate: reverse -90deg;
1.2003 + }
1.2004 +</style>
1.2005 +<body>
1.2006 + <div class="circle" id="item1">1</div>
1.2007 + <div class="circle" id="item2">2</div>
1.2008 + <div class="circle" id="item3">3</div>
1.2009 + <div class="circle" id="item4">4</div>
1.2010 + <div class="circle" id="item5">5</div>
1.2011 + <div class="circle" id="item6">6</div>
1.2012 +</body>
1.2013 +</code></pre>
1.2014 <figure>
1.2015 - <img alt="An image of example for offset-rotate" src="images/rotate_by_angle_with_auto.png" style="width: 250px; text-align: center"/>
1.2016 - <figcaption>The boxes are rotated by the value of ''auto'' with
1.2017 - a fixed amount of degree.</figcaption>
1.2018 + <img alt="An image of example for offset-rotate" src="images/rotate_by_angle_with_auto.png" style="width: 250px; text-align: center"/>
1.2019 + <figcaption>The boxes are rotated by the value of ''auto'' with a fixed amount of degree.</figcaption>
1.2020 </figure>
1.2021 </div>
1.2022
1.2023 -<h4 id="calculating-path-transform">Calculating the path transform</h4>
1.2024
1.2025 -<div class="switch">
1.2026 - 1. Create a supplemental transformation matrix <dfn>T1</dfn> for the local coordinate system of the box.
1.2027 +### Calculating the path transform ### {#calculating-path-transform}
1.2028
1.2029 - 2. Find the ''initial position'' of the <a>offset path</a> specified by 'offset-position' as <dfn>T2</dfn>.
1.2030 -
1.2031 - 2. Let <dfn>P</dfn> be the point at the <a>used offset distance</a> along the <a>offset path</a>.
1.2032 -
1.2033 - 3. Find the translation of the box such that its <a>anchor point</a> is placed at <a>P</a>, and apply that to <a>T2</a>.
1.2034 -
1.2035 - 4. Post-multiply <a>T2</a> by the rotation specified by 'offset-rotate'.
1.2036 -
1.2037 - 5. Post-multiply <a>T2</a> to <a>T1</a>.
1.2038 -
1.2039 - 6. Post-multiply <a>T1</a> to the local coordinate system of the box.
1.2040 +<div class=switch>
1.2041 + 1. Create a supplemental transformation matrix <dfn>T1</dfn> for the local coordinate system of the box.
1.2042 + 2. Find the ''initial position'' of the <a>offset path</a> specified by 'offset-position' as <dfn>T2</dfn>.
1.2043 + 3. Let <dfn>P</dfn> be the point at the <a>used offset distance</a> along the <a>offset path</a>.
1.2044 + 4. Find the translation of the box such that its <a>anchor point</a> is placed at <a>P</a>, and apply that to <a>T2</a>.
1.2045 + 5. Post-multiply <a>T2</a> by the rotation specified by 'offset-rotate'.
1.2046 + 6. Post-multiply <a>T2</a> to <a>T1</a>.
1.2047 + 7. Post-multiply <a>T1</a> to the local coordinate system of the box.
1.2048 </div>
1.2049
1.2050 -<p class="issue">Do we need to say how to get the position in more detail?</p>
1.2051 -<p class="issue">There needs to be a process for converting ''rotate()'' to an angle.</p>
1.2052 +Issue: Do we need to say how to get the position in more detail?
1.2053
1.2054 -<h3 id="offset-shorthand">Offset shorthand: The 'offset' property</h3>
1.2055 -<pre class='propdef'>
1.2056 - Name: offset
1.2057 - Value: [ 'offset-position'? [ 'offset-path' [ 'offset-distance' || 'offset-rotate' ]? ]? ]! <br> [ / 'offset-anchor' ]?
1.2058 - Initial: see individual properties
1.2059 - Applies to: <a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">transformable elements</a>
1.2060 - Inherited: no
1.2061 - Percentages: see individual properties
1.2062 - Computed value: see individual properties
1.2063 - Media: visual
1.2064 - Animatable: see individual properties
1.2065 +Issue: There needs to be a process for converting ''rotate()'' to an angle.
1.2066 +
1.2067 +
1.2068 +Offset shorthand: The 'offset' property {#offset-shorthand}
1.2069 +-----------------------------------------------------------
1.2070 +
1.2071 +<pre class=propdef>
1.2072 +Name: offset
1.2073 +Value: [ 'offset-position'? [ 'offset-path' [ 'offset-distance' || 'offset-rotate' ]? ]? ]! <br> [ / 'offset-anchor' ]?
1.2074 +Initial: see individual properties
1.2075 +Applies to: <a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">transformable elements</a>
1.2076 +Inherited: no
1.2077 +Percentages: see individual properties
1.2078 +Computed value: see individual properties
1.2079 +Media: visual
1.2080 +Animatable: see individual properties
1.2081 </pre>
1.2082
1.2083 -This is a shorthand property for setting 'offset-position', 'offset-path', 'offset-distance', 'offset-rotate' and 'offset-anchor'.
1.2084 -Omitted values are set to their initial values.
1.2085 +This is a shorthand property for setting 'offset-position', 'offset-path', 'offset-distance', 'offset-rotate' and 'offset-anchor'. Omitted values are set to their initial values.
1.2086
1.2087 -<h2 id="priv-sec">Privacy and Security Considerations</h2>
1.2088 +
1.2089 +Privacy and Security Considerations {#priv-sec}
1.2090 +===============================================
1.2091
1.2092 This specification introduces no new security or privacy considerations.
1.2093
1.2094 -<h2 class="no-num" id="changes">Changes</h2>
1.2095 +<h2 class=no-num id=changes>Changes</h2>
1.2096
1.2097 -<p><em>This section is non-normative.</em>
1.2098 +<em>This section is non-normative.</em>
1.2099
1.2100 -<p>The following changes were made since the <a
1.2101 -href="https://www.w3.org/TR/2015/WD-motion-1-20150409/">9 April 2015 First Public Working Draft</a>.
1.2102 +The following changes were made since the <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/">9 April 2015 First Public Working Draft</a>.
1.2103
1.2104 -<ul>
1.2105 - <li><p>Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#motion-path-property">motion-path</a> to 'offset-path' for integrating with <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-angle-property">polar-angle</a>.
1.2106 - <ul>
1.2107 - <li><p>Added the ''ray()'' to define an <a>offset path</a> as a line segment which direction is specified by <<angle>>.
1.2108 - <li><p>Added <<size>> and 'contain' value for the ''ray()''.
1.2109 - </ul>
1.2110 - <li><p>Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion-offset">motion-offset</a> to 'offset-distance' for integrating with <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-distance-property">polar-distance</a>.
1.2111 - <li><p>Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion-rotation">motion-rotation</a> to 'offset-rotate'.
1.2112 - <li><p>Added 'offset-position' to specify the ''initial position'' of the path by merging <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-origin-property">polar-origin</a> from [[CSS-ROUND-DISPLAY-1]].
1.2113 - <li><p>Added 'offset-anchor' to specify the origin point of the element by merging <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-anchor-property">polar-anchor</a> from [[CSS-ROUND-DISPLAY-1]].
1.2114 - <li><p>Renamed the shorthand property <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion">motion</a> to 'offset'.
1.2115 - <li><p>Made 'offset-rotate' specify the rotation transformation by ''auto'' or ''reverse'' in combination with <<angle>>.
1.2116 -</ul>
1.2117 +* Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#motion-path-property">motion-path</a> to 'offset-path' for integrating with <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-angle-property">polar-angle</a>.
1.2118 + * Added the ''ray()'' to define an <a>offset path</a> as a line segment which direction is specified by <<angle>>.
1.2119 + * Added <<size>> and 'contain' value for the ''ray()''.
1.2120 +* Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion-offset">motion-offset</a> to 'offset-distance' for integrating with <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-distance-property">polar-distance</a>.
1.2121 +* Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion-rotation">motion-rotation</a> to 'offset-rotate'.
1.2122 +* Added 'offset-position' to specify the ''initial position'' of the path by merging <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-origin-property">polar-origin</a> from [[CSS-ROUND-DISPLAY-1]].
1.2123 +* Added 'offset-anchor' to specify the origin point of the element by merging <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-anchor-property">polar-anchor</a> from [[CSS-ROUND-DISPLAY-1]].
1.2124 +* Renamed the shorthand property <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion">motion</a> to 'offset'.
1.2125 +* Made 'offset-rotate' specify the rotation transformation by ''auto'' or ''reverse'' in combination with <<angle>>.
1.2126
1.2127 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
1.2128
