Implement the updated port/area-based Scroll Snap Module Level 1 Spec
authorwenson_hsieh@apple.com <wenson_hsieh@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Dec 2016 18:44:38 +0000 (18:44 +0000)
committerwenson_hsieh@apple.com <wenson_hsieh@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Dec 2016 18:44:38 +0000 (18:44 +0000)
https://bugs.webkit.org/show_bug.cgi?id=165317
<rdar://problem/29490956>

Reviewed by Dean Jackson.

Source/WebCore:

Implements the changes drafted in the latest iteration of the Scroll Snap Module Level 1 spec, which uses a
snap-area and snap-port-based method for determining snap positions in a scroll snapping container.
Additionally, removes the now-obsolete and prefixed implementation of the scroll snap spec and refactors all
affected layout tests to use the new CSS properties. Also adds new layout tests covering some behaviors detailed
in the new version of the spec, such as scroll snapping with transformed child elements.

See below for more detailed descriptions of the changes.

Tests: css3/scroll-snap/scroll-snap-2d-change-axis-type.html
       css3/scroll-snap/scroll-snap-2d-offsets-computed-independently.html
       css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin.html
       css3/scroll-snap/scroll-snap-children-with-transforms.html
       css3/scroll-snap/scroll-snap-positions-mainframe.html
       css3/scroll-snap/scroll-snap-positions-overflow-resize.html
       css3/scroll-snap/scroll-snap-positions.html
       css3/scroll-snap/scroll-snap-style-changed-align.html
       css3/scroll-snap/scroll-snap-with-scroll-padding.html

* WebCore.xcodeproj/project.pbxproj:
* css/CSSCalculationValue.cpp:
(WebCore::hasDoubleValue):

Removed use of length repeat.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForScrollSnapType):
(WebCore::valueForScrollSnapAlignment):
(WebCore::ComputedStyleExtractor::propertyValue):
(WebCore::scrollSnapDestination): Deleted.
(WebCore::scrollSnapPoints): Deleted.
(WebCore::scrollSnapCoordinates): Deleted.

Removed helper functions used to create CSS values for scroll snap coordinates and destination, and added
helpers for computed scroll snap type (a combination of axis and strictness values) as well as scroll snap align
(an alignment value per axis).

* css/CSSPrimitiveValue.cpp:
(WebCore::isValidCSSUnitTypeForDoubleConversion):
(WebCore::isStringType):
(WebCore::CSSPrimitiveValue::cleanup):
(WebCore::CSSPrimitiveValue::formatNumberForCustomCSSText):
(WebCore::CSSPrimitiveValue::cloneForCSSOM):
(WebCore::CSSPrimitiveValue::equals):

Removed usages of the length repeat type, since repeat(*) is no longer being used anywhere.

* css/CSSPrimitiveValue.h:
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
(WebCore::CSSPrimitiveValue::operator ScrollSnapStrictness):
(WebCore::CSSPrimitiveValue::operator ScrollSnapAxis):
(WebCore::CSSPrimitiveValue::operator ScrollSnapAxisAlignType):
(WebCore::CSSPrimitiveValue::operator ScrollSnapType): Deleted.

Added CSSPrimitiveValue mappings to ScrollSnapAxisAlignType, ScrollSnapStrictness, and ScrollSnapAxis. Removed
the old ScrollSnapType mapping.

* css/CSSProperties.json:

Replaced the old scroll snap CSS properties with the new ones. Note that scroll-snap-margin and scroll-padding
have 4 shorthands each, for the individual top/bottom/left/right values.

* css/CSSValueKeywords.in:

Added CSS keywords {x, y}, which are necessary to support the new scroll snapping properties.

* css/LengthRepeat.h: Removed.

Removed LengthRepeat entirely. This represented the `repeat(<length>)` CSS value, which was only used for the
scroll-snap-points-x and scroll-snap-points-y values.

* css/StyleBuilderConverter.h:
(WebCore::StyleBuilderConverter::convertScrollSnapType):
(WebCore::StyleBuilderConverter::convertScrollSnapAlign):
(WebCore::StyleBuilderConverter::parseSnapCoordinate): Deleted.
(WebCore::StyleBuilderConverter::convertScrollSnapPoints): Deleted.
(WebCore::StyleBuilderConverter::convertSnapCoordinatePair): Deleted.
(WebCore::StyleBuilderConverter::convertScrollSnapCoordinates): Deleted.

Added helper functions to convert scroll snap type and scroll snap alignment from parsed CSS values to their
primary representation in WebCore as ScrollSnapType and ScrollSnapAlign. These methods assume that the given
CSS values have successfully cleared the parsing step and are represented as CSSValueLists or length 1 or 2.

* css/StyleBuilderCustom.h:
(WebCore::StyleBuilderCustom::applyInitialWebkitScrollSnapPointsX): Deleted.
(WebCore::StyleBuilderCustom::applyInheritWebkitScrollSnapPointsX): Deleted.
(WebCore::StyleBuilderCustom::applyInitialWebkitScrollSnapPointsY): Deleted.
(WebCore::StyleBuilderCustom::applyInheritWebkitScrollSnapPointsY): Deleted.
* css/StyleProperties.cpp:
(WebCore::StyleProperties::getPropertyValue):
(WebCore::StyleProperties::asText):

Adds support for the scroll-snap-margin and scroll-padding.

* css/parser/CSSParser.cpp:
(WebCore::isValidKeywordPropertyAndValue):
(WebCore::CSSParser::parseValue):
(WebCore::isScrollSnapAxisAlign):
(WebCore::isScrollSnapStrictness):
(WebCore::CSSParser::parseScrollSnapAlign):
(WebCore::CSSParser::parseScrollSnapType):
(WebCore::CSSParser::parseNonElementSnapPoints): Deleted.
(WebCore::CSSParser::parseScrollSnapPositions): Deleted.
(WebCore::CSSParser::parseScrollSnapDestination): Deleted.
(WebCore::CSSParser::parseScrollSnapCoordinate): Deleted.
* css/parser/CSSParser.h:

Removed references to LengthRepeat, and added support for parsing new scroll snapping properties. Scroll snap
margin and scroll padding, along with their shorthands, are parsed using the same helper functions as normal
margin and padding. For type and align, I added new helper functions that build up lists of 1 or 2
CSSPrimitiveValues for each of the properties.

Parsing scroll-snap-align is straightforward -- we either have one or two values in the set {none, start,
center, end}. For scroll-snap-type, we allow a single axis value {x, y, inline, block, both}, or a single
strictness value {none, proximity, mandatory}, or an axis value followed by a non-'none' strictness (i.e. either
proximity or mandatory).

* css/parser/CSSParserFastPaths.cpp:
(WebCore::CSSParserFastPaths::isValidKeywordPropertyAndValue):
(WebCore::CSSParserFastPaths::isKeywordPropertyID):
* css/parser/CSSParserValues.cpp:
(WebCore::CSSParserValue::createCSSValue):

Removed references to LengthRepeat.

* css/parser/CSSPropertyParser.cpp:
(WebCore::CSSPropertyParser::parseSingleValue):
(WebCore::CSSPropertyParser::parseShorthand):
(WebCore::consumeSnapPointCoordinateList): Deleted.
(WebCore::consumeScrollSnapCoordinate): Deleted.
(WebCore::consumeScrollSnapDestination): Deleted.
(WebCore::consumeScrollSnapPoints): Deleted.
(WebCore::consumeScrollSnapAlign):
(WebCore::consumeScrollSnapType):
(WebCore::CSSPropertyParser::parseSingleValue):

Added parsing for the longhand properties of scroll-snap-margin and scroll-padding, which use the existing
consumeLength and consumeLengthOrPercent helpers, respectively. Removed code for parsing scroll snap
coordinates, destinations and points. Added parsing logic for align and type.

* page/scrolling/AxisScrollSnapOffsets.cpp:
(WebCore::computeScrollSnapPortOrAreaRect):
(WebCore::computeScrollSnapAlignOffset):
(WebCore::snapOffsetsToString):
(WebCore::snapPortOrAreaToString):
(WebCore::updateSnapOffsetsForScrollableArea):
(WebCore::appendChildSnapOffsets): Deleted.
(WebCore::destinationOffsetForViewSize): Deleted.
(WebCore::updateFromStyle): Deleted.
(WebCore::styleUsesElements): Deleted.

Overhauled updateSnapOffsetsForScrollableArea to work with the new scroll snapping model. In the new way of
computing scroll snap offsets, we:

Compute the scroll container's scroll snap port, which is the padding box inset by the scroll padding
For each child with snap positions (i.e. scroll-snap-align is not none on both axes)
  Compute the child's scroll snap area, which is the bounding box of the transformed border box
    If the container snaps along the horizontal axis and the snap area contributes a horizontal snap offset:
      Emit the distance from the alignment offset in the horizontal of the snap port to the corresponding offset
      in the snap area as a snap position.
    If the container snaps along the vertical axis and the snap area contributes a vertical snap offset:
      Emit the distance from the alignment offset in the vertical of the snap port to the corresponding offset
      in the snap area as a snap position.
For the snap offsets in each axis, if there is at least one snap offset:
  Clamp the offsets to the min and max scroll offsets
  Ensure that the offsets are sorted and do not contain duplicated offsets

* platform/cocoa/ScrollController.mm:
(WebCore::ScrollController::updateScrollSnapState):

Clear out the ScrollController's snap offsets and state along an axis when its ScrollableArea no longer has snap
offsets in that axis.

* rendering/RenderBox.cpp:
(WebCore::RenderBox::styleWillChange):
(WebCore::RenderBox::willBeRemovedFromTree):
* rendering/RenderLayerModelObject.cpp:
(WebCore::scrollSnapContainerRequiresUpdateForStyleUpdate):
(WebCore::RenderLayerModelObject::styleDidChange):
* rendering/RenderView.cpp:
(WebCore::RenderView::registerBoxWithScrollSnapPositions):
(WebCore::RenderView::unregisterBoxWithScrollSnapPositions):
(WebCore::RenderView::registerBoxWithScrollSnapCoordinates): Deleted.
(WebCore::RenderView::unregisterBoxWithScrollSnapCoordinates): Deleted.
* rendering/RenderView.h:

Tweaked the scroll snap child registration logic. registerBoxWithScrollSnapCoordinates is renamed to
unregisterBoxWithScrollSnapPositions, since the notion of scroll snap coordinates no longer exists, and instead
of checking if the list of scroll snap coordinates is empty for the absence of scroll positions, we instead
check for a computed scroll snap align that is not none on both axes.

* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::initialScrollSnapType):
(WebCore::RenderStyle::initialScrollSnapAlign):
(WebCore::RenderStyle::scrollSnapArea):
(WebCore::RenderStyle::scrollSnapPort):
(WebCore::RenderStyle::scrollSnapType):
(WebCore::RenderStyle::scrollPadding):
(WebCore::RenderStyle::scrollPaddingTop):
(WebCore::RenderStyle::scrollPaddingBottom):
(WebCore::RenderStyle::scrollPaddingLeft):
(WebCore::RenderStyle::scrollPaddingRight):
(WebCore::RenderStyle::scrollSnapAlign):
(WebCore::RenderStyle::scrollSnapMargin):
(WebCore::RenderStyle::scrollSnapMarginTop):
(WebCore::RenderStyle::scrollSnapMarginBottom):
(WebCore::RenderStyle::scrollSnapMarginLeft):
(WebCore::RenderStyle::scrollSnapMarginRight):
(WebCore::RenderStyle::setScrollSnapType):
(WebCore::RenderStyle::setScrollPaddingTop):
(WebCore::RenderStyle::setScrollPaddingBottom):
(WebCore::RenderStyle::setScrollPaddingLeft):
(WebCore::RenderStyle::setScrollPaddingRight):
(WebCore::RenderStyle::setScrollSnapAlign):
(WebCore::RenderStyle::setScrollSnapMarginTop):
(WebCore::RenderStyle::setScrollSnapMarginBottom):
(WebCore::RenderStyle::setScrollSnapMarginLeft):
(WebCore::RenderStyle::setScrollSnapMarginRight):
(WebCore::RenderStyle::initialScrollSnapDestination): Deleted.
(WebCore::RenderStyle::initialScrollSnapCoordinates): Deleted.
(WebCore::RenderStyle::scrollSnapPointsX): Deleted.
(WebCore::RenderStyle::scrollSnapPointsY): Deleted.
(WebCore::RenderStyle::scrollSnapDestination): Deleted.
(WebCore::RenderStyle::scrollSnapCoordinates): Deleted.
(WebCore::RenderStyle::setScrollSnapPointsX): Deleted.
(WebCore::RenderStyle::setScrollSnapPointsY): Deleted.
(WebCore::RenderStyle::setScrollSnapDestination): Deleted.
(WebCore::RenderStyle::setScrollSnapCoordinates): Deleted.
* rendering/style/RenderStyle.h:
(WebCore::RenderStyle::initialScrollSnapMargin):
(WebCore::RenderStyle::initialScrollPadding):
(WebCore::RenderStyle::scrollSnapType): Deleted.
(WebCore::RenderStyle::setScrollSnapType): Deleted.
(WebCore::RenderStyle::initialScrollSnapType): Deleted.
(WebCore::RenderStyle::initialScrollSnapPointsX): Deleted.
(WebCore::RenderStyle::initialScrollSnapPointsY): Deleted.

Added boilerplate code for returning various new scroll snap style properties, and removed similar code for
handling the old scroll snap properties.

* rendering/style/RenderStyleConstants.h:

Added three new enum classes:
- ScrollSnapStrictness represents the strictness of scroll snapping along one or both axes
- ScrollSnapAxis designates the axes along which scroll snapping should occur
- ScrollSnapAxisAlignType indicates which offsets along the x or y axes of the snap port and snap area should be
  used to compute the snap position emitted by a snap area.

* rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
(WebCore::StyleRareNonInheritedData::operator==):
* rendering/style/StyleRareNonInheritedData.h:

Replaces the StyleScrollSnapPoints object (which, confusingly, was in charge of storing both the scroll
container's and child elements' scroll snap styles) with StyleScrollSnapPort and StyleScrollSnapArea objects,
which keep track of the style properties on the scroll container and the child element, respectively.

* rendering/style/StyleScrollSnapPoints.h:
(WebCore::operator==):
(WebCore::StyleScrollSnapPort::copy):
(WebCore::StyleScrollSnapPort::StyleScrollSnapPort):
(WebCore::StyleScrollSnapArea::copy):
(WebCore::StyleScrollSnapArea::StyleScrollSnapArea):
* rendering/style/StyleScrollSnapping.h: Added.
(WebCore::operator!=):
(WebCore::StyleScrollSnapPort::create):
(WebCore::StyleScrollSnapArea::create):
(WebCore::StyleScrollSnapArea::hasSnapPosition):

Overhauled StyleScrollSnapPoints, breaking the logic here into two classes: StyleScrollSnapPort for the scroll
container, handling the properties `scroll-snap-type` and `scroll-padding` and StyleScrollSnapArea for child
elements, handling the properties `scroll-snap-align` and `scroll-snap-margin`. The ScrollSnapType itself is
composed of an axis value and a strictness, while a ScrollSnapAlign keeps track of the alignment modes in each
axis. By default, these are initialized to {Both, None} and {None, None}, respectively. The rest of the logic is
boilerplate code for comparing these style objects to one another and copying style representations.

* testing/Internals.cpp:
(WebCore::Internals::scrollSnapOffsets):

Perform a layout on the document if needed before returning the list of computed snap offsets. The absence of
this layout pass was causing some layout tests in css3/scroll-snap/ to flake when testing that programmatic
changes to the scroll snap style properties change the computed snap offsets.

Source/WebKit2:

Remove unused code for adopting scroll snapping in the PDF plugin.

* WebProcess/Plugins/PDF/PDFPlugin.mm:
(WebKit::PDFPlugin::didCalculateSizes):

LayoutTests:

Refactors layout tests to use the new scroll snapping properties, removing any tests that only made sense in the
context of the old version of scroll snapping and adding new ones to cover behaviors that the existing tests do
not verify. See per-method descriptions for more details. In most cases, the old way of specifying scroll
snapping via repeat(<container width or length>) or a coordinate at (0, 0) on each child has been replaced with
`scroll-snap-type: (x|y|both) mandatory;` on the container and `scroll-snap-align: start` on each child element.
If a test below does not have an accompanying description, then this is the only change applied to it, and the
behavior it is testing is still relevant in the new scroll snapping model.

* css3/scroll-snap/improper-snap-points-crash-expected.txt: Removed.
* css3/scroll-snap/improper-snap-points-crash.html: Removed.

This test is no longer valid in the new scroll snapping model, since there is no way to specify both repeating
points along an axis and child elements with scroll snap coordinates.

* css3/scroll-snap/nested-elements-expected.txt:
* css3/scroll-snap/nested-elements.html:
* css3/scroll-snap/resources/iframe-content.html:
* css3/scroll-snap/scroll-snap-2d-change-axis-type-expected.txt: Added.
* css3/scroll-snap/scroll-snap-2d-change-axis-type.html: Added.

New layout test to check that changing the scroll-snap-type from one to both axes updates the computed snap
offsets in the container to have offsets from both axes.

* css3/scroll-snap/scroll-snap-2d-offsets-computed-independently-expected.txt: Added.
* css3/scroll-snap/scroll-snap-2d-offsets-computed-independently.html: Added.

New layout test to check that snap offsets are computed independently on each axis. In a 3x3 grid of child
elements with the child elements along the diagonal having `scroll-snap-align`s of `end`, `center` and `start`
in order from top left to bottom right, we should observe the same effect as having each child emit snap
positions in both axes.

* css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin-expected.txt: Added.
* css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin.html: Added.

New layout test to check that specifying a `scroll-snap-margin` correctly insets the scroll snap area of a child
element, and that changing the `scroll-snap-margin` via script also changes the computed scroll snap offsets.

* css3/scroll-snap/scroll-snap-children-with-transforms-expected.txt: Added.
* css3/scroll-snap/scroll-snap-children-with-transforms.html: Added.

New layout test to check that when computing the scroll snap areas of child elements, we take transforms into
account and use the bounding box of the transformed border box of the child element. Also verifies that we apply
the scroll offset _after_ the transform, so that scrolling the container and then recomputing snap offsets when
child elements are transformed does not result in different snap offsets.

* css3/scroll-snap/scroll-snap-coordinate-expected.txt: Removed.
* css3/scroll-snap/scroll-snap-coordinate.html: Removed.

Renamed to scroll-snap-position.html, since the notion of scroll snap coordinates no longer exists.

* css3/scroll-snap/scroll-snap-desination-lock-up-expected.txt: Removed.
* css3/scroll-snap/scroll-snap-desination-lock-up.html: Removed.

This test is no longer relevant in the new scroll snapping model. This is because the logic for computing scroll
snap offsets in AxisScrollSnapOffsets no longer has an opportunity to loop infinitely while trying to fill a
scrollable axis with snap offsets, since repeating snap points have been removed.

* css3/scroll-snap/scroll-snap-elements-container-larger-than-children.html:
* css3/scroll-snap/scroll-snap-inherit-expected.txt:
* css3/scroll-snap/scroll-snap-inherit.html:

Updated to test the new scroll snap properties.

* css3/scroll-snap/scroll-snap-initial-expected.txt:
* css3/scroll-snap/scroll-snap-initial.html:

Updated to test the new scroll snap properties.

* css3/scroll-snap/scroll-snap-mismatch.html:
* css3/scroll-snap/scroll-snap-negative-repeat-expected.txt: Removed.
* css3/scroll-snap/scroll-snap-negative-repeat.html: Removed.

Removed, since negative repeating scroll snap offsets are (thankfully) no longer possible in the new scroll
snapping model.

* css3/scroll-snap/scroll-snap-offsets-expected.txt:
* css3/scroll-snap/scroll-snap-offsets.html:

Augmented to mix in various alignment values among the scroll snap child elements as well as various levels of
nesting.

* css3/scroll-snap/scroll-snap-position-values-expected.txt: Removed.
* css3/scroll-snap/scroll-snap-position-values.html: Removed.

The behaviors tested here are covered by other similar tests: scroll-snap-initial and scroll-snap-inherit.

* css3/scroll-snap/scroll-snap-positions-expected.txt: Added.
* css3/scroll-snap/scroll-snap-positions-mainframe-expected.txt: Renamed from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe-expected.txt.
* css3/scroll-snap/scroll-snap-positions-mainframe.html: Renamed from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe.html.
* css3/scroll-snap/scroll-snap-positions-overflow-resize-expected.txt: Renamed from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize-expected.txt.
* css3/scroll-snap/scroll-snap-positions-overflow-resize.html: Renamed from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize.html.
* css3/scroll-snap/scroll-snap-positions.html: Added.

Renamed these existing tests to not use the term `scroll-snap-coordinate`. The semantics of these tests are
still the same, only using different values of `scroll-snap-align` instead of `-webkit-scroll-snap-coordinate`.

* css3/scroll-snap/scroll-snap-property-computed-style-expected.txt:
* css3/scroll-snap/scroll-snap-property-computed-style.js:
* css3/scroll-snap/scroll-snap-property-parsing-expected.txt:
* css3/scroll-snap/scroll-snap-property-parsing.js:
* css3/scroll-snap/scroll-snap-style-changed-align-expected.txt: Added.
* css3/scroll-snap/scroll-snap-style-changed-align.html: Renamed from LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates.html.
* css3/scroll-snap/scroll-snap-style-changed-coordinates-expected.txt: Removed.
* css3/scroll-snap/scroll-snap-style-changed-repeat-expected.txt: Removed.
* css3/scroll-snap/scroll-snap-style-changed-repeat.html: Removed.

No longer relevant, since repeating scroll snap offsets are no longer in the spec.

* css3/scroll-snap/scroll-snap-subpixel-repeat-expected.txt: Removed.
* css3/scroll-snap/scroll-snap-subpixel-repeat.html: Removed.

No longer relevant, since repeating scroll snap offsets are no longer in the spec.

* css3/scroll-snap/scroll-snap-with-scroll-padding-expected.txt: Added.
* css3/scroll-snap/scroll-snap-with-scroll-padding.html: Added.

New layout test to check that specifying scroll padding on a scroll container correctly outsets the scroll snap
port, and that changing scroll padding via script also changes the computed snap offsets.

* platform/mac-wk2/TestExpectations:

Removed tiled-drawing/scrolling/latched-div-with-scroll-snap.html from the list of failing tests.

* tiled-drawing/scrolling/latched-div-with-scroll-snap-expected.txt:
* tiled-drawing/scrolling/latched-div-with-scroll-snap.html:

This test was failing 100% of the time due to the momentum portion of the scrolling phase being invoked after
scroll snapping has ended. This has been rewritten to perform the following steps:
1. Scroll the top div with momentum and verify that the scroll 'glided' to the red box.
2. Scroll the top div without momentum and verify that the scroll snaps back to the red box.
3. Repeat (1) and (2), but for the bottom div. The same thing should occur.

* tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html:
* tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt: Removed.
* tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html: Removed.
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-2d-overflow.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-borders.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-then-horizontal.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-stateless.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-padding.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-rotated.html:
* tiled-drawing/scrolling/scroll-snap/scroll-snap-scrolling-jumps-to-top.html:

All of the tests here were updated to use the new scroll-snap-* properties instead of the old versions. The
semantics of these tests have not changed.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@210024 268f45cc-cd09-0410-ab3c-d52691b4dbfc

101 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/scroll-snap/improper-snap-points-crash-expected.txt [deleted file]
LayoutTests/css3/scroll-snap/improper-snap-points-crash.html [deleted file]
LayoutTests/css3/scroll-snap/nested-elements-expected.txt
LayoutTests/css3/scroll-snap/nested-elements.html
LayoutTests/css3/scroll-snap/resources/iframe-content.html
LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type-expected.txt [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type.html [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently-expected.txt [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently.html [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin-expected.txt [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin.html [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms-expected.txt [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms.html [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-coordinate-expected.txt [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-coordinate.html [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up-expected.txt [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up.html [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-elements-container-larger-than-children.html
LayoutTests/css3/scroll-snap/scroll-snap-inherit-expected.txt
LayoutTests/css3/scroll-snap/scroll-snap-inherit.html
LayoutTests/css3/scroll-snap/scroll-snap-initial-expected.txt
LayoutTests/css3/scroll-snap/scroll-snap-initial.html
LayoutTests/css3/scroll-snap/scroll-snap-mismatch.html
LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat-expected.txt [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat.html [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-offsets-expected.txt
LayoutTests/css3/scroll-snap/scroll-snap-offsets.html
LayoutTests/css3/scroll-snap/scroll-snap-position-values-expected.txt [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-position-values.html [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-positions-expected.txt [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-positions-mainframe-expected.txt [moved from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe-expected.txt with 100% similarity]
LayoutTests/css3/scroll-snap/scroll-snap-positions-mainframe.html [moved from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe.html with 91% similarity]
LayoutTests/css3/scroll-snap/scroll-snap-positions-overflow-resize-expected.txt [moved from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize-expected.txt with 100% similarity]
LayoutTests/css3/scroll-snap/scroll-snap-positions-overflow-resize.html [moved from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize.html with 93% similarity]
LayoutTests/css3/scroll-snap/scroll-snap-positions.html [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style-expected.txt
LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style.js
LayoutTests/css3/scroll-snap/scroll-snap-property-parsing-expected.txt
LayoutTests/css3/scroll-snap/scroll-snap-property-parsing.js
LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align-expected.txt [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align.html [moved from LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates.html with 80% similarity]
LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates-expected.txt [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat-expected.txt [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat.html [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat-expected.txt [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat.html [deleted file]
LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding-expected.txt [new file with mode: 0644]
LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding.html [new file with mode: 0644]
LayoutTests/platform/ios-simulator/TestExpectations
LayoutTests/platform/mac-wk2/TestExpectations
LayoutTests/tiled-drawing/scrolling/latched-div-with-scroll-snap-expected.txt
LayoutTests/tiled-drawing/scrolling/latched-div-with-scroll-snap.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt [deleted file]
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html [deleted file]
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-2d-overflow.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-borders.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-then-horizontal.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-stateless.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-padding.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-rotated.html
LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-scrolling-jumps-to-top.html
Source/WebCore/ChangeLog
Source/WebCore/WebCore.xcodeproj/project.pbxproj
Source/WebCore/css/CSSCalculationValue.cpp
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSPrimitiveValue.cpp
Source/WebCore/css/CSSPrimitiveValue.h
Source/WebCore/css/CSSPrimitiveValueMappings.h
Source/WebCore/css/CSSProperties.json
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/LengthRepeat.h [deleted file]
Source/WebCore/css/StyleBuilderConverter.h
Source/WebCore/css/StyleBuilderCustom.h
Source/WebCore/css/StyleProperties.cpp
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/css/parser/CSSParserFastPaths.cpp
Source/WebCore/css/parser/CSSPropertyParser.cpp
Source/WebCore/page/scrolling/AxisScrollSnapOffsets.cpp
Source/WebCore/platform/cocoa/ScrollController.mm
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderLayerModelObject.cpp
Source/WebCore/rendering/RenderView.cpp
Source/WebCore/rendering/RenderView.h
Source/WebCore/rendering/style/RenderStyle.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/RenderStyleConstants.h
Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp
Source/WebCore/rendering/style/StyleRareNonInheritedData.h
Source/WebCore/rendering/style/StyleScrollSnapPoints.cpp
Source/WebCore/rendering/style/StyleScrollSnapPoints.h
Source/WebCore/testing/Internals.cpp
Source/WebKit2/ChangeLog
Source/WebKit2/WebProcess/Plugins/PDF/PDFPlugin.mm

index ac71402..3331a8a 100644 (file)
@@ -1,3 +1,163 @@
+2016-12-20  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        Implement the updated port/area-based Scroll Snap Module Level 1 Spec
+        https://bugs.webkit.org/show_bug.cgi?id=165317
+        <rdar://problem/29490956>
+
+        Reviewed by Dean Jackson.
+
+        Refactors layout tests to use the new scroll snapping properties, removing any tests that only made sense in the
+        context of the old version of scroll snapping and adding new ones to cover behaviors that the existing tests do
+        not verify. See per-method descriptions for more details. In most cases, the old way of specifying scroll
+        snapping via repeat(<container width or length>) or a coordinate at (0, 0) on each child has been replaced with
+        `scroll-snap-type: (x|y|both) mandatory;` on the container and `scroll-snap-align: start` on each child element.
+        If a test below does not have an accompanying description, then this is the only change applied to it, and the
+        behavior it is testing is still relevant in the new scroll snapping model.
+
+        * css3/scroll-snap/improper-snap-points-crash-expected.txt: Removed.
+        * css3/scroll-snap/improper-snap-points-crash.html: Removed.
+
+        This test is no longer valid in the new scroll snapping model, since there is no way to specify both repeating
+        points along an axis and child elements with scroll snap coordinates.
+
+        * css3/scroll-snap/nested-elements-expected.txt:
+        * css3/scroll-snap/nested-elements.html:
+        * css3/scroll-snap/resources/iframe-content.html:
+        * css3/scroll-snap/scroll-snap-2d-change-axis-type-expected.txt: Added.
+        * css3/scroll-snap/scroll-snap-2d-change-axis-type.html: Added.
+
+        New layout test to check that changing the scroll-snap-type from one to both axes updates the computed snap
+        offsets in the container to have offsets from both axes.
+
+        * css3/scroll-snap/scroll-snap-2d-offsets-computed-independently-expected.txt: Added.
+        * css3/scroll-snap/scroll-snap-2d-offsets-computed-independently.html: Added.
+
+        New layout test to check that snap offsets are computed independently on each axis. In a 3x3 grid of child
+        elements with the child elements along the diagonal having `scroll-snap-align`s of `end`, `center` and `start`
+        in order from top left to bottom right, we should observe the same effect as having each child emit snap
+        positions in both axes.
+
+        * css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin-expected.txt: Added.
+        * css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin.html: Added.
+
+        New layout test to check that specifying a `scroll-snap-margin` correctly insets the scroll snap area of a child
+        element, and that changing the `scroll-snap-margin` via script also changes the computed scroll snap offsets.
+
+        * css3/scroll-snap/scroll-snap-children-with-transforms-expected.txt: Added.
+        * css3/scroll-snap/scroll-snap-children-with-transforms.html: Added.
+
+        New layout test to check that when computing the scroll snap areas of child elements, we take transforms into
+        account and use the bounding box of the transformed border box of the child element. Also verifies that we apply
+        the scroll offset _after_ the transform, so that scrolling the container and then recomputing snap offsets when
+        child elements are transformed does not result in different snap offsets.
+
+        * css3/scroll-snap/scroll-snap-coordinate-expected.txt: Removed.
+        * css3/scroll-snap/scroll-snap-coordinate.html: Removed.
+
+        Renamed to scroll-snap-position.html, since the notion of scroll snap coordinates no longer exists.
+
+        * css3/scroll-snap/scroll-snap-desination-lock-up-expected.txt: Removed.
+        * css3/scroll-snap/scroll-snap-desination-lock-up.html: Removed.
+
+        This test is no longer relevant in the new scroll snapping model. This is because the logic for computing scroll
+        snap offsets in AxisScrollSnapOffsets no longer has an opportunity to loop infinitely while trying to fill a
+        scrollable axis with snap offsets, since repeating snap points have been removed.
+
+        * css3/scroll-snap/scroll-snap-elements-container-larger-than-children.html:
+        * css3/scroll-snap/scroll-snap-inherit-expected.txt:
+        * css3/scroll-snap/scroll-snap-inherit.html:
+
+        Updated to test the new scroll snap properties.
+
+        * css3/scroll-snap/scroll-snap-initial-expected.txt:
+        * css3/scroll-snap/scroll-snap-initial.html:
+
+        Updated to test the new scroll snap properties.
+
+        * css3/scroll-snap/scroll-snap-mismatch.html:
+        * css3/scroll-snap/scroll-snap-negative-repeat-expected.txt: Removed.
+        * css3/scroll-snap/scroll-snap-negative-repeat.html: Removed.
+
+        Removed, since negative repeating scroll snap offsets are (thankfully) no longer possible in the new scroll
+        snapping model.
+
+        * css3/scroll-snap/scroll-snap-offsets-expected.txt:
+        * css3/scroll-snap/scroll-snap-offsets.html:
+
+        Augmented to mix in various alignment values among the scroll snap child elements as well as various levels of
+        nesting.
+
+        * css3/scroll-snap/scroll-snap-position-values-expected.txt: Removed.
+        * css3/scroll-snap/scroll-snap-position-values.html: Removed.
+
+        The behaviors tested here are covered by other similar tests: scroll-snap-initial and scroll-snap-inherit.
+
+        * css3/scroll-snap/scroll-snap-positions-expected.txt: Added.
+        * css3/scroll-snap/scroll-snap-positions-mainframe-expected.txt: Renamed from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe-expected.txt.
+        * css3/scroll-snap/scroll-snap-positions-mainframe.html: Renamed from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe.html.
+        * css3/scroll-snap/scroll-snap-positions-overflow-resize-expected.txt: Renamed from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize-expected.txt.
+        * css3/scroll-snap/scroll-snap-positions-overflow-resize.html: Renamed from LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize.html.
+        * css3/scroll-snap/scroll-snap-positions.html: Added.
+
+        Renamed these existing tests to not use the term `scroll-snap-coordinate`. The semantics of these tests are
+        still the same, only using different values of `scroll-snap-align` instead of `-webkit-scroll-snap-coordinate`.
+
+        * css3/scroll-snap/scroll-snap-property-computed-style-expected.txt:
+        * css3/scroll-snap/scroll-snap-property-computed-style.js:
+        * css3/scroll-snap/scroll-snap-property-parsing-expected.txt:
+        * css3/scroll-snap/scroll-snap-property-parsing.js:
+        * css3/scroll-snap/scroll-snap-style-changed-align-expected.txt: Added.
+        * css3/scroll-snap/scroll-snap-style-changed-align.html: Renamed from LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates.html.
+        * css3/scroll-snap/scroll-snap-style-changed-coordinates-expected.txt: Removed.
+        * css3/scroll-snap/scroll-snap-style-changed-repeat-expected.txt: Removed.
+        * css3/scroll-snap/scroll-snap-style-changed-repeat.html: Removed.
+
+        No longer relevant, since repeating scroll snap offsets are no longer in the spec.
+
+        * css3/scroll-snap/scroll-snap-subpixel-repeat-expected.txt: Removed.
+        * css3/scroll-snap/scroll-snap-subpixel-repeat.html: Removed.
+
+        No longer relevant, since repeating scroll snap offsets are no longer in the spec.
+
+        * css3/scroll-snap/scroll-snap-with-scroll-padding-expected.txt: Added.
+        * css3/scroll-snap/scroll-snap-with-scroll-padding.html: Added.
+
+        New layout test to check that specifying scroll padding on a scroll container correctly outsets the scroll snap
+        port, and that changing scroll padding via script also changes the computed snap offsets.
+
+        * platform/mac-wk2/TestExpectations:
+
+        Removed tiled-drawing/scrolling/latched-div-with-scroll-snap.html from the list of failing tests.
+
+        * tiled-drawing/scrolling/latched-div-with-scroll-snap-expected.txt:
+        * tiled-drawing/scrolling/latched-div-with-scroll-snap.html:
+
+        This test was failing 100% of the time due to the momentum portion of the scrolling phase being invoked after
+        scroll snapping has ended. This has been rewritten to perform the following steps:
+        1. Scroll the top div with momentum and verify that the scroll 'glided' to the red box.
+        2. Scroll the top div without momentum and verify that the scroll snaps back to the red box.
+        3. Repeat (1) and (2), but for the bottom div. The same thing should occur.
+
+        * tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html:
+        * tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt: Removed.
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html: Removed.
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-2d-overflow.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-borders.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-then-horizontal.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-stateless.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-padding.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-rotated.html:
+        * tiled-drawing/scrolling/scroll-snap/scroll-snap-scrolling-jumps-to-top.html:
+
+        All of the tests here were updated to use the new scroll-snap-* properties instead of the old versions. The
+        semantics of these tests have not changed.
+
 2016-12-20  Megan Gardner  <megan_gardner@apple.com>
 
         Fix memory leak in malformed test
 2016-12-20  Megan Gardner  <megan_gardner@apple.com>
 
         Fix memory leak in malformed test
diff --git a/LayoutTests/css3/scroll-snap/improper-snap-points-crash-expected.txt b/LayoutTests/css3/scroll-snap/improper-snap-points-crash-expected.txt
deleted file mode 100644 (file)
index 7c40794..0000000
+++ /dev/null
@@ -1,15 +0,0 @@
-The test passes if this page renders without crashing.
-
-
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-Scroll-snap offsets for horizontalTarget: horizontal = { 0, 100, 200, 300, 400, 500 }
-Scroll-snap offsets for first: 
-Scroll-snap offsets for second: 
-Scroll-snap offsets for third: 
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/css3/scroll-snap/improper-snap-points-crash.html b/LayoutTests/css3/scroll-snap/improper-snap-points-crash.html
deleted file mode 100644 (file)
index 0182cdf..0000000
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <style>
-            .horizontalGallery {
-                width: 100px;
-                height: 100px;
-                overflow-y: hidden;
-                overflow-x: auto;
-                margin: 2px;
-                -webkit-overflow-scrolling: touch;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-coordinate: 50% 50%;
-            }
-            .horizontalGalleryDrawer {
-                width: 600px;
-                height: 100px;
-            }
-            .colorBox {
-                height: 100px;
-                width: 100px;
-                float: left;
-            }
-            #item0 { background-color: red; }
-            #item1 { background-color: green; }
-            #item2 { background-color: blue; }
-            #item3 { background-color: aqua; }
-            #item4 { background-color: yellow; }
-            #item5 { background-color: fuchsia; }
-        </style>
-        <script src="../../resources/js-test-pre.js"></script>
-        <script>
-        function reportResult(horizontalTargetID)
-        {
-            var horizontalTarget = document.getElementById(horizontalTargetID);
-
-            debug("Scroll-snap offsets for " + horizontalTargetID + ": " + window.internals.scrollSnapOffsets(horizontalTarget));
-        }
-
-        function runTest()
-        {
-            reportResult('horizontalTarget');
-            reportResult('first');
-            reportResult('second');
-            reportResult('third');
-
-            finishJSTest();
-            testRunner.notifyDone();
-        }
-
-        function onLoad()
-        {
-            if (window.testRunner) {
-                window.jsTestIsAsync = true;
-                testRunner.dumpAsText();
-                testRunner.waitUntilDone();
-                setTimeout(runTest, 0);
-            }
-        }
-        </script>
-    </head>
-    <body onload="onLoad();">
-        <div style="position: relative; width: 300px">
-            <div>The test passes if this page renders without crashing.</div>
-            <div class="horizontalGallery" id="horizontalTarget">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <br id="first" />
-                    <br class="horizontalGallery" id="second" />
-                </div>
-            </div>
-            <br class="horizontalGallery" id="third" />
-            <div id="console"></div>
-        </div>
-        <script src="../../resources/js-test-post.js"></script>
-    </body>
-</html>
index de2daa3..65a3503 100644 (file)
@@ -1,7 +1,7 @@
 PASS successfullyParsed is true
 
 TEST COMPLETE
 PASS successfullyParsed is true
 
 TEST COMPLETE
-Scroll-snap offsets for 'container': vertical = { 0, 101, 218, 335, 452, 569, 686, 803, 920, 1037, 1154, 1271, 1388, 1505, 1622, 1739, 1856, 1973, 2090, 2207, 4938 }
+Scroll-snap offsets for 'container': vertical = { 0, 100, 215, 330, 445, 560, 675, 790, 905, 1020, 1135, 1250, 1365, 1480, 1595, 1710, 1825, 1940, 2055, 2170, 4900 }
 PASS Scroll-snap offsets for 'invalidContainer': UNDEFINED
 PASS successfullyParsed is true
 
 PASS Scroll-snap offsets for 'invalidContainer': UNDEFINED
 PASS successfullyParsed is true
 
index 478fa09..493f913 100644 (file)
@@ -6,22 +6,20 @@
         .scrollable {
             overflow: scroll;
             -webkit-overflow-scrolling: touch;
         .scrollable {
             overflow: scroll;
             -webkit-overflow-scrolling: touch;
-            border: 1px dashed black;
             height: 300px;
             margin: 0 10px;
         }
     
         .center-snap-receiver {
             height: 300px;
             margin: 0 10px;
         }
     
         .center-snap-receiver {
-            -webkit-scroll-snap-type: mandatory;
-            -webkit-scroll-snap-destination: 0 0;
+            scroll-snap-type: y mandatory;
         }
     
         .snap-point {
             margin-top: 100px;
             width: 15px;
             height: 15px;
         }
     
         .snap-point {
             margin-top: 100px;
             width: 15px;
             height: 15px;
-            border: 1px solid black;
-            -webkit-scroll-snap-coordinate: 0 0px;
+            background-color: blue;
+            scroll-snap-align: start;
         }
     
         .snap-point::after {
         }
     
         .snap-point::after {
     
         .nested > .snap-point {
             margin-left: 50px;
     
         .nested > .snap-point {
             margin-left: 50px;
-            border: 1px solid red;
+            background-color: red;
         }
         .nested > .nested > .snap-point {
             margin-left: 100px;
         }
         .nested > .nested > .snap-point {
             margin-left: 100px;
-            border: 1px solid blue;
+            background-color: blue;
+            opacity: 0.1;
         }
     
         .large-content {
         }
     
         .large-content {
@@ -50,7 +49,6 @@
         }
 
         .invalidContainer {
         }
 
         .invalidContainer {
-            border: 1px dashed black;
             height: 300px;
             margin: 0 10px;
             opacity: 0.5;
             height: 300px;
             margin: 0 10px;
             opacity: 0.5;
index 2af392c..c2698db 100644 (file)
                 height: 50px;
                 width: 400px;
                 float: left;
                 height: 50px;
                 width: 400px;
                 float: left;
+                scroll-snap-align: start;
             }
 
             .noInitial {
             }
 
             .noInitial {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-coordinate: left top;
+                scroll-snap-type: x mandatory;
             }
 
             #item0 { background-color: red; }
             }
 
             #item0 { background-color: red; }
@@ -38,7 +36,7 @@
     </head>
     <body>
         <div style="width: 400px">
     </head>
     <body>
         <div style="width: 400px">
-            <div id="noInitial" class="horizontalGallery noInitial" style="-webkit-scroll-snap-destination: right bottom; -webkit-scroll-snap-coordinate: left top;">
+            <div id="noInitial" class="horizontalGallery noInitial">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
         }
 
         var noInitial = document.getElementById('noInitial');
         }
 
         var noInitial = document.getElementById('noInitial');
-        top.succeeded = shouldMatch("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        top.succeeded = top.succeeded && shouldMatch("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        top.succeeded = top.succeeded && shouldMatch("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        top.succeeded = top.succeeded && shouldMatch("noInitial.style['-webkit-scroll-snap-coordinate']", "0% 0%");
-        top.succeeded = top.succeeded && shouldMatch("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-coordinate')", "0% 0%");
-
+        top.succeeded = shouldMatch("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-type')", "both mandatory");
+        document.querySelectorAll(".colorBox").forEach(colorBox => {
+            window.colorBox = colorBox;
+            top.succeeded = shouldMatch("getComputedStyle(colorBox).getPropertyValue('scroll-snap-align')", "start start");
+        });
         if (top.succeeded)
             top.debug("iframe processed all tests successfully.");
         else
         if (top.succeeded)
             top.debug("iframe processed all tests successfully.");
         else
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type-expected.txt
new file mode 100644 (file)
index 0000000..7d5b7e9
--- /dev/null
@@ -0,0 +1,4 @@
+
+
+The scroll offsets are: horizontal = { 0, 400, 800 }, vertical = { 0, 400, 800 }
+
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type.html b/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type.html
new file mode 100644 (file)
index 0000000..e1ecf99
--- /dev/null
@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <style>
+            #container {
+                width: 400px;
+                height: 400px;
+                overflow: auto;
+                scroll-snap-type: x mandatory;
+                position: absolute;
+                left: 0px;
+                top: 0px;
+                margin: 0;
+                padding: 0;
+            }
+
+            ::-webkit-scrollbar {
+                display: none;
+            }
+
+            .cell {
+                width: 400px;
+                height: 400px;
+                margin: 0px;
+                padding: 0px;
+                position: absolute;
+                scroll-snap-align: center;
+            }
+
+            .green {
+                background-color: green;
+            }
+
+            .red {
+                background-color: red;
+            }
+        </style>
+        <script src="../../../resources/js-test.js"></script>
+        <script>
+        let write = s => output.innerHTML += s + "<br>";
+        if (window.testRunner) {
+            testRunner.dumpAsText();
+            testRunner.waitUntilDone();
+        }
+
+        function run() {
+            if (!window.testRunner || !window.internals) {
+                write(`To manually test, verify that scrolling in the container snaps so that each colored box can fill
+                    the scroll container.`);
+                return;
+            }
+
+            setTimeout(() => {
+                write(`The scroll offsets are: ${internals.scrollSnapOffsets(container)}`);
+                testRunner.notifyDone();
+            }, 1000);
+        }
+        </script>
+    </head>
+    <body onload=run()>
+        <div id="container">
+            <div style="top: 0px; left: 0px;" class="cell green"></div>
+            <div style="top: 0px; left: 400px;" class="cell red"></div>
+            <div style="top: 0px; left: 800px;" class="cell green"></div><br/>
+            <div style="top: 400px; left: 0px;" class="cell red"></div>
+            <div style="top: 400px; left: 400px;" class="cell green"></div>
+            <div style="top: 400px; left: 800px;" class="cell red"></div><br/>
+            <div style="top: 800px; left: 0px;" class="cell green"></div>
+            <div style="top: 800px; left: 400px;" class="cell red"></div>
+            <div style="top: 800px; left: 800px;" class="cell green"></div>
+        </div>
+        <script>
+            container.style.scrollSnapType = "both mandatory";
+        </script>
+        <div id="output"></div>
+    </body>
+</html>
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently-expected.txt
new file mode 100644 (file)
index 0000000..7d5b7e9
--- /dev/null
@@ -0,0 +1,4 @@
+
+
+The scroll offsets are: horizontal = { 0, 400, 800 }, vertical = { 0, 400, 800 }
+
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently.html b/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently.html
new file mode 100644 (file)
index 0000000..083d0a5
--- /dev/null
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <style>
+            #container {
+                width: 400px;
+                height: 400px;
+                overflow: auto;
+                scroll-snap-type: both mandatory;
+                position: absolute;
+                left: 0px;
+                top: 0px;
+                margin: 0;
+                padding: 0;
+            }
+
+            ::-webkit-scrollbar {
+                display: none;
+            }
+
+            .cell {
+                width: 400px;
+                height: 400px;
+                margin: 0px;
+                padding: 0px;
+                position: absolute;
+            }
+
+            #top-left {
+                scroll-snap-align: end;
+            }
+
+            #middle {
+                scroll-snap-align: center;
+            }
+
+            #bottom-right {
+                scroll-snap-align: start;
+            }
+
+            .green {
+                background-color: green;
+            }
+
+            .red {
+                background-color: red;
+            }
+        </style>
+        <script src="../../../resources/js-test.js"></script>
+        <script>
+        let write = s => output.innerHTML += s + "<br>";
+        if (window.testRunner) {
+            testRunner.dumpAsText();
+            testRunner.waitUntilDone();
+        }
+
+        function run() {
+            if (!window.testRunner || !window.internals) {
+                write(`To manually test, verify that scrolling in the container snaps so that each colored box can fill
+                    the scroll container.`);
+                return;
+            }
+
+            setTimeout(() => {
+                write(`The scroll offsets are: ${internals.scrollSnapOffsets(container)}`);
+                testRunner.notifyDone();
+            }, 1000);
+        }
+        </script>
+    </head>
+    <body onload=run()>
+        <div id="container">
+            <div style="top: 0px; left: 0px;" class="cell green" id="top-left"></div>
+            <div style="top: 0px; left: 400px;" class="cell red"></div>
+            <div style="top: 0px; left: 800px;" class="cell green"></div><br/>
+            <div style="top: 400px; left: 0px;" class="cell red"></div>
+            <div style="top: 400px; left: 400px;" class="cell green" id="middle"></div>
+            <div style="top: 400px; left: 800px;" class="cell red"></div><br/>
+            <div style="top: 800px; left: 0px;" class="cell green"></div>
+            <div style="top: 800px; left: 400px;" class="cell red"></div>
+            <div style="top: 800px; left: 800px;" class="cell green" id="bottom-right"></div>
+        </div>
+        <div id="output"></div>
+    </body>
+</html>
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin-expected.txt
new file mode 100644 (file)
index 0000000..dfe5738
--- /dev/null
@@ -0,0 +1,5 @@
+Scroll-snap offsets are: vertical = { 0, 700, 1410, 2120, 2830, 3540, 3600 }
+After resizing, the offsets should not have changed: vertical = { 0, 700, 1410, 2120, 2830, 3540, 3600 }
+After deflating scroll-snap-margin by 10px, the offsets are: vertical = { 0, 710, 1420, 2130, 2840, 3550, 3600 }
+After resizing, the offsets should not have changed: vertical = { 0, 710, 1420, 2130, 2840, 3550, 3600 }
+
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin.html b/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin.html
new file mode 100644 (file)
index 0000000..2708073
--- /dev/null
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        #container {
+            position: absolute;
+            width: 400px;
+            height: 400px;
+            top: 0;
+            left: 0;
+            scroll-snap-type: y mandatory;
+            overflow-x: hidden;
+            overflow-y: scroll;
+            border: 1px black dashed;
+            opacity: 0.75;
+            background-color: #EEE;
+        }
+
+        .child {
+            width: 400px;
+            height: 400px;
+            scroll-snap-align: start;
+            position: absolute;
+            left: 0;
+        }
+    </style>
+    <script>
+    let write = s => output.innerHTML += s + "<br>";
+    if (window.testRunner) {
+        testRunner.dumpAsText();
+        testRunner.waitUntilDone();
+    }
+
+    function deflateScrollSnapMargins(amount) {
+        for (let child of document.querySelectorAll(".child")) {
+            let currentMargin = parseInt(child.style.scrollSnapMargin.replace(/px/, ""));
+            child.style.scrollSnapMargin = `${currentMargin - amount}px`;
+        }
+    }
+
+    function zeroDelayTimeout(action) {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                action();
+                resolve();
+            });
+        });
+    }
+
+    function run()
+    {
+        if (!window.testRunner || !window.internals) {
+            write(`To manually test, verify that scrolling snaps somewhere above each colored box. As you scroll further
+                down, the distance between the snapped position and the top of the colored box should increase.`);
+            return;
+        }
+
+        zeroDelayTimeout(() => {
+            write("Scroll-snap offsets are: " + internals.scrollSnapOffsets(container));
+            container.scrollTop += 100;
+            container.style.width = "500px";
+        })
+        .then(() => {
+            zeroDelayTimeout(() => {
+                write("After resizing, the offsets should not have changed: " + internals.scrollSnapOffsets(container));
+                container.scrollTop += 100;
+                deflateScrollSnapMargins(10);
+            });
+        })
+        .then(() => {
+            zeroDelayTimeout(() => {
+                write("After deflating scroll-snap-margin by 10px, the offsets are: " + internals.scrollSnapOffsets(container));
+                container.scrollTop += 100;
+                container.style.width = "400px";
+            });
+        })
+        .then(() => {
+            zeroDelayTimeout(() => {
+                write("After resizing, the offsets should not have changed: " + internals.scrollSnapOffsets(container));
+                testRunner.notifyDone();
+            });
+        });
+    }
+    </script>
+</head>
+<body onload=run()>
+    <div id="container">
+        <div class="child" style="background-color: red;     top: 0px;    scroll-snap-margin: 10px;"></div>
+        <div class="child" style="background-color: green;   top: 720px;  scroll-snap-margin: 20px;"></div>
+        <div class="child" style="background-color: blue;    top: 1440px; scroll-snap-margin: 30px;"></div>
+        <div class="child" style="background-color: aqua;    top: 2160px; scroll-snap-margin: 40px;"></div>
+        <div class="child" style="background-color: yellow;  top: 2880px; scroll-snap-margin: 50px;"></div>
+        <div class="child" style="background-color: fuchsia; top: 3600px; scroll-snap-margin: 60px;"></div>
+    </div>
+    <div id="output"></div>
+</body>
+</html>
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms-expected.txt
new file mode 100644 (file)
index 0000000..901baa1
--- /dev/null
@@ -0,0 +1,5 @@
+Scroll-snap offsets are: vertical = { 0, 82, 751, 1456, 2233, 2880, 3673 }
+After resizing, the offsets should not have changed: vertical = { 0, 82, 751, 1456, 2233, 2880, 3673 }
+After changing alignment to `start`, the offsets are: vertical = { 0, 688, 1423, 2086, 2880, 3526, 3673 }
+After resizing, the offsets should not have changed: vertical = { 0, 688, 1423, 2086, 2880, 3526, 3673 }
+
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms.html b/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms.html
new file mode 100644 (file)
index 0000000..44db8de
--- /dev/null
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        #container {
+            position: absolute;
+            width: 400px;
+            height: 400px;
+            top: 0;
+            left: 0;
+            scroll-snap-type: y mandatory;
+            overflow-x: hidden;
+            overflow-y: scroll;
+            border: 1px black dashed;
+            opacity: 0.75;
+            background-color: #EEE;
+        }
+
+        .child {
+            width: 400px;
+            height: 400px;
+            scroll-snap-align: end;
+            position: absolute;
+            left: 0;
+        }
+    </style>
+    <script>
+    let write = s => output.innerHTML += s + "<br>";
+    if (window.testRunner) {
+        testRunner.dumpAsText();
+        testRunner.waitUntilDone();
+    }
+
+    function zeroDelayTimeout(action) {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                action();
+                resolve();
+            });
+        });
+    }
+
+    function setScrollSnapAlign(align) {
+        for (let child of document.querySelectorAll(".child"))
+            child.style.scrollSnapAlign = align;
+    }
+
+    function run()
+    {
+        if (!window.testRunner || !window.internals) {
+            write(`To manually test, verify that scrolling in the container snaps such that the bottom tip of each
+                colored box aligns with the bottom of the scrolling container.`);
+            return;
+        }
+
+        zeroDelayTimeout(() => {
+            write("Scroll-snap offsets are: " + internals.scrollSnapOffsets(container));
+            container.scrollTop += 100;
+            container.style.width = "500px";
+        })
+        .then(() => {
+            zeroDelayTimeout(() => {
+                write("After resizing, the offsets should not have changed: " + internals.scrollSnapOffsets(container));
+                container.scrollTop += 100;
+                setScrollSnapAlign("start");
+            });
+        })
+        .then(() => {
+            zeroDelayTimeout(() => {
+                write("After changing alignment to `start`, the offsets are: " + internals.scrollSnapOffsets(container));
+                container.scrollTop += 100;
+                container.style.width = "400px";
+            });
+        })
+        .then(() => {
+            zeroDelayTimeout(() => {
+                write("After resizing, the offsets should not have changed: " + internals.scrollSnapOffsets(container));
+                testRunner.notifyDone();
+            });
+        });
+    }
+    </script>
+</head>
+<body onload=run()>
+    <div id="container">
+        <div class="child" style="background-color: red;     top: 0px;    transform: rotate(45deg);"></div>
+        <div class="child" style="background-color: green;   top: 720px;  transform: rotate(-10deg);"></div>
+        <div class="child" style="background-color: blue;    top: 1440px; transform: rotate(5deg);"></div>
+        <div class="child" style="background-color: aqua;    top: 2160px; transform: rotate(60deg);"></div>
+        <div class="child" style="background-color: yellow;  top: 2880px; transform: rotate(-90deg);"></div>
+        <div class="child" style="background-color: fuchsia; top: 3600px; transform: rotate(-30deg);"></div>
+    </div>
+    <div id="output"></div>
+</body>
+</html>
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-expected.txt
deleted file mode 100644 (file)
index c3077b3..0000000
+++ /dev/null
@@ -1,8 +0,0 @@
-PASS successfullyParsed is true
-
-TEST COMPLETE
-Scroll-snap offsets for 'container': vertical = { 0, 101, 219, 339, 458, 575, 592, 692, 812, 931, 1049, 1167, 1285, 1402, 1520, 1638, 1756, 1876, 1995, 2012, 2112, 2232, 4964 }
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-coordinate.html b/LayoutTests/css3/scroll-snap/scroll-snap-coordinate.html
deleted file mode 100644 (file)
index c63cf9d..0000000
+++ /dev/null
@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Snap points - nested snap coordinates</title>
-    <style>
-        .scrollable {
-            overflow: scroll;
-            -webkit-overflow-scrolling: touch;
-            border: 1px dashed black;
-            height: 300px;
-            margin: 0 10px;
-        }
-    
-        .center-snap-receiver {
-            -webkit-scroll-snap-type: mandatory;
-            -webkit-scroll-snap-destination: 0 0;
-        }
-    
-        .snap-point-marker {
-            margin-top: 100px;
-            width: 15px;
-            height: 15px;
-            border: 1px solid black;
-        }
-
-        .snap-point {
-            -webkit-scroll-snap-coordinate: 0 0px;
-        }
-
-        .multiple-coordinates {
-            -webkit-scroll-snap-coordinate: 0 0px 0 100px 0 220px;
-        }
-
-        .nested {
-            border: 1px dashed blue;
-        }
-    
-        .snap-point-marker::after {
-            font-size: 1em;
-            position: relative;
-            content: '+';
-        }
-    
-        .nested > .snap-point-marker {
-            margin-left: 50px;
-            border: 1px solid red;
-        }
-        .nested > .nested > .snap-point-marker {
-            margin-left: 100px;
-            border: 1px solid blue;
-        }
-    
-        .large-content {
-            height: 3000px;
-            width: 100%;
-        }
-    
-        .small-content {
-            height: 200px;
-            width: 100%;
-        }
-
-        .invalidContainer {
-            border: 1px dashed black;
-            height: 300px;
-            margin: 0 10px;
-            opacity: 0.5;
-            overflow: hidden;
-        }
-    </style>
-        <script src="../../resources/js-test-pre.js"></script>
-        <script>
-        function runTest()
-        {
-            var container = document.getElementById('container');
-            debug("Scroll-snap offsets for 'container': " + window.internals.scrollSnapOffsets(container));
-
-            finishJSTest();
-            testRunner.notifyDone();
-        }
-
-        function onLoad()
-        {
-            if (window.testRunner) {
-                window.jsTestIsAsync = true;
-                testRunner.dumpAsText();
-                testRunner.waitUntilDone();
-                setTimeout(runTest, 0);
-            }
-        }
-        </script>
-</head>
-<body onload="onLoad();">
-    <div id="container" class="center-snap-receiver scrollable">
-        <div class="snap-point snap-point-marker"></div>
-        <div class="nested">
-            <div class="snap-point snap-point-marker"></div>
-        </div>
-        <div class="nested">
-            <div class="nested">
-                <div class="snap-point snap-point-marker"></div>
-            </div>
-        </div>
-        <div class="snap-point snap-point-marker"></div>
-        <div class="snap-point snap-point-marker"></div>
-        <div class="multiple-coordinates nested">
-            <div class="snap-point-marker"></div>
-            <div class="nested">
-                <div class="snap-point-marker"></div>
-            </div>
-        </div>
-        <div class="nested">
-            <div class="snap-point snap-point-marker"></div>
-        </div>
-        <div class="snap-point snap-point-marker"></div>
-        <div class="nested">
-            <div class="snap-point snap-point-marker"></div>
-        </div>
-        <div class="snap-point snap-point-marker"></div>
-        <div class="snap-point snap-point-marker"></div>
-        <div class="nested">
-            <div class="snap-point snap-point-marker"></div>
-        </div>
-         <div class="snap-point snap-point-marker"></div>
-        <div class="nested">
-            <div class="snap-point snap-point-marker"></div>
-        </div>
-        <div class="nested">
-            <div class="nested">
-                <div class="snap-point snap-point-marker"></div>
-            </div>
-        </div>
-        <div class="snap-point snap-point-marker"></div>
-        <div class="nested multiple-coordinates">
-            <div class="snap-point-marker"></div>
-            <div class="nested">
-                <div class="snap-point-marker"></div>
-            </div>
-        </div>
-        <div class="large-content"></div>
-    </div>
-    <script src="../../resources/js-test-post.js"></script>
-</body>
-</html>
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up-expected.txt
deleted file mode 100644 (file)
index f12e1c9..0000000
+++ /dev/null
@@ -1,20 +0,0 @@
-This test passes if it doesn't time out.
-Tests infinite loop calculating scroll snap point offsets.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination') is "100% 100%"
-PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up.html b/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up.html
deleted file mode 100644 (file)
index 808afb4..0000000
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <style>
-            .horizontalGallery {
-                width: 400px;
-                height: 50px;
-                overflow-y: hidden;
-                overflow-x: auto;
-            }
-            .horizontalGalleryDrawer {
-                width: 3000px;
-                height: 50px;
-            }
-            .colorBox {
-                height: 50px;
-                width: 400px;
-                float: left;
-            }
-
-            .lockUpSnapCoordinate {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 100% 100%;
-                -webkit-scroll-snap-coordinate: initial;
-            }
-
-            #item0 { background-color: red; }
-            #item1 { background-color: green; }
-            #item2 { background-color: blue; }
-            #item3 { background-color: aqua; }
-            #item4 { background-color: yellow; }
-            #item5 { background-color: fuchsia; }
-        </style>
-        <script src="../../resources/js-test-pre.js"></script>
-    </head>
-    <body>
-        <div style="width: 400px">
-            <div id="lockUpSnapCoordinate" class="horizontalGallery lockUpSnapCoordinate">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-        </div>
-        This test passes if it doesn't time out.
-        <div id="console"></div>
-        <script>
-        description("Tests infinite loop calculating scroll snap point offsets.");
-
-        var lockUpSnapCoordinate = document.getElementById('lockUpSnapCoordinate');
-        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination')", "100% 100%");
-        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
-        </script>
-        <script src="../../resources/js-test-post.js"></script>
-    </body>
-</html>
-
index a9c4def..4dfaf42 100644 (file)
@@ -7,8 +7,7 @@
                 height: 300px;
                 overflow-y: hidden;
                 overflow-x: auto;
                 height: 300px;
                 overflow-y: hidden;
                 overflow-x: auto;
-                -webkit-scroll-snap-points-x: elements;
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: x mandatory;
             }
             #inner-container {
                 width: 1800px;
             }
             #inner-container {
                 width: 1800px;
@@ -18,7 +17,7 @@
                 height: 300px;
                 float: left;
                 min-width: 200px;
                 height: 300px;
                 float: left;
                 min-width: 200px;
-                -webkit-scroll-snap-coordinate: 0 0;
+                scroll-snap-align: start;
             }
         </style>
         <script src="../../resources/js-test-pre.js"></script>
             }
         </style>
         <script src="../../resources/js-test-pre.js"></script>
index 87ce7d9..2ac6fdb 100644 (file)
@@ -3,86 +3,124 @@ Tests 'inherit' on scroll snap properties.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS noInherit.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS noInherit.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS noInherit.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS noInherit.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-destination') is "10% 11%"
-PASS noInherit.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
-PASS inheritType.style['-webkit-scroll-snap-type'] is "inherit"
-PASS window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-type') is "proximity"
-PASS inheritType.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS inheritType.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS inheritType.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-destination') is "0px 0px"
-PASS inheritType.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-coordinate') is "15px 122px"
-PASS inheritXPoints.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS inheritXPoints.style['-webkit-scroll-snap-points-x'] is "inherit"
-PASS window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(200%)"
-PASS inheritXPoints.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS inheritXPoints.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-destination') is "50% 70%"
-PASS inheritXPoints.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-coordinate') is "100% 50%"
-PASS inheritYPoints.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS inheritYPoints.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS inheritYPoints.style['-webkit-scroll-snap-points-y'] is "inherit"
-PASS window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(200%)"
-PASS inheritYPoints.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-destination') is "10px 20px"
-PASS inheritYPoints.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-coordinate') is "50% 100%"
-PASS inheritDestination.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-type') is "proximity"
-PASS inheritDestination.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS inheritDestination.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS inheritDestination.style['-webkit-scroll-snap-destination'] is "inherit"
-PASS window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-destination') is "25% 25%"
-PASS inheritDestination.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-coordinate') is "10px 10px"
-PASS inheritSnapCoordinate.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS inheritSnapCoordinate.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS inheritSnapCoordinate.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS inheritSnapCoordinate.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination') is "10% 10%"
-PASS inheritSnapCoordinate.style['-webkit-scroll-snap-coordinate'] is "inherit"
-PASS window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate') is "20px 20px"
-PASS inheritAll.style['-webkit-scroll-snap-type'] is "inherit"
-PASS window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-type') is "proximity"
-PASS inheritAll.style['-webkit-scroll-snap-points-x'] is "inherit"
-PASS window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(200%)"
-PASS inheritAll.style['-webkit-scroll-snap-points-y'] is "inherit"
-PASS window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(200%)"
-PASS inheritAll.style['-webkit-scroll-snap-destination'] is "inherit"
-PASS window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-destination') is "25% 25%"
-PASS inheritAll.style['-webkit-scroll-snap-coordinate'] is "inherit"
-PASS window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-coordinate') is "20px 20px"
-PASS inheritNone.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-type') is "none"
-PASS inheritNone.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-points-x') is "none"
-PASS inheritNone.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-points-y') is "none"
-PASS inheritNone.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-destination') is "0px 0px"
-PASS inheritNone.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
+PASS noInherit.style['scroll-snap-type'] is ""
+PASS window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-type') is "both mandatory"
+PASS noInherit.style['scroll-snap-align'] is ""
+PASS window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-align') is "center center"
+PASS noInherit.style['scroll-padding'] is ""
+PASS noInherit.style['scroll-padding-left'] is ""
+PASS noInherit.style['scroll-padding-right'] is ""
+PASS noInherit.style['scroll-padding-top'] is ""
+PASS noInherit.style['scroll-padding-bottom'] is ""
+PASS window.getComputedStyle(noInherit).getPropertyValue('scroll-padding') is "20px"
+PASS noInherit.style['scroll-snap-margin'] is ""
+PASS noInherit.style['scroll-snap-margin-left'] is ""
+PASS noInherit.style['scroll-snap-margin-right'] is ""
+PASS noInherit.style['scroll-snap-margin-top'] is ""
+PASS noInherit.style['scroll-snap-margin-bottom'] is ""
+PASS window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-margin') is "0px 1px"
+
+PASS inheritType.style['scroll-snap-type'] is "inherit"
+PASS window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-type') is "x proximity"
+PASS inheritType.style['scroll-snap-align'] is ""
+PASS window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-align') is "center center"
+PASS inheritType.style['scroll-padding'] is ""
+PASS inheritType.style['scroll-padding-left'] is ""
+PASS inheritType.style['scroll-padding-right'] is ""
+PASS inheritType.style['scroll-padding-top'] is ""
+PASS inheritType.style['scroll-padding-bottom'] is ""
+PASS window.getComputedStyle(inheritType).getPropertyValue('scroll-padding') is "20px"
+PASS inheritType.style['scroll-snap-margin'] is ""
+PASS inheritType.style['scroll-snap-margin-left'] is ""
+PASS inheritType.style['scroll-snap-margin-right'] is ""
+PASS inheritType.style['scroll-snap-margin-top'] is ""
+PASS inheritType.style['scroll-snap-margin-bottom'] is ""
+PASS window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-margin') is "0px 1px"
+
+PASS inheritAlign.style['scroll-snap-type'] is ""
+PASS window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-type') is "both mandatory"
+PASS inheritAlign.style['scroll-snap-align'] is "inherit"
+PASS window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-align') is "start end"
+PASS inheritAlign.style['scroll-padding'] is ""
+PASS inheritAlign.style['scroll-padding-left'] is ""
+PASS inheritAlign.style['scroll-padding-right'] is ""
+PASS inheritAlign.style['scroll-padding-top'] is ""
+PASS inheritAlign.style['scroll-padding-bottom'] is ""
+PASS window.getComputedStyle(inheritAlign).getPropertyValue('scroll-padding') is "20px"
+PASS inheritAlign.style['scroll-snap-margin'] is ""
+PASS inheritAlign.style['scroll-snap-margin-left'] is ""
+PASS inheritAlign.style['scroll-snap-margin-right'] is ""
+PASS inheritAlign.style['scroll-snap-margin-top'] is ""
+PASS inheritAlign.style['scroll-snap-margin-bottom'] is ""
+PASS window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-margin') is "0px 1px"
+
+PASS inheritPadding.style['scroll-snap-type'] is ""
+PASS window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-type') is "both mandatory"
+PASS inheritPadding.style['scroll-snap-align'] is ""
+PASS window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-align') is "center center"
+PASS inheritPadding.style['scroll-padding'] is "inherit"
+PASS inheritPadding.style['scroll-padding-left'] is "inherit"
+PASS inheritPadding.style['scroll-padding-right'] is "inherit"
+PASS inheritPadding.style['scroll-padding-top'] is "inherit"
+PASS inheritPadding.style['scroll-padding-bottom'] is "inherit"
+PASS window.getComputedStyle(inheritPadding).getPropertyValue('scroll-padding') is "10%"
+PASS inheritPadding.style['scroll-snap-margin'] is ""
+PASS inheritPadding.style['scroll-snap-margin-left'] is ""
+PASS inheritPadding.style['scroll-snap-margin-right'] is ""
+PASS inheritPadding.style['scroll-snap-margin-top'] is ""
+PASS inheritPadding.style['scroll-snap-margin-bottom'] is ""
+PASS window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-margin') is "0px 1px"
+
+PASS inheritMargin.style['scroll-snap-type'] is ""
+PASS window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-type') is "both mandatory"
+PASS inheritMargin.style['scroll-snap-align'] is ""
+PASS window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-align') is "center center"
+PASS inheritMargin.style['scroll-padding'] is ""
+PASS inheritMargin.style['scroll-padding-left'] is ""
+PASS inheritMargin.style['scroll-padding-right'] is ""
+PASS inheritMargin.style['scroll-padding-top'] is ""
+PASS inheritMargin.style['scroll-padding-bottom'] is ""
+PASS window.getComputedStyle(inheritMargin).getPropertyValue('scroll-padding') is "20px"
+PASS inheritMargin.style['scroll-snap-margin'] is "inherit"
+PASS inheritMargin.style['scroll-snap-margin-left'] is "inherit"
+PASS inheritMargin.style['scroll-snap-margin-right'] is "inherit"
+PASS inheritMargin.style['scroll-snap-margin-top'] is "inherit"
+PASS inheritMargin.style['scroll-snap-margin-bottom'] is "inherit"
+PASS window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-margin') is "5px 5px 10px 10px"
+
+PASS inheritAll.style['scroll-snap-type'] is "inherit"
+PASS window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-type') is "x proximity"
+PASS inheritAll.style['scroll-snap-align'] is "inherit"
+PASS window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-align') is "start end"
+PASS inheritAll.style['scroll-padding'] is "inherit"
+PASS inheritAll.style['scroll-padding-left'] is "inherit"
+PASS inheritAll.style['scroll-padding-right'] is "inherit"
+PASS inheritAll.style['scroll-padding-top'] is "inherit"
+PASS inheritAll.style['scroll-padding-bottom'] is "inherit"
+PASS window.getComputedStyle(inheritAll).getPropertyValue('scroll-padding') is "10%"
+PASS inheritAll.style['scroll-snap-margin'] is "inherit"
+PASS inheritAll.style['scroll-snap-margin-left'] is "inherit"
+PASS inheritAll.style['scroll-snap-margin-right'] is "inherit"
+PASS inheritAll.style['scroll-snap-margin-top'] is "inherit"
+PASS inheritAll.style['scroll-snap-margin-bottom'] is "inherit"
+PASS window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-margin') is "5px 5px 10px 10px"
+
+PASS inheritNone.style['scroll-snap-type'] is ""
+PASS window.getComputedStyle(inheritNone).getPropertyValue('scroll-snap-type') is "none"
+PASS inheritNone.style['scroll-snap-align'] is ""
+PASS window.getComputedStyle(inheritNone).getPropertyValue('scroll-snap-align') is "none none"
+PASS inheritNone.style['scroll-padding'] is ""
+PASS inheritNone.style['scroll-padding-left'] is ""
+PASS inheritNone.style['scroll-padding-right'] is ""
+PASS inheritNone.style['scroll-padding-top'] is ""
+PASS inheritNone.style['scroll-padding-bottom'] is ""
+PASS window.getComputedStyle(inheritNone).getPropertyValue('scroll-padding') is "0px"
+PASS inheritNone.style['scroll-snap-margin'] is ""
+PASS inheritNone.style['scroll-snap-margin-left'] is ""
+PASS inheritNone.style['scroll-snap-margin-right'] is ""
+PASS inheritNone.style['scroll-snap-margin-top'] is ""
+PASS inheritNone.style['scroll-snap-margin-bottom'] is ""
+PASS window.getComputedStyle(inheritNone).getPropertyValue('scroll-snap-margin') is "0px"
 PASS successfullyParsed is true
 
 TEST COMPLETE
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 9b07e1f..fc26eab 100644 (file)
@@ -4,22 +4,24 @@
         <style>
             .topLevel {
                 width: 400px;
         <style>
             .topLevel {
                 width: 400px;
-                -webkit-scroll-snap-type: proximity;
-                -webkit-scroll-snap-points-x: repeat(200%);
-                -webkit-scroll-snap-points-y: repeat(200%);
-                -webkit-scroll-snap-destination: 25% 25%;
-                -webkit-scroll-snap-coordinate: 20px 20px;
+                scroll-snap-type: x proximity;
+                scroll-snap-align: start end;
+                scroll-padding: 10%;
+                scroll-snap-margin: 5px 5px 10px 10px;
             }
             }
+
             .horizontalGallery {
                 width: 400px;
                 height: 50px;
                 overflow-y: hidden;
                 overflow-x: auto;
             }
             .horizontalGallery {
                 width: 400px;
                 height: 50px;
                 overflow-y: hidden;
                 overflow-x: auto;
             }
+
             .horizontalGalleryDrawer {
                 width: 3000px;
                 height: 50px;
             }
             .horizontalGalleryDrawer {
                 width: 3000px;
                 height: 50px;
             }
+
             .colorBox {
                 height: 50px;
                 width: 400px;
             .colorBox {
                 height: 50px;
                 width: 400px;
             }
 
             .noInherit {
             }
 
             .noInherit {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 10% 11%;
-                -webkit-scroll-snap-coordinate: none;
+                scroll-snap-type: mandatory;
+                scroll-snap-align: center;
+                scroll-padding: 20px;
+                scroll-snap-margin: 0 1px;
             }
 
             .inheritType {
             }
 
             .inheritType {
-                -webkit-scroll-snap-type: inherit;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 0px 0px;
-                -webkit-scroll-snap-coordinate: 15px 122px;
-            }
-
-            .inheritXPoints {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: inherit;
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 50% 70%;
-                -webkit-scroll-snap-coordinate: 100% 50%;
+                scroll-snap-type: inherit;
+                scroll-snap-align: center;
+                scroll-padding: 20px;
+                scroll-snap-margin: 0 1px;
             }
 
             }
 
-            .inheritYPoints {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: inherit;
-                -webkit-scroll-snap-destination: 10px 20px;
-                -webkit-scroll-snap-coordinate: 50% 100%;
+            .inheritAlign {
+                scroll-snap-type: mandatory;
+                scroll-snap-align: inherit;
+                scroll-padding: 20px;
+                scroll-snap-margin: 0 1px;
             }
 
             }
 
-            .inheritDestination {
-                -webkit-scroll-snap-type: proximity;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: inherit;
-                -webkit-scroll-snap-coordinate: 10px 10px;
+            .inheritPadding {
+                scroll-snap-type: mandatory;
+                scroll-snap-align: center;
+                scroll-padding: inherit;
+                scroll-snap-margin: 0 1px;
             }
 
             }
 
-            .inheritSnapCoordinate {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 10% 10%;
-                -webkit-scroll-snap-coordinate: inherit;
+            .inheritMargin {
+                scroll-snap-type: mandatory;
+                scroll-snap-align: center;
+                scroll-padding: 20px;
+                scroll-snap-margin: inherit;
             }
 
             .inheritAll {
             }
 
             .inheritAll {
-                -webkit-scroll-snap-type: inherit;
-                -webkit-scroll-snap-points-x: inherit;
-                -webkit-scroll-snap-points-y: inherit;
-                -webkit-scroll-snap-destination: inherit;
-                -webkit-scroll-snap-coordinate: inherit
+                scroll-snap-type: inherit;
+                scroll-snap-align: inherit;
+                scroll-padding: inherit;
+                scroll-snap-margin: inherit;
             }
 
             }
 
-            .inheritNone {
-            }
+            .inheritNone { }
 
             #item0 { background-color: red; }
             #item1 { background-color: green; }
 
             #item0 { background-color: red; }
             #item1 { background-color: green; }
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="inheritType" class="horizontalGallery inheritType" style="-webkit-scroll-snap-type: inherit;">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-            <div id="inheritXPoints" class="horizontalGallery inheritXPoints" style="-webkit-scroll-snap-points-x: inherit;">
+            <div id="inheritType" class="horizontalGallery inheritType" style="scroll-snap-type: inherit;">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="inheritYPoints" class="horizontalGallery inheritYPoints" style="-webkit-scroll-snap-points-y: inherit;">
+            <div id="inheritAlign" class="horizontalGallery inheritAlign" style="scroll-snap-align: inherit;">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="inheritDestination" class="horizontalGallery inheritDestination" style="-webkit-scroll-snap-destination: inherit;">
+            <div id="inheritPadding" class="horizontalGallery inheritPadding" style="scroll-padding: inherit;">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="inheritSnapCoordinate" class="horizontalGallery inheritSnapCoordinate" style="-webkit-scroll-snap-coordinate: inherit;">
+            <div id="inheritMargin" class="horizontalGallery inheritMargin" style="scroll-snap-margin: inherit;">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="inheritAll" class="horizontalGallery inheritAll" style="-webkit-scroll-snap-type: inherit; -webkit-scroll-snap-points-x: inherit; -webkit-scroll-snap-points-y: inherit; -webkit-scroll-snap-destination: inherit; -webkit-scroll-snap-coordinate: inherit;">
+            <div id="inheritAll" class="horizontalGallery inheritAll" style="scroll-snap-type: inherit; scroll-snap-align: inherit; scroll-padding: inherit; scroll-snap-margin: inherit;">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
         description("Tests 'inherit' on scroll snap properties.");
 
         var noInherit = document.getElementById('noInherit');
         description("Tests 'inherit' on scroll snap properties.");
 
         var noInherit = document.getElementById('noInherit');
-        shouldBeEmptyString("noInherit.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("noInherit.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("noInherit.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("noInherit.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-destination')", "10% 11%");
-        shouldBeEmptyString("noInherit.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
+        shouldBeEmptyString("noInherit.style['scroll-snap-type']");
+        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-type')", "both mandatory");
+        shouldBeEmptyString("noInherit.style['scroll-snap-align']");
+        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-align')", "center center");
+        shouldBeEmptyString("noInherit.style['scroll-padding']");
+        shouldBeEmptyString("noInherit.style['scroll-padding-left']");
+        shouldBeEmptyString("noInherit.style['scroll-padding-right']");
+        shouldBeEmptyString("noInherit.style['scroll-padding-top']");
+        shouldBeEmptyString("noInherit.style['scroll-padding-bottom']");
+        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-padding')", "20px");
+        shouldBeEmptyString("noInherit.style['scroll-snap-margin']");
+        shouldBeEmptyString("noInherit.style['scroll-snap-margin-left']");
+        shouldBeEmptyString("noInherit.style['scroll-snap-margin-right']");
+        shouldBeEmptyString("noInherit.style['scroll-snap-margin-top']");
+        shouldBeEmptyString("noInherit.style['scroll-snap-margin-bottom']");
+        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-margin')", "0px 1px");
+        debug("");
 
         var inheritType = document.getElementById('inheritType');
 
         var inheritType = document.getElementById('inheritType');
-        shouldBeEqualToString("inheritType.style['-webkit-scroll-snap-type']", "inherit");
-        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-type')", "proximity");
-        shouldBeEmptyString("inheritType.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("inheritType.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("inheritType.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
-        shouldBeEmptyString("inheritType.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-coordinate')", "15px 122px");
-
-        var inheritXPoints = document.getElementById('inheritXPoints');
-        shouldBeEmptyString("inheritXPoints.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEqualToString("inheritXPoints.style['-webkit-scroll-snap-points-x']", "inherit");
-        shouldBeEqualToString("window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(200%)");
-        shouldBeEmptyString("inheritXPoints.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("inheritXPoints.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-destination')", "50% 70%");
-        shouldBeEmptyString("inheritXPoints.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "100% 50%");
+        shouldBeEqualToString("inheritType.style['scroll-snap-type']", "inherit");
+        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-type')", "x proximity");
+        shouldBeEmptyString("inheritType.style['scroll-snap-align']");
+        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-align')", "center center");
+        shouldBeEmptyString("inheritType.style['scroll-padding']");
+        shouldBeEmptyString("inheritType.style['scroll-padding-left']");
+        shouldBeEmptyString("inheritType.style['scroll-padding-right']");
+        shouldBeEmptyString("inheritType.style['scroll-padding-top']");
+        shouldBeEmptyString("inheritType.style['scroll-padding-bottom']");
+        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-padding')", "20px");
+        shouldBeEmptyString("inheritType.style['scroll-snap-margin']");
+        shouldBeEmptyString("inheritType.style['scroll-snap-margin-left']");
+        shouldBeEmptyString("inheritType.style['scroll-snap-margin-right']");
+        shouldBeEmptyString("inheritType.style['scroll-snap-margin-top']");
+        shouldBeEmptyString("inheritType.style['scroll-snap-margin-bottom']");
+        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-margin')", "0px 1px");
+        debug("");
 
 
-        var inheritYPoints = document.getElementById('inheritYPoints');
-        shouldBeEmptyString("inheritYPoints.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("inheritYPoints.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEqualToString("inheritYPoints.style['-webkit-scroll-snap-points-y']", "inherit");
-        shouldBeEqualToString("window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(200%)");
-        shouldBeEmptyString("inheritYPoints.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-destination')", "10px 20px");
-        shouldBeEmptyString("inheritYPoints.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "50% 100%");
+        var inheritAlign = document.getElementById('inheritAlign');
+        shouldBeEmptyString("inheritAlign.style['scroll-snap-type']");
+        shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-type')", "both mandatory");
+        shouldBeEqualToString("inheritAlign.style['scroll-snap-align']", "inherit");
+        shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-align')", "start end");
+        shouldBeEmptyString("inheritAlign.style['scroll-padding']");
+        shouldBeEmptyString("inheritAlign.style['scroll-padding-left']");
+        shouldBeEmptyString("inheritAlign.style['scroll-padding-right']");
+        shouldBeEmptyString("inheritAlign.style['scroll-padding-top']");
+        shouldBeEmptyString("inheritAlign.style['scroll-padding-bottom']");
+        shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-padding')", "20px");
+        shouldBeEmptyString("inheritAlign.style['scroll-snap-margin']");
+        shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-left']");
+        shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-right']");
+        shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-top']");
+        shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-bottom']");
+        shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-margin')", "0px 1px");
+        debug("");
 
 
-        var inheritDestination = document.getElementById('inheritDestination');
-        shouldBeEmptyString("inheritDestination.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-type')", "proximity");
-        shouldBeEmptyString("inheritDestination.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("inheritDestination.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEqualToString("inheritDestination.style['-webkit-scroll-snap-destination']", "inherit");
-        shouldBeEqualToString("window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-destination')", "25% 25%");
-        shouldBeEmptyString("inheritDestination.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-coordinate')", "10px 10px");
+        var inheritPadding = document.getElementById('inheritPadding');
+        shouldBeEmptyString("inheritPadding.style['scroll-snap-type']");
+        shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-type')", "both mandatory");
+        shouldBeEmptyString("inheritPadding.style['scroll-snap-align']");
+        shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-align')", "center center");
+        shouldBeEqualToString("inheritPadding.style['scroll-padding']", "inherit");
+        shouldBeEqualToString("inheritPadding.style['scroll-padding-left']", "inherit");
+        shouldBeEqualToString("inheritPadding.style['scroll-padding-right']", "inherit");
+        shouldBeEqualToString("inheritPadding.style['scroll-padding-top']", "inherit");
+        shouldBeEqualToString("inheritPadding.style['scroll-padding-bottom']", "inherit");
+        shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-padding')", "10%");
+        shouldBeEmptyString("inheritPadding.style['scroll-snap-margin']");
+        shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-left']");
+        shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-right']");
+        shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-top']");
+        shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-bottom']");
+        shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-margin')", "0px 1px");
+        debug("");
 
 
-        var inheritSnapCoordinate = document.getElementById('inheritSnapCoordinate');
-        shouldBeEmptyString("inheritSnapCoordinate.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("inheritSnapCoordinate.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("inheritSnapCoordinate.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("inheritSnapCoordinate.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination')", "10% 10%");
-        shouldBeEqualToString("inheritSnapCoordinate.style['-webkit-scroll-snap-coordinate']", "inherit");
-        shouldBeEqualToString("window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate')", "20px 20px");
+        var inheritMargin = document.getElementById('inheritMargin');
+        shouldBeEmptyString("inheritMargin.style['scroll-snap-type']");
+        shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-type')", "both mandatory");
+        shouldBeEmptyString("inheritMargin.style['scroll-snap-align']");
+        shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-align')", "center center");
+        shouldBeEmptyString("inheritMargin.style['scroll-padding']");
+        shouldBeEmptyString("inheritMargin.style['scroll-padding-left']");
+        shouldBeEmptyString("inheritMargin.style['scroll-padding-right']");
+        shouldBeEmptyString("inheritMargin.style['scroll-padding-top']");
+        shouldBeEmptyString("inheritMargin.style['scroll-padding-bottom']");
+        shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-padding')", "20px");
+        shouldBeEqualToString("inheritMargin.style['scroll-snap-margin']", "inherit");
+        shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-left']", "inherit");
+        shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-right']", "inherit");
+        shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-top']", "inherit");
+        shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-bottom']", "inherit");
+        shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-margin')", "5px 5px 10px 10px");
+        debug("");
 
         var inheritAll = document.getElementById('inheritAll');
 
         var inheritAll = document.getElementById('inheritAll');
-        shouldBeEqualToString("inheritAll.style['-webkit-scroll-snap-type']", "inherit");
-        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-type')", "proximity");
-        shouldBeEqualToString("inheritAll.style['-webkit-scroll-snap-points-x']", "inherit");
-        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(200%)");
-        shouldBeEqualToString("inheritAll.style['-webkit-scroll-snap-points-y']", "inherit");
-        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(200%)");
-        shouldBeEqualToString("inheritAll.style['-webkit-scroll-snap-destination']", "inherit");
-        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-destination')", "25% 25%");
-        shouldBeEqualToString("inheritAll.style['-webkit-scroll-snap-coordinate']", "inherit");
-        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-coordinate')", "20px 20px");
+        shouldBeEqualToString("inheritAll.style['scroll-snap-type']", "inherit");
+        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-type')", "x proximity");
+        shouldBeEqualToString("inheritAll.style['scroll-snap-align']", "inherit");
+        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-align')", "start end");
+        shouldBeEqualToString("inheritAll.style['scroll-padding']", "inherit");
+        shouldBeEqualToString("inheritAll.style['scroll-padding-left']", "inherit");
+        shouldBeEqualToString("inheritAll.style['scroll-padding-right']", "inherit");
+        shouldBeEqualToString("inheritAll.style['scroll-padding-top']", "inherit");
+        shouldBeEqualToString("inheritAll.style['scroll-padding-bottom']", "inherit");
+        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-padding')", "10%");
+        shouldBeEqualToString("inheritAll.style['scroll-snap-margin']", "inherit");
+        shouldBeEqualToString("inheritAll.style['scroll-snap-margin-left']", "inherit");
+        shouldBeEqualToString("inheritAll.style['scroll-snap-margin-right']", "inherit");
+        shouldBeEqualToString("inheritAll.style['scroll-snap-margin-top']", "inherit");
+        shouldBeEqualToString("inheritAll.style['scroll-snap-margin-bottom']", "inherit");
+        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-margin')", "5px 5px 10px 10px");
+        debug("");
 
         var inheritNone = document.getElementById('inheritNone');
 
         var inheritNone = document.getElementById('inheritNone');
-        shouldBeEmptyString("inheritNone.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-type')", "none");
-        shouldBeEmptyString("inheritNone.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-points-x')", "none");
-        shouldBeEmptyString("inheritNone.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-points-y')", "none");
-        shouldBeEmptyString("inheritNone.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
-        shouldBeEmptyString("inheritNone.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
+        shouldBeEmptyString("inheritNone.style['scroll-snap-type']");
+        shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('scroll-snap-type')", "none");
+        shouldBeEmptyString("inheritNone.style['scroll-snap-align']");
+        shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('scroll-snap-align')", "none none");
+        shouldBeEmptyString("inheritNone.style['scroll-padding']");
+        shouldBeEmptyString("inheritNone.style['scroll-padding-left']");
+        shouldBeEmptyString("inheritNone.style['scroll-padding-right']");
+        shouldBeEmptyString("inheritNone.style['scroll-padding-top']");
+        shouldBeEmptyString("inheritNone.style['scroll-padding-bottom']");
+        shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('scroll-padding')", "0px");
+        shouldBeEmptyString("inheritNone.style['scroll-snap-margin']");
+        shouldBeEmptyString("inheritNone.style['scroll-snap-margin-left']");
+        shouldBeEmptyString("inheritNone.style['scroll-snap-margin-right']");
+        shouldBeEmptyString("inheritNone.style['scroll-snap-margin-top']");
+        shouldBeEmptyString("inheritNone.style['scroll-snap-margin-bottom']");
+        shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('scroll-snap-margin')", "0px");
         </script>
         <script src="../../resources/js-test-post.js"></script>
     </body>
         </script>
         <script src="../../resources/js-test-post.js"></script>
     </body>
index aad04f5..0c42e11 100644 (file)
@@ -3,86 +3,54 @@ Tests 'initial' on scroll snap properties.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS noInitial.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS noInitial.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS noInitial.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS noInitial.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-destination') is "10% 11%"
-PASS noInitial.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
-PASS initialType.style['-webkit-scroll-snap-type'] is "initial"
-PASS window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-type') is "none"
-PASS initialType.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS initialType.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS initialType.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-destination') is "0px 0px"
-PASS initialType.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-coordinate') is "15px 122px"
-PASS initialXPoints.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS initialXPoints.style['-webkit-scroll-snap-points-x'] is "initial"
-PASS window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-x') is "none"
-PASS initialXPoints.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS initialXPoints.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-destination') is "50% 70%"
-PASS initialXPoints.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-coordinate') is "100% 50%"
-PASS initialYPoints.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS initialYPoints.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS initialYPoints.style['-webkit-scroll-snap-points-y'] is "initial"
-PASS window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-y') is "none"
-PASS initialYPoints.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-destination') is "10px 20px"
-PASS initialYPoints.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-coordinate') is "50% 100%"
-PASS initialDestination.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-type') is "proximity"
-PASS initialDestination.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS initialDestination.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS initialDestination.style['-webkit-scroll-snap-destination'] is "initial"
-PASS window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-destination') is "0px 0px"
-PASS initialDestination.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-coordinate') is "10px 10px"
-PASS initialSnapCoordinate.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS initialSnapCoordinate.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS initialSnapCoordinate.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS initialSnapCoordinate.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination') is "10% 10%"
-PASS initialSnapCoordinate.style['-webkit-scroll-snap-coordinate'] is "initial"
-PASS window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
-PASS allInitial.style['-webkit-scroll-snap-type'] is "initial"
-PASS window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-type') is "none"
-PASS allInitial.style['-webkit-scroll-snap-points-x'] is "initial"
-PASS window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-x') is "none"
-PASS allInitial.style['-webkit-scroll-snap-points-y'] is "initial"
-PASS window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-y') is "none"
-PASS allInitial.style['-webkit-scroll-snap-destination'] is "initial"
-PASS window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-destination') is "0px 0px"
-PASS allInitial.style['-webkit-scroll-snap-coordinate'] is "initial"
-PASS window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
-PASS allInitialY.style['-webkit-scroll-snap-type'] is "initial"
-PASS window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-type') is "none"
-PASS allInitialY.style['-webkit-scroll-snap-points-x'] is "initial"
-PASS window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-points-x') is "none"
-PASS allInitialY.style['-webkit-scroll-snap-points-y'] is "initial"
-PASS window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-points-y') is "none"
-PASS allInitialY.style['-webkit-scroll-snap-destination'] is "initial"
-PASS window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-destination') is "0px 0px"
-PASS allInitialY.style['-webkit-scroll-snap-coordinate'] is "initial"
-PASS window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
+PASS noInitial.style['scroll-snap-type'] is ""
+PASS window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-type') is "both proximity"
+PASS noInitial.style['scroll-padding'] is ""
+PASS window.getComputedStyle(noInitial).getPropertyValue('scroll-padding') is "20px"
+PASS noInitial.style['scroll-snap-margin'] is ""
+PASS window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-margin') is "1px"
+PASS noInitial.style['scroll-snap-align'] is ""
+PASS window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-align') is "center center"
+PASS initialType.style['scroll-snap-type'] is "initial"
+PASS window.getComputedStyle(initialType).getPropertyValue('scroll-snap-type') is "none"
+PASS initialType.style['scroll-padding'] is ""
+PASS window.getComputedStyle(initialType).getPropertyValue('scroll-padding') is "20px"
+PASS initialType.style['scroll-snap-margin'] is ""
+PASS window.getComputedStyle(initialType).getPropertyValue('scroll-snap-margin') is "1px"
+PASS initialType.style['scroll-snap-align'] is ""
+PASS window.getComputedStyle(initialType).getPropertyValue('scroll-snap-align') is "center center"
+PASS initialPadding.style['scroll-snap-type'] is ""
+PASS window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-type') is "both proximity"
+PASS initialPadding.style['scroll-padding'] is "initial"
+PASS window.getComputedStyle(initialPadding).getPropertyValue('scroll-padding') is "0px"
+PASS initialPadding.style['scroll-snap-margin'] is ""
+PASS window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-margin') is "1px"
+PASS initialPadding.style['scroll-snap-align'] is ""
+PASS window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-align') is "center center"
+PASS initialMargin.style['scroll-snap-type'] is ""
+PASS window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-type') is "both proximity"
+PASS initialMargin.style['scroll-padding'] is ""
+PASS window.getComputedStyle(initialMargin).getPropertyValue('scroll-padding') is "20px"
+PASS initialMargin.style['scroll-snap-margin'] is "initial"
+PASS window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-margin') is "0px"
+PASS initialMargin.style['scroll-snap-align'] is ""
+PASS window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-align') is "center center"
+PASS initialAlign.style['scroll-snap-type'] is ""
+PASS window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-type') is "both proximity"
+PASS initialAlign.style['scroll-padding'] is ""
+PASS window.getComputedStyle(initialAlign).getPropertyValue('scroll-padding') is "20px"
+PASS initialAlign.style['scroll-snap-margin'] is ""
+PASS window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-margin') is "1px"
+PASS initialAlign.style['scroll-snap-align'] is "initial"
+PASS window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-align') is "none none"
+PASS allInitial.style['scroll-snap-type'] is "initial"
+PASS window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-type') is "none"
+PASS allInitial.style['scroll-padding'] is "initial"
+PASS window.getComputedStyle(allInitial).getPropertyValue('scroll-padding') is "0px"
+PASS allInitial.style['scroll-snap-margin'] is "initial"
+PASS window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-margin') is "0px"
+PASS allInitial.style['scroll-snap-align'] is "initial"
+PASS window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-align') is "none none"
 PASS successfullyParsed is true
 
 TEST COMPLETE
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 8f56889..983975c 100644 (file)
             }
 
             .noInitial {
             }
 
             .noInitial {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 10% 11%;
-                -webkit-scroll-snap-coordinate: none;
+                scroll-snap-type: both;
+                scroll-snap-align: center;
+                scroll-padding: 20px;
+                scroll-snap-margin: 1px;
             }
 
             .initialType {
             }
 
             .initialType {
-                -webkit-scroll-snap-type: initial;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 0px 0px;
-                -webkit-scroll-snap-coordinate: 15px 122px;
+                scroll-snap-type: initial;
+                scroll-snap-align: center;
+                scroll-padding: 20px;
+                scroll-snap-margin: 1px;
             }
 
             }
 
-            .initialXPoints {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: initial;
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 50% 70%;
-                -webkit-scroll-snap-coordinate: 100% 50%;
+            .initialPadding {
+                scroll-snap-type: both;
+                scroll-snap-align: center;
+                scroll-padding: initial;
+                scroll-snap-margin: 1px;
             }
 
             }
 
-            .initialYPoints {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: initial;
-                -webkit-scroll-snap-destination: 10px 20px;
-                -webkit-scroll-snap-coordinate: 50% 100%;
+            .initialMargin {
+                scroll-snap-type: both;
+                scroll-snap-align: center;
+                scroll-padding: 20px;
+                scroll-snap-margin: initial;
             }
 
             }
 
-            .initialDestination {
-                -webkit-scroll-snap-type: proximity;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: initial;
-                -webkit-scroll-snap-coordinate: 10px 10px;
-            }
-
-            .initialSnapCoordinate {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 10% 10%;
-                -webkit-scroll-snap-coordinate: initial;
+            .initialAlign {
+                scroll-snap-type: both;
+                scroll-snap-align: initial;
+                scroll-padding: 20px;
+                scroll-snap-margin: 1px;
             }
 
             .allInitial {
             }
 
             .allInitial {
-                -webkit-scroll-snap-type: initial;
-                -webkit-scroll-snap-points-x: initial;
-                -webkit-scroll-snap-points-y: initial;
-                -webkit-scroll-snap-destination: initial;
-                -webkit-scroll-snap-coordinate: initial
+                scroll-snap-type: initial;
+                scroll-snap-align: initial;
+                scroll-padding: initial;
+                scroll-snap-margin: initial;
             }
 
             #item0 { background-color: red; }
             }
 
             #item0 { background-color: red; }
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="initialType" class="horizontalGallery initialType" style="-webkit-scroll-snap-type: initial">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-            <div id="initialXPoints" class="horizontalGallery initialXPoints" style="-webkit-scroll-snap-points-x: initial">
+            <div id="initialType" class="horizontalGallery initialType" style="scroll-snap-type: initial">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="initialYPoints" class="horizontalGallery initialYPoints" style="-webkit-scroll-snap-points-y: initial">
+            <div id="initialPadding" class="horizontalGallery initialPadding" style="scroll-padding: initial">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="initialDestination" class="horizontalGallery initialDestination" style="-webkit-scroll-snap-destination: initial">
+            <div id="initialMargin" class="horizontalGallery initialMargin" style="scroll-snap-margin: initial">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="initialSnapCoordinate" class="horizontalGallery initialSnapCoordinate" style="-webkit-scroll-snap-coordinate: initial">
+            <div id="initialAlign" class="horizontalGallery initialAlign" style="scroll-snap-align: initial">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="allInitial" class="horizontalGallery allInitial" style="-webkit-scroll-snap-type: initial; -webkit-scroll-snap-points-x: initial; -webkit-scroll-snap-points-y: initial; -webkit-scroll-snap-destination: initial; -webkit-scroll-snap-coordinate: initial">
+            <div id="allInitial" class="horizontalGallery allInitial" style="scroll-snap-type: initial; scroll-padding: initial; scroll-snap-margin: initial; scroll-snap-align: initial;">
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="horizontalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="item5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="allInitialY" class="verticalGallery noInitial" style="-webkit-scroll-snap-type: initial; -webkit-scroll-snap-points-x: initial; -webkit-scroll-snap-points-y: initial; -webkit-scroll-snap-destination: initial; -webkit-scroll-snap-coordinate: initial">
+            <div id="allInitialY" class="verticalGallery noInitial" style="scroll-snap-type: initial; scroll-padding: initial; scroll-snap-margin: initial; scroll-snap-align: initial;">
                 <div class="verticalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
                 <div class="verticalGalleryDrawer">
                     <div id="item0" class="colorBox"></div>
                     <div id="item1" class="colorBox"></div>
         description("Tests 'initial' on scroll snap properties.");
 
         var noInitial = document.getElementById('noInitial');
         description("Tests 'initial' on scroll snap properties.");
 
         var noInitial = document.getElementById('noInitial');
-        shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-destination')", "10% 11%");
-        shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
+        shouldBeEmptyString("noInitial.style['scroll-snap-type']");
+        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-type')", "both proximity");
+        shouldBeEmptyString("noInitial.style['scroll-padding']");
+        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-padding')", "20px");
+        shouldBeEmptyString("noInitial.style['scroll-snap-margin']");
+        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-margin')", "1px");
+        shouldBeEmptyString("noInitial.style['scroll-snap-align']");
+        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-align')", "center center");
 
         var initialType = document.getElementById('initialType');
 
         var initialType = document.getElementById('initialType');
-        shouldBeEqualToString("initialType.style['-webkit-scroll-snap-type']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-type')", "none");
-        shouldBeEmptyString("initialType.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("initialType.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("initialType.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
-        shouldBeEmptyString("initialType.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-coordinate')", "15px 122px");
-
-        var initialXPoints = document.getElementById('initialXPoints');
-        shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEqualToString("initialXPoints.style['-webkit-scroll-snap-points-x']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "none");
-        shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-destination')", "50% 70%");
-        shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "100% 50%");
-
-        var initialYPoints = document.getElementById('initialYPoints');
-        shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEqualToString("initialYPoints.style['-webkit-scroll-snap-points-y']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "none");
-        shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-destination')", "10px 20px");
-        shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "50% 100%");
-
-        var initialDestination = document.getElementById('initialDestination');
-        shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-type')", "proximity");
-        shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEqualToString("initialDestination.style['-webkit-scroll-snap-destination']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
-        shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-coordinate')", "10px 10px");
-
-        var initialSnapCoordinate = document.getElementById('initialSnapCoordinate');
-        shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination')", "10% 10%");
-        shouldBeEqualToString("initialSnapCoordinate.style['-webkit-scroll-snap-coordinate']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
+        shouldBeEqualToString("initialType.style['scroll-snap-type']", "initial");
+        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-type')", "none");
+        shouldBeEmptyString("initialType.style['scroll-padding']");
+        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-padding')", "20px");
+        shouldBeEmptyString("initialType.style['scroll-snap-margin']");
+        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-margin')", "1px");
+        shouldBeEmptyString("initialType.style['scroll-snap-align']");
+        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-align')", "center center");
+
+        var initialPadding = document.getElementById('initialPadding');
+        shouldBeEmptyString("initialPadding.style['scroll-snap-type']");
+        shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-type')", "both proximity");
+        shouldBeEqualToString("initialPadding.style['scroll-padding']", "initial");
+        shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-padding')", "0px");
+        shouldBeEmptyString("initialPadding.style['scroll-snap-margin']");
+        shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-margin')", "1px");
+        shouldBeEmptyString("initialPadding.style['scroll-snap-align']");
+        shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-align')", "center center");
+
+        var initialMargin = document.getElementById('initialMargin');
+        shouldBeEmptyString("initialMargin.style['scroll-snap-type']");
+        shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-type')", "both proximity");
+        shouldBeEmptyString("initialMargin.style['scroll-padding']");
+        shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-padding')", "20px");
+        shouldBeEqualToString("initialMargin.style['scroll-snap-margin']", "initial");
+        shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-margin')", "0px");
+        shouldBeEmptyString("initialMargin.style['scroll-snap-align']");
+        shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-align')", "center center");
+
+        var initialAlign = document.getElementById('initialAlign');
+        shouldBeEmptyString("initialAlign.style['scroll-snap-type']");
+        shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-type')", "both proximity");
+        shouldBeEmptyString("initialAlign.style['scroll-padding']");
+        shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-padding')", "20px");
+        shouldBeEmptyString("initialAlign.style['scroll-snap-margin']");
+        shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-margin')", "1px");
+        shouldBeEqualToString("initialAlign.style['scroll-snap-align']", "initial");
+        shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-align')", "none none");
 
         var allInitial = document.getElementById('allInitial');
 
         var allInitial = document.getElementById('allInitial');
-        shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-type']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-type')", "none");
-        shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-points-x']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-x')", "none");
-        shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-points-y']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-y')", "none");
-        shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-destination']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
-        shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-coordinate']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
-
-        var allInitialY = document.getElementById('allInitialY');
-        shouldBeEqualToString("allInitialY.style['-webkit-scroll-snap-type']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-type')", "none");
-        shouldBeEqualToString("allInitialY.style['-webkit-scroll-snap-points-x']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-points-x')", "none");
-        shouldBeEqualToString("allInitialY.style['-webkit-scroll-snap-points-y']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-points-y')", "none");
-        shouldBeEqualToString("allInitialY.style['-webkit-scroll-snap-destination']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
-        shouldBeEqualToString("allInitialY.style['-webkit-scroll-snap-coordinate']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
+        shouldBeEqualToString("allInitial.style['scroll-snap-type']", "initial");
+        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-type')", "none");
+        shouldBeEqualToString("allInitial.style['scroll-padding']", "initial");
+        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-padding')", "0px");
+        shouldBeEqualToString("allInitial.style['scroll-snap-margin']", "initial");
+        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-margin')", "0px");
+        shouldBeEqualToString("allInitial.style['scroll-snap-align']", "initial");
+        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-align')", "none none");
         </script>
         <script src="../../resources/js-test-post.js"></script>
     </body>
         </script>
         <script src="../../resources/js-test-post.js"></script>
     </body>
index b999802..26bff01 100644 (file)
@@ -8,14 +8,17 @@
                 overflow-y: hidden;
                 overflow-x: auto;
                 margin-bottom: 2px;
                 overflow-y: hidden;
                 overflow-x: auto;
                 margin-bottom: 2px;
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: x mandatory;
             }
             }
-            .horizontal-good {
-                -webkit-scroll-snap-points-x: repeat(300px);                
+
+            .good {
+                scroll-snap-align: start none;
             }
             }
-            .horizontal-bad {
-                -webkit-scroll-snap-points-y: repeat(100vh);
+
+            .bad {
+                scroll-snap-align: none start;
             }
             }
+
             .horizontalGalleryDrawer {
                 width: 1800px;
                 height: 300px;
             .horizontalGalleryDrawer {
                 width: 1800px;
                 height: 300px;
             <div>Tests that the scroll-snap feature works properly with mixed-up snap points.</div>
             <div class="horizontalGallery horizontal-bad" id="badHorizontalTarget">
                 <div class="horizontalGalleryDrawer">
             <div>Tests that the scroll-snap feature works properly with mixed-up snap points.</div>
             <div class="horizontalGallery horizontal-bad" id="badHorizontalTarget">
                 <div class="horizontalGalleryDrawer">
-                    <div id="itemH0" class="colorBox"></div>
-                    <div id="itemH1" class="colorBox"></div>
-                    <div id="itemH2" class="colorBox"></div>
-                    <div id="itemH3" class="colorBox"></div>
-                    <div id="itemH4" class="colorBox"></div>
-                    <div id="itemH5" class="colorBox"></div>
+                    <div id="itemH0" class="bad colorBox"></div>
+                    <div id="itemH1" class="bad colorBox"></div>
+                    <div id="itemH2" class="bad colorBox"></div>
+                    <div id="itemH3" class="bad colorBox"></div>
+                    <div id="itemH4" class="bad colorBox"></div>
+                    <div id="itemH5" class="bad colorBox"></div>
                 </div>
             </div>
             <div class="horizontalGallery horizontal-good" id="horizontalTarget">
                 <div class="horizontalGalleryDrawer">
                 </div>
             </div>
             <div class="horizontalGallery horizontal-good" id="horizontalTarget">
                 <div class="horizontalGalleryDrawer">
-                    <div id="itemH0" class="colorBox"></div>
-                    <div id="itemH1" class="colorBox"></div>
-                    <div id="itemH2" class="colorBox"></div>
-                    <div id="itemH3" class="colorBox"></div>
-                    <div id="itemH4" class="colorBox"></div>
-                    <div id="itemH5" class="colorBox"></div>
+                    <div id="itemH0" class="good colorBox"></div>
+                    <div id="itemH1" class="good colorBox"></div>
+                    <div id="itemH2" class="good colorBox"></div>
+                    <div id="itemH3" class="good colorBox"></div>
+                    <div id="itemH4" class="good colorBox"></div>
+                    <div id="itemH5" class="good colorBox"></div>
                 </div>
             </div>
             <div id="console"></div>
                 </div>
             </div>
             <div id="console"></div>
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat-expected.txt
deleted file mode 100644 (file)
index bc8dc76..0000000
+++ /dev/null
@@ -1,9 +0,0 @@
-Tests that negative repeat() values don't hang on snap point computation.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat.html b/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat.html
deleted file mode 100644 (file)
index ea06b92..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <style>
-            body {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-y: repeat(-400px);
-                height: 5000px;
-            }
-        </style>
-        <script src="../../resources/js-test-pre.js"></script>
-    </head>
-    <body>
-        <div id="console"></div>
-        <script>
-        description("Tests that negative repeat() values don't hang on snap point computation.");
-        </script>
-        <script src="../../resources/js-test-post.js"></script>
-    </body>
-</html>
-
index ef71397..2c30c64 100644 (file)
@@ -2,16 +2,16 @@ Tests that the scroll-snap feature works properly in overflow regions.
  PASS successfullyParsed is true
 
 TEST COMPLETE
  PASS successfullyParsed is true
 
 TEST COMPLETE
-Scroll-snap offsets for horizontalTarget: horizontal = { 0, 30, 60, 90, 120, 150 }, vertical = { 0, 7, 15 }
-Scroll-snap offsets for verticalTarget: horizontal = { 0, 7, 15 }, vertical = { 0, 30, 60, 90, 120, 150 }
-Scroll-snap offsets for horizontalBorderedTarget: horizontal = { 0, 30, 60, 90, 120, 150 }, vertical = { 0, 7, 15 }
-Scroll-snap offsets for verticalBorderedTarget: horizontal = { 0, 7, 15 }, vertical = { 0, 30, 60, 90, 120, 150 }
-Scroll-snap offsets for horizontalPaddedTarget: horizontal = { 0, 30, 60, 90, 120, 150, 170 }, vertical = { 0, 7, 39 }
-Scroll-snap offsets for verticalPaddedTarget: horizontal = { 0, 7, 35 }, vertical = { 0, 30, 60, 90, 120, 150, 174 }
-Scroll-snap offsets for horizontalBorderedPaddedTarget: horizontal = { 0, 30, 60, 90, 120, 150, 170 }, vertical = { 0, 7, 39 }
-Scroll-snap offsets for verticalBorderedPaddedTarget: horizontal = { 0, 7, 35 }, vertical = { 0, 30, 60, 90, 120, 150, 174 }
-Scroll-snap offsets for horizontalRotatedTarget: horizontal = { 0, 30, 60, 90, 120, 150, 170 }, vertical = { 0, 7, 39 }
-Scroll-snap offsets for verticalRotatedTarget: horizontal = { 0, 7, 35 }, vertical = { 0, 30, 60, 90, 120, 150, 174 }
+Scroll-snap offsets for horizontalTarget: horizontal = { 0, 30, 60, 90, 120, 150 }
+Scroll-snap offsets for verticalTarget: vertical = { 0, 30, 60, 90, 120, 150 }
+Scroll-snap offsets for horizontalBorderedTarget: horizontal = { 0, 30, 60, 90, 120, 150 }
+Scroll-snap offsets for verticalBorderedTarget: vertical = { 0, 30, 60, 90, 120, 150 }
+Scroll-snap offsets for horizontalPaddedTarget: horizontal = { 0, 20, 50, 80, 110, 140, 170 }
+Scroll-snap offsets for verticalPaddedTarget: vertical = { 0, 15, 45, 75, 105, 135, 165, 174 }
+Scroll-snap offsets for horizontalBorderedPaddedTarget: horizontal = { 0, 20, 50, 80, 110, 140, 170 }
+Scroll-snap offsets for verticalBorderedPaddedTarget: vertical = { 0, 15, 45, 75, 105, 135, 165, 174 }
+Scroll-snap offsets for horizontalRotatedTarget: horizontal = { 0, 20, 50, 80, 110, 140, 170 }
+Scroll-snap offsets for verticalRotatedTarget: vertical = { 0, 15, 45, 75, 105, 135, 165, 174 }
 PASS successfullyParsed is true
 
 TEST COMPLETE
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 708c0e2..127ce7a 100644 (file)
@@ -21,9 +21,7 @@
                 overflow-x: auto;
                 margin: 2px;
                 -webkit-overflow-scrolling: touch;
                 overflow-x: auto;
                 margin: 2px;
                 -webkit-overflow-scrolling: touch;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-coordinate: 50% 50%;
+                scroll-snap-type: x mandatory;
             }
             .horizontalGalleryDrawer {
                 width: 180px;
             }
             .horizontalGalleryDrawer {
                 width: 180px;
@@ -37,9 +35,7 @@
                 overflow-y: auto;
                 margin: 2px;
                 -webkit-overflow-scrolling: touch;
                 overflow-y: auto;
                 margin: 2px;
                 -webkit-overflow-scrolling: touch;
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-coordinate: 50% 50%;
+                scroll-snap-type: y mandatory;
             }
             .verticalGalleryDrawer {
                 width: 30px;
             }
             .verticalGalleryDrawer {
                 width: 30px;
@@ -50,6 +46,9 @@
                 width: 30px;
                 float: left;
             }
                 width: 30px;
                 float: left;
             }
+            .colorBox {
+                scroll-snap-align: start;
+            }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
             #itemH2, #itemV2 { background-color: blue; }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
             #itemH2, #itemV2 { background-color: blue; }
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-position-values-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-position-values-expected.txt
deleted file mode 100644 (file)
index ecd46c6..0000000
+++ /dev/null
@@ -1,99 +0,0 @@
-Tests 'initial' on scroll snap properties.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS noInitial.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS noInitial.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS noInitial.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS noInitial.style['-webkit-scroll-snap-destination'] is "100% 100%"
-PASS window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-destination') is "100% 100%"
-PASS noInitial.style['-webkit-scroll-snap-coordinate'] is "0% 0%"
-PASS window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-coordinate') is "0% 0%"
-PASS initialType.style['-webkit-scroll-snap-type'] is "initial"
-PASS window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-type') is "none"
-PASS initialType.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS initialType.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS initialType.style['-webkit-scroll-snap-destination'] is "0% 0%"
-PASS window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-destination') is "0% 0%"
-PASS initialType.style['-webkit-scroll-snap-coordinate'] is "100% 100%"
-PASS window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-coordinate') is "100% 100%"
-PASS initialXPoints.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS initialXPoints.style['-webkit-scroll-snap-points-x'] is "initial"
-PASS window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-x') is "none"
-PASS initialXPoints.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS initialXPoints.style['-webkit-scroll-snap-destination'] is "50% 50%"
-PASS window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-destination') is "50% 50%"
-PASS initialXPoints.style['-webkit-scroll-snap-coordinate'] is "50% 50%"
-PASS window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-coordinate') is "50% 50%"
-PASS initialYPoints.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS initialYPoints.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS initialYPoints.style['-webkit-scroll-snap-points-y'] is "initial"
-PASS window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-y') is "none"
-PASS initialYPoints.style['-webkit-scroll-snap-destination'] is "50% 20px"
-PASS window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-destination') is "50% 20px"
-PASS initialYPoints.style['-webkit-scroll-snap-coordinate'] is "50% 50%"
-PASS window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-coordinate') is "50% 50%"
-PASS initialDestination.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-type') is "proximity"
-PASS initialDestination.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS initialDestination.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS initialDestination.style['-webkit-scroll-snap-destination'] is "initial"
-PASS window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-destination') is "0px 0px"
-PASS initialDestination.style['-webkit-scroll-snap-coordinate'] is "none"
-PASS window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
-PASS initialSnapCoordinate.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS initialSnapCoordinate.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS initialSnapCoordinate.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS initialSnapCoordinate.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination') is "0px 0px"
-PASS initialSnapCoordinate.style['-webkit-scroll-snap-coordinate'] is "initial"
-PASS window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
-PASS allInitial.style['-webkit-scroll-snap-type'] is "initial"
-PASS window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-type') is "none"
-PASS allInitial.style['-webkit-scroll-snap-points-x'] is "initial"
-PASS window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-x') is "none"
-PASS allInitial.style['-webkit-scroll-snap-points-y'] is "initial"
-PASS window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-y') is "none"
-PASS allInitial.style['-webkit-scroll-snap-destination'] is "initial"
-PASS window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-destination') is "0px 0px"
-PASS allInitial.style['-webkit-scroll-snap-coordinate'] is "initial"
-PASS window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
-PASS noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-destination') is "0px 0px"
-PASS noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-coordinate'] is "none"
-PASS window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
-PASS calculatedCoordinateAndDestination.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS calculatedCoordinateAndDestination.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(96%)"
-PASS calculatedCoordinateAndDestination.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(52%)"
-PASS calculatedCoordinateAndDestination.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-destination') is "106px 25px"
-PASS calculatedCoordinateAndDestination.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-coordinate') is "16px 384px"
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-position-values.html b/LayoutTests/css3/scroll-snap/scroll-snap-position-values.html
deleted file mode 100644 (file)
index 658beb7..0000000
+++ /dev/null
@@ -1,310 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <style>
-            .horizontalGallery {
-                width: 400px;
-                height: 50px;
-                overflow-y: hidden;
-                overflow-x: auto;
-            }
-            .horizontalGalleryDrawer {
-                width: 3000px;
-                height: 50px;
-            }
-            .colorBox {
-                height: 50px;
-                width: 400px;
-                float: left;
-            }
-
-            .noInitial {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: right bottom;
-                -webkit-scroll-snap-coordinate: left top;
-            }
-
-            .initialType {
-                -webkit-scroll-snap-type: initial;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: left top;
-                -webkit-scroll-snap-coordinate: right bottom;
-            }
-
-            .initialXPoints {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: initial;
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 50% center;
-                -webkit-scroll-snap-coordinate: center 50%;
-            }
-
-            .initialYPoints {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: initial;
-                -webkit-scroll-snap-destination: center 20px;
-                -webkit-scroll-snap-coordinate: 50% center;
-            }
-
-            .initialDestination {
-                -webkit-scroll-snap-type: proximity;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: initial;
-                -webkit-scroll-snap-coordinate: none;
-            }
-
-            .initialSnapCoordinate {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: none;
-                -webkit-scroll-snap-coordinate: initial;
-            }
-
-            .noneSnapCoordinateAndDestination {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: none;
-                -webkit-scroll-snap-coordinate: none;
-            }
-
-            .allInitial {
-                -webkit-scroll-snap-type: initial;
-                -webkit-scroll-snap-points-x: initial;
-                -webkit-scroll-snap-points-y: initial;
-                -webkit-scroll-snap-destination: initial;
-                -webkit-scroll-snap-coordinate: initial
-            }
-
-            .calculatedCoordinateAndDestination {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(-webkit-calc(100% - 4%));
-                -webkit-scroll-snap-points-y: repeat(-webkit-calc(20% + 32%));
-                -webkit-scroll-snap-destination: -webkit-calc(10px + 6em) -webkit-calc(22px + 3px);
-                -webkit-scroll-snap-coordinate: -webkit-calc(32px - 1em) -webkit-calc(19em + 5em);
-            }
-
-            #item0 { background-color: red; }
-            #item1 { background-color: green; }
-            #item2 { background-color: blue; }
-            #item3 { background-color: aqua; }
-            #item4 { background-color: yellow; }
-            #item5 { background-color: fuchsia; }
-        </style>
-        <script src="../../resources/js-test-pre.js"></script>
-    </head>
-    <body>
-        <div style="width: 400px">
-            <div id="noInitial" class="horizontalGallery noInitial" style="-webkit-scroll-snap-destination: right bottom; -webkit-scroll-snap-coordinate: left top;">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-            <div id="initialType" class="horizontalGallery initialType" style="-webkit-scroll-snap-type: initial; -webkit-scroll-snap-destination: left top; -webkit-scroll-snap-coordinate: right bottom;">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-            <div id="initialXPoints" class="horizontalGallery initialXPoints" style="-webkit-scroll-snap-points-x: initial; -webkit-scroll-snap-destination: 50% center; -webkit-scroll-snap-coordinate: center 50%;">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-            <div id="initialYPoints" class="horizontalGallery initialYPoints" style="-webkit-scroll-snap-points-y: initial; -webkit-scroll-snap-destination: center 20px; -webkit-scroll-snap-coordinate: 50% center;">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-            <div id="initialDestination" class="horizontalGallery initialDestination" style="-webkit-scroll-snap-destination: initial; -webkit-scroll-snap-coordinate: none;">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-            <div id="initialSnapCoordinate" class="horizontalGallery initialSnapCoordinate" style="-webkit-scroll-snap-coordinate: initial; -webkit-scroll-snap-destination: none;">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-            <div id="noneSnapCoordinateAndDestination" class="horizontalGallery noneSnapCoordinateAndDestination" style="-webkit-scroll-snap-destination: none; -webkit-scroll-snap-coordinate: none;">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-            <div id="allInitial" class="horizontalGallery allInitial" style="-webkit-scroll-snap-type: initial; -webkit-scroll-snap-points-x: initial; -webkit-scroll-snap-points-y: initial; -webkit-scroll-snap-destination: initial; -webkit-scroll-snap-coordinate: initial">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-            <div id="calculatedCoordinateAndDestination" class="horizontalGallery calculatedCoordinateAndDestination">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-        </div>
-        <div id="console"></div>
-        <script>
-        description("Tests 'initial' on scroll snap properties.");
-
-        var noInitial = document.getElementById('noInitial');
-        shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEqualToString("noInitial.style['-webkit-scroll-snap-destination']", "100% 100%");
-        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-destination')", "100% 100%");
-        shouldBeEqualToString("noInitial.style['-webkit-scroll-snap-coordinate']", "0% 0%");
-        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-coordinate')", "0% 0%");
-
-        var initialType = document.getElementById('initialType');
-        shouldBeEqualToString("initialType.style['-webkit-scroll-snap-type']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-type')", "none");
-        shouldBeEmptyString("initialType.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("initialType.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEqualToString("initialType.style['-webkit-scroll-snap-destination']", "0% 0%");
-        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-destination')", "0% 0%");
-        shouldBeEqualToString("initialType.style['-webkit-scroll-snap-coordinate']", "100% 100%");
-        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-coordinate')", "100% 100%");
-
-        var initialXPoints = document.getElementById('initialXPoints');
-        shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEqualToString("initialXPoints.style['-webkit-scroll-snap-points-x']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "none");
-        shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEqualToString("initialXPoints.style['-webkit-scroll-snap-destination']", "50% 50%");
-        shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-destination')", "50% 50%");
-        shouldBeEqualToString("initialXPoints.style['-webkit-scroll-snap-coordinate']", "50% 50%");
-        shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "50% 50%");
-
-        var initialYPoints = document.getElementById('initialYPoints');
-        shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEqualToString("initialYPoints.style['-webkit-scroll-snap-points-y']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "none");
-        shouldBeEqualToString("initialYPoints.style['-webkit-scroll-snap-destination']", "50% 20px");
-        shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-destination')", "50% 20px");
-        shouldBeEqualToString("initialYPoints.style['-webkit-scroll-snap-coordinate']", "50% 50%");
-        shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "50% 50%");
-
-        var initialDestination = document.getElementById('initialDestination');
-        shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-type')", "proximity");
-        shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEqualToString("initialDestination.style['-webkit-scroll-snap-destination']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
-        shouldBeEqualToString("initialDestination.style['-webkit-scroll-snap-coordinate']", "none");
-        shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
-
-        var initialSnapCoordinate = document.getElementById('initialSnapCoordinate');
-        shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
-        shouldBeEqualToString("initialSnapCoordinate.style['-webkit-scroll-snap-coordinate']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
-
-        var allInitial = document.getElementById('allInitial');
-        shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-type']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-type')", "none");
-        shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-points-x']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-x')", "none");
-        shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-points-y']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-y')", "none");
-        shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-destination']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
-        shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-coordinate']", "initial");
-        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
-
-        var noneSnapCoordinateAndDestination = document.getElementById('noneSnapCoordinateAndDestination');
-        shouldBeEmptyString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
-        shouldBeEqualToString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-coordinate']", "none");
-        shouldBeEqualToString("window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
-
-        var calculatedCoordinateAndDestination = document.getElementById('calculatedCoordinateAndDestination');
-        shouldBeEmptyString("calculatedCoordinateAndDestination.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("calculatedCoordinateAndDestination.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(96%)");
-        shouldBeEmptyString("calculatedCoordinateAndDestination.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(52%)");
-        shouldBeEmptyString("calculatedCoordinateAndDestination.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-destination')", "106px 25px");
-        shouldBeEmptyString("calculatedCoordinateAndDestination.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-coordinate')", "16px 384px");
-        </script>
-        <script src="../../resources/js-test-post.js"></script>
-    </body>
-</html>
-
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-positions-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-positions-expected.txt
new file mode 100644 (file)
index 0000000..613dbe8
--- /dev/null
@@ -0,0 +1,8 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+Scroll-snap offsets for 'container': vertical = { 0, 72, 100, 330, 445, 560, 675, 762, 790, 992, 1020, 1250, 1310, 1365, 1425, 1480, 4425 }
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
@@ -4,13 +4,13 @@
     <style>
         body {
             margin: 0;
     <style>
         body {
             margin: 0;
-            -webkit-scroll-snap-type: mandatory;
+            scroll-snap-type: y mandatory;
         }
 
         .vertical {
             width: 100%;
             height: 600px;
         }
 
         .vertical {
             width: 100%;
             height: 600px;
-            -webkit-scroll-snap-coordinate: 0px 0px;
+            scroll-snap-align: start;
         }
     </style>
 
         }
     </style>
 
@@ -6,13 +6,13 @@
             width: 420px;
             height: 400px;
             overflow-y: scroll;
             width: 420px;
             height: 400px;
             overflow-y: scroll;
-            -webkit-scroll-snap-type: mandatory;
+            scroll-snap-type: y mandatory;
         }
 
         .cell {
             width: 400px;
             height: 400px;
         }
 
         .cell {
             width: 400px;
             height: 400px;
-            -webkit-scroll-snap-coordinate: 0% 0%;
+            scroll-snap-align: start;
         }
     </style>
     <script src="../../resources/js-test-pre.js"></script>
         }
     </style>
     <script src="../../resources/js-test-pre.js"></script>
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-positions.html b/LayoutTests/css3/scroll-snap/scroll-snap-positions.html
new file mode 100644 (file)
index 0000000..4129fdf
--- /dev/null
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Snap points - nested snap coordinates</title>
+    <style>
+        #container {
+            position: absolute;
+            width: 300px;
+            height: 300px;
+            top: 100px;
+            left: 100px;
+        }
+
+        .scrollable {
+            overflow: scroll;
+            -webkit-overflow-scrolling: touch;
+            height: 300px;
+            margin: 0 10px;
+        }
+
+        ::-webkit-scrollbar {
+            display: none;
+        }
+    
+        .center-snap-receiver {
+            scroll-snap-type: y mandatory;
+        }
+    
+        .snap-point-marker {
+            margin-top: 100px;
+            width: 15px;
+            height: 15px;
+        }
+
+        .snap-point-start {
+            scroll-snap-align: start;
+            background-color: red;
+            opacity: 0.5;
+        }
+
+        .snap-point-center {
+            scroll-snap-align: center;
+            background-color: green;
+            opacity: 0.5;
+        }
+
+        .snap-point-end {
+            scroll-snap-align: end;
+            background-color: blue;
+            opacity: 0.5;
+        }
+
+        .large-content {
+            height: 3000px;
+            width: 100%;
+        }
+    
+        .small-content {
+            height: 200px;
+            width: 100%;
+        }
+
+        .invalidContainer {
+            background-color: black;
+            opacity: 0.1;
+            height: 300px;
+            margin: 0 10px;
+            opacity: 0.5;
+            overflow: hidden;
+        }
+
+        #alignment-marker-box {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 300px;
+            height: 300px;
+            top: 100px;
+            left: 100px;
+            z-index: -1;
+            margin: 0 10px;
+        }
+
+        .alignment-marker {
+            position: absolute;
+            width: 100%;
+            height: 1px;
+        }
+    </style>
+        <script src="../../resources/js-test-pre.js"></script>
+        <script>
+        function runTest()
+        {
+            var container = document.getElementById('container');
+            debug("Scroll-snap offsets for 'container': " + window.internals.scrollSnapOffsets(container));
+
+            finishJSTest();
+            testRunner.notifyDone();
+        }
+
+        function onLoad()
+        {
+            if (window.testRunner) {
+                window.jsTestIsAsync = true;
+                testRunner.dumpAsText();
+                testRunner.waitUntilDone();
+                setTimeout(runTest, 0);
+            }
+        }
+        </script>
+</head>
+<body onload="onLoad();">
+    <div id="container" class="center-snap-receiver scrollable">
+        <div id="snap-child-1" class="snap-point-start snap-point-marker"></div>
+        <div class="nested">
+            <div id="snap-child-2" class="snap-point-center snap-point-marker"></div>
+        </div>
+        <div class="nested">
+            <div class="nested">
+                <div id="snap-child-3" class="snap-point-start snap-point-marker"></div>
+            </div>
+        </div>
+        <div id="snap-child-4" class="snap-point-start snap-point-marker"></div>
+        <div id="snap-child-5" class="snap-point-start snap-point-marker"></div>
+        <div class="nested">
+            <div id="snap-child-6" class="snap-point-start snap-point-marker"></div>
+        </div>
+        <div id="snap-child-7" class="snap-point-start snap-point-marker"></div>
+        <div class="nested">
+            <div id="snap-child-8" class="snap-point-center snap-point-marker"></div>
+        </div>
+        <div id="snap-child-9" class="snap-point-start snap-point-marker"></div>
+        <div id="snap-child-10" class="snap-point-center snap-point-marker"></div>
+        <div class="nested">
+            <div id="snap-child-11" class="snap-point-start snap-point-marker"></div>
+        </div>
+         <div id="snap-child-12" class="snap-point-start snap-point-marker"></div>
+        <div class="nested">
+            <div id="snap-child-13" class="snap-point-start snap-point-marker"></div>
+        </div>
+        <div class="nested">
+            <div class="nested">
+                <div id="snap-child-14" class="snap-point-end snap-point-marker"></div>
+            </div>
+        </div>
+        <div id="snap-child-15" class="snap-point-end snap-point-marker"></div>
+        <div class="large-content"></div>
+    </div>
+    <div id="alignment-marker-box">
+        <div style="border-bottom: 2px red solid;" class="alignment-marker"></div>
+        <div style="border-bottom: 2px green solid; top: 150px;" class="alignment-marker"></div>
+        <div style="border-bottom: 2px blue solid; top: 300px;" class="alignment-marker"></div>
+    </div>
+    <script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
index cf3d44b..5f4b45d 100644 (file)
-Test the computed style of the -webkit-scroll-snap-* properties.
+Test the computed style of the scroll-snap-* properties.
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
 
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
 
-invalid snapping type : potato
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'none'
+invalid snap type: `potato`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
 
 
-invalid points along x axis : hello world
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'none'
+empty string for snap type: ``
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
 
 
-invalid points along y axis : hello world
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'none'
+too many values: `block mandatory proximity`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
 
 
-typo in point definition : repaet(50px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'none'
+none following axis: `both none`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
 
 
-another invalid point definition : ??px repeat(50px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'none'
+two axis values: `block inline`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
 
 
-invalid destination : foo bar
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0px 0px'
+two strictness values: `proximity mandatory`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
 
 
-short one destination value : 50%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0px 0px'
+axis following strictness: `mandatory inline`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
 
 
-extra destination value : 50px 100% 75px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0px 0px'
+initial value: `initial`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
 
 
-invalid coordinates : ben bitdiddle
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is 'none'
+only strictness: `mandatory`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'both mandatory'
 
 
-mismatched x coordinate : 50% 100px 75%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is 'none'
+only axis: `both`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'both proximity'
 
 
-inherited type : inherit
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'none'
+none: `none`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
 
 
-initial type : initial
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'none'
+strictness following axis: `inline mandatory`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'inline mandatory'
 
 
-none type : none
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'none'
+invalid snap align: `potato`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
 
 
-mandatory type : mandatory
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'mandatory'
-
-proximity type : proximity
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'proximity'
-
-inherited points along x axis : inherit
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'none'
-
-initial points along x axis : initial
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'none'
-
-element points along x axis : elements
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'elements'
-
-percentage points along x axis : 100% 50%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '100% 50%'
-
-pixel points along x axis : 100px 50px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '100px 50px'
-
-percentage points repeat along x axis : repeat(100%)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'repeat(100%)'
-
-pixel points repeat along x axis : repeat(25px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'repeat(25px)'
-
-percentage points along x axis with percentage repeat : 100% repeat(100%)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '100% repeat(100%)'
-
-pixel points along x axis with percentage repeat : 100px 50px repeat(25%)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '100px 50px repeat(25%)'
-
-percentage points along x axis with pixel repeat : 100% 50% repeat(40px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '100% 50% repeat(40px)'
-
-pixel points along x axis with pixel repeat : 100px repeat(42px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '100px repeat(42px)'
-
-inherited points along y axis : inherit
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'none'
-
-initial points along y axis : initial
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'none'
-
-element points along y axis : elements
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'elements'
-
-percentage points along y axis : 100% 50%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is '100% 50%'
-
-pixel points along y axis : 100px 50px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is '100px 50px'
-
-percentage points repeat along y axis : repeat(100%)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'repeat(100%)'
-
-pixel points repeat along y axis : repeat(25px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'repeat(25px)'
-
-percentage points along y axis with percentage repeat : 100% repeat(100%)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is '100% repeat(100%)'
-
-pixel points along y axis with percentage repeat : 100px 50px repeat(25%)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is '100px 50px repeat(25%)'
-
-percentage points along y axis with pixel repeat : 100% 50% repeat(40px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is '100% 50% repeat(40px)'
-
-pixel points along y axis with pixel repeat : 100px repeat(42px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is '100px repeat(42px)'
-
-inherited destination : inherit
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0px 0px'
-
-initial destination : initial
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0px 0px'
-
-pixel/pixel destination : 10px 50px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '10px 50px'
-
-pixel/percentage destination : 20px 40%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '20px 40%'
-
-percentage/pixel destination : 0% 0px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0% 0px'
-
-percentage/percentage destination : 5% 100%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '5% 100%'
-
-inherited coordinate : inherit
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is 'none'
-
-initial coordinate : initial
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is 'none'
-
-no coordinate : none
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is 'none'
-
-single pixel coordinate : 50px 100px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is '50px 100px'
-
-single percentage coordinate : 50% 100%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is '50% 100%'
-
-multiple pixel coordinates : 50px 100px 150px 100px 200px 100px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is '50px 100px, 150px 100px, 200px 100px'
-
-multiple percentage coordinates : 50% 100% 150% 100% 200% 100%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is '50% 100%, 150% 100%, 200% 100%'
-
-mm along x axis with pixel repeat : 10mm repeat(42mm)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '37.7952766418457px repeat(158.7401580810547px)'
-
-in along x axis with pixel repeat : 10in repeat(4in)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '960px repeat(384px)'
-
-pt along x axis with pixel repeat : 10pt repeat(42pt)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '13.333333015441895px repeat(56px)'
-
-in/cm destination : 2in 5cm
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '192px 188.97637939453125px'
-
-in/cm coordinate : 2in 5cm 5in 2cm
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is '192px 188.97637939453125px, 480px 75.5905532836914px'
-
-subpixel along x axis with pixel repeat : 100.5px repeat(50.25px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '100.5px repeat(50.25px)'
-
-subpixel destination : 0.125px 2.4375px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0.125px 2.4375px'
-
-subpixel coordinate : 110.125px 25.4375px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is '110.125px 25.4375px'
+empty string: ``
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
+
+too many values: `start center end`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
+
+invalid second value: `start wut`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
+
+invalid first value: `wat center`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
+
+one length: `10px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
+
+two lengths: `10px 50px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
+
+initial value: `initial`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
+
+single value: `start`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'start start'
+
+two values: `start end`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'start end'
+
+invalid scroll padding: `potato`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '0px'
+
+empty string: ``
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '0px'
+
+too many values: `1px 2px 3px 4px 5px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '0px'
+
+attempt to use auto: `auto auto`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '0px'
+
+single length: `10px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '10px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '10px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '10px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '10px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '10px'
+
+two percentages: `10% 20%`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '10% 20%'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '10%'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '20%'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '20%'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '10%'
+
+three lengths: `1px 2px 3px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '1px 2px 3px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '1px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '2px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '2px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '3px'
+
+four values: `50px 10% 20% 50px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '50px 10% 20% 50px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '50px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '50px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '10%'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '20%'
+
+calc expression: `calc(50px + 10%) 20px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is 'calc(50px + 10%) 20px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is 'calc(50px + 10%)'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '20px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '20px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is 'calc(50px + 10%)'
+
+various units: `1em 5mm 2in 4cm`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '16px 18.89763832092285px 192px 151.1811065673828px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '16px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '151.1811065673828px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '18.89763832092285px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '192px'
+
+subpixel values: `10.4375px 6.5px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '10.4375px 6.5px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '10.4375px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '6.5px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '6.5px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '10.4375px'
+
+invalid scroll padding: `potato`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
+
+empty string: ``
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
+
+too many values: `1px 2px 3px 4px 5px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
+
+attempt to use auto: `auto auto`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
+
+attempt to use percentage: `25% 25%`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
+
+attempt to use calc: `calc(25% + 10px)`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
+
+single length: `10px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '10px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '10px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '10px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '10px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '10px'
+
+two lengths: `10px 20px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '10px 20px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '10px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '20px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '20px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '10px'
+
+three lengths: `1px 2px 3px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '1px 2px 3px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '1px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '2px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '2px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '3px'
+
+four lengths: `50px 10px 20px 50px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '50px 10px 20px 50px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '50px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '50px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '10px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '20px'
+
+various units: `1em 5mm 2in 4cm`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '16px 18.89763832092285px 192px 151.1811065673828px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '16px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '151.1811065673828px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '18.89763832092285px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '192px'
+
+subpixel values: `10.4375px 6.5px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '10.4375px 6.5px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '10.4375px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '6.5px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '6.5px'
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '10.4375px'
 PASS successfullyParsed is true
 
 TEST COMPLETE
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 2f00959..672fc60 100644 (file)
@@ -1,85 +1,82 @@
-description("Test the computed style of the -webkit-scroll-snap-* properties.");
+description("Test the computed style of the scroll-snap-* properties.");
 
 var stylesheet;
 var styleElement = document.createElement("style");
 document.head.appendChild(styleElement);
 stylesheet = styleElement.sheet;
 
 
 var stylesheet;
 var styleElement = document.createElement("style");
 document.head.appendChild(styleElement);
 stylesheet = styleElement.sheet;
 
-function testComputedScrollSnapRule(description, snapProperty, rule, expected)
+function testComputedScrollSnapRule(description, snapProperty, rule, expected, expectedShorthands = {})
 {
     debug("");
 {
     debug("");
-    debug(description + " : " + rule);
+    debug(`${description}: \`${rule}\``);
 
 
-    stylesheet.insertRule("body { -webkit-scroll-snap-" + snapProperty + ": " + rule + "; }", 0);
+    stylesheet.insertRule(`body { ${snapProperty} : ${rule}; }`, 0);
 
 
-    shouldBe("window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-" + snapProperty + "')", "'" + expected + "'");
+    shouldBe(`window.getComputedStyle(document.body).getPropertyValue('${snapProperty}')`, `'${expected}'`);
+    for (let shorthand in expectedShorthands)
+        shouldBe(`window.getComputedStyle(document.body).getPropertyValue('${snapProperty}-${shorthand}')`, `'${expectedShorthands[shorthand]}'`);
     stylesheet.deleteRule(0);
 }
 
     stylesheet.deleteRule(0);
 }
 
-testComputedScrollSnapRule("invalid snapping type", "type", "potato", "none");
-testComputedScrollSnapRule("invalid points along x axis", "points-x", "hello world", "none");
-testComputedScrollSnapRule("invalid points along y axis", "points-y", "hello world", "none");
-testComputedScrollSnapRule("typo in point definition", "points-x", "repaet(50px)", "none");
-testComputedScrollSnapRule("another invalid point definition", "points-x", "??px repeat(50px)", "none");
-testComputedScrollSnapRule("invalid destination", "destination", "foo bar", "0px 0px");
-testComputedScrollSnapRule("short one destination value", "destination", "50%", "0px 0px");
-testComputedScrollSnapRule("extra destination value", "destination", "50px 100% 75px", "0px 0px");
-testComputedScrollSnapRule("invalid coordinates", "coordinate", "ben bitdiddle", "none")
-testComputedScrollSnapRule("mismatched x coordinate", "coordinate", "50% 100px 75%", "none");
+// Test the scroll-snap-type property
+// Invalid declarations
+testComputedScrollSnapRule("invalid snap type", "scroll-snap-type", "potato", "none");
+testComputedScrollSnapRule("empty string for snap type", "scroll-snap-type", "", "none");
+testComputedScrollSnapRule("too many values", "scroll-snap-type", "block mandatory proximity", "none");
+testComputedScrollSnapRule("none following axis", "scroll-snap-type", "both none", "none");
+testComputedScrollSnapRule("two axis values", "scroll-snap-type", "block inline", "none");
+testComputedScrollSnapRule("two strictness values", "scroll-snap-type", "proximity mandatory", "none");
+testComputedScrollSnapRule("axis following strictness", "scroll-snap-type", "mandatory inline", "none");
+// Valid declarations
+testComputedScrollSnapRule("initial value", "scroll-snap-type", "initial", "none");
+testComputedScrollSnapRule("only strictness", "scroll-snap-type", "mandatory", "both mandatory");
+testComputedScrollSnapRule("only axis", "scroll-snap-type", "both", "both proximity");
+testComputedScrollSnapRule("none", "scroll-snap-type", "none", "none");
+testComputedScrollSnapRule("strictness following axis", "scroll-snap-type", "inline mandatory", "inline mandatory");
 
 
-testComputedScrollSnapRule("inherited type", "type", "inherit", "none");
-testComputedScrollSnapRule("initial type", "type", "initial", "none");
-testComputedScrollSnapRule("none type", "type", "none", "none");
-testComputedScrollSnapRule("mandatory type", "type", "mandatory", "mandatory");
-testComputedScrollSnapRule("proximity type", "type", "proximity", "proximity");
+// Test the scroll-snap-align property
+// Invalid declarations
+testComputedScrollSnapRule("invalid snap align", "scroll-snap-align", "potato", "none none");
+testComputedScrollSnapRule("empty string", "scroll-snap-align", "", "none none");
+testComputedScrollSnapRule("too many values", "scroll-snap-align", "start center end", "none none");
+testComputedScrollSnapRule("invalid second value", "scroll-snap-align", "start wut", "none none");
+testComputedScrollSnapRule("invalid first value", "scroll-snap-align", "wat center", "none none");
+testComputedScrollSnapRule("one length", "scroll-snap-align", "10px", "none none");
+testComputedScrollSnapRule("two lengths", "scroll-snap-align", "10px 50px", "none none");
+// Valid declarations
+testComputedScrollSnapRule("initial value", "scroll-snap-align", "initial", "none none");
+testComputedScrollSnapRule("single value", "scroll-snap-align", "start", "start start");
+testComputedScrollSnapRule("two values", "scroll-snap-align", "start end", "start end");
 
 
-testComputedScrollSnapRule("inherited points along x axis", "points-x", "inherit", "none");
-testComputedScrollSnapRule("initial points along x axis", "points-x", "initial", "none");
-testComputedScrollSnapRule("element points along x axis", "points-x", "elements", "elements");
-testComputedScrollSnapRule("percentage points along x axis", "points-x", "100% 50%", "100% 50%");
-testComputedScrollSnapRule("pixel points along x axis", "points-x", "100px 50px", "100px 50px");
-testComputedScrollSnapRule("percentage points repeat along x axis", "points-x", "repeat(100%)", "repeat(100%)");
-testComputedScrollSnapRule("pixel points repeat along x axis", "points-x", "repeat(25px)", "repeat(25px)");
-testComputedScrollSnapRule("percentage points along x axis with percentage repeat", "points-x", "100% repeat(100%)", "100% repeat(100%)");
-testComputedScrollSnapRule("pixel points along x axis with percentage repeat", "points-x", "100px 50px repeat(25%)", "100px 50px repeat(25%)");
-testComputedScrollSnapRule("percentage points along x axis with pixel repeat", "points-x", "100% 50% repeat(40px)", "100% 50% repeat(40px)");
-testComputedScrollSnapRule("pixel points along x axis with pixel repeat", "points-x", "100px repeat(42px)", "100px repeat(42px)");
+// Test the scroll-padding property
+// Invalid declarations
+testComputedScrollSnapRule("invalid scroll padding", "scroll-padding", "potato", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
+testComputedScrollSnapRule("empty string", "scroll-padding", "", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
+testComputedScrollSnapRule("too many values", "scroll-padding", "1px 2px 3px 4px 5px", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
+testComputedScrollSnapRule("attempt to use auto", "scroll-padding", "auto auto", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
+// Valid declarations
+testComputedScrollSnapRule("single length", "scroll-padding", "10px", "10px", { top: "10px", left: "10px", right: "10px", bottom: "10px" });
+testComputedScrollSnapRule("two percentages", "scroll-padding", "10% 20%", "10% 20%", { top: "10%", left: "20%", right: "20%", bottom: "10%" });
+testComputedScrollSnapRule("three lengths", "scroll-padding", "1px 2px 3px", "1px 2px 3px", { top: "1px", left: "2px", right: "2px", bottom: "3px" });
+testComputedScrollSnapRule("four values", "scroll-padding", "50px 10% 20% 50px", "50px 10% 20% 50px", { top: "50px", left: "50px", right: "10%", bottom: "20%" });
+testComputedScrollSnapRule("calc expression", "scroll-padding", "calc(50px + 10%) 20px", "calc(50px + 10%) 20px", { top: "calc(50px + 10%)", left: "20px", right: "20px", bottom: "calc(50px + 10%)" });
+testComputedScrollSnapRule("various units", "scroll-padding", "1em 5mm 2in 4cm", "16px 18.89763832092285px 192px 151.1811065673828px", { top: "16px", left: "151.1811065673828px", right: "18.89763832092285px", bottom: "192px" });
+testComputedScrollSnapRule("subpixel values", "scroll-padding", "10.4375px 6.5px", "10.4375px 6.5px", { top: "10.4375px", left: "6.5px", right: "6.5px", bottom: "10.4375px" });
 
 
-testComputedScrollSnapRule("inherited points along y axis", "points-y", "inherit", "none");
-testComputedScrollSnapRule("initial points along y axis", "points-y", "initial", "none");
-testComputedScrollSnapRule("element points along y axis", "points-y", "elements", "elements");
-testComputedScrollSnapRule("percentage points along y axis", "points-y", "100% 50%", "100% 50%");
-testComputedScrollSnapRule("pixel points along y axis", "points-y", "100px 50px", "100px 50px");
-testComputedScrollSnapRule("percentage points repeat along y axis", "points-y", "repeat(100%)", "repeat(100%)");
-testComputedScrollSnapRule("pixel points repeat along y axis", "points-y", "repeat(25px)", "repeat(25px)");
-testComputedScrollSnapRule("percentage points along y axis with percentage repeat", "points-y", "100% repeat(100%)", "100% repeat(100%)");
-testComputedScrollSnapRule("pixel points along y axis with percentage repeat", "points-y", "100px 50px repeat(25%)", "100px 50px repeat(25%)");
-testComputedScrollSnapRule("percentage points along y axis with pixel repeat", "points-y", "100% 50% repeat(40px)", "100% 50% repeat(40px)");
-testComputedScrollSnapRule("pixel points along y axis with pixel repeat", "points-y", "100px repeat(42px)", "100px repeat(42px)");
-
-testComputedScrollSnapRule("inherited destination", "destination", "inherit", "0px 0px");
-testComputedScrollSnapRule("initial destination", "destination", "initial", "0px 0px");
-testComputedScrollSnapRule("pixel/pixel destination", "destination", "10px 50px", "10px 50px");
-testComputedScrollSnapRule("pixel/percentage destination", "destination", "20px 40%", "20px 40%");
-testComputedScrollSnapRule("percentage/pixel destination", "destination", "0% 0px", "0% 0px");
-testComputedScrollSnapRule("percentage/percentage destination", "destination", "5% 100%", "5% 100%");
-
-testComputedScrollSnapRule("inherited coordinate", "coordinate", "inherit", "none");
-testComputedScrollSnapRule("initial coordinate", "coordinate", "initial", "none");
-testComputedScrollSnapRule("no coordinate", "coordinate", "none", "none");
-testComputedScrollSnapRule("single pixel coordinate", "coordinate", "50px 100px", "50px 100px");
-testComputedScrollSnapRule("single percentage coordinate", "coordinate", "50% 100%", "50% 100%");
-testComputedScrollSnapRule("multiple pixel coordinates", "coordinate", "50px 100px 150px 100px 200px 100px", "50px 100px, 150px 100px, 200px 100px");
-testComputedScrollSnapRule("multiple percentage coordinates", "coordinate", "50% 100% 150% 100% 200% 100%", "50% 100%, 150% 100%, 200% 100%");
-
-testComputedScrollSnapRule("mm along x axis with pixel repeat", "points-x", "10mm repeat(42mm)", "37.7952766418457px repeat(158.7401580810547px)");
-testComputedScrollSnapRule("in along x axis with pixel repeat", "points-x", "10in repeat(4in)", "960px repeat(384px)");
-testComputedScrollSnapRule("pt along x axis with pixel repeat", "points-x", "10pt repeat(42pt)", "13.333333015441895px repeat(56px)");
-testComputedScrollSnapRule("in/cm destination", "destination", "2in 5cm", "192px 188.97637939453125px");
-testComputedScrollSnapRule("in/cm coordinate", "coordinate", "2in 5cm 5in 2cm", "192px 188.97637939453125px, 480px 75.5905532836914px");
-
-testComputedScrollSnapRule("subpixel along x axis with pixel repeat", "points-x", "100.5px repeat(50.25px)", "100.5px repeat(50.25px)");
-testComputedScrollSnapRule("subpixel destination", "destination", "0.125px 2.4375px", "0.125px 2.4375px");
-testComputedScrollSnapRule("subpixel coordinate", "coordinate", "110.125px 25.4375px", "110.125px 25.4375px");
+// Test the scroll-snap-margin property
+// Invalid declarations
+testComputedScrollSnapRule("invalid scroll padding", "scroll-snap-margin", "potato", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
+testComputedScrollSnapRule("empty string", "scroll-snap-margin", "", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
+testComputedScrollSnapRule("too many values", "scroll-snap-margin", "1px 2px 3px 4px 5px", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
+testComputedScrollSnapRule("attempt to use auto", "scroll-snap-margin", "auto auto", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
+testComputedScrollSnapRule("attempt to use percentage", "scroll-snap-margin", "25% 25%", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
+testComputedScrollSnapRule("attempt to use calc", "scroll-snap-margin", "calc(25% + 10px)", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
+// Valid declarations
+testComputedScrollSnapRule("single length", "scroll-snap-margin", "10px", "10px", { top: "10px", left: "10px", right: "10px", bottom: "10px" });
+testComputedScrollSnapRule("two lengths", "scroll-snap-margin", "10px 20px", "10px 20px", { top: "10px", left: "20px", right: "20px", bottom: "10px" });
+testComputedScrollSnapRule("three lengths", "scroll-snap-margin", "1px 2px 3px", "1px 2px 3px", { top: "1px", left: "2px", right: "2px", bottom: "3px" });
+testComputedScrollSnapRule("four lengths", "scroll-snap-margin", "50px 10px 20px 50px", "50px 10px 20px 50px", { top: "50px", left: "50px", right: "10px", bottom: "20px" });
+testComputedScrollSnapRule("various units", "scroll-snap-margin", "1em 5mm 2in 4cm", "16px 18.89763832092285px 192px 151.1811065673828px", { top: "16px", left: "151.1811065673828px", right: "18.89763832092285px", bottom: "192px" });
+testComputedScrollSnapRule("subpixel values", "scroll-snap-margin", "10.4375px 6.5px", "10.4375px 6.5px", { top: "10.4375px", left: "6.5px", right: "6.5px", bottom: "10.4375px" });
 
 successfullyParsed = true;
 
 successfullyParsed = true;
index da0d0f0..23d7a26 100644 (file)
-Test the parsing of the -webkit-scroll-snap-* properties.
+Test the parsing of the scroll-snap-* properties.
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
 
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
 
-inherited type : inherit
+initial value : initial
 PASS cssRule.type is 1
 PASS declaration.length is 1
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-type') is 'inherit'
+PASS declaration.getPropertyValue('scroll-snap-type') is 'initial'
 
 
-initial type : initial
+only strictness : mandatory
 PASS cssRule.type is 1
 PASS declaration.length is 1
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-type') is 'initial'
+PASS declaration.getPropertyValue('scroll-snap-type') is 'mandatory'
 
 
-inherited points-x : inherit
+only axis : both
 PASS cssRule.type is 1
 PASS declaration.length is 1
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is 'inherit'
+PASS declaration.getPropertyValue('scroll-snap-type') is 'both'
 
 
-initial points-x : initial
+none : none
 PASS cssRule.type is 1
 PASS declaration.length is 1
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is 'initial'
+PASS declaration.getPropertyValue('scroll-snap-type') is 'none'
 
 
-inherited points-y : inherit
+strictness following axis : inline mandatory
 PASS cssRule.type is 1
 PASS declaration.length is 1
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is 'inherit'
+PASS declaration.getPropertyValue('scroll-snap-type') is 'inline mandatory'
 
 
-initial points-y : initial
+initial value : initial
 PASS cssRule.type is 1
 PASS declaration.length is 1
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is 'initial'
+PASS declaration.getPropertyValue('scroll-snap-align') is 'initial'
 
 
-inherited destination : inherit
+single value : start
 PASS cssRule.type is 1
 PASS declaration.length is 1
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is 'inherit'
+PASS declaration.getPropertyValue('scroll-snap-align') is 'start'
 
 
-initial destination : initial
+two values : start end
 PASS cssRule.type is 1
 PASS declaration.length is 1
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is 'initial'
+PASS declaration.getPropertyValue('scroll-snap-align') is 'start end'
 
 
-inherited coordinate : inherit
+single length : 10px
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is 'inherit'
-
-initial coordinate : initial
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is 'initial'
-
-mandatory type : mandatory
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-type') is 'mandatory'
-
-proximity type : proximity
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-type') is 'proximity'
-
-element points along x axis : elements
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is 'elements'
-
-percentage points along x axis : 100% 50%
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100% 50%'
-
-pixel points along x axis : 100px 50px
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100px 50px'
-
-percentage points repeat along x axis : repeat(100%)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is 'repeat(100%)'
-
-pixe points repeat along x axis : repeat(25px)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is 'repeat(25px)'
-
-percentage points along x axis with percentage repeat : 100% repeat(100%)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100% repeat(100%)'
-
-pixel points along x axis with percentage repeat : 100px 50px repeat(25%)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100px 50px repeat(25%)'
-
-percentage points along x axis with pixel repeat : 100% 50% repeat(40px)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100% 50% repeat(40px)'
-
-pixel points along x axis with pixel repeat : 100px repeat(42px)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100px repeat(42px)'
-
-element points along y axis : elements
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is 'elements'
-
-percentage points along y axis : 100% 50%
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is '100% 50%'
-
-pixel points along y axis : 100px 50px
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is '100px 50px'
-
-percentage points repeat along y axis : repeat(100%)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is 'repeat(100%)'
-
-pixe points repeat along y axis : repeat(25px)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is 'repeat(25px)'
-
-percentage points along y axis with percentage repeat : 100% repeat(100%)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is '100% repeat(100%)'
-
-pixel points along y axis with percentage repeat : 100px 50px repeat(25%)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is '100px 50px repeat(25%)'
-
-percentage points along y axis with pixel repeat : 100% 50% repeat(40px)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is '100% 50% repeat(40px)'
-
-pixel points along y axis with pixel repeat : 100px repeat(42px)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is '100px repeat(42px)'
-
-em points along x axis with pixel repeat : 100em repeat(42em)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100em repeat(42em)'
-
-mm along x axis with pixel repeat : 100mm repeat(42mm)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100mm repeat(42mm)'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '10px'
 
 
-in along x axis with pixel repeat : 100in repeat(42in)
+two percentages : 10% 20%
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100in repeat(42in)'
-
-pt along x axis with pixel repeat : 100pt repeat(42pt)
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100pt repeat(42pt)'
-
-pixel/pixel destination : 10px 50px
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '10px 50px'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '10% 20%'
 
 
-pixel/percentage destination : 20px 40%
+three lengths : 1px 2px 3px
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '20px 40%'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '1px 2px 3px'
 
 
-percentage/pixel destination : 0% 0px
+four values : 50px 10% 20% 50px
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '0% 0px'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '50px 10% 20% 50px'
 
 
-percentage/percentage destination : 5% 100%
+calc expression : calc(50px + 10%) 20px
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '5% 100%'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is 'calc(50px + 10%) 20px'
 
 
-em/ex destination : 12em 16ex
+various units : 1em 5mm 2in 4cm
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '12em 16ex'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '1em 5mm 2in 4cm'
 
 
-in/cm destination : 2in 5cm
+subpixel values : 10.4375px 6.5px
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '2in 5cm'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '10.4375px 6.5px'
 
 
-single pixel coordinate : 50px 100px
+single length : 10px
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '50px 100px'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '10px'
 
 
-single percentage coordinate : 50% 100%
+two lengths : 10px 20px
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '50% 100%'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '10px 20px'
 
 
-multiple pixel coordinates : 50px 100px 150px 100px 200px 100px
+three lengths : 1px 2px 3px
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '50px 100px 150px 100px 200px 100px'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '1px 2px 3px'
 
 
-multiple percentage coordinates : 50% 100% 150% 100% 200% 100%
+four lengths : 50px 10px 20px 50px
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '50% 100% 150% 100% 200% 100%'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '50px 10px 20px 50px'
 
 
-em/ex coordinate : 12em 16ex 16em 12ex
+various units : 1em 5mm 2in 4cm
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '12em 16ex 16em 12ex'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '1em 5mm 2in 4cm'
 
 
-in/cm coordinate : 2in 5cm 5in 2cm
+subpixel values : 10.4375px 6.5px
 PASS cssRule.type is 1
 PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '2in 5cm 5in 2cm'
+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '10.4375px 6.5px'
 PASS successfullyParsed is true
 
 TEST COMPLETE
 PASS successfullyParsed is true
 
 TEST COMPLETE
index ad8e707..86e8b31 100644 (file)
@@ -1,82 +1,45 @@
-description("Test the parsing of the -webkit-scroll-snap-* properties.");
+description("Test the parsing of the scroll-snap-* properties.");
 
 var stylesheet, cssRule, declaration;
 var styleElement = document.createElement("style");
 document.head.appendChild(styleElement);
 stylesheet = styleElement.sheet;
 
 
 var stylesheet, cssRule, declaration;
 var styleElement = document.createElement("style");
 document.head.appendChild(styleElement);
 stylesheet = styleElement.sheet;
 
-function testScrollSnapRule(description, snapProperty, rule, expectedValue)
+function testScrollSnapRule(description, snapProperty, rule, expectedValue, expectedLength)
 {
     debug("");
     debug(description + " : " + rule);
 
 {
     debug("");
     debug(description + " : " + rule);
 
-    stylesheet.insertRule("body { -webkit-scroll-snap-" + snapProperty + ": " + rule + "; }", 0);
+    stylesheet.insertRule(`body { ${snapProperty} : ${rule}; }`, 0);
     cssRule = stylesheet.cssRules.item(0);
 
     shouldBe("cssRule.type", "1");
 
     declaration = cssRule.style;
     cssRule = stylesheet.cssRules.item(0);
 
     shouldBe("cssRule.type", "1");
 
     declaration = cssRule.style;
-    shouldBe("declaration.length", "1");
-    shouldBe("declaration.getPropertyValue('-webkit-scroll-snap-" + snapProperty + "')", "'" + expectedValue + "'");
+    shouldBe("declaration.length", `${expectedLength}`);
+    shouldBe(`declaration.getPropertyValue('${snapProperty}')`, `'${expectedValue}'`);
 }
 
 }
 
-testScrollSnapRule("inherited type", "type", "inherit", "inherit");
-testScrollSnapRule("initial type", "type", "initial", "initial");
-
-testScrollSnapRule("inherited points-x", "points-x", "inherit", "inherit");
-testScrollSnapRule("initial points-x", "points-x", "initial", "initial");
-
-testScrollSnapRule("inherited points-y", "points-y", "inherit", "inherit");
-testScrollSnapRule("initial points-y", "points-y", "initial", "initial");
-
-testScrollSnapRule("inherited destination", "destination", "inherit", "inherit");
-testScrollSnapRule("initial destination", "destination", "initial", "initial");
-
-testScrollSnapRule("inherited coordinate", "coordinate", "inherit", "inherit");
-testScrollSnapRule("initial coordinate", "coordinate", "initial", "initial");
-
-testScrollSnapRule("mandatory type", "type", "mandatory", "mandatory");
-testScrollSnapRule("proximity type", "type", "proximity", "proximity");
-
-testScrollSnapRule("element points along x axis", "points-x", "elements", "elements");
-testScrollSnapRule("percentage points along x axis", "points-x", "100% 50%", "100% 50%");
-testScrollSnapRule("pixel points along x axis", "points-x", "100px 50px", "100px 50px");
-testScrollSnapRule("percentage points repeat along x axis", "points-x", "repeat(100%)", "repeat(100%)");
-testScrollSnapRule("pixe points repeat along x axis", "points-x", "repeat(25px)", "repeat(25px)");
-testScrollSnapRule("percentage points along x axis with percentage repeat", "points-x", "100% repeat(100%)", "100% repeat(100%)");
-testScrollSnapRule("pixel points along x axis with percentage repeat", "points-x", "100px 50px repeat(25%)", "100px 50px repeat(25%)");
-testScrollSnapRule("percentage points along x axis with pixel repeat", "points-x", "100% 50% repeat(40px)", "100% 50% repeat(40px)");
-testScrollSnapRule("pixel points along x axis with pixel repeat", "points-x", "100px repeat(42px)", "100px repeat(42px)");
-
-testScrollSnapRule("element points along y axis", "points-y", "elements", "elements");
-testScrollSnapRule("percentage points along y axis", "points-y", "100% 50%", "100% 50%");
-testScrollSnapRule("pixel points along y axis", "points-y", "100px 50px", "100px 50px");
-testScrollSnapRule("percentage points repeat along y axis", "points-y", "repeat(100%)", "repeat(100%)");
-testScrollSnapRule("pixe points repeat along y axis", "points-y", "repeat(25px)", "repeat(25px)");
-testScrollSnapRule("percentage points along y axis with percentage repeat", "points-y", "100% repeat(100%)", "100% repeat(100%)");
-testScrollSnapRule("pixel points along y axis with percentage repeat", "points-y", "100px 50px repeat(25%)", "100px 50px repeat(25%)");
-testScrollSnapRule("percentage points along y axis with pixel repeat", "points-y", "100% 50% repeat(40px)", "100% 50% repeat(40px)");
-testScrollSnapRule("pixel points along y axis with pixel repeat", "points-y", "100px repeat(42px)", "100px repeat(42px)");
-
-testScrollSnapRule("em points along x axis with pixel repeat", "points-x", "100em repeat(42em)", "100em repeat(42em)");
-testScrollSnapRule("mm along x axis with pixel repeat", "points-x", "100mm repeat(42mm)", "100mm repeat(42mm)");
-testScrollSnapRule("in along x axis with pixel repeat", "points-x", "100in repeat(42in)", "100in repeat(42in)");
-testScrollSnapRule("pt along x axis with pixel repeat", "points-x", "100pt repeat(42pt)", "100pt repeat(42pt)");
-
-testScrollSnapRule("pixel/pixel destination", "destination", "10px 50px", "10px 50px");
-testScrollSnapRule("pixel/percentage destination", "destination", "20px 40%", "20px 40%");
-testScrollSnapRule("percentage/pixel destination", "destination", "0% 0px", "0% 0px");
-testScrollSnapRule("percentage/percentage destination", "destination", "5% 100%", "5% 100%");
-
-testScrollSnapRule("em/ex destination", "destination", "12em 16ex", "12em 16ex");
-testScrollSnapRule("in/cm destination", "destination", "2in 5cm", "2in 5cm");
-
-testScrollSnapRule("single pixel coordinate", "coordinate", "50px 100px", "50px 100px");
-testScrollSnapRule("single percentage coordinate", "coordinate", "50% 100%", "50% 100%");
-testScrollSnapRule("multiple pixel coordinates", "coordinate", "50px 100px 150px 100px 200px 100px", "50px 100px 150px 100px 200px 100px");
-testScrollSnapRule("multiple percentage coordinates", "coordinate", "50% 100% 150% 100% 200% 100%", "50% 100% 150% 100% 200% 100%");
-
-testScrollSnapRule("em/ex coordinate", "coordinate", "12em 16ex 16em 12ex", "12em 16ex 16em 12ex");
-testScrollSnapRule("in/cm coordinate", "coordinate", "2in 5cm 5in 2cm", "2in 5cm 5in 2cm");
+testScrollSnapRule("initial value", "scroll-snap-type", "initial", "initial", 1);
+testScrollSnapRule("only strictness", "scroll-snap-type", "mandatory", "mandatory", 1);
+testScrollSnapRule("only axis", "scroll-snap-type", "both", "both", 1);
+testScrollSnapRule("none", "scroll-snap-type", "none", "none", 1);
+testScrollSnapRule("strictness following axis", "scroll-snap-type", "inline mandatory", "inline mandatory", 1);
+testScrollSnapRule("initial value", "scroll-snap-align", "initial", "initial", 1);
+testScrollSnapRule("single value", "scroll-snap-align", "start", "start", 1);
+testScrollSnapRule("two values", "scroll-snap-align", "start end", "start end", 1);
+testScrollSnapRule("single length", "scroll-padding", "10px", "10px", 4);
+testScrollSnapRule("two percentages", "scroll-padding", "10% 20%", "10% 20%", 4);
+testScrollSnapRule("three lengths", "scroll-padding", "1px 2px 3px", "1px 2px 3px", 4);
+testScrollSnapRule("four values", "scroll-padding", "50px 10% 20% 50px", "50px 10% 20% 50px", 4);
+testScrollSnapRule("calc expression", "scroll-padding", "calc(50px + 10%) 20px", "calc(50px + 10%) 20px", 4);
+testScrollSnapRule("various units", "scroll-padding", "1em 5mm 2in 4cm", "1em 5mm 2in 4cm", 4);
+testScrollSnapRule("subpixel values", "scroll-padding", "10.4375px 6.5px", "10.4375px 6.5px", 4);
+testScrollSnapRule("single length", "scroll-snap-margin", "10px", "10px", 4);
+testScrollSnapRule("two lengths", "scroll-snap-margin", "10px 20px", "10px 20px", 4);
+testScrollSnapRule("three lengths", "scroll-snap-margin", "1px 2px 3px", "1px 2px 3px", 4);
+testScrollSnapRule("four lengths", "scroll-snap-margin", "50px 10px 20px 50px", "50px 10px 20px 50px", 4);
+testScrollSnapRule("various units", "scroll-snap-margin", "1em 5mm 2in 4cm", "1em 5mm 2in 4cm", 4);
+testScrollSnapRule("subpixel values", "scroll-snap-margin", "10.4375px 6.5px", "10.4375px 6.5px", 4);
 
 successfullyParsed = true;
 
 successfullyParsed = true;
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align-expected.txt
new file mode 100644 (file)
index 0000000..dbd6c43
--- /dev/null
@@ -0,0 +1,9 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+Original snap offsets with `start` alignment: vertical = { 0, 300, 600, 900, 1200 }
+Updated alignment to `center`: vertical = { 0, 150, 450, 750, 1050, 1200 }
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
@@ -3,27 +3,27 @@
     <head>
         <style>
             #gallery {
     <head>
         <style>
             #gallery {
-                width: 515px;
-                height: 500px;
-                -webkit-scroll-snap-type: mandatory;
+                width: 315px;
+                height: 600px;
+                scroll-snap-type: y mandatory;
                 -webkit-overflow-scrolling: touch;
                 overflow-y: scroll;
                 position: absolute;
             }
 
             .vertical {
                 -webkit-overflow-scrolling: touch;
                 overflow-y: scroll;
                 position: absolute;
             }
 
             .vertical {
-                width: 500px;
-                height: 500px;
-                -webkit-scroll-snap-coordinate: 0% 0%;
+                width: 300px;
+                height: 300px;
+                scroll-snap-align: start;
                 position: absolute;
             }
 
             #child00 { background-color: #DD0000; left: 0; top: 0px; }
                 position: absolute;
             }
 
             #child00 { background-color: #DD0000; left: 0; top: 0px; }
-            #child01 { background-color: #FF6666; left: 0; top: 500px; }
-            #child02 { background-color: #00DD00; left: 0; top: 1000px; }
-            #child03 { background-color: #66FF66; left: 0; top: 1500px; }
-            #child04 { background-color: #0000DD; left: 0; top: 2000px; }
-            #child05 { background-color: #6666FF; left: 0; top: 2500px; }
+            #child01 { background-color: #FF6666; left: 0; top: 300px; }
+            #child02 { background-color: #00DD00; left: 0; top: 600px; }
+            #child03 { background-color: #66FF66; left: 0; top: 900px; }
+            #child04 { background-color: #0000DD; left: 0; top: 1200px; }
+            #child05 { background-color: #6666FF; left: 0; top: 1500px; }
         </style>
         <script src="../../resources/js-test-pre.js"></script>
         <script>
         </style>
         <script src="../../resources/js-test-pre.js"></script>
         <script>
             }
 
             function dumpGalleryAndUpdateCoordinates() {
             }
 
             function dumpGalleryAndUpdateCoordinates() {
-                debug("Original snap offsets: " + snapOffsets());
+                debug("Original snap offsets with `start` alignment: " + snapOffsets());
                 for (var index = 0; index < coordinateChildElements.length; ++index)
                 for (var index = 0; index < coordinateChildElements.length; ++index)
-                    coordinateChildElements[index].style.webkitScrollSnapCoordinate = "0px 250px";
+                    coordinateChildElements[index].style.scrollSnapAlign = "center";
 
                 setTimeout(dumpGalleryAndFinishTest, 0);
             }
 
             function dumpGalleryAndFinishTest() {
 
                 setTimeout(dumpGalleryAndFinishTest, 0);
             }
 
             function dumpGalleryAndFinishTest() {
-                debug("Updated child coordinates to 0px 250px: " + snapOffsets());
+                debug("Updated alignment to `center`: " + snapOffsets());
                 finishJSTest();
                 testRunner.notifyDone();
             }
                 finishJSTest();
                 testRunner.notifyDone();
             }
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates-expected.txt
deleted file mode 100644 (file)
index 75c3969..0000000
+++ /dev/null
@@ -1,9 +0,0 @@
-PASS successfullyParsed is true
-
-TEST COMPLETE
-Original snap offsets: vertical = { 0, 500, 1000, 1500, 2000, 2500 }
-Updated child coordinates to 0px 250px: vertical = { 0, 250, 750, 1250, 1750, 2250, 2500 }
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat-expected.txt
deleted file mode 100644 (file)
index dfcf660..0000000
+++ /dev/null
@@ -1,11 +0,0 @@
-PASS successfullyParsed is true
-
-TEST COMPLETE
-Original snap offsets: vertical = { 0, 500, 1000, 1500, 2000, 2500 }
-Updated points-y to repeat(1000px): vertical = { 0, 1000, 2000, 2500 }
-Updated destination to 0px 250px: vertical = { 0, 750, 1750, 2500 }
-Updated type to none:
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat.html b/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat.html
deleted file mode 100644 (file)
index 5eebf04..0000000
+++ /dev/null
@@ -1,83 +0,0 @@
-<html>
-
-    <head>
-        <style>
-            #gallery {
-                width: 515px;
-                height: 500px;
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-overflow-scrolling: touch;
-                -webkit-scroll-snap-points-y: repeat(500px);
-                overflow-y: scroll;
-                position: absolute;
-            }
-
-            .vertical {
-                width: 500px;
-                height: 500px;
-            }
-
-            #child00 { background-color: #DD0000; }
-            #child01 { background-color: #FF6666; }
-            #child02 { background-color: #00DD00; }
-            #child03 { background-color: #66FF66; }
-            #child04 { background-color: #0000DD; }
-            #child05 { background-color: #6666FF; }
-        </style>
-        <script src="../../resources/js-test-pre.js"></script>
-        <script>
-        function setup() {
-            var gallery = document.getElementById("gallery");
-
-            function snapOffsets() {
-                return window.internals.scrollSnapOffsets(gallery);
-            }
-
-            // Test starts here. Each function call triggers the next.
-            function dumpSnapOffsetsAndUpdatePointsY() {
-                debug("Original snap offsets: " + snapOffsets());
-                gallery.style.webkitScrollSnapPointsY = "repeat(1000px)";
-                setTimeout(dumpSnapOffsetsAndUpdateDestination, 0);
-            }
-
-            function dumpSnapOffsetsAndUpdateDestination() {
-                debug("Updated points-y to repeat(1000px): " + snapOffsets());
-                gallery.style.webkitScrollSnapDestination = "0px 250px";
-                setTimeout(dumpSnapOffsetsAndUpdateType, 0);
-            }
-
-            function dumpSnapOffsetsAndUpdateType() {
-                debug("Updated destination to 0px 250px: " + snapOffsets());
-                gallery.style.webkitScrollSnapType = "none";
-                setTimeout(dumpSnapOffsetsAndFinishTest, 0);
-            }
-
-            function dumpSnapOffsetsAndFinishTest() {
-                debug("Updated type to none:" + snapOffsets());
-                finishJSTest();
-                testRunner.notifyDone();
-            }
-
-            if (window.testRunner) {
-                window.jsTestIsAsync = true;
-                testRunner.dumpAsText();
-                testRunner.waitUntilDone();
-                setTimeout(dumpSnapOffsetsAndUpdatePointsY, 0);
-            }
-        }
-        </script>
-    </head>
-
-    <body onload="setup()">
-        <div id="gallery">
-            <div class="vertical" id="child00"></div>
-            <div class="vertical" id="child01"></div>
-            <div class="vertical" id="child02"></div>
-            <div class="vertical" id="child03"></div>
-            <div class="vertical" id="child04"></div>
-            <div class="vertical" id="child05"></div>
-        </div>
-        <script src="../../resources/js-test-post.js"></script>
-    </body>
-
-</html>
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat-expected.txt
deleted file mode 100644 (file)
index 8afbbb4..0000000
+++ /dev/null
@@ -1,13 +0,0 @@
-Tests that small positive repeat() values generates a reasonable number of snap offsets.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-Number of snap offsets: 99
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat.html b/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat.html
deleted file mode 100644 (file)
index 6190942..0000000
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <style>
-            #gallery {
-                height: 100px;
-                width: 100px;
-                overflow-x: hidden;
-                overflow-y: auto;
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-y: repeat(0.0001px);
-                margin: 0;
-                padding: 0;
-            }
-
-            .colorBox {
-                width: 100px;
-                height: 100px;
-            }
-
-            #item0 { background-color: red; }
-            #item1 { background-color: green; }
-        </style>
-        <script src="../../resources/js-test-pre.js"></script>
-        <script>
-        function runTest()
-        {
-            var gallery = document.getElementById("gallery");
-
-            if (window.testRunner) {
-                window.jsTestIsAsync = true;
-                testRunner.dumpAsText();
-                testRunner.waitUntilDone();
-                setTimeout(dumpSnapOffsets, 0);
-            }
-
-            function snapOffsetsFromString(offsetsAsString)
-            {
-                var startIndex = offsetsAsString.search(/\{/);
-                var endIndex = offsetsAsString.search(/\}/);
-                if (startIndex == -1 || endIndex == -1 || endIndex <= startIndex)
-                    return []
-
-                return offsetsAsString
-                    .substring(startIndex + 1, endIndex - startIndex - 1)
-                    .trim()
-                    .split(",")
-                    .map(function(s) { return parseFloat(s.trim()) });
-            }
-
-            function dumpSnapOffsets()
-            {
-                var offsets = snapOffsetsFromString(window.internals.scrollSnapOffsets(gallery));
-                debug("Number of snap offsets: " + offsets.length);
-                finishJSTest();
-            }
-        }
-        </script>
-    </head>
-    <body onload="runTest()">
-        <div id="gallery">
-            <div id="item0" class="colorBox"></div>
-            <div id="item1" class="colorBox"></div>
-        </div>
-        <div id="console"></div>
-        <script>
-        description("Tests that small positive repeat() values generates a reasonable number of snap offsets.");
-        </script>
-        <script src="../../resources/js-test-post.js"></script>
-    </body>
-</html>
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding-expected.txt b/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding-expected.txt
new file mode 100644 (file)
index 0000000..35f2a98
--- /dev/null
@@ -0,0 +1,5 @@
+Scroll-snap offsets are: vertical = { 0, 670, 1390, 2110, 2830, 3550, 3600 }
+After resizing, the offsets should not have changed: vertical = { 0, 670, 1390, 2110, 2830, 3550, 3600 }
+After removing scroll-padding, the offsets are: vertical = { 0, 720, 1440, 2160, 2880, 3600 }
+After resizing, the offsets should not have changed: vertical = { 0, 720, 1440, 2160, 2880, 3600 }
+
diff --git a/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding.html b/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding.html
new file mode 100644 (file)
index 0000000..8ee9a28
--- /dev/null
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            overflow: hidden;
+        }
+        #container {
+            position: absolute;
+            width: 400px;
+            height: 400px;
+            top: 0;
+            left: 0;
+            scroll-snap-type: y mandatory;
+            scroll-padding: 50px;
+            overflow-x: hidden;
+            overflow-y: scroll;
+            border: 1px black dashed;
+            opacity: 0.75;
+            background-color: #EEE;
+        }
+
+        .child {
+            width: 400px;
+            height: 400px;
+            scroll-snap-align: start;
+            position: absolute;
+            left: 0;
+        }
+    </style>
+    <script>
+    let write = s => output.innerHTML += s + "<br>";
+    if (window.testRunner) {
+        testRunner.dumpAsText();
+        testRunner.waitUntilDone();
+    }
+
+    function zeroDelayTimeout(action) {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                action();
+                resolve();
+            });
+        });
+    }
+
+    function run()
+    {
+        if (!window.testRunner || !window.internals) {
+            write(`To manually test, verify that scrolling snaps 50px above each colored box.`);
+            return;
+        }
+
+        zeroDelayTimeout(() => {
+            write("Scroll-snap offsets are: " + internals.scrollSnapOffsets(container));
+            container.scrollTop += 100;
+            container.style.width = "500px";
+        })
+        .then(() => {
+            zeroDelayTimeout(() => {
+                write("After resizing, the offsets should not have changed: " + internals.scrollSnapOffsets(container));
+                container.scrollTop += 100;
+                container.style.scrollPadding = "0px";
+            });
+        })
+        .then(() => {
+            zeroDelayTimeout(() => {
+                write("After removing scroll-padding, the offsets are: " + internals.scrollSnapOffsets(container));
+                container.scrollTop += 100;
+                container.style.width = "400px";
+            });
+        })
+        .then(() => {
+            zeroDelayTimeout(() => {
+                write("After resizing, the offsets should not have changed: " + internals.scrollSnapOffsets(container));
+                testRunner.notifyDone();
+            });
+        });
+    }
+    </script>
+</head>
+<body onload=run()>
+    <div id="container">
+        <div class="child" style="background-color: red;     top: 0px;"></div>
+        <div class="child" style="background-color: green;   top: 720px;"></div>
+        <div class="child" style="background-color: blue;    top: 1440px;"></div>
+        <div class="child" style="background-color: aqua;    top: 2160px;"></div>
+        <div class="child" style="background-color: yellow;  top: 2880px;"></div>
+        <div class="child" style="background-color: fuchsia; top: 3600px;"></div>
+    </div>
+    <div id="output"></div>
+</body>
+</html>
index 90a68fa..6f36e72 100644 (file)
@@ -2232,7 +2232,6 @@ compositing/fixed-with-fixed-layout.html [ Failure ]
 compositing/geometry/ancestor-overflow-change.html [ Failure ]
 compositing/layer-creation/will-change-layer-creation.html [ Failure ]
 css3/scroll-snap/nested-elements.html [ Failure ]
 compositing/geometry/ancestor-overflow-change.html [ Failure ]
 compositing/layer-creation/will-change-layer-creation.html [ Failure ]
 css3/scroll-snap/nested-elements.html [ Failure ]
-css3/scroll-snap/scroll-snap-coordinate.html [ Failure ]
 fast/block/lineboxcontain/block-with-ideographs.xhtml [ Failure ]
 fast/css/text-overflow-ellipsis-text-align-center.html [ Failure ]
 fast/css/text-overflow-ellipsis-text-align-left.html [ Failure ]
 fast/block/lineboxcontain/block-with-ideographs.xhtml [ Failure ]
 fast/css/text-overflow-ellipsis-text-align-center.html [ Failure ]
 fast/css/text-overflow-ellipsis-text-align-left.html [ Failure ]
index 4ad6389..4e843ee 100644 (file)
@@ -267,7 +267,6 @@ webkit.org/b/93980 http/tests/appcache/load-from-appcache-defer-resume-crash.htm
 webkit.org/b/136554 tiled-drawing/scrolling/frames/frameset-nested-frame-scrollability.html [ Pass Failure ]
 webkit.org/b/139901 tiled-drawing/scrolling/frames/frameset-frame-scrollability.html [ Pass Failure ]
 
 webkit.org/b/136554 tiled-drawing/scrolling/frames/frameset-nested-frame-scrollability.html [ Pass Failure ]
 webkit.org/b/139901 tiled-drawing/scrolling/frames/frameset-frame-scrollability.html [ Pass Failure ]
 
-webkit.org/b/162505 tiled-drawing/scrolling/latched-div-with-scroll-snap.html [ Pass Failure ]
 webkit.org/b/148407 tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html [ Pass Failure ]
 webkit.org/b/148407 tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html [ Pass Failure ]
 webkit.org/b/165196 tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe.html [ Pass Failure ]
 webkit.org/b/148407 tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html [ Pass Failure ]
 webkit.org/b/148407 tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html [ Pass Failure ]
 webkit.org/b/165196 tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe.html [ Pass Failure ]
index 5b94bc1..7fee001 100644 (file)
@@ -1,10 +1,27 @@
-Tests that the scroll-snap feature works properly in overflow regions.
-PASS div scrolled to next window.
-PASS div honored snap points.
-Testing that latch moves to bottom div:
-PASS top div did not move.
-PASS div scrolled to next window.
-PASS successfullyParsed is true
-
-TEST COMPLETE
+Manually test with the following steps:
+
+1. Scroll with momentum to the green box in the first div.
+
+2. In the first div, drag so the blue box is partially visible, then let go so the div snaps back to show green.
+
+3. Scroll with momentum to the green box in the second div.
+
+4. In the second div, drag so the blue box is partially visible, then let go so the div snaps back to show green.
+
+* Swiping with momentum in topTarget with scroll offset 0
+topTarget now has scroll offset 400
+bottomTarget now has scroll offset 0
+
+* Swiping without momentum in topTarget with scroll offset 400
+topTarget now has scroll offset 400
+bottomTarget now has scroll offset 0
+
+* Swiping with momentum in bottomTarget with scroll offset 0
+topTarget now has scroll offset 400
+bottomTarget now has scroll offset 400
+
+* Swiping without momentum in bottomTarget with scroll offset 400
+topTarget now has scroll offset 400
+bottomTarget now has scroll offset 400
+
 
 
index 9e79010..4735aea 100644 (file)
@@ -2,23 +2,44 @@
 <html>
     <head>
         <style>
 <html>
     <head>
         <style>
+            body {
+                margin: 0;
+            }
+
+            #topTarget {
+                position: absolute;
+                top: 0;
+                left: 0;
+                border: 1px black solid;
+            }
+
+            #bottomTarget {
+                position: absolute;
+                top: 400px;
+                left: 0;
+                border: 1px black solid;
+            }
+
             .gallery {
             .gallery {
-                width: 200px;
-                height: 200px;
+                width: 400px;
+                height: 400px;
                 overflow-y: hidden;
                 overflow-x: auto;
                 margin-bottom: 2px;
                 overflow-y: hidden;
                 overflow-x: auto;
                 margin-bottom: 2px;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: x mandatory;
+                opacity: 0.5;
             }
             }
+
             .galleryDrawer {
             .galleryDrawer {
-                width: 1200px;
-                height: 200px;
+                width: 2400px;
+                height: 400px;
             }
             }
+
             .colorBox {
             .colorBox {
-                height: 200px;
-                width: 200px;
+                height: 400px;
+                width: 400px;
                 float: left;
                 float: left;
+                scroll-snap-align: start;
             }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
             }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
             #itemH4, #itemV4 { background-color: yellow; }
             #itemH5, #itemV5 { background-color: fuchsia; }
         </style>
             #itemH4, #itemV4 { background-color: yellow; }
             #itemH5, #itemV5 { background-color: fuchsia; }
         </style>
-        <script src="../../resources/js-test.js"></script>
         <script>
         <script>
-        window.jsTestIsAsync = true;
-
-        var divScrollPositionBeforeGlide;
-        var divScrollPositionBeforeSnap;
-        var divScrollPositionBeforeSecondaryMove;
-        var bottomDivScrollPositionBeforeSecondaryMove;
-
         function locationInWindowCoordinates(element)
         {
             var position = {};
         function locationInWindowCoordinates(element)
         {
             var position = {};
             return position;
         }
 
             return position;
         }
 
-
-        function checkForSecondaryScrollGlide(targetLabel)
-        {
-            var topDivTarget = document.getElementById("topTarget");
-
-            var actualTopPosition = topDivTarget.scrollLeft;
-            var expectedTopPosition = divScrollPositionBeforeSecondaryMove;
-
-            // The top div should NOT have scrolled (glided) to the next snap point.
-            if (actualTopPosition == expectedTopPosition)
-                testPassed("top div did not move.");
-            else
-                testFailed("top div was improperly latched. Expected " + expectedTopPosition + ", but got " + actualTopPosition);
-
-            var divTarget = document.getElementById("bottomTarget");
-
-            var actualPosition = divTarget.scrollLeft;
-            var expectedPosition = divTarget.clientWidth;
-
-            // The div should have scrolled (glided) to the next snap point.
-            if (actualPosition == expectedPosition)
-                testPassed("div scrolled to next window.");
-            else
-                testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
-
-            finishJSTest();
-        }
-
-        function performSwipeGestureOnElementEnd()
-        {
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'begin');
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'continue');
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
-        }
-
-        function performSwipeGestureOnElement(divTarget)
+        let swipeWithMomentum = (element) => swipeInElement(element, true);
+        let swipeWithoutMomentum = (element) => swipeInElement(element, false);
+        function swipeInElement(element, momentum)
         {
         {
-            var windowPosition = locationInWindowCoordinates(divTarget);
-            var startPosX = windowPosition.x + 0.5 * divTarget.clientWidth;
-            var startPosY = windowPosition.y + 0.5 * divTarget.clientHeight;
-
-            eventSender.monitorWheelEvents();
-            eventSender.mouseMoveTo(startPosX, startPosY);
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none');
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
-        }
-
-        function scrollInSecondDiv()
-        {
-            debug("Testing that latch moves to bottom div:");
-            var topDivTarget = document.getElementById("topTarget");
-            divScrollPositionBeforeSecondaryMove = topDivTarget.scrollLeft;
-
-            var divTarget = document.getElementById("bottomTarget");
-
-            performSwipeGestureOnElement(divTarget);
-
-            eventSender.callAfterScrollingCompletes(function() { 
-                performSwipeGestureOnElementEnd();
-                eventSender.callAfterScrollingCompletes(function() {
-                    setTimeout(function() { checkForSecondaryScrollGlide(); }, 10); 
+            return new Promise(resolve => {
+                write(`* Swiping ${momentum ? "with" : "without"} momentum in ${element.id} with scroll offset ${element.scrollLeft}`);
+                let location = locationInWindowCoordinates(element);
+                eventSender.monitorWheelEvents();
+                eventSender.mouseMoveTo(location.x, location.y);
+                eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "began", "none");
+                eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none");
+                eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none");
+                eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
+                if (momentum) {
+                    eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "none", "begin");
+                    eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "none", "continue");
+                    eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end");
+                }
+                eventSender.callAfterScrollingCompletes(() => {
+                    write(`  topTarget now has scroll offset ${topTarget.scrollLeft}`);
+                    write(`  bottomTarget now has scroll offset ${bottomTarget.scrollLeft}`);
+                    write("");
+                    resolve();
                 });
                 });
-            });           
+            });
         }
 
         }
 
-        function checkForScrollSnap()
+        function run()
         {
         {
-            var divTarget = document.getElementById("topTarget");
-
-            var actualPosition = divTarget.scrollLeft;
-
-            // The div should have snapped back to the previous position
-            if (actualPosition != divScrollPositionBeforeSnap) {
-                testFailed("div did not snap back to proper location for " + divTarget +". Expected " + divScrollPositionBeforeSnap + ", but got " + actualPosition);
-                finishJSTest();
+            if (!window.eventSender)
                 return;
                 return;
-            } else
-                testPassed("div honored snap points.");
-            scrollInSecondDiv();
-        }
-
-        function scrollSnapTest()
-        {
-            var divTarget = document.getElementById("topTarget");
-            divScrollPositionBeforeSnap = divTarget.scrollLeft;
 
 
-            var windowPosition = locationInWindowCoordinates(divTarget);
-            var startPosX = windowPosition.x + 0.5 * divTarget.clientWidth;
-            var startPosY = windowPosition.y + 0.5 * divTarget.clientHeight;
-
-            eventSender.monitorWheelEvents();
-            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none');
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
-            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
-            eventSender.callAfterScrollingCompletes(function() { checkForScrollSnap(); });
-        }
-
-        function checkForScrollGlide(targetLabel)
-        {
-            var divTarget = document.getElementById("topTarget");
-
-            var actualPosition = divTarget.scrollLeft;
-            var expectedPosition = divTarget.clientWidth;
-
-            // The div should have scrolled (glided) to the next snap point.
-            if (actualPosition == expectedPosition)
-                testPassed("div scrolled to next window.");
-            else {
-                testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
-                finishJSTest();
-                return;
-            }
-            scrollSnapTest();
-        }
-
-        function scrollGlideTest()
-        {
-            var divTarget = document.getElementById("topTarget");
-            divScrollPositionBeforeGlide = divTarget.scrollLeft;
-
-            performSwipeGestureOnElement(divTarget);
-            eventSender.callAfterScrollingCompletes(function() { 
-                performSwipeGestureOnElementEnd();
-                eventSender.callAfterScrollingCompletes(function() {
-                    setTimeout(function() { checkForScrollGlide(); }, 10); 
-                });
-            });           
-        }
-
-        function onLoad()
-        {
-            if (window.eventSender) {
-                testRunner.dumpAsText();
-                scrollGlideTest();
-            } else {
-                var messageLocationH = document.getElementById('itemH0');
-                var message = document.createElement('div');
-                message.innerHTML = "<p>This test is better run under WebKitTestRunner.<br/>To manually test it, place the mouse pointer<br/>"
-                    + "inside the red region at the top of the page,<br/>and then use the mouse wheel or a two-finger<br/>swipe to make a"
-                    + "small swipe gesture with<br/>some momentum.<br/><br/>"
-                    + "The region should scroll to show a green region.<br/><br/>"
-                    + "Next, perform a small scroll gesture that does<br/>not involve momentum. You should begin to<br/>see one of the colors "
-                    + "to the side of the current<br/>green box. When you release the wheel, the<br/>region should scroll back to a single color.";
-                messageLocationH.appendChild(message);
-
-                var messageLocationV = document.getElementById('itemV0');
-                var message = document.createElement('div');
-                message.innerHTML = "<p>You should also be able to repeat these tests steps for this vertical region.<br/>"
-                messageLocationV.appendChild(message);
-            }
+            swipeWithMomentum(topTarget)
+                .then(() => swipeWithoutMomentum(topTarget))
+                .then(() => swipeWithMomentum(bottomTarget))
+                .then(() => swipeWithoutMomentum(bottomTarget))
+                .then(() => testRunner.notifyDone());
         }
         </script>
     </head>
         }
         </script>
     </head>
-    <body onload="onLoad();">
-        <div style="position: relative; width: 200px">
-            <div>Tests that the scroll-snap feature works properly in overflow regions.</div>
+    <body onload=run()>
+        <div style="position: relative; width: 400px">
+            <p>Manually test with the following steps:</p>
+            <p>1. Scroll with momentum to the green box in the first div.</p>
+            <p>2. In the first div, drag so the blue box is partially visible, then let go so the div snaps back to show green.</p>
+            <p>3. Scroll with momentum to the green box in the second div.</p>
+            <p>4. In the second div, drag so the blue box is partially visible, then let go so the div snaps back to show green.</p>
             <div class="gallery" id="topTarget">
                 <div class="galleryDrawer">
                     <div id="itemH0" class="colorBox"></div>
             <div class="gallery" id="topTarget">
                 <div class="galleryDrawer">
                     <div id="itemH0" class="colorBox"></div>
                     <div id="itemV5" class="colorBox"></div>
                 </div>
             </div>
                     <div id="itemV5" class="colorBox"></div>
                 </div>
             </div>
-            <div id="console"></div>
+            <div id="output"></div>
+            <script>
+                let write = s => output.innerHTML += s + "<br>";
+                testRunner.dumpAsText();
+                testRunner.waitUntilDone();
+            </script>
         </div>
     </body>
 </html>
\ No newline at end of file
         </div>
     </body>
 </html>
\ No newline at end of file
index db222c2..135d397 100644 (file)
@@ -7,13 +7,13 @@
                 height: 100vh;
                 margin: 0;
                 padding: 0;
                 height: 100vh;
                 margin: 0;
                 padding: 0;
-                -webkit-scroll-snap-points-x: repeat(100vw);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: x mandatory;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
+                scroll-snap-align: start;
             }
             #item0 { background-color: red; }
             #item1 { background-color: green; }
             }
             #item0 { background-color: red; }
             #item1 { background-color: green; }
index bb7974f..110e2f5 100644 (file)
@@ -7,13 +7,13 @@
                 height: 600vh;
                 margin: 0;
                 padding: 0;
                 height: 600vh;
                 margin: 0;
                 padding: 0;
-                -webkit-scroll-snap-points-y: repeat(100vh);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: y mandatory;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
+                scroll-snap-align: start;
             }
             #item0 { background-color: red; }
             #item1 { background-color: green; }
             }
             #item0 { background-color: red; }
             #item1 { background-color: green; }
diff --git a/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt b/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt
deleted file mode 100644 (file)
index f12e1c9..0000000
+++ /dev/null
@@ -1,20 +0,0 @@
-This test passes if it doesn't time out.
-Tests infinite loop calculating scroll snap point offsets.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-type'] is ""
-PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
-PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-points-x'] is ""
-PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
-PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-points-y'] is ""
-PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
-PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-destination'] is ""
-PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination') is "100% 100%"
-PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-coordinate'] is ""
-PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html b/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html
deleted file mode 100644 (file)
index 764fd56..0000000
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <style>
-            .horizontalGallery {
-                width: 400px;
-                height: 50px;
-                overflow-y: hidden;
-                overflow-x: auto;
-            }
-            .horizontalGalleryDrawer {
-                width: 3000px;
-                height: 50px;
-            }
-            .colorBox {
-                height: 50px;
-                width: 400px;
-                float: left;
-            }
-
-            .lockUpSnapCoordinate {
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-destination: 100% 100%;
-                -webkit-scroll-snap-coordinate: initial;
-            }
-
-            #item0 { background-color: red; }
-            #item1 { background-color: green; }
-            #item2 { background-color: blue; }
-            #item3 { background-color: aqua; }
-            #item4 { background-color: yellow; }
-            #item5 { background-color: fuchsia; }
-        </style>
-        <script src="../../../resources/js-test-pre.js"></script>
-    </head>
-    <body>
-        <div style="width: 400px">
-            <div id="lockUpSnapCoordinate" class="horizontalGallery lockUpSnapCoordinate">
-                <div class="horizontalGalleryDrawer">
-                    <div id="item0" class="colorBox"></div>
-                    <div id="item1" class="colorBox"></div>
-                    <div id="item2" class="colorBox"></div>
-                    <div id="item3" class="colorBox"></div>
-                    <div id="item4" class="colorBox"></div>
-                    <div id="item5" class="colorBox"></div>
-                </div>
-            </div>
-        </div>
-        This test passes if it doesn't time out.
-        <div id="console"></div>
-        <script>
-        description("Tests infinite loop calculating scroll snap point offsets.");
-
-        var lockUpSnapCoordinate = document.getElementById('lockUpSnapCoordinate');
-        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-type']");
-        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
-        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-points-x']");
-        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
-        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-points-y']");
-        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
-        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-destination']");
-        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination')", "100% 100%");
-        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-coordinate']");
-        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
-        </script>
-        <script src="../../../resources/js-test-post.js"></script>
-    </body>
-</html>
-
index 37b4429..ac1ab88 100644 (file)
@@ -8,8 +8,7 @@
                 overflow: scroll;
                 white-space: nowrap;
                 -webkit-overflow-scrolling: touch;
                 overflow: scroll;
                 white-space: nowrap;
                 -webkit-overflow-scrolling: touch;
-                -webkit-scroll-snap-type: mandatory;
-                -webkit-scroll-snap-destination: 0 0;
+                scroll-snap-type: both mandatory;
                 line-height: 0px;
             }
 
                 line-height: 0px;
             }
 
@@ -17,7 +16,7 @@
                 width: 400px;
                 height: 400px;
                 display: inline-block;
                 width: 400px;
                 height: 400px;
                 display: inline-block;
-                -webkit-scroll-snap-coordinate: 0 0;
+                scroll-snap-align: start;
                 background-color: red;
                 margin: 0;
                 padding: 0;
                 background-color: red;
                 margin: 0;
                 padding: 0;
index 7b16d65..41ded09 100644 (file)
@@ -13,8 +13,7 @@
                 border-right: 9px solid black;
                 margin-bottom: 2px;
                 -webkit-overflow-scrolling: touch;
                 border-right: 9px solid black;
                 margin-bottom: 2px;
                 -webkit-overflow-scrolling: touch;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: x mandatory;
             }
             .horizontalGalleryDrawer {
                 width: 1800px;
             }
             .horizontalGalleryDrawer {
                 width: 1800px;
@@ -32,8 +31,7 @@
                 border-right: 9px solid black;
                 margin-top: 2px;
                 -webkit-overflow-scrolling: touch;
                 border-right: 9px solid black;
                 margin-top: 2px;
                 -webkit-overflow-scrolling: touch;
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: y mandatory;
             }
             .verticalGalleryDrawer {
                 width: 300px;
             }
             .verticalGalleryDrawer {
                 width: 300px;
@@ -43,6 +41,7 @@
                 height: 300px;
                 width: 300px;
                 float: left;
                 height: 300px;
                 width: 300px;
                 float: left;
+                scroll-snap-align: start;
             }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
             }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
index 3f6cb30..61ea2ec 100644 (file)
@@ -7,13 +7,13 @@
                 height: 100vh;
                 margin: 0;
                 padding: 0;
                 height: 100vh;
                 margin: 0;
                 padding: 0;
-                -webkit-scroll-snap-points-x: repeat(100vw);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: x mandatory;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
+                scroll-snap-align: start;
             }
             #item0 { background-color: red; }
             #item1 { background-color: green; }
             }
             #item0 { background-color: red; }
             #item1 { background-color: green; }
index 0159e30..c5cd03c 100644 (file)
@@ -7,13 +7,13 @@
                 height: 100vh;
                 margin: 0;
                 padding: 0;
                 height: 100vh;
                 margin: 0;
                 padding: 0;
-                -webkit-scroll-snap-points-x: repeat(100vw);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: x mandatory;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
+                scroll-snap-align: start;
             }
             #item0 { background-color: red; background-image: url('../../resources/green-blue.png'); background-attachment: fixed;}
             #item1 { background-color: green; }
             }
             #item0 { background-color: red; background-image: url('../../resources/green-blue.png'); background-attachment: fixed;}
             #item1 { background-color: green; }
index f287de7..8d85147 100644 (file)
@@ -7,13 +7,13 @@
                 height: 600vh;
                 margin: 0;
                 padding: 0;
                 height: 600vh;
                 margin: 0;
                 padding: 0;
-                -webkit-scroll-snap-points-y: repeat(100vh);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: y mandatory;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
+                scroll-snap-align: start;
             }
             #item0 { background-color: red; background-image: url('../../resources/green-blue.png'); background-attachment: fixed;}
             #item1 { background-color: green; }
             }
             #item0 { background-color: red; background-image: url('../../resources/green-blue.png'); background-attachment: fixed;}
             #item1 { background-color: green; }
index 3974bf3..89f4e18 100644 (file)
@@ -7,13 +7,13 @@
                 height: 600vh;
                 margin: 0;
                 padding: 0;
                 height: 600vh;
                 margin: 0;
                 padding: 0;
-                -webkit-scroll-snap-points-y: repeat(100vh);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: y mandatory;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
+                scroll-snap-align: start;
             }
             #item0 { background-color: red; }
             #item1 { background-color: green; }
             }
             #item0 { background-color: red; }
             #item1 { background-color: green; }
index 8724b5b..6e71013 100644 (file)
@@ -7,13 +7,13 @@
                 height: 600vh;
                 margin: 0;
                 padding: 0;
                 height: 600vh;
                 margin: 0;
                 padding: 0;
-                -webkit-scroll-snap-points-y: repeat(100vh);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: y mandatory;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
             }
             .colorBox {
                 height: 100vh;
                 width: 100vw;
                 float: left;
+                scroll-snap-align: start;
             }
             #item0 { background-color: red; }
             #item1 { background-color: green; }
             }
             #item0 { background-color: red; }
             #item1 { background-color: green; }
index af93d22..cb94f69 100644 (file)
@@ -8,12 +8,12 @@
                 display: inline-block;
                 overflow-x: hidden;
                 overflow-y: auto;
                 display: inline-block;
                 overflow-x: hidden;
                 overflow-y: auto;
-                -webkit-scroll-snap-points-y: repeat(400px);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: y mandatory;
             }
             .colorBox {
                 height: 400px;
                 width: 400px;
             }
             .colorBox {
                 height: 400px;
                 width: 400px;
+                scroll-snap-align: start;
             }
             #item0, #item2 { background-color: red; }
             #item1 { background-color: green; }
             }
             #item0, #item2 { background-color: red; }
             #item1 { background-color: green; }
index f04c688..b36fdd5 100644 (file)
@@ -8,8 +8,7 @@
                 overflow-y: hidden;
                 overflow-x: auto;
                 margin-bottom: 2px;
                 overflow-y: hidden;
                 overflow-x: auto;
                 margin-bottom: 2px;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: x mandatory;
             }
             .horizontalGalleryDrawer {
                 width: 1800px;
             }
             .horizontalGalleryDrawer {
                 width: 1800px;
@@ -22,8 +21,7 @@
                 overflow-x: hidden;
                 overflow-y: auto;
                 margin-top: 2px;
                 overflow-x: hidden;
                 overflow-y: auto;
                 margin-top: 2px;
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: y mandatory;
             }
             .verticalGalleryDrawer {
                 width: 300px;
             }
             .verticalGalleryDrawer {
                 width: 300px;
@@ -33,6 +31,7 @@
                 height: 300px;
                 width: 300px;
                 float: left;
                 height: 300px;
                 width: 300px;
                 float: left;
+                scroll-snap-align: start;
             }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
             }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
index fc9bf8e..0a117dc 100644 (file)
@@ -12,8 +12,7 @@
                 padding-top: 15px;
                 padding-bottom: 9px;
                 margin-bottom: 2px;
                 padding-top: 15px;
                 padding-bottom: 9px;
                 margin-bottom: 2px;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: x mandatory;
             }
             .horizontalGalleryDrawer {
                 width: 1800px;
             }
             .horizontalGalleryDrawer {
                 width: 1800px;
@@ -30,8 +29,7 @@
                 padding-top: 15px;
                 padding-bottom: 9px;
                 margin-top: 2px;
                 padding-top: 15px;
                 padding-bottom: 9px;
                 margin-top: 2px;
-                -webkit-scroll-snap-points-y: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: y mandatory;
             }
             .verticalGalleryDrawer {
                 width: 300px;
             }
             .verticalGalleryDrawer {
                 width: 300px;
@@ -41,6 +39,7 @@
                 height: 300px;
                 width: 300px;
                 float: left;
                 height: 300px;
                 width: 300px;
                 float: left;
+                scroll-snap-align: start;
             }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
             }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
             var style = window.getComputedStyle(divTarget, null);
 
             var actualPosition = divTarget.scrollTop;
             var style = window.getComputedStyle(divTarget, null);
 
             var actualPosition = divTarget.scrollTop;
-            var expectedPosition = divTarget.clientHeight - style.getPropertyValue('padding-top').replace("px", "") - style.getPropertyValue('padding-bottom').replace("px", "");
+            var expectedPosition = 300 + parseInt(style.paddingTop.replace("px", ""));
             if (targetLabel == 'horizontalTarget') {
                 actualPosition = divTarget.scrollLeft;
             if (targetLabel == 'horizontalTarget') {
                 actualPosition = divTarget.scrollLeft;
-                expectedPosition = divTarget.clientWidth - style.getPropertyValue('padding-right').replace("px", "") - style.getPropertyValue('padding-left').replace("px", "");
+                expectedPosition = 300 + parseInt(style.paddingLeft.replace("px", ""));
             }
 
             // The div should have scrolled (glided) to the next snap point.
             }
 
             // The div should have scrolled (glided) to the next snap point.
index be523ec..c9301ad 100644 (file)
@@ -9,8 +9,7 @@
                 overflow-x: auto;
                 border: 2px solid black;
                 margin-bottom: 15px;
                 overflow-x: auto;
                 border: 2px solid black;
                 margin-bottom: 15px;
-                -webkit-scroll-snap-points-x: repeat(100%);
-                -webkit-scroll-snap-type: mandatory;
+                scroll-snap-type: x mandatory;
             }
             .horizontalGalleryDrawer {
                 width: 1800px;
             }
   &