diff --git a/css-scroll-snap-2/Overview.bs b/css-scroll-snap-2/Overview.bs index 9c3a520f796..c56e4a30a33 100644 --- a/css-scroll-snap-2/Overview.bs +++ b/css-scroll-snap-2/Overview.bs @@ -16,6 +16,19 @@ Abstract: This module contains features to control panning and scrolling behavio Status Text: A test suite and an implementation report will be produced during the CR period. +Ignore MDN Failure: margin-longhands-logical +Ignore MDN Failure: margin-longhands-physical +Ignore MDN Failure: propdef-scroll-margin-block +Ignore MDN Failure: propdef-scroll-margin-inline +Ignore MDN Failure: scroll-margin +Ignore MDN Failure: padding-longhands-logical +Ignore MDN Failure: padding-longhands-physical +Ignore MDN Failure: scroll-padding +Ignore MDN Failure: propdef-scroll-padding-block +Ignore MDN Failure: propdef-scroll-padding-inline +Ignore MDN Failure: scroll-snap-align +Ignore MDN Failure: scroll-snap-stop +Ignore MDN Failure: scroll-snap-type Introduction {#intro} @@ -23,7 +36,7 @@ Introduction {#intro} This section is not normative. - This is currently a draft spec over Scroll Snap 1. + This is currently a delta spec over Scroll Snap 1. Scroll experiences don't always start at the beginning. Interactions with carousels, swipe controls, and listviews often start somewhere in the middle, @@ -38,87 +51,88 @@ Introduction {#intro} when snap completes and conveniences for snapping to children programmatically. - First Layout - ------------ +First Layout {#first-layout} +------------ - This event should follow the Animation code path. When animation objects are created and fire events, this is when a box has it's first layout. + This event should follow the Animation code path. When animation objects are created and fire events, this is when a box has it's first layout. - Motivating Examples {#examples} =============================== -
- A carousel that starts in the middle: - - 
-            .carousel {
-                overflow-inline: auto;
-                scroll-start: center;
-            }
-
- - 
-            <div class="carousel">
-                <img src="img1.jpg">
-                <img src="img2.jpg">
-                <img src="img3.jpg">
-                <img src="img4.jpg">
-                <img src="img5.jpg">
-            </div>
-
- - -
- -
- A search bar is available when the user scrolls back to the top: - - 
-            .scrollport {
-                overflow-block: auto;
-            }
-
-            main {
-                scroll-start-target: auto;
-            }
-
- - 
-            <div class="scrollport">
-                <nav>
-                    ...
-                </nav>
-                <main>
-                    ...
-                </main>
-            </div>
-
- - -
+
+ A carousel that starts in the middle: + + 
+						.carousel {
+								overflow-inline: auto;
+								scroll-start: center;
+						}
+
+ + 
+						<div class="carousel">
+								<img src="img1.jpg">
+								<img src="img2.jpg">
+								<img src="img3.jpg">
+								<img src="img4.jpg">
+								<img src="img5.jpg">
+						</div>
+
+ + +
+ +
+ A search bar is available when the user scrolls back to the top: + + 
+						.scrollport {
+								overflow-block: auto;
+						}
+
+						main {
+								scroll-start-target: auto;
+						}
+
+ + 
+						<div class="scrollport">
+								<nav>
+										...
+								</nav>
+								<main>
+										...
+								</main>
+						</div>
+
+ + +
Setting Where Scroll Starts {#properties-on-the-scroll-container} ================================================================= @@ -135,7 +149,7 @@ The 'scroll-start' property {#scroll-start} This property is a shorthand property that sets all of the scroll-start-* longhands in one declaration. The first value defines the scroll starting point in the block axis, - the second sets it in the inline axis. If the second value is omitted, it defaults to ''scroll-start/start''. If ''scroll-start-target'' is set on any child, ''scroll-start'' is not used, in favor of using the element as the offset. + the second sets it in the inline axis. If the second value is omitted, it defaults to ''scroll-start/start''. If ''scroll-start-target'' is set on any child, 'scroll-start' is not used, in favor of using the element as the offset. Values are defined as follows: @@ -160,61 +174,93 @@ The 'scroll-start' property {#scroll-start} Equivalent to ''0%'', ''50%'', and ''100%'', respectively. -

Interaction with ''display: none'' and initial creation

- Same behavior that animations follow with first layout. +

+Interaction with ''display: none'' and initial creation

+ + Same behavior that animations follow with [[#first-layout]]. + +

+Slow page loading or document streaming behavior

+ + TODO + +

+Interaction with "fragment navigation"

+ + TODO + + If the scrollport has a in-page '':target'' via a URL fragment or a previous scroll position, then 'scroll-start' is unused. Existing target logic should go unchanged. This makes 'scroll-start' a soft request in the scroll position resolution routines. + +

+Interaction with 'place-content'

+ + TODO + + Note: While 'place-content' can make a scroller appear to start in the center + or end, no browser supports it and it appears complicated to resolve. -

Slow page loading or document streaming behavior

- TODO +

+Interaction with "find in page"

-

Interaction with ''fragment navigation''

- TODO - If the scrollport has a in-page '':target'' via a URL fragment or a previous scroll position, then ''scroll-start'' is unused. Existing target logic should go unchanged. This makes ''scroll-start'' a soft request in the scroll position resolution routines. + TODO -

Interaction with ''place-content''

- TODO - Side note: While ''place-content'' can make a scroller appear to start in the center - or end, no browser supports it and it appears complicated to resolve. +

+Interaction with "scroll-snap" containers

-

Interaction with "find in page"

- TODO + This effectively will layout and start scroll at the snapped child, thus negating / cancelling 'scroll-start'. 'scroll-start' will only work if nothing else has effected the scroll position. -

Interaction ''scroll-snap'' containers

- This effectively will layout and start scroll at the snapped child, thus negating / cancelling ''scroll-start''. ''scroll-start'' will only work if nothing else has effected the scroll position. +

+Nested scrollers with 'scroll-start'

-

Nested scrollers with ''scroll-start''

- Should follow patterns that scroll snap has set. + Should follow patterns that scroll snap has set. -

Interaction when ''display'' is toggled

- Same behavior that animations follow with ''first layout''. +

+Interaction when 'display' is toggled

-

Interaction with RTL and LTR

- Logical properties are offered for length offsets that should be flow relative. Furthermore, the ''end'' and ''start'' keywords are always logical. + Same behavior that animations follow with [[#first-layout]]. + +

+Interaction with RTL and LTR

+ + Logical properties are offered for length offsets that should be flow relative. Furthermore, the ''end'' and ''start'' keywords are always logical. The 'scroll-start-target' property {#scroll-start-target} ------------------------------------------- - 
-  Name: scroll-start-target
-  Value: [ none | auto ]{1,2}
-
+ 
+	Name: scroll-start-target
+	Value: [ none | auto ]{1,2}
+
+ + This property is a shorthand property that sets all of the scroll-start-target-* longhands in one declaration. + The first value defines the scroll starting point in the block axis, + the second sets it in the inline axis. + If the second value is omitted, it defaults to ''scroll-start-target/none''. + + Values are defined as follows: + +
+
none +
Element is not a ''scroll-start-target''. +
auto +
Element is used to calculate the 'scroll-start' position, + taking into account ''scroll-padding'' or ''scroll-margin'' , + same as a ''scroll-snap'' target. +
- This property is a shorthand property that sets all of the scroll-start-target-* longhands in one declaration. - The first value defines the scroll starting point in the block axis, - the second sets it in the inline axis. - If the second value is omitted, it defaults to ''none''. - Values are defined as follows: + -Styling Snapped Items {#todo} +Styling Snapped Items {#styling-snapped} ============================= The Snapped-element Pseudo-class: '':snapped'' {#snapped} @@ -252,14 +298,15 @@ Need to figure out resolution of the initial frame. Snap Events {#snap-events} =================== - {{scrollsnapchange}} and {{scrollsnapchanging}} {#scrollsnapchange-and-scrollsnapchanging} @@ -272,36 +319,41 @@ Snap Events {#snap-events} the invisible state will become actionable, at the right time, and always correct. - +

+Snap Targets

+ + A snap target is an element or pseudo-element which the + user-agent has [[css-scroll-snap-1#choosing|chosen]] to + snap + a given snap container to. + +
- - - - - - + - - - + - + or after a [[css-scroll-snap-1#re-snap|layout snap]] + if the [=snap targets=] that the scrolling element or Document is snapped to changed. - - - - - - +
EventInterfaceTargetsDescription
Event + Interface + Targets + Description
scrollsnapchange{{SnapEvent}}scroll containersscrollsnapchange + {{SnapEvent}} + scroll containers Fired at the scrolling element or {{Document}} at the end of a scroll (before a {{scrollend}} event) - or after a layout snap - if the element that the scrolling element or Document is snapped to changed.
scrollsnapchanging{{SnapEvent}}scroll containersFired at the scrolling element or {{Document}} during scrolling (before a {{scroll}} event), - if the element that the scrolling would cause the scroller to snap to is - different from the target reported by the last scrollsnapchanging event that was fired.
scrollsnapchanging + {{SnapEvent}} + scroll containers + Fired at the scrolling element or {{Document}} during scrolling (before a {{scroll!!event}} event), + if the [=snap targets=] that the scrolling would cause the scroller to snap to are + different from the [=snap targets=] selected at the last scrollsnapchanging event that was fired.
-

scrollsnapchange

+

+{{scrollsnapchange}}

+ {{scrollsnapchange}} indicates that the snap area to which a snap container is snapped along either axis has changed. {{scrollsnapchange}} is dispatched: @@ -309,21 +361,21 @@ Snap Events {#snap-events}
  • when a scrolling operation is completed if, for either the block or inline axis, the - element which the snap container is snapped to is different from the element + [=snap target=] which the snap container is snapped to is different from the [=snap target=] it most recently snapped to in that axis. For snap containers with ''scroll-snap-type/proximity'' strictness, the scroll may result in the snap - container no longer being snapped to any element. [[css-scroll-snap-1#choosing]] - describes the method a UA follows when choosing between elements which are + container no longer being snapped to any [=snap target=]. [[css-scroll-snap-1#choosing]] + describes the method a UA follows when choosing between elements or pseudo-elements which are snap areas. -
    • +
  • if there is a change to a snap container's style such that it goes from - having a non-'none' value for [[css-scroll-snap-1#scroll-snap-type|scroll-snap-type]] - to having a 'none' value or vice versa. -
    • -
  • if, after a [[css-scroll-snap-1#re-snap|layout change]], the element to + having a non-''scroll-snap-type/none'' value for 'scroll-snap-type' + to having a ''scroll-snap-type/none'' value or vice versa. + +
  • if, after a [[css-scroll-snap-1#re-snap|layout change]], the [=snap target=] to which a snap container is snapped to changes, regardless of whether there is a change in scroll position after the layout change. -
    • + Scrolling operations always lead to {{scrollend}} events being fired. If a @@ -338,7 +390,7 @@ Snap Events {#snap-events} one scrollsnapchangeTargetBlock and one scrollsnapchangeTargetInline in the block and inline axes respectively, each of which can either be null if the container is not - snapped in that axis or the {{Element}} to which the container is snapped. + snapped in that axis or the [=snap target=] to which the container is snapped. When asked to update scrollsnapchange targets for a snap container, @@ -349,16 +401,16 @@ Snap Events {#snap-events} with |snapcontainer|. 1. Let inlineTarget be the scrollsnapchangeTargetInline associated with |snapcontainer|. - 1. Let blockScrollSnapchangingTarget be the scrollsnapchangingTargetBlock + 1. Let blockScrollSnapchangingTarget be the scrollsnapchanging block-axis target associated with |snapcontainer|. 1. Let inlineScrollSnapchangingTarget be the - scrollsnapchangingTargetInline associated with |snapcontainer|. + scrollsnapchanging inline-axis target associated with |snapcontainer|. 1. Let snap targets changed be a boolean flag that is initially false. - 1. If blockTarget is not the same element as blockScrollSnapchangingTarget or + 1. If blockTarget is not the same [=snap target=] as blockScrollSnapchangingTarget or 1. Set the scrollsnapchangeTargetBlock associated with |snapcontainer| to blockScrollSnapchangingTarget. 1. Set snap targets changed to true. - 1. If inlineTarget is not the same element as inlineScrollSnapchangingTarget: + 1. If inlineTarget is not the same [=snap target=] as inlineScrollSnapchangingTarget: 1. Set the scrollsnapchangeTargetInline associated with |snapcontainer| to inlineScrollSnapchangingTarget. 1. Set snap targets changed to true. @@ -369,23 +421,29 @@ Snap Events {#snap-events} pending scrollsnapchange event targets. Note: When snapping occurs on a scroller (either due to a layout change or a - scrolling operation) the scrollsnapchangingTargetBlock and scrollsnapchangingTargetInline + scrolling operation) the scrollsnapchanging block-axis target and scrollsnapchanging inline-axis target associated with that scroller are updated and represent the current snap targets of that scroller. This allows the update scrollsnapchange targets algorithm - to use these elements to determine whether a {{scrollsnapchange}} event should be fired. + to use these [=snap targets=] to determine whether a {{scrollsnapchange}} event should be fired. - When asked to dispatch pending scrollsnapchange events for a {{Document}}, + When asked to dispatch pending scrollsnapchange events for a {{Document}}, doc, run these steps: 1. For each item target in |doc|'s pending scrollsnapchange event targets: + 1. Let |blockTarget| and |inlineTarget| be null initially. + 1. If the scrollsnapchangeTargetBlock associated with target is a pseudo-element, + set |blockTarget| to the owning element of that scrollsnapchangeTargetBlock. + 1. Otherwise, set |blockTarget| to that scrollsnapchangeTargetBlock. + 1. If the scrollsnapchangeTargetInline associated with target is a pseudo-element, + set |inlineTarget| to the owning element of that scrollsnapchangeTargetInline. + 1. Otherwise, Set |inlineTarget| to that scrollsnapchangeTargetInline. 1. Fire a {{SnapEvent}}, |snapevent|, named {{scrollsnapchange}} at target and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and - {{SnapEvent/snapTargetInline}} attributes be the scrollsnapchangeTargetBlock and the - scrollsnapchangeTargetInline, respectively, that are associated with target. + {{SnapEvent/snapTargetInline}} attributes be |blockTarget| and |inlineTarget| respectively. 1. Empty doc's pending scrollsnapchange event targets.

    scrollsnapchanging

    {{scrollsnapchanging}} is dispatched: - * during a scrolling operation, if the element to which a + * during a scrolling operation, if the [=snap targets=] to which a snap container would snap (in either axis) changes, or * if a [[css-scroll-snap-1#re-snap|layout change]] occurs such that a {{scrollsnapchange}} event @@ -396,7 +454,7 @@ Snap Events {#snap-events} scrollbar arrow clicks, arrow key presses, "behavior: smooth" programmatic scrolls) or might directly track a user's input (e.g. touch scrolling, scrollbar dragging). In either case, the user agent [[css-scroll-snap-1#choosing|chooses]] an - eventual snap target in each axis to which the scroller will + eventual snap target in each axis to which the scroller will snap after the scrolling operation reaches its intended scroll position. * In the former case, the intended scroll position is the scroll animation's @@ -405,7 +463,7 @@ Snap Events {#snap-events} determined by the user's input. {{scrollsnapchanging}} aims to let the web page know, as early as possible, - that the scrolling operation will result in a change in the element the snap + that the scrolling operation will result in a change in the [=snap target=] the snap container is snapped to. The user agent should evaluate whether to trigger {{scrollsnapchanging}} based on the eventual snap target to which the scroller would snap were the scrolling operation @@ -417,118 +475,128 @@ Snap Events {#snap-events} container's scroll position and result in a different eventual snap target. - {{scrollsnapchanging}} events are fired before {{scroll}} events. + {{scrollsnapchanging}} events are fired before {{scroll!!event}} events. Each {{Document}} has an associated list of pending scrollsnapchanging event targets, initially empty. Each snap container has - one scrollsnapchangingTargetBlock - and one scrollsnapchangingTargetInline in the block and inline axes + one scrollsnapchanging block-axis target + and one scrollsnapchanging inline-axis target in the block and inline axes respectively, each of which can either be null if the container is not - snapping in that axis or the {{Element}} to which the container is snapping. + snapping in that axis or the [=snap target=] to which the container is snapping. When asked to update scrollsnapchanging targets for a snap container, - |snapcontainer|, given an {{Element}} newBlockTarget and an {{Element}} + |snapcontainer|, given an [=snap target=] newBlockTarget and an [=snap target=] newInlineTarget, run these steps: 1. Let doc be |snapcontainer|'s associated {{Document}}. - 1. Let blockTarget be the scrollsnapchangingTargetBlock that is + 1. Let blockTarget be the scrollsnapchanging block-axis target that is associated with |snapcontainer|. - 1. Let inlineTarget be the scrollsnapchangingTargetInline that is + 1. Let inlineTarget be the scrollsnapchanging inline-axis target that is associated with |snapcontainer|. - 1. If newBlockTarget is not the same element as blockTarget: - 1. Set the scrollsnapchangingTargetBlock associated with |snapcontainer| to + 1. If newBlockTarget is not the same [=snap target=] as blockTarget: + 1. Set the scrollsnapchanging block-axis target associated with |snapcontainer| to newBlockTarget. 1. If |snapcontainer| is not already in doc's pending scrollsnapchanging event targets, 1. Append |snapcontainer| to doc's pending scrollsnapchanging event targets - 1. If newInlineTarget is not the same element as inlineTarget: - 1. Set the scrollsnapchangingTargetInline associated with |snapcontainer| to + 1. If newInlineTarget is not the same [=snap target=] as inlineTarget: + 1. Set the scrollsnapchanging inline-axis target associated with |snapcontainer| to newInlineTarget. 1. If |snapcontainer| is not already in doc's pending scrollsnapchanging event targets, 1. Append |snapcontainer| to doc's pending scrollsnapchanging event targets. - When asked to dispatch pending scrollsnapchanging events for a {{Document}}, + When asked to dispatch pending scrollsnapchanging events for a {{Document}}, doc, run these steps: 1. For each item target in |doc|'s pending scrollsnapchanging event targets: + 1. Let |blockTarget| and |inlineTarget| be null initially. + 1. If the scrollsnapchanging block-axis target associated with target is a pseudo-element, + set |blockTarget| to the owning element of that scrollsnapchanging block-axis target. + 1. Otherwise, set |blockTarget| to that scrollsnapchanging block-axis target. + 1. If the scrollsnapchanging inline-axis target associated with target is a pseudo-element, + set |inlineTarget| to the owning element of that scrollsnapchanging inline-axis target. + 1. Otherwise, set |inlineTarget| to that scrollsnapchanging inline-axis target. 1. Fire a {{SnapEvent}}, |snapevent|, named {{scrollsnapchanging}} at target and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and - {{SnapEvent/snapTargetInline}} attributes be the scrollsnapchangingTargetBlock and the - scrollsnapchangingTargetInline, respectively, that are associated with target. + {{SnapEvent/snapTargetInline}} attributes be |blockTarget| and |inlineTarget|, respectively. 1. Empty doc's pending scrollsnapchanging event targets.

    Snap Events due to Layout Changes

    When a snap container, |snapcontainer|, [[css-scroll-snap-1#re-snap|re-snaps]], run these steps: - 1. Let newBlockTarget be the element that |snapcontainer| has + 1. Let newBlockTarget be the [=snap target=] that |snapcontainer| has snapped to in the block axis or null if it did not snap to any element. - 1. Let newInlineTarget be the element that |snapcontainer| has + 1. Let newInlineTarget be the [=snap target=] that |snapcontainer| has snapped to - in the inline axis or null if it did not snap to any element. + in the inline axis or null if it did not snap to any element or pseudo-element. 1. Run the steps to update scrollsnapchanging targets with newBlockTarget as newBlockTarget and newInlineTarget as newInlineTarget. 1. Run the steps to update scrollsnapchange targets for |snapcontainer|. -SnapEvent interface +SnapEvent interface {#snapevent-interface} ------------------- 
    -			dictionary SnapEventInit : EventInit {
-				Node? snapTargetBlock;
-				Node? snapTargetInline;
-			};
-
-			[Exposed=Window]
-			interface SnapEvent : Event {
-				constructor(DOMString type, optional SnapEventInit eventInitDict = {});
-				readonly attribute Node? snapTargetBlock;
-				readonly attribute Node? snapTargetInline;
-			};
+dictionary SnapEventInit : EventInit {
+	Node? snapTargetBlock;
+	Node? snapTargetInline;
+};
+
+[Exposed=Window]
+interface SnapEvent : Event {
+	constructor(DOMString type, optional SnapEventInit eventInitDict = {});
+	readonly attribute Node? snapTargetBlock;
+	readonly attribute Node? snapTargetInline;
+};
    -
    -
    +
    : snapTargetBlock :: The element that the snap container is snapped to in the block axis at the snap position - for the associated snap event. -
    -
    + for the associated snap event. If the [=snap target=] + corresponding to this was a pseudo-element, this will be the owning + element of that pseudo-element. + : snapTargetInline :: The element that the snap container is snapped to in the inline axis at the snap position - for the associated snap event. -
    - - For {{scrollsnapchange}} events, the snap position is the position already - realized by the snap container after a scroll snap. For {{scrollsnapchanging}} - events it is the snap position that the snap container will eventually - snap to when the scrolling operation ends. - -
    - - A {{SnapEvent}} should not bubble and should not be cancellable. - - - Appendix A: Longhands {#longhands} @@ -620,14 +688,14 @@ Event handlers on elements, Document objects and Window objects {#event-handlers - - + - - + - - +
    Event handlerEvent handler event typeEvent handler + Event handler event type
    onsnapchanged{{snapchanged}}onscrollsnapchange + {{scrollsnapchange}}
    onsnapchanging{{snapchanging}}onscrollsnapchanging + {{scrollsnapchanging}}
    @@ -635,7 +703,7 @@ Extensions to the GlobalEventHandlers Interface Mixin {#interface-g -------------------------------------------------------------------------------------------------------- This specification extends the {{GlobalEventHandlers}} interface mixin from - HTML to add event handler IDL attributes for {{SnapEvents}} as defined + HTML to add event handler IDL attributes for {{SnapEvent}}s as defined in [[#event-handlers-on-elements-document-and-window-objects]].

    IDL Definition

    @@ -646,3 +714,13 @@ Extensions to the GlobalEventHandlers Interface Mixin {#interface-g attribute EventHandler onsnapchanging; }; + +Privacy Considerations {#privacy} +====================== + +TODO + +Security Considerations {#security} +======================= + +TODO