Skip to content

Commit

Permalink
Add examples of offset-anchor with offset-position and no path
Browse files Browse the repository at this point in the history 
When offset-anchor is center, the element is centered at offset-position.

An important use-case for offset-anchor 'auto' is when offset-position is
expressed in percentages.
  • Loading branch information
@ericwilligers
ericwilligers committed Dec 22, 2016
1 parent 15f4308 commit 463a9e6
Show file tree
Hide file tree
Showing 4 changed files with 363 additions and 3 deletions.
96 changes: 96 additions & 0 deletions motion-1/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,102 @@ This example shows an alignment of four elements with different anchor points.
</div>
</div>

<div class='example'>
This example shows elements centered at their offset-position.

<pre class="lang-html">
&lt;style>
body {
width: 500px;
height: 500px;
}
.box {
background-color: mediumpurple;
offset-path: none;
offset-anchor: center;
}
#item1 {
offset-position: 90% 20%;
width: 60;
height: 20;
}
#item2 {
offset-position: 100% 100%;
width: 30;
height: 10;
}
#item3 {
offset-position: 50% 100%;
width: 20;
height: 60;
}
#item4 {
offset-position: 0% 100%;
width: 30;
height: 90;
}
&lt;/style>
&lt;body>
&lt;div class="box" id="item1">&lt;/div>
&lt;div class="box" id="item2">&lt;/div>
&lt;div class="box" id="item3">&lt;/div>
&lt;div class="box" id="item4">&lt;/div>
&lt;/body>
</pre>
<div class=figure>
<img src="images/offset_anchor_center.svg" alt="An example of offset-anchor: center">
<figcaption>An example of 'offset-anchor: center'</figcaption>
</div>
</div>

<div class='example'>
This example shows elements' offset-anchor computing to their offset-position.

<pre class="lang-html">
&lt;style>
body {
width: 500px;
height: 500px;
}
.box {
background-color: mediumpurple;
offset-path: none;
offset-anchor: auto;
}
#item1 {
offset-position: 90% 20%;
width: 60;
height: 20;
}
#item2 {
offset-position: 100% 100%;
width: 30;
height: 10;
}
#item3 {
offset-position: 50% 100%;
width: 20;
height: 60;
}
#item4 {
offset-position: 0% 100%;
width: 30;
height: 90;
}
&lt;/style>
&lt;body>
&lt;div class="box" id="item1">&lt;/div>
&lt;div class="box" id="item2">&lt;/div>
&lt;div class="box" id="item3">&lt;/div>
&lt;div class="box" id="item4">&lt;/div>
&lt;/body>
</pre>
<div class=figure>
<img src="images/offset_anchor_auto.svg" alt="An example of offset-anchor: auto">
<figcaption>An example of 'offset-anchor: auto'</figcaption>
</div>
</div>

<h3 id="offset-rotate-property">Rotation at point: The 'offset-rotate' property</h3>
<pre class='propdef'>
Name: offset-rotate
Expand Down
96 changes: 93 additions & 3 deletions motion-1/Overview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link href="../default.css" rel="stylesheet" type="text/css">
<link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
<meta content="Bikeshed version 1d4d2b1d1fc168e39cb7f99218de7951c5736ec7" name="generator">
<meta content="Bikeshed version af155f2e5c3bb772c32f7c8fe6857fd648994d60" name="generator">
<style>
/* Style for bikeshed variant of switch/case <dl>s */
div.switch dl > dd > ol.only {
Expand Down Expand Up @@ -290,7 +290,7 @@
<div class="head">
<p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
<h1>Motion Path Module Level 1</h1>
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2016-12-06">6 December 2016</time></span></h2>
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2016-12-22">22 December 2016</time></span></h2>
<div data-fill-with="spec-metadata">
<dl>
<dt>This version:
Expand Down Expand Up @@ -867,6 +867,96 @@ <h3 class="heading settled" data-level="4.4" id="offset-anchor-property"><span c
<figcaption>An example of <a class="property" data-link-type="propdesc" href="#propdef-offset-anchor" id="ref-for-propdef-offset-anchor-3">offset-anchor</a></figcaption>
</div>
</div>
<div class="example" id="example-08b71fb6">
<a class="self-link" href="#example-08b71fb6"></a> This example shows elements centered at their offset-position.
<pre class="lang-html highlight"><span class="p">&lt;</span><span class="nt">style</span><span class="p">></span>
<span class="nt">body</span> <span class="p">{</span>
width<span class="o">:</span> <span class="m">500px</span><span class="p">;</span>
height<span class="o">:</span> <span class="m">500px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.box</span> <span class="p">{</span>
background-color<span class="o">:</span> mediumpurple<span class="p">;</span>
<span class="n">offset</span><span class="o">-</span><span class="n">path</span><span class="o">:</span> none<span class="p">;</span>
<span class="n">offset</span><span class="o">-</span><span class="n">anchor</span><span class="o">:</span> center<span class="p">;</span>
<span class="p">}</span>
<span class="nn">#item1</span> <span class="p">{</span>
<span class="n">offset</span><span class="o">-</span>position<span class="o">:</span> <span class="m">90%</span> <span class="m">20%</span><span class="p">;</span>
width<span class="o">:</span> <span class="m">60</span><span class="p">;</span>
height<span class="o">:</span> <span class="m">20</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#item2</span> <span class="p">{</span>
<span class="n">offset</span><span class="o">-</span>position<span class="o">:</span> <span class="m">100%</span> <span class="m">100%</span><span class="p">;</span>
width<span class="o">:</span> <span class="m">30</span><span class="p">;</span>
height<span class="o">:</span> <span class="m">10</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#item3</span> <span class="p">{</span>
<span class="n">offset</span><span class="o">-</span>position<span class="o">:</span> <span class="m">50%</span> <span class="m">100%</span><span class="p">;</span>
width<span class="o">:</span> <span class="m">20</span><span class="p">;</span>
height<span class="o">:</span> <span class="m">60</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#item4</span> <span class="p">{</span>
<span class="n">offset</span><span class="o">-</span>position<span class="o">:</span> <span class="m">0%</span> <span class="m">100%</span><span class="p">;</span>
width<span class="o">:</span> <span class="m">30</span><span class="p">;</span>
height<span class="o">:</span> <span class="m">90</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">&lt;</span><span class="p">/</span><span class="nt">style</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"box"</span> <span class="na">id</span><span class="o">=</span><span class="s">"item1"</span><span class="p">></span><span class="p">&lt;</span><span class="p">/</span><span class="nt">div</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"box"</span> <span class="na">id</span><span class="o">=</span><span class="s">"item2"</span><span class="p">></span><span class="p">&lt;</span><span class="p">/</span><span class="nt">div</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"box"</span> <span class="na">id</span><span class="o">=</span><span class="s">"item3"</span><span class="p">></span><span class="p">&lt;</span><span class="p">/</span><span class="nt">div</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"box"</span> <span class="na">id</span><span class="o">=</span><span class="s">"item4"</span><span class="p">></span><span class="p">&lt;</span><span class="p">/</span><span class="nt">div</span><span class="p">></span>
<span class="p">&lt;</span><span class="p">/</span><span class="nt">body</span><span class="p">></span>
</pre>
<div class="figure">
<img alt="An example of offset-anchor: center" src="images/offset_anchor_center.svg">
<figcaption>An example of 'offset-anchor: center'</figcaption>
</div>
</div>
<div class="example" id="example-ff9df231">
<a class="self-link" href="#example-ff9df231"></a> This example shows elements' offset-anchor computing to their offset-position.
<pre class="lang-html highlight"><span class="p">&lt;</span><span class="nt">style</span><span class="p">></span>
<span class="nt">body</span> <span class="p">{</span>
width<span class="o">:</span> <span class="m">500px</span><span class="p">;</span>
height<span class="o">:</span> <span class="m">500px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.box</span> <span class="p">{</span>
background-color<span class="o">:</span> mediumpurple<span class="p">;</span>
<span class="n">offset</span><span class="o">-</span><span class="n">path</span><span class="o">:</span> none<span class="p">;</span>
<span class="n">offset</span><span class="o">-</span><span class="n">anchor</span><span class="o">:</span> auto<span class="p">;</span>
<span class="p">}</span>
<span class="nn">#item1</span> <span class="p">{</span>
<span class="n">offset</span><span class="o">-</span>position<span class="o">:</span> <span class="m">90%</span> <span class="m">20%</span><span class="p">;</span>
width<span class="o">:</span> <span class="m">60</span><span class="p">;</span>
height<span class="o">:</span> <span class="m">20</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#item2</span> <span class="p">{</span>
<span class="n">offset</span><span class="o">-</span>position<span class="o">:</span> <span class="m">100%</span> <span class="m">100%</span><span class="p">;</span>
width<span class="o">:</span> <span class="m">30</span><span class="p">;</span>
height<span class="o">:</span> <span class="m">10</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#item3</span> <span class="p">{</span>
<span class="n">offset</span><span class="o">-</span>position<span class="o">:</span> <span class="m">50%</span> <span class="m">100%</span><span class="p">;</span>
width<span class="o">:</span> <span class="m">20</span><span class="p">;</span>
height<span class="o">:</span> <span class="m">60</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#item4</span> <span class="p">{</span>
<span class="n">offset</span><span class="o">-</span>position<span class="o">:</span> <span class="m">0%</span> <span class="m">100%</span><span class="p">;</span>
width<span class="o">:</span> <span class="m">30</span><span class="p">;</span>
height<span class="o">:</span> <span class="m">90</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">&lt;</span><span class="p">/</span><span class="nt">style</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"box"</span> <span class="na">id</span><span class="o">=</span><span class="s">"item1"</span><span class="p">></span><span class="p">&lt;</span><span class="p">/</span><span class="nt">div</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"box"</span> <span class="na">id</span><span class="o">=</span><span class="s">"item2"</span><span class="p">></span><span class="p">&lt;</span><span class="p">/</span><span class="nt">div</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"box"</span> <span class="na">id</span><span class="o">=</span><span class="s">"item3"</span><span class="p">></span><span class="p">&lt;</span><span class="p">/</span><span class="nt">div</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"box"</span> <span class="na">id</span><span class="o">=</span><span class="s">"item4"</span><span class="p">></span><span class="p">&lt;</span><span class="p">/</span><span class="nt">div</span><span class="p">></span>
<span class="p">&lt;</span><span class="p">/</span><span class="nt">body</span><span class="p">></span>
</pre>
<div class="figure">
<img alt="An example of offset-anchor: auto" src="images/offset_anchor_auto.svg">
<figcaption>An example of 'offset-anchor: auto'</figcaption>
</div>
</div>
<h3 class="heading settled" data-level="4.5" id="offset-rotate-property"><span class="secno">4.5. </span><span class="content">Rotation at point: The <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate-1">offset-rotate</a> property</span><a class="self-link" href="#offset-rotate-property"></a></h3>
<table class="def propdef" data-link-for-hint="offset-rotate">
<tbody>
Expand Down Expand Up @@ -1378,7 +1468,7 @@ <h3 class="no-num no-ref heading settled" id="normative"><span class="content">N
<dt id="biblio-css22">[CSS22]
<dd>Bert Bos. <a href="http://dev.w3.org/csswg/css2/">Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</a>. URL: <a href="http://dev.w3.org/csswg/css2/">http://dev.w3.org/csswg/css2/</a>
<dt id="biblio-css3val">[CSS3VAL]
<dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 29 September 2016. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
<dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values/">CSS Values and Units Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-values/">https://drafts.csswg.org/css-values/</a>
<dt id="biblio-rfc2119">[RFC2119]
<dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
<dt id="biblio-svg11">[SVG11]
Expand Down
87 changes: 87 additions & 0 deletions motion-1/images/offset_anchor_auto.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 463a9e6

Please sign in to comment.