Skip to content

Commit 4fb057d

Browse files
committed
[css-snappoints] Specifying that snap-coordinates associate with nearest ancestor scroll container or non-none snap-type per f2f resolution https://log.csswg.org/irc.w3.org/css/2015-10-26/#e614864
1 parent cee5bb0 commit 4fb057d

2 files changed

Lines changed: 6 additions & 8 deletions

File tree

css-snappoints/Overview.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
<div class="head">
5656
<p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> </a> </p>
5757
<h1 class="p-name no-ref" id="title">CSS Scroll Snap Points Module Level 1</h1>
58-
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2015-10-26">26 October 2015</time></span></h2>
58+
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2015-10-27">27 October 2015</time></span></h2>
5959
<div data-fill-with="spec-metadata">
6060
<dl>
6161
<dt>This version:
@@ -275,7 +275,7 @@ <h2 class="heading settled" data-level="4" id="scroll-snap-type"><span class="se
275275
<td>none
276276
<tr>
277277
<th>Applies to:
278-
<td><a data-link-type="dfn" href="#scroll-container">scroll containers</a>
278+
<td>all elements
279279
<tr>
280280
<th>Inherited:
281281
<td>no
@@ -340,8 +340,7 @@ <h2 class="heading settled" data-level="5" id="scroll-snap-destination"><span cl
340340
<dd> Specifies the offset of the snap destination from the start edge of the <a data-link-type="dfn" href="#scroll-container">scroll container’s</a> visual viewport. The first value gives the x coordinate of the snap destination, the second value its y coordinate.
341341
</dl>
342342
<h2 class="heading settled" data-level="6" id="scroll-snap-coordinate"><span class="secno">6. </span><span class="content">Scroll Snap Coordinate: the <a class="property" data-link-type="propdesc" href="#propdef-scroll-snap-coordinate">scroll-snap-coordinate</a> property</span><a class="self-link" href="#scroll-snap-coordinate"></a></h2>
343-
<p>The <a class="property" data-link-type="propdesc" href="#propdef-scroll-snap-coordinate">scroll-snap-coordinate</a> property is used to define the x and y coordinate within the element
344-
which will align with the nearest ancestor <a data-link-type="dfn" href="#scroll-container">scroll container’s</a> snap-destination for the respective axis. In the case that the element has been transformed, the snap coordinate is also transformed in the same way (such that the snap-point is aligned with the element as-drawn).</p>
343+
<p>The <a class="property" data-link-type="propdesc" href="#propdef-scroll-snap-coordinate">scroll-snap-coordinate</a> property is used to define a coordinate within an element. This coordinate is then associated with the nearest ancestor element which is a <a data-link-type="dfn" href="#scroll-container">scroll container</a> or has a scroll-snap-type that is not "none". If it is associated with a <a data-link-type="dfn" href="#scroll-container">scroll container</a>, then that <a data-link-type="dfn" href="#scroll-container">scroll container</a> is considered to be snapped to that element if its scroll offset is such that the coordinate and destination are aligned. In the case that the element has been transformed, the snap coordinate is also transformed in the same way (such that the snap-point is aligned with the element as-drawn).</p>
345344
<p class="issue" id="issue-0bada396"><a class="self-link" href="#issue-0bada396"></a> Consider alternative naming besides "coordinate". Consider naming conventions like in Grid Layout for grouping properties on the container vs. items. </p>
346345
<table class="definition propdef" data-link-for-hint="scroll-snap-coordinate">
347346
<tbody>
@@ -547,7 +546,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
547546
<th scope="row"><a class="css" data-link-type="property" href="#propdef-scroll-snap-type">scroll-snap-type</a>
548547
<td>none | mandatory | proximity
549548
<td>none
550-
<td>scroll containers
549+
<td>all elements
551550
<td>no
552551
<td>n/a
553552
<td>interactive

css-snappoints/Overview.src.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ <h2 id="scroll-snap-type">Scroll Snap Types: the 'scroll-snap-type' property</h2
172172
Name: scroll-snap-type
173173
Value: none | mandatory | proximity
174174
Initial: none
175-
Applies to: <a>scroll containers</a>
175+
Applies to: all elements
176176
Inherited: no
177177
Percentages: n/a
178178
Media: interactive
@@ -227,8 +227,7 @@ <h2 id="scroll-snap-destination">Scroll Snap Destination: the 'scroll-snap-desti
227227

228228
<h2 id="scroll-snap-coordinate">Scroll Snap Coordinate: the 'scroll-snap-coordinate' property</h2>
229229

230-
The 'scroll-snap-coordinate' property is used to define the x and y coordinate within the element
231-
which will align with the nearest ancestor <a>scroll container's</a> snap-destination for the respective axis. In the case that the element has been transformed, the snap coordinate is also transformed in the same way (such that the snap-point is aligned with the element as-drawn).
230+
The 'scroll-snap-coordinate' property is used to define a coordinate within an element. This coordinate is then associated with the nearest ancestor element which is a <a>scroll container</a> or has a scroll-snap-type that is not "none". If it is associated with a <a>scroll container</a>, then that <a>scroll container</a> is considered to be snapped to that element if its scroll offset is such that the coordinate and destination are aligned. In the case that the element has been transformed, the snap coordinate is also transformed in the same way (such that the snap-point is aligned with the element as-drawn).
232231

233232
<p class="issue">
234233
Consider alternative naming besides "coordinate". Consider naming conventions like in Grid Layout for grouping properties on the container vs. items.

0 commit comments

Comments
 (0)