<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[210024] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/210024">210024</a></dd>
<dt>Author</dt> <dd>wenson_hsieh@apple.com</dd>
<dt>Date</dt> <dd>2016-12-20 10:44:38 -0800 (Tue, 20 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>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.
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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapnestedelementsexpectedtxt">trunk/LayoutTests/css3/scroll-snap/nested-elements-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapnestedelementshtml">trunk/LayoutTests/css3/scroll-snap/nested-elements.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapresourcesiframecontenthtml">trunk/LayoutTests/css3/scroll-snap/resources/iframe-content.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapelementscontainerlargerthanchildrenhtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-elements-container-larger-than-children.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapinheritexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-inherit-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapinherithtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-inherit.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapinitialexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-initial-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapinitialhtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-initial.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapmismatchhtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-mismatch.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapoffsetsexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-offsets-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapoffsetshtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-offsets.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappropertycomputedstyleexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappropertycomputedstylejs">trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style.js</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappropertyparsingexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-parsing-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappropertyparsingjs">trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-parsing.js</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>
<li><a href="#trunkLayoutTestsplatformmacwk2TestExpectations">trunk/LayoutTests/platform/mac-wk2/TestExpectations</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollinglatcheddivwithscrollsnapexpectedtxt">trunk/LayoutTests/tiled-drawing/scrolling/latched-div-with-scroll-snap-expected.txt</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollinglatcheddivwithscrollsnaphtml">trunk/LayoutTests/tiled-drawing/scrolling/latched-div-with-scroll-snap.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapresourceshorizontalmainframehtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapresourcesverticalmainframehtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatory2doverflowhtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-2d-overflow.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorybordershtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-borders.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorymainframehorizontalhtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorymainframeslowhorizontalhtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorymainframeslowverticalhtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorymainframeverticalthenhorizontalhtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-then-horizontal.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorymainframeverticalhtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatoryoverflowstatelesshtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-stateless.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatoryoverflowhtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorypaddinghtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-padding.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatoryrotatedhtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-rotated.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapscrollingjumpstotophtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-scrolling-jumps-to-top.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreWebCorexcodeprojprojectpbxproj">trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj</a></li>
<li><a href="#trunkSourceWebCorecssCSSCalculationValuecpp">trunk/Source/WebCore/css/CSSCalculationValue.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSComputedStyleDeclarationcpp">trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSPrimitiveValuecpp">trunk/Source/WebCore/css/CSSPrimitiveValue.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSPrimitiveValueh">trunk/Source/WebCore/css/CSSPrimitiveValue.h</a></li>
<li><a href="#trunkSourceWebCorecssCSSPrimitiveValueMappingsh">trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h</a></li>
<li><a href="#trunkSourceWebCorecssCSSPropertiesjson">trunk/Source/WebCore/css/CSSProperties.json</a></li>
<li><a href="#trunkSourceWebCorecssCSSValueKeywordsin">trunk/Source/WebCore/css/CSSValueKeywords.in</a></li>
<li><a href="#trunkSourceWebCorecssStyleBuilderConverterh">trunk/Source/WebCore/css/StyleBuilderConverter.h</a></li>
<li><a href="#trunkSourceWebCorecssStyleBuilderCustomh">trunk/Source/WebCore/css/StyleBuilderCustom.h</a></li>
<li><a href="#trunkSourceWebCorecssStylePropertiescpp">trunk/Source/WebCore/css/StyleProperties.cpp</a></li>
<li><a href="#trunkSourceWebCorecssStyleResolvercpp">trunk/Source/WebCore/css/StyleResolver.cpp</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSParserFastPathscpp">trunk/Source/WebCore/css/parser/CSSParserFastPaths.cpp</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSPropertyParsercpp">trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp</a></li>
<li><a href="#trunkSourceWebCorepagescrollingAxisScrollSnapOffsetscpp">trunk/Source/WebCore/page/scrolling/AxisScrollSnapOffsets.cpp</a></li>
<li><a href="#trunkSourceWebCoreplatformcocoaScrollControllermm">trunk/Source/WebCore/platform/cocoa/ScrollController.mm</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxcpp">trunk/Source/WebCore/rendering/RenderBox.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderLayerModelObjectcpp">trunk/Source/WebCore/rendering/RenderLayerModelObject.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderViewcpp">trunk/Source/WebCore/rendering/RenderView.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderViewh">trunk/Source/WebCore/rendering/RenderView.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStylecpp">trunk/Source/WebCore/rendering/style/RenderStyle.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStyleh">trunk/Source/WebCore/rendering/style/RenderStyle.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStyleConstantsh">trunk/Source/WebCore/rendering/style/RenderStyleConstants.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleStyleRareNonInheritedDatacpp">trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleStyleRareNonInheritedDatah">trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleStyleScrollSnapPointscpp">trunk/Source/WebCore/rendering/style/StyleScrollSnapPoints.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleStyleScrollSnapPointsh">trunk/Source/WebCore/rendering/style/StyleScrollSnapPoints.h</a></li>
<li><a href="#trunkSourceWebCoretestingInternalscpp">trunk/Source/WebCore/testing/Internals.cpp</a></li>
<li><a href="#trunkSourceWebKit2ChangeLog">trunk/Source/WebKit2/ChangeLog</a></li>
<li><a href="#trunkSourceWebKit2WebProcessPluginsPDFPDFPluginmm">trunk/Source/WebKit2/WebProcess/Plugins/PDF/PDFPlugin.mm</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnap2dchangeaxistypeexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnap2dchangeaxistypehtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnap2doffsetscomputedindependentlyexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnap2doffsetscomputedindependentlyhtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapchildrenwithscrollsnapmarginexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapchildrenwithscrollsnapmarginhtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapchildrenwithtransformsexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapchildrenwithtransformshtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappositionsexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappositionsmainframeexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-mainframe-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappositionsmainframehtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-mainframe.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappositionsoverflowresizeexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-overflow-resize-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappositionsoverflowresizehtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-overflow-resize.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappositionshtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapstylechangedalignexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapstylechangedalignhtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapwithscrollpaddingexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapwithscrollpaddinghtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding.html</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkLayoutTestscss3scrollsnapimpropersnappointscrashexpectedtxt">trunk/LayoutTests/css3/scroll-snap/improper-snap-points-crash-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapimpropersnappointscrashhtml">trunk/LayoutTests/css3/scroll-snap/improper-snap-points-crash.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapcoordinateexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapcoordinatemainframeexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapcoordinatemainframehtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapcoordinateoverflowresizeexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapcoordinateoverflowresizehtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapcoordinatehtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapdesinationlockupexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapdesinationlockuphtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapnegativerepeatexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapnegativerepeathtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappositionvaluesexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnappositionvalueshtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapstylechangedcoordinatesexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapstylechangedcoordinateshtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapstylechangedrepeatexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapstylechangedrepeathtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat.html</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapsubpixelrepeatexpectedtxt">trunk/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3scrollsnapscrollsnapsubpixelrepeathtml">trunk/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat.html</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapdestinationlockupexpectedtxt">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt</a></li>
<li><a href="#trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapdestinationlockuphtml">trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html</a></li>
<li><a href="#trunkSourceWebCorecssLengthRepeath">trunk/Source/WebCore/css/LengthRepeat.h</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/ChangeLog 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,3 +1,163 @@
</span><ins>+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.
+
</ins><span class="cx"> 2016-12-20 Megan Gardner <megan_gardner@apple.com>
</span><span class="cx">
</span><span class="cx"> Fix memory leak in malformed test
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapimpropersnappointscrashexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/improper-snap-points-crash-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/improper-snap-points-crash-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/improper-snap-points-crash-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,15 +0,0 @@
</span><del>-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
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapimpropersnappointscrashhtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/improper-snap-points-crash.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/improper-snap-points-crash.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/improper-snap-points-crash.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,80 +0,0 @@
</span><del>-<!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>
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapnestedelementsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/nested-elements-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/nested-elements-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/nested-elements-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,7 +1,7 @@
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span><del>-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 }
</del><ins>+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 }
</ins><span class="cx"> PASS Scroll-snap offsets for 'invalidContainer': UNDEFINED
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapnestedelementshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/nested-elements.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/nested-elements.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/nested-elements.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -6,14 +6,12 @@
</span><span class="cx"> .scrollable {
</span><span class="cx"> overflow: scroll;
</span><span class="cx"> -webkit-overflow-scrolling: touch;
</span><del>- border: 1px dashed black;
</del><span class="cx"> height: 300px;
</span><span class="cx"> margin: 0 10px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .center-snap-receiver {
</span><del>- -webkit-scroll-snap-type: mandatory;
- -webkit-scroll-snap-destination: 0 0;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .snap-point {
</span><span class="lines">@@ -20,8 +18,8 @@
</span><span class="cx"> margin-top: 100px;
</span><span class="cx"> width: 15px;
</span><span class="cx"> height: 15px;
</span><del>- border: 1px solid black;
- -webkit-scroll-snap-coordinate: 0 0px;
</del><ins>+ background-color: blue;
+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .snap-point::after {
</span><span class="lines">@@ -32,11 +30,12 @@
</span><span class="cx">
</span><span class="cx"> .nested > .snap-point {
</span><span class="cx"> margin-left: 50px;
</span><del>- border: 1px solid red;
</del><ins>+ background-color: red;
</ins><span class="cx"> }
</span><span class="cx"> .nested > .nested > .snap-point {
</span><span class="cx"> margin-left: 100px;
</span><del>- border: 1px solid blue;
</del><ins>+ background-color: blue;
+ opacity: 0.1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .large-content {
</span><span class="lines">@@ -50,7 +49,6 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .invalidContainer {
</span><del>- border: 1px dashed black;
</del><span class="cx"> height: 300px;
</span><span class="cx"> margin: 0 10px;
</span><span class="cx"> opacity: 0.5;
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapresourcesiframecontenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/resources/iframe-content.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/resources/iframe-content.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/resources/iframe-content.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -16,13 +16,11 @@
</span><span class="cx"> height: 50px;
</span><span class="cx"> width: 400px;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .noInitial {
</span><del>- -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;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #item0 { background-color: red; }
</span><span class="lines">@@ -38,7 +36,7 @@
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><span class="cx"> <div style="width: 400px">
</span><del>- <div id="noInitial" class="horizontalGallery noInitial" style="-webkit-scroll-snap-destination: right bottom; -webkit-scroll-snap-coordinate: left top;">
</del><ins>+ <div id="noInitial" class="horizontalGallery noInitial">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -68,12 +66,11 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var noInitial = document.getElementById('noInitial');
</span><del>- 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%");
-
</del><ins>+ 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");
+ });
</ins><span class="cx"> if (top.succeeded)
</span><span class="cx"> top.debug("iframe processed all tests successfully.");
</span><span class="cx"> else
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnap2dchangeaxistypeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type-expected.txt (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,4 @@
</span><ins>+
+
+The scroll offsets are: horizontal = { 0, 400, 800 }, vertical = { 0, 400, 800 }
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnap2dchangeaxistypehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type.html (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-change-axis-type.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,77 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnap2doffsetscomputedindependentlyexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently-expected.txt (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,4 @@
</span><ins>+
+
+The scroll offsets are: horizontal = { 0, 400, 800 }, vertical = { 0, 400, 800 }
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnap2doffsetscomputedindependentlyhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently.html (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-2d-offsets-computed-independently.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,85 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapchildrenwithscrollsnapmarginexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin-expected.txt (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+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 }
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapchildrenwithscrollsnapmarginhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin.html (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-scroll-snap-margin.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,97 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapchildrenwithtransformsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms-expected.txt (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+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 }
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapchildrenwithtransformshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms.html (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-transforms.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,95 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapcoordinateexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,8 +0,0 @@
</span><del>-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
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapcoordinatemainframeexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,8 +0,0 @@
</span><del>-PASS successfullyParsed is true
-
-TEST COMPLETE
-Scroll-snap offsets: vertical = { 0, 600, 1200, 1800, 2400, 3000 }
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapcoordinatemainframehtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,47 +0,0 @@
</span><del>-<html>
-
-<head>
- <style>
- body {
- margin: 0;
- -webkit-scroll-snap-type: mandatory;
- }
-
- .vertical {
- width: 100%;
- height: 600px;
- -webkit-scroll-snap-coordinate: 0px 0px;
- }
- </style>
-
- <script src="../../resources/js-test-pre.js"></script>
- <script>
- function runTest()
- {
- debug("Scroll-snap offsets: " + window.internals.scrollSnapOffsets(document.body));
- finishJSTest();
- }
-
- function setup()
- {
- if (window.testRunner) {
- window.jsTestIsAsync = true;
- testRunner.dumpAsText();
- testRunner.waitUntilDone();
- setTimeout(runTest, 0);
- }
- }
- </script>
-</head>
-
-<body onload="setup()">
- <div id="child00" class="vertical"><div id="console"></div></div>
- <div id="child01" class="vertical"></div>
- <div id="child02" class="vertical"></div>
- <div id="child03" class="vertical"></div>
- <div id="child04" class="vertical"></div>
- <div id="child05" class="vertical"></div>
- <script src="../../resources/js-test-post.js"></script>
-</body>
-
-</html>
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapcoordinateoverflowresizeexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,9 +0,0 @@
</span><del>-PASS successfullyParsed is true
-
-TEST COMPLETE
-Scroll-snap offsets: vertical = { 0, 400, 800, 1200, 1600, 2000 }
-Scroll-snap offsets: vertical = { 0, 400, 800, 1200, 1600, 2000 }
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapcoordinateoverflowresizehtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,60 +0,0 @@
</span><del>-<html>
-
-<head>
- <style>
- #container {
- width: 420px;
- height: 400px;
- overflow-y: scroll;
- -webkit-scroll-snap-type: mandatory;
- }
-
- .cell {
- width: 400px;
- height: 400px;
- -webkit-scroll-snap-coordinate: 0% 0%;
- }
- </style>
- <script src="../../resources/js-test-pre.js"></script>
- <script>
- function setup()
- {
- var container = document.getElementById("container");
-
- function dumpSnapOffsetsAndFinishTest()
- {
- debug("Scroll-snap offsets: " + window.internals.scrollSnapOffsets(container));
- finishJSTest();
- }
-
- function dumpSnapOffsetsAndResizeElement()
- {
- debug("Scroll-snap offsets: " + window.internals.scrollSnapOffsets(container));
- container.style.width = "425px";
- setTimeout(dumpSnapOffsetsAndFinishTest, 0);
- }
-
- container.scrollTop = 800;
- if (window.testRunner) {
- window.jsTestIsAsync = true;
- testRunner.dumpAsText();
- testRunner.waitUntilDone();
- setTimeout(dumpSnapOffsetsAndResizeElement, 0);
- }
- }
- </script>
-</head>
-
-<body onload="setup()">
- <div id="container">
- <div class="cell"><div id="console"></div></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <script src="../../resources/js-test-post.js"></script>
-</body>
-
-</html>
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapcoordinatehtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,144 +0,0 @@
</span><del>-<!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>
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapdesinationlockupexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,20 +0,0 @@
</span><del>-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
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapdesinationlockuphtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-desination-lock-up.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,71 +0,0 @@
</span><del>-<!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>
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapelementscontainerlargerthanchildrenhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-elements-container-larger-than-children.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-elements-container-larger-than-children.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-elements-container-larger-than-children.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -7,8 +7,7 @@
</span><span class="cx"> height: 300px;
</span><span class="cx"> overflow-y: hidden;
</span><span class="cx"> overflow-x: auto;
</span><del>- -webkit-scroll-snap-points-x: elements;
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><span class="cx"> #inner-container {
</span><span class="cx"> width: 1800px;
</span><span class="lines">@@ -18,7 +17,7 @@
</span><span class="cx"> height: 300px;
</span><span class="cx"> float: left;
</span><span class="cx"> min-width: 200px;
</span><del>- -webkit-scroll-snap-coordinate: 0 0;
</del><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapinheritexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-inherit-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-inherit-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-inherit-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -3,86 +3,124 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-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"
</del><ins>+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"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapinherithtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-inherit.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-inherit.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-inherit.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -4,12 +4,12 @@
</span><span class="cx"> <style>
</span><span class="cx"> .topLevel {
</span><span class="cx"> width: 400px;
</span><del>- -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;
</del><ins>+ scroll-snap-type: x proximity;
+ scroll-snap-align: start end;
+ scroll-padding: 10%;
+ scroll-snap-margin: 5px 5px 10px 10px;
</ins><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .horizontalGallery {
</span><span class="cx"> width: 400px;
</span><span class="cx"> height: 50px;
</span><span class="lines">@@ -16,10 +16,12 @@
</span><span class="cx"> overflow-y: hidden;
</span><span class="cx"> overflow-x: auto;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .horizontalGalleryDrawer {
</span><span class="cx"> width: 3000px;
</span><span class="cx"> height: 50px;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .colorBox {
</span><span class="cx"> height: 50px;
</span><span class="cx"> width: 400px;
</span><span class="lines">@@ -27,63 +29,48 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .noInherit {
</span><del>- -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;
</del><ins>+ scroll-snap-type: mandatory;
+ scroll-snap-align: center;
+ scroll-padding: 20px;
+ scroll-snap-margin: 0 1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .inheritType {
</span><del>- -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;
</del><ins>+ scroll-snap-type: inherit;
+ scroll-snap-align: center;
+ scroll-padding: 20px;
+ scroll-snap-margin: 0 1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .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%;
</del><ins>+ .inheritAlign {
+ scroll-snap-type: mandatory;
+ scroll-snap-align: inherit;
+ scroll-padding: 20px;
+ scroll-snap-margin: 0 1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .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%;
</del><ins>+ .inheritPadding {
+ scroll-snap-type: mandatory;
+ scroll-snap-align: center;
+ scroll-padding: inherit;
+ scroll-snap-margin: 0 1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .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;
</del><ins>+ .inheritMargin {
+ scroll-snap-type: mandatory;
+ scroll-snap-align: center;
+ scroll-padding: 20px;
+ scroll-snap-margin: inherit;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .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;
- }
-
</del><span class="cx"> .inheritAll {
</span><del>- -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
</del><ins>+ scroll-snap-type: inherit;
+ scroll-snap-align: inherit;
+ scroll-padding: inherit;
+ scroll-snap-margin: inherit;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .inheritNone {
- }
</del><ins>+ .inheritNone { }
</ins><span class="cx">
</span><span class="cx"> #item0 { background-color: red; }
</span><span class="cx"> #item1 { background-color: green; }
</span><span class="lines">@@ -106,7 +93,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="inheritType" class="horizontalGallery inheritType" style="-webkit-scroll-snap-type: inherit;">
</del><ins>+ <div id="inheritType" class="horizontalGallery inheritType" style="scroll-snap-type: inherit;">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -116,7 +103,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="inheritXPoints" class="horizontalGallery inheritXPoints" style="-webkit-scroll-snap-points-x: inherit;">
</del><ins>+ <div id="inheritAlign" class="horizontalGallery inheritAlign" style="scroll-snap-align: inherit;">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -126,7 +113,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="inheritYPoints" class="horizontalGallery inheritYPoints" style="-webkit-scroll-snap-points-y: inherit;">
</del><ins>+ <div id="inheritPadding" class="horizontalGallery inheritPadding" style="scroll-padding: inherit;">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -136,7 +123,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="inheritDestination" class="horizontalGallery inheritDestination" style="-webkit-scroll-snap-destination: inherit;">
</del><ins>+ <div id="inheritMargin" class="horizontalGallery inheritMargin" style="scroll-snap-margin: inherit;">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -146,7 +133,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="inheritSnapCoordinate" class="horizontalGallery inheritSnapCoordinate" style="-webkit-scroll-snap-coordinate: inherit;">
</del><ins>+ <div id="inheritAll" class="horizontalGallery inheritAll" style="scroll-snap-type: inherit; scroll-snap-align: inherit; scroll-padding: inherit; scroll-snap-margin: inherit;">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -156,16 +143,6 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <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 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>
</del><span class="cx"> <div id="inheritNone" class="horizontalGallery inheritNone">
</span><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="lines">@@ -182,100 +159,136 @@
</span><span class="cx"> description("Tests 'inherit' on scroll snap properties.");
</span><span class="cx">
</span><span class="cx"> var noInherit = document.getElementById('noInherit');
</span><del>- 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");
</del><ins>+ 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("");
</ins><span class="cx">
</span><span class="cx"> var inheritType = document.getElementById('inheritType');
</span><del>- 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");
</del><ins>+ 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("");
</ins><span class="cx">
</span><del>- 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%");
</del><ins>+ 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("");
</ins><span class="cx">
</span><del>- 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%");
</del><ins>+ 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("");
</ins><span class="cx">
</span><del>- 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");
</del><ins>+ 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("");
</ins><span class="cx">
</span><del>- 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");
-
</del><span class="cx"> var inheritAll = document.getElementById('inheritAll');
</span><del>- 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");
</del><ins>+ 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("");
</ins><span class="cx">
</span><span class="cx"> var inheritNone = document.getElementById('inheritNone');
</span><del>- 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");
</del><ins>+ 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");
</ins><span class="cx"> </script>
</span><span class="cx"> <script src="../../resources/js-test-post.js"></script>
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapinitialexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-initial-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-initial-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-initial-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -3,86 +3,54 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-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"
</del><ins>+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"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapinitialhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-initial.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-initial.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-initial.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -30,59 +30,45 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .noInitial {
</span><del>- -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;
</del><ins>+ scroll-snap-type: both;
+ scroll-snap-align: center;
+ scroll-padding: 20px;
+ scroll-snap-margin: 1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .initialType {
</span><del>- -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;
</del><ins>+ scroll-snap-type: initial;
+ scroll-snap-align: center;
+ scroll-padding: 20px;
+ scroll-snap-margin: 1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .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%;
</del><ins>+ .initialPadding {
+ scroll-snap-type: both;
+ scroll-snap-align: center;
+ scroll-padding: initial;
+ scroll-snap-margin: 1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .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%;
</del><ins>+ .initialMargin {
+ scroll-snap-type: both;
+ scroll-snap-align: center;
+ scroll-padding: 20px;
+ scroll-snap-margin: initial;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .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;
</del><ins>+ .initialAlign {
+ scroll-snap-type: both;
+ scroll-snap-align: initial;
+ scroll-padding: 20px;
+ scroll-snap-margin: 1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .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;
- }
-
</del><span class="cx"> .allInitial {
</span><del>- -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
</del><ins>+ scroll-snap-type: initial;
+ scroll-snap-align: initial;
+ scroll-padding: initial;
+ scroll-snap-margin: initial;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #item0 { background-color: red; }
</span><span class="lines">@@ -106,7 +92,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="initialType" class="horizontalGallery initialType" style="-webkit-scroll-snap-type: initial">
</del><ins>+ <div id="initialType" class="horizontalGallery initialType" style="scroll-snap-type: initial">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -116,7 +102,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="initialXPoints" class="horizontalGallery initialXPoints" style="-webkit-scroll-snap-points-x: initial">
</del><ins>+ <div id="initialPadding" class="horizontalGallery initialPadding" style="scroll-padding: initial">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -126,7 +112,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="initialYPoints" class="horizontalGallery initialYPoints" style="-webkit-scroll-snap-points-y: initial">
</del><ins>+ <div id="initialMargin" class="horizontalGallery initialMargin" style="scroll-snap-margin: initial">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -136,7 +122,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="initialDestination" class="horizontalGallery initialDestination" style="-webkit-scroll-snap-destination: initial">
</del><ins>+ <div id="initialAlign" class="horizontalGallery initialAlign" style="scroll-snap-align: initial">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -146,7 +132,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="initialSnapCoordinate" class="horizontalGallery initialSnapCoordinate" style="-webkit-scroll-snap-coordinate: initial">
</del><ins>+ <div id="allInitial" class="horizontalGallery allInitial" style="scroll-snap-type: initial; scroll-padding: initial; scroll-snap-margin: initial; scroll-snap-align: initial;">
</ins><span class="cx"> <div class="horizontalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -156,17 +142,7 @@
</span><span class="cx"> <div id="item5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <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="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">
</del><ins>+ <div id="allInitialY" class="verticalGallery noInitial" style="scroll-snap-type: initial; scroll-padding: initial; scroll-snap-margin: initial; scroll-snap-align: initial;">
</ins><span class="cx"> <div class="verticalGalleryDrawer">
</span><span class="cx"> <div id="item0" class="colorBox"></div>
</span><span class="cx"> <div id="item1" class="colorBox"></div>
</span><span class="lines">@@ -182,100 +158,64 @@
</span><span class="cx"> description("Tests 'initial' on scroll snap properties.");
</span><span class="cx">
</span><span class="cx"> var noInitial = document.getElementById('noInitial');
</span><del>- 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");
</del><ins>+ 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");
</ins><span class="cx">
</span><span class="cx"> var initialType = document.getElementById('initialType');
</span><del>- 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");
</del><ins>+ 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");
</ins><span class="cx">
</span><del>- 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%");
</del><ins>+ 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");
</ins><span class="cx">
</span><del>- 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%");
</del><ins>+ 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");
</ins><span class="cx">
</span><del>- 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");
</del><ins>+ 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");
</ins><span class="cx">
</span><del>- 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");
-
</del><span class="cx"> var allInitial = document.getElementById('allInitial');
</span><del>- 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");
</del><ins>+ 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");
</ins><span class="cx"> </script>
</span><span class="cx"> <script src="../../resources/js-test-post.js"></script>
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapmismatchhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-mismatch.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-mismatch.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-mismatch.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -8,14 +8,17 @@
</span><span class="cx"> overflow-y: hidden;
</span><span class="cx"> overflow-x: auto;
</span><span class="cx"> margin-bottom: 2px;
</span><del>- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><del>- .horizontal-good {
- -webkit-scroll-snap-points-x: repeat(300px);
</del><ins>+
+ .good {
+ scroll-snap-align: start none;
</ins><span class="cx"> }
</span><del>- .horizontal-bad {
- -webkit-scroll-snap-points-y: repeat(100vh);
</del><ins>+
+ .bad {
+ scroll-snap-align: none start;
</ins><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .horizontalGalleryDrawer {
</span><span class="cx"> width: 1800px;
</span><span class="cx"> height: 300px;
</span><span class="lines">@@ -62,22 +65,22 @@
</span><span class="cx"> <div>Tests that the scroll-snap feature works properly with mixed-up snap points.</div>
</span><span class="cx"> <div class="horizontalGallery horizontal-bad" id="badHorizontalTarget">
</span><span class="cx"> <div class="horizontalGalleryDrawer">
</span><del>- <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>
</del><ins>+ <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>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div class="horizontalGallery horizontal-good" id="horizontalTarget">
</span><span class="cx"> <div class="horizontalGalleryDrawer">
</span><del>- <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>
</del><ins>+ <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>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div id="console"></div>
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapnegativerepeatexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,9 +0,0 @@
</span><del>-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
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapnegativerepeathtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-negative-repeat.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,21 +0,0 @@
</span><del>-<!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>
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapoffsetsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-offsets-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-offsets-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-offsets-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -2,16 +2,16 @@
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span><del>-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 }
</del><ins>+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 }
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapoffsetshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-offsets.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-offsets.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-offsets.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -21,9 +21,7 @@
</span><span class="cx"> overflow-x: auto;
</span><span class="cx"> margin: 2px;
</span><span class="cx"> -webkit-overflow-scrolling: touch;
</span><del>- -webkit-scroll-snap-points-x: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
- -webkit-scroll-snap-coordinate: 50% 50%;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .horizontalGalleryDrawer {
</span><span class="cx"> width: 180px;
</span><span class="lines">@@ -37,9 +35,7 @@
</span><span class="cx"> overflow-y: auto;
</span><span class="cx"> margin: 2px;
</span><span class="cx"> -webkit-overflow-scrolling: touch;
</span><del>- -webkit-scroll-snap-points-y: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
- -webkit-scroll-snap-coordinate: 50% 50%;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .verticalGalleryDrawer {
</span><span class="cx"> width: 30px;
</span><span class="lines">@@ -50,6 +46,9 @@
</span><span class="cx"> width: 30px;
</span><span class="cx"> float: left;
</span><span class="cx"> }
</span><ins>+ .colorBox {
+ scroll-snap-align: start;
+ }
</ins><span class="cx"> #itemH0, #itemV0 { background-color: red; }
</span><span class="cx"> #itemH1, #itemV1 { background-color: green; }
</span><span class="cx"> #itemH2, #itemV2 { background-color: blue; }
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappositionvaluesexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,99 +0,0 @@
</span><del>-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
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappositionvalueshtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,310 +0,0 @@
</span><del>-<!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>
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappositionsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-expected.txt (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappositionsmainframeexpectedtxtfromrev210023trunkLayoutTestscss3scrollsnapscrollsnapcoordinatemainframeexpectedtxt"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-mainframe-expected.txt (from rev 210023, trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe-expected.txt) (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-mainframe-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-mainframe-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+PASS successfullyParsed is true
+
+TEST COMPLETE
+Scroll-snap offsets: vertical = { 0, 600, 1200, 1800, 2400, 3000 }
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappositionsmainframehtmlfromrev210023trunkLayoutTestscss3scrollsnapscrollsnapcoordinatemainframehtml"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-mainframe.html (from rev 210023, trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-mainframe.html) (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-mainframe.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-mainframe.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,47 @@
</span><ins>+<html>
+
+<head>
+ <style>
+ body {
+ margin: 0;
+ scroll-snap-type: y mandatory;
+ }
+
+ .vertical {
+ width: 100%;
+ height: 600px;
+ scroll-snap-align: start;
+ }
+ </style>
+
+ <script src="../../resources/js-test-pre.js"></script>
+ <script>
+ function runTest()
+ {
+ debug("Scroll-snap offsets: " + window.internals.scrollSnapOffsets(document.body));
+ finishJSTest();
+ }
+
+ function setup()
+ {
+ if (window.testRunner) {
+ window.jsTestIsAsync = true;
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+ setTimeout(runTest, 0);
+ }
+ }
+ </script>
+</head>
+
+<body onload="setup()">
+ <div id="child00" class="vertical"><div id="console"></div></div>
+ <div id="child01" class="vertical"></div>
+ <div id="child02" class="vertical"></div>
+ <div id="child03" class="vertical"></div>
+ <div id="child04" class="vertical"></div>
+ <div id="child05" class="vertical"></div>
+ <script src="../../resources/js-test-post.js"></script>
+</body>
+
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappositionsoverflowresizeexpectedtxtfromrev210023trunkLayoutTestscss3scrollsnapscrollsnapcoordinateoverflowresizeexpectedtxt"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-overflow-resize-expected.txt (from rev 210023, trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize-expected.txt) (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-overflow-resize-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-overflow-resize-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+PASS successfullyParsed is true
+
+TEST COMPLETE
+Scroll-snap offsets: vertical = { 0, 400, 800, 1200, 1600, 2000 }
+Scroll-snap offsets: vertical = { 0, 400, 800, 1200, 1600, 2000 }
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappositionsoverflowresizehtmlfromrev210023trunkLayoutTestscss3scrollsnapscrollsnapcoordinateoverflowresizehtml"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-overflow-resize.html (from rev 210023, trunk/LayoutTests/css3/scroll-snap/scroll-snap-coordinate-overflow-resize.html) (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-overflow-resize.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions-overflow-resize.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,60 @@
</span><ins>+<html>
+
+<head>
+ <style>
+ #container {
+ width: 420px;
+ height: 400px;
+ overflow-y: scroll;
+ scroll-snap-type: y mandatory;
+ }
+
+ .cell {
+ width: 400px;
+ height: 400px;
+ scroll-snap-align: start;
+ }
+ </style>
+ <script src="../../resources/js-test-pre.js"></script>
+ <script>
+ function setup()
+ {
+ var container = document.getElementById("container");
+
+ function dumpSnapOffsetsAndFinishTest()
+ {
+ debug("Scroll-snap offsets: " + window.internals.scrollSnapOffsets(container));
+ finishJSTest();
+ }
+
+ function dumpSnapOffsetsAndResizeElement()
+ {
+ debug("Scroll-snap offsets: " + window.internals.scrollSnapOffsets(container));
+ container.style.width = "425px";
+ setTimeout(dumpSnapOffsetsAndFinishTest, 0);
+ }
+
+ container.scrollTop = 800;
+ if (window.testRunner) {
+ window.jsTestIsAsync = true;
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+ setTimeout(dumpSnapOffsetsAndResizeElement, 0);
+ }
+ }
+ </script>
+</head>
+
+<body onload="setup()">
+ <div id="container">
+ <div class="cell"><div id="console"></div></div>
+ <div class="cell"></div>
+ <div class="cell"></div>
+ <div class="cell"></div>
+ <div class="cell"></div>
+ <div class="cell"></div>
+ </div>
+ <script src="../../resources/js-test-post.js"></script>
+</body>
+
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappositionshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions.html (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-positions.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,156 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappropertycomputedstyleexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,182 +1,235 @@
</span><del>-Test the computed style of the -webkit-scroll-snap-* properties.
</del><ins>+Test the computed style of the scroll-snap-* properties.
</ins><span class="cx">
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><span class="cx">
</span><del>-invalid snapping type : potato
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'none'
</del><ins>+invalid snap type: `potato`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
</ins><span class="cx">
</span><del>-invalid points along x axis : hello world
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'none'
</del><ins>+empty string for snap type: ``
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
</ins><span class="cx">
</span><del>-invalid points along y axis : hello world
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'none'
</del><ins>+too many values: `block mandatory proximity`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
</ins><span class="cx">
</span><del>-typo in point definition : repaet(50px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'none'
</del><ins>+none following axis: `both none`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
</ins><span class="cx">
</span><del>-another invalid point definition : ??px repeat(50px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'none'
</del><ins>+two axis values: `block inline`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
</ins><span class="cx">
</span><del>-invalid destination : foo bar
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0px 0px'
</del><ins>+two strictness values: `proximity mandatory`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
</ins><span class="cx">
</span><del>-short one destination value : 50%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0px 0px'
</del><ins>+axis following strictness: `mandatory inline`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
</ins><span class="cx">
</span><del>-extra destination value : 50px 100% 75px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0px 0px'
</del><ins>+initial value: `initial`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
</ins><span class="cx">
</span><del>-invalid coordinates : ben bitdiddle
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is 'none'
</del><ins>+only strictness: `mandatory`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'both mandatory'
</ins><span class="cx">
</span><del>-mismatched x coordinate : 50% 100px 75%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is 'none'
</del><ins>+only axis: `both`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'both proximity'
</ins><span class="cx">
</span><del>-inherited type : inherit
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'none'
</del><ins>+none: `none`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
</ins><span class="cx">
</span><del>-initial type : initial
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'none'
</del><ins>+strictness following axis: `inline mandatory`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'inline mandatory'
</ins><span class="cx">
</span><del>-none type : none
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'none'
</del><ins>+invalid snap align: `potato`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
</ins><span class="cx">
</span><del>-mandatory type : mandatory
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'mandatory'
</del><ins>+empty string: ``
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
</ins><span class="cx">
</span><del>-proximity type : proximity
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-type') is 'proximity'
</del><ins>+too many values: `start center end`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
</ins><span class="cx">
</span><del>-inherited points along x axis : inherit
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'none'
</del><ins>+invalid second value: `start wut`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
</ins><span class="cx">
</span><del>-initial points along x axis : initial
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'none'
</del><ins>+invalid first value: `wat center`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
</ins><span class="cx">
</span><del>-element points along x axis : elements
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'elements'
</del><ins>+one length: `10px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
</ins><span class="cx">
</span><del>-percentage points along x axis : 100% 50%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '100% 50%'
</del><ins>+two lengths: `10px 50px`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
</ins><span class="cx">
</span><del>-pixel points along x axis : 100px 50px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '100px 50px'
</del><ins>+initial value: `initial`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
</ins><span class="cx">
</span><del>-percentage points repeat along x axis : repeat(100%)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'repeat(100%)'
</del><ins>+single value: `start`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'start start'
</ins><span class="cx">
</span><del>-pixel points repeat along x axis : repeat(25px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is 'repeat(25px)'
</del><ins>+two values: `start end`
+PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'start end'
</ins><span class="cx">
</span><del>-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%)'
</del><ins>+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'
</ins><span class="cx">
</span><del>-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%)'
</del><ins>+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'
</ins><span class="cx">
</span><del>-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)'
</del><ins>+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'
</ins><span class="cx">
</span><del>-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)'
</del><ins>+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'
</ins><span class="cx">
</span><del>-inherited points along y axis : inherit
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'none'
</del><ins>+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'
</ins><span class="cx">
</span><del>-initial points along y axis : initial
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'none'
</del><ins>+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%'
</ins><span class="cx">
</span><del>-element points along y axis : elements
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'elements'
</del><ins>+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'
</ins><span class="cx">
</span><del>-percentage points along y axis : 100% 50%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is '100% 50%'
</del><ins>+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%'
</ins><span class="cx">
</span><del>-pixel points along y axis : 100px 50px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is '100px 50px'
</del><ins>+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%)'
</ins><span class="cx">
</span><del>-percentage points repeat along y axis : repeat(100%)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'repeat(100%)'
</del><ins>+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'
</ins><span class="cx">
</span><del>-pixel points repeat along y axis : repeat(25px)
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-y') is 'repeat(25px)'
</del><ins>+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'
</ins><span class="cx">
</span><del>-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%)'
</del><ins>+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'
</ins><span class="cx">
</span><del>-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%)'
</del><ins>+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'
</ins><span class="cx">
</span><del>-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)'
</del><ins>+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'
</ins><span class="cx">
</span><del>-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)'
</del><ins>+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'
</ins><span class="cx">
</span><del>-inherited destination : inherit
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0px 0px'
</del><ins>+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'
</ins><span class="cx">
</span><del>-initial destination : initial
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0px 0px'
</del><ins>+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'
</ins><span class="cx">
</span><del>-pixel/pixel destination : 10px 50px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '10px 50px'
</del><ins>+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'
</ins><span class="cx">
</span><del>-pixel/percentage destination : 20px 40%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '20px 40%'
</del><ins>+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'
</ins><span class="cx">
</span><del>-percentage/pixel destination : 0% 0px
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '0% 0px'
</del><ins>+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'
</ins><span class="cx">
</span><del>-percentage/percentage destination : 5% 100%
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '5% 100%'
</del><ins>+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'
</ins><span class="cx">
</span><del>-inherited coordinate : inherit
-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is 'none'
</del><ins>+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'
</ins><span class="cx">
</span><del>-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'
</del><ins>+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'
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappropertycomputedstylejs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style.js (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style.js 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style.js 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,4 +1,4 @@
</span><del>-description("Test the computed style of the -webkit-scroll-snap-* properties.");
</del><ins>+description("Test the computed style of the scroll-snap-* properties.");
</ins><span class="cx">
</span><span class="cx"> var stylesheet;
</span><span class="cx"> var styleElement = document.createElement("style");
</span><span class="lines">@@ -5,81 +5,78 @@
</span><span class="cx"> document.head.appendChild(styleElement);
</span><span class="cx"> stylesheet = styleElement.sheet;
</span><span class="cx">
</span><del>-function testComputedScrollSnapRule(description, snapProperty, rule, expected)
</del><ins>+function testComputedScrollSnapRule(description, snapProperty, rule, expected, expectedShorthands = {})
</ins><span class="cx"> {
</span><span class="cx"> debug("");
</span><del>- debug(description + " : " + rule);
</del><ins>+ debug(`${description}: \`${rule}\``);
</ins><span class="cx">
</span><del>- stylesheet.insertRule("body { -webkit-scroll-snap-" + snapProperty + ": " + rule + "; }", 0);
</del><ins>+ stylesheet.insertRule(`body { ${snapProperty} : ${rule}; }`, 0);
</ins><span class="cx">
</span><del>- shouldBe("window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-" + snapProperty + "')", "'" + expected + "'");
</del><ins>+ shouldBe(`window.getComputedStyle(document.body).getPropertyValue('${snapProperty}')`, `'${expected}'`);
+ for (let shorthand in expectedShorthands)
+ shouldBe(`window.getComputedStyle(document.body).getPropertyValue('${snapProperty}-${shorthand}')`, `'${expectedShorthands[shorthand]}'`);
</ins><span class="cx"> stylesheet.deleteRule(0);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-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");
</del><ins>+// 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");
</ins><span class="cx">
</span><del>-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");
</del><ins>+// 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");
</ins><span class="cx">
</span><del>-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)");
</del><ins>+// 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" });
</ins><span class="cx">
</span><del>-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)");
</del><ins>+// 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" });
</ins><span class="cx">
</span><del>-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");
-
</del><span class="cx"> successfullyParsed = true;
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappropertyparsingexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-parsing-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-parsing-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-parsing-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,238 +1,113 @@
</span><del>-Test the parsing of the -webkit-scroll-snap-* properties.
</del><ins>+Test the parsing of the scroll-snap-* properties.
</ins><span class="cx">
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><span class="cx">
</span><del>-inherited type : inherit
</del><ins>+initial value : initial
</ins><span class="cx"> PASS cssRule.type is 1
</span><span class="cx"> PASS declaration.length is 1
</span><del>-PASS declaration.getPropertyValue('-webkit-scroll-snap-type') is 'inherit'
</del><ins>+PASS declaration.getPropertyValue('scroll-snap-type') is 'initial'
</ins><span class="cx">
</span><del>-initial type : initial
</del><ins>+only strictness : mandatory
</ins><span class="cx"> PASS cssRule.type is 1
</span><span class="cx"> PASS declaration.length is 1
</span><del>-PASS declaration.getPropertyValue('-webkit-scroll-snap-type') is 'initial'
</del><ins>+PASS declaration.getPropertyValue('scroll-snap-type') is 'mandatory'
</ins><span class="cx">
</span><del>-inherited points-x : inherit
</del><ins>+only axis : both
</ins><span class="cx"> PASS cssRule.type is 1
</span><span class="cx"> PASS declaration.length is 1
</span><del>-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is 'inherit'
</del><ins>+PASS declaration.getPropertyValue('scroll-snap-type') is 'both'
</ins><span class="cx">
</span><del>-initial points-x : initial
</del><ins>+none : none
</ins><span class="cx"> PASS cssRule.type is 1
</span><span class="cx"> PASS declaration.length is 1
</span><del>-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is 'initial'
</del><ins>+PASS declaration.getPropertyValue('scroll-snap-type') is 'none'
</ins><span class="cx">
</span><del>-inherited points-y : inherit
</del><ins>+strictness following axis : inline mandatory
</ins><span class="cx"> PASS cssRule.type is 1
</span><span class="cx"> PASS declaration.length is 1
</span><del>-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is 'inherit'
</del><ins>+PASS declaration.getPropertyValue('scroll-snap-type') is 'inline mandatory'
</ins><span class="cx">
</span><del>-initial points-y : initial
</del><ins>+initial value : initial
</ins><span class="cx"> PASS cssRule.type is 1
</span><span class="cx"> PASS declaration.length is 1
</span><del>-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-y') is 'initial'
</del><ins>+PASS declaration.getPropertyValue('scroll-snap-align') is 'initial'
</ins><span class="cx">
</span><del>-inherited destination : inherit
</del><ins>+single value : start
</ins><span class="cx"> PASS cssRule.type is 1
</span><span class="cx"> PASS declaration.length is 1
</span><del>-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is 'inherit'
</del><ins>+PASS declaration.getPropertyValue('scroll-snap-align') is 'start'
</ins><span class="cx">
</span><del>-initial destination : initial
</del><ins>+two values : start end
</ins><span class="cx"> PASS cssRule.type is 1
</span><span class="cx"> PASS declaration.length is 1
</span><del>-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is 'initial'
</del><ins>+PASS declaration.getPropertyValue('scroll-snap-align') is 'start end'
</ins><span class="cx">
</span><del>-inherited coordinate : inherit
</del><ins>+single length : 10px
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is 'inherit'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '10px'
</ins><span class="cx">
</span><del>-initial coordinate : initial
</del><ins>+two percentages : 10% 20%
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is 'initial'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '10% 20%'
</ins><span class="cx">
</span><del>-mandatory type : mandatory
</del><ins>+three lengths : 1px 2px 3px
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-type') is 'mandatory'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '1px 2px 3px'
</ins><span class="cx">
</span><del>-proximity type : proximity
</del><ins>+four values : 50px 10% 20% 50px
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-type') is 'proximity'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '50px 10% 20% 50px'
</ins><span class="cx">
</span><del>-element points along x axis : elements
</del><ins>+calc expression : calc(50px + 10%) 20px
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is 'elements'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is 'calc(50px + 10%) 20px'
</ins><span class="cx">
</span><del>-percentage points along x axis : 100% 50%
</del><ins>+various units : 1em 5mm 2in 4cm
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100% 50%'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '1em 5mm 2in 4cm'
</ins><span class="cx">
</span><del>-pixel points along x axis : 100px 50px
</del><ins>+subpixel values : 10.4375px 6.5px
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100px 50px'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-padding') is '10.4375px 6.5px'
</ins><span class="cx">
</span><del>-percentage points repeat along x axis : repeat(100%)
</del><ins>+single length : 10px
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is 'repeat(100%)'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '10px'
</ins><span class="cx">
</span><del>-pixe points repeat along x axis : repeat(25px)
</del><ins>+two lengths : 10px 20px
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is 'repeat(25px)'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '10px 20px'
</ins><span class="cx">
</span><del>-percentage points along x axis with percentage repeat : 100% repeat(100%)
</del><ins>+three lengths : 1px 2px 3px
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100% repeat(100%)'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '1px 2px 3px'
</ins><span class="cx">
</span><del>-pixel points along x axis with percentage repeat : 100px 50px repeat(25%)
</del><ins>+four lengths : 50px 10px 20px 50px
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100px 50px repeat(25%)'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '50px 10px 20px 50px'
</ins><span class="cx">
</span><del>-percentage points along x axis with pixel repeat : 100% 50% repeat(40px)
</del><ins>+various units : 1em 5mm 2in 4cm
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-points-x') is '100% 50% repeat(40px)'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '1em 5mm 2in 4cm'
</ins><span class="cx">
</span><del>-pixel points along x axis with pixel repeat : 100px repeat(42px)
</del><ins>+subpixel values : 10.4375px 6.5px
</ins><span class="cx"> PASS cssRule.type is 1
</span><del>-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)'
-
-in along x axis with pixel repeat : 100in repeat(42in)
-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'
-
-pixel/percentage destination : 20px 40%
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '20px 40%'
-
-percentage/pixel destination : 0% 0px
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '0% 0px'
-
-percentage/percentage destination : 5% 100%
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '5% 100%'
-
-em/ex destination : 12em 16ex
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '12em 16ex'
-
-in/cm destination : 2in 5cm
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-destination') is '2in 5cm'
-
-single pixel coordinate : 50px 100px
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '50px 100px'
-
-single percentage coordinate : 50% 100%
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '50% 100%'
-
-multiple pixel coordinates : 50px 100px 150px 100px 200px 100px
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '50px 100px 150px 100px 200px 100px'
-
-multiple percentage coordinates : 50% 100% 150% 100% 200% 100%
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '50% 100% 150% 100% 200% 100%'
-
-em/ex coordinate : 12em 16ex 16em 12ex
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '12em 16ex 16em 12ex'
-
-in/cm coordinate : 2in 5cm 5in 2cm
-PASS cssRule.type is 1
-PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-scroll-snap-coordinate') is '2in 5cm 5in 2cm'
</del><ins>+PASS declaration.length is 4
+PASS declaration.getPropertyValue('scroll-snap-margin') is '10.4375px 6.5px'
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappropertyparsingjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-parsing.js (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-parsing.js 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-parsing.js 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,4 +1,4 @@
</span><del>-description("Test the parsing of the -webkit-scroll-snap-* properties.");
</del><ins>+description("Test the parsing of the scroll-snap-* properties.");
</ins><span class="cx">
</span><span class="cx"> var stylesheet, cssRule, declaration;
</span><span class="cx"> var styleElement = document.createElement("style");
</span><span class="lines">@@ -5,78 +5,41 @@
</span><span class="cx"> document.head.appendChild(styleElement);
</span><span class="cx"> stylesheet = styleElement.sheet;
</span><span class="cx">
</span><del>-function testScrollSnapRule(description, snapProperty, rule, expectedValue)
</del><ins>+function testScrollSnapRule(description, snapProperty, rule, expectedValue, expectedLength)
</ins><span class="cx"> {
</span><span class="cx"> debug("");
</span><span class="cx"> debug(description + " : " + rule);
</span><span class="cx">
</span><del>- stylesheet.insertRule("body { -webkit-scroll-snap-" + snapProperty + ": " + rule + "; }", 0);
</del><ins>+ stylesheet.insertRule(`body { ${snapProperty} : ${rule}; }`, 0);
</ins><span class="cx"> cssRule = stylesheet.cssRules.item(0);
</span><span class="cx">
</span><span class="cx"> shouldBe("cssRule.type", "1");
</span><span class="cx">
</span><span class="cx"> declaration = cssRule.style;
</span><del>- shouldBe("declaration.length", "1");
- shouldBe("declaration.getPropertyValue('-webkit-scroll-snap-" + snapProperty + "')", "'" + expectedValue + "'");
</del><ins>+ shouldBe("declaration.length", `${expectedLength}`);
+ shouldBe(`declaration.getPropertyValue('${snapProperty}')`, `'${expectedValue}'`);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-testScrollSnapRule("inherited type", "type", "inherit", "inherit");
-testScrollSnapRule("initial type", "type", "initial", "initial");
</del><ins>+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);
</ins><span class="cx">
</span><del>-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");
-
</del><span class="cx"> successfullyParsed = true;
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapstylechangedalignexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align-expected.txt (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapstylechangedalignhtmlfromrev210023trunkLayoutTestscss3scrollsnapscrollsnapstylechangedcoordinateshtml"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align.html (from rev 210023, trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates.html) (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-align.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,74 @@
</span><ins>+<html>
+
+ <head>
+ <style>
+ #gallery {
+ width: 315px;
+ height: 600px;
+ scroll-snap-type: y mandatory;
+ -webkit-overflow-scrolling: touch;
+ overflow-y: scroll;
+ position: absolute;
+ }
+
+ .vertical {
+ width: 300px;
+ height: 300px;
+ scroll-snap-align: start;
+ position: absolute;
+ }
+
+ #child00 { background-color: #DD0000; left: 0; top: 0px; }
+ #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>
+ function setup() {
+ var gallery = document.getElementById("gallery");
+ var coordinateChildElements = document.getElementsByClassName("vertical");
+
+ function snapOffsets() {
+ return window.internals.scrollSnapOffsets(gallery);
+ }
+
+ function dumpGalleryAndUpdateCoordinates() {
+ debug("Original snap offsets with `start` alignment: " + snapOffsets());
+ for (var index = 0; index < coordinateChildElements.length; ++index)
+ coordinateChildElements[index].style.scrollSnapAlign = "center";
+
+ setTimeout(dumpGalleryAndFinishTest, 0);
+ }
+
+ function dumpGalleryAndFinishTest() {
+ debug("Updated alignment to `center`: " + snapOffsets());
+ finishJSTest();
+ testRunner.notifyDone();
+ }
+
+ if (window.testRunner) {
+ window.jsTestIsAsync = true;
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+ setTimeout(dumpGalleryAndUpdateCoordinates, 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>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapstylechangedcoordinatesexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,9 +0,0 @@
</span><del>-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
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapstylechangedcoordinateshtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-coordinates.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,74 +0,0 @@
</span><del>-<html>
-
- <head>
- <style>
- #gallery {
- width: 515px;
- height: 500px;
- -webkit-scroll-snap-type: mandatory;
- -webkit-overflow-scrolling: touch;
- overflow-y: scroll;
- position: absolute;
- }
-
- .vertical {
- width: 500px;
- height: 500px;
- -webkit-scroll-snap-coordinate: 0% 0%;
- 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; }
- </style>
- <script src="../../resources/js-test-pre.js"></script>
- <script>
- function setup() {
- var gallery = document.getElementById("gallery");
- var coordinateChildElements = document.getElementsByClassName("vertical");
-
- function snapOffsets() {
- return window.internals.scrollSnapOffsets(gallery);
- }
-
- function dumpGalleryAndUpdateCoordinates() {
- debug("Original snap offsets: " + snapOffsets());
- for (var index = 0; index < coordinateChildElements.length; ++index)
- coordinateChildElements[index].style.webkitScrollSnapCoordinate = "0px 250px";
-
- setTimeout(dumpGalleryAndFinishTest, 0);
- }
-
- function dumpGalleryAndFinishTest() {
- debug("Updated child coordinates to 0px 250px: " + snapOffsets());
- finishJSTest();
- testRunner.notifyDone();
- }
-
- if (window.testRunner) {
- window.jsTestIsAsync = true;
- testRunner.dumpAsText();
- testRunner.waitUntilDone();
- setTimeout(dumpGalleryAndUpdateCoordinates, 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>
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapstylechangedrepeatexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,11 +0,0 @@
</span><del>-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
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapstylechangedrepeathtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-style-changed-repeat.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,83 +0,0 @@
</span><del>-<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>
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapsubpixelrepeatexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,13 +0,0 @@
</span><del>-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
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapsubpixelrepeathtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-subpixel-repeat.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,71 +0,0 @@
</span><del>-<!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>
</del></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapwithscrollpaddingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding-expected.txt (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+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 }
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnapwithscrollpaddinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding.html (0 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-with-scroll-padding.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -0,0 +1,93 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -2232,7 +2232,6 @@
</span><span class="cx"> compositing/geometry/ancestor-overflow-change.html [ Failure ]
</span><span class="cx"> compositing/layer-creation/will-change-layer-creation.html [ Failure ]
</span><span class="cx"> css3/scroll-snap/nested-elements.html [ Failure ]
</span><del>-css3/scroll-snap/scroll-snap-coordinate.html [ Failure ]
</del><span class="cx"> fast/block/lineboxcontain/block-with-ideographs.xhtml [ Failure ]
</span><span class="cx"> fast/css/text-overflow-ellipsis-text-align-center.html [ Failure ]
</span><span class="cx"> fast/css/text-overflow-ellipsis-text-align-left.html [ Failure ]
</span></span></pre></div>
<a id="trunkLayoutTestsplatformmacwk2TestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/mac-wk2/TestExpectations (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac-wk2/TestExpectations 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/platform/mac-wk2/TestExpectations 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -267,7 +267,6 @@
</span><span class="cx"> webkit.org/b/136554 tiled-drawing/scrolling/frames/frameset-nested-frame-scrollability.html [ Pass Failure ]
</span><span class="cx"> webkit.org/b/139901 tiled-drawing/scrolling/frames/frameset-frame-scrollability.html [ Pass Failure ]
</span><span class="cx">
</span><del>-webkit.org/b/162505 tiled-drawing/scrolling/latched-div-with-scroll-snap.html [ Pass Failure ]
</del><span class="cx"> webkit.org/b/148407 tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html [ Pass Failure ]
</span><span class="cx"> webkit.org/b/148407 tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html [ Pass Failure ]
</span><span class="cx"> webkit.org/b/165196 tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe.html [ Pass Failure ]
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollinglatcheddivwithscrollsnapexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/latched-div-with-scroll-snap-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/latched-div-with-scroll-snap-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/latched-div-with-scroll-snap-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,10 +1,27 @@
</span><del>-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
</del><ins>+Manually test with the following steps:
</ins><span class="cx">
</span><del>-TEST COMPLETE
</del><ins>+1. Scroll with momentum to the green box in the first div.
</ins><span class="cx">
</span><ins>+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
+
+
</ins></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollinglatcheddivwithscrollsnaphtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/latched-div-with-scroll-snap.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/latched-div-with-scroll-snap.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/latched-div-with-scroll-snap.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -2,23 +2,44 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <style>
</span><ins>+ 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;
+ }
+
</ins><span class="cx"> .gallery {
</span><del>- width: 200px;
- height: 200px;
</del><ins>+ width: 400px;
+ height: 400px;
</ins><span class="cx"> overflow-y: hidden;
</span><span class="cx"> overflow-x: auto;
</span><span class="cx"> margin-bottom: 2px;
</span><del>- -webkit-scroll-snap-points-x: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: x mandatory;
+ opacity: 0.5;
</ins><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .galleryDrawer {
</span><del>- width: 1200px;
- height: 200px;
</del><ins>+ width: 2400px;
+ height: 400px;
</ins><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .colorBox {
</span><del>- height: 200px;
- width: 200px;
</del><ins>+ height: 400px;
+ width: 400px;
</ins><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #itemH0, #itemV0 { background-color: red; }
</span><span class="cx"> #itemH1, #itemV1 { background-color: green; }
</span><span class="lines">@@ -27,15 +48,7 @@
</span><span class="cx"> #itemH4, #itemV4 { background-color: yellow; }
</span><span class="cx"> #itemH5, #itemV5 { background-color: fuchsia; }
</span><span class="cx"> </style>
</span><del>- <script src="../../resources/js-test.js"></script>
</del><span class="cx"> <script>
</span><del>- window.jsTestIsAsync = true;
-
- var divScrollPositionBeforeGlide;
- var divScrollPositionBeforeSnap;
- var divScrollPositionBeforeSecondaryMove;
- var bottomDivScrollPositionBeforeSecondaryMove;
-
</del><span class="cx"> function locationInWindowCoordinates(element)
</span><span class="cx"> {
</span><span class="cx"> var position = {};
</span><span class="lines">@@ -54,169 +67,53 @@
</span><span class="cx"> return position;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-
- function checkForSecondaryScrollGlide(targetLabel)
</del><ins>+ let swipeWithMomentum = (element) => swipeInElement(element, true);
+ let swipeWithoutMomentum = (element) => swipeInElement(element, false);
+ function swipeInElement(element, momentum)
</ins><span class="cx"> {
</span><del>- 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)
- {
- 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);
</del><ins>+ 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();
</ins><span class="cx"> });
</span><del>- });
</del><ins>+ });
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- function checkForScrollSnap()
</del><ins>+ function run()
</ins><span class="cx"> {
</span><del>- 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();
</del><ins>+ if (!window.eventSender)
</ins><span class="cx"> return;
</span><del>- } else
- testPassed("div honored snap points.");
- scrollInSecondDiv();
- }
</del><span class="cx">
</span><del>- 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(); });
</del><ins>+ swipeWithMomentum(topTarget)
+ .then(() => swipeWithoutMomentum(topTarget))
+ .then(() => swipeWithMomentum(bottomTarget))
+ .then(() => swipeWithoutMomentum(bottomTarget))
+ .then(() => testRunner.notifyDone());
</ins><span class="cx"> }
</span><del>-
- 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);
- }
- }
</del><span class="cx"> </script>
</span><span class="cx"> </head>
</span><del>- <body onload="onLoad();">
- <div style="position: relative; width: 200px">
- <div>Tests that the scroll-snap feature works properly in overflow regions.</div>
</del><ins>+ <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>
</ins><span class="cx"> <div class="gallery" id="topTarget">
</span><span class="cx"> <div class="galleryDrawer">
</span><span class="cx"> <div id="itemH0" class="colorBox"></div>
</span><span class="lines">@@ -237,7 +134,12 @@
</span><span class="cx"> <div id="itemV5" class="colorBox"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>- <div id="console"></div>
</del><ins>+ <div id="output"></div>
+ <script>
+ let write = s => output.innerHTML += s + "<br>";
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+ </script>
</ins><span class="cx"> </div>
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapresourceshorizontalmainframehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -7,13 +7,13 @@
</span><span class="cx"> height: 100vh;
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><del>- -webkit-scroll-snap-points-x: repeat(100vw);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .colorBox {
</span><span class="cx"> height: 100vh;
</span><span class="cx"> width: 100vw;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #item0 { background-color: red; }
</span><span class="cx"> #item1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapresourcesverticalmainframehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -7,13 +7,13 @@
</span><span class="cx"> height: 600vh;
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><del>- -webkit-scroll-snap-points-y: repeat(100vh);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .colorBox {
</span><span class="cx"> height: 100vh;
</span><span class="cx"> width: 100vw;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #item0 { background-color: red; }
</span><span class="cx"> #item1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapdestinationlockupexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,20 +0,0 @@
</span><del>-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
-
</del></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapdestinationlockuphtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,71 +0,0 @@
</span><del>-<!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>
-
</del></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatory2doverflowhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-2d-overflow.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-2d-overflow.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-2d-overflow.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -8,8 +8,7 @@
</span><span class="cx"> overflow: scroll;
</span><span class="cx"> white-space: nowrap;
</span><span class="cx"> -webkit-overflow-scrolling: touch;
</span><del>- -webkit-scroll-snap-type: mandatory;
- -webkit-scroll-snap-destination: 0 0;
</del><ins>+ scroll-snap-type: both mandatory;
</ins><span class="cx"> line-height: 0px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -17,7 +16,7 @@
</span><span class="cx"> width: 400px;
</span><span class="cx"> height: 400px;
</span><span class="cx"> display: inline-block;
</span><del>- -webkit-scroll-snap-coordinate: 0 0;
</del><ins>+ scroll-snap-align: start;
</ins><span class="cx"> background-color: red;
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorybordershtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-borders.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-borders.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-borders.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -13,8 +13,7 @@
</span><span class="cx"> border-right: 9px solid black;
</span><span class="cx"> margin-bottom: 2px;
</span><span class="cx"> -webkit-overflow-scrolling: touch;
</span><del>- -webkit-scroll-snap-points-x: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .horizontalGalleryDrawer {
</span><span class="cx"> width: 1800px;
</span><span class="lines">@@ -32,8 +31,7 @@
</span><span class="cx"> border-right: 9px solid black;
</span><span class="cx"> margin-top: 2px;
</span><span class="cx"> -webkit-overflow-scrolling: touch;
</span><del>- -webkit-scroll-snap-points-y: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .verticalGalleryDrawer {
</span><span class="cx"> width: 300px;
</span><span class="lines">@@ -43,6 +41,7 @@
</span><span class="cx"> height: 300px;
</span><span class="cx"> width: 300px;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #itemH0, #itemV0 { background-color: red; }
</span><span class="cx"> #itemH1, #itemV1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorymainframehorizontalhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -7,13 +7,13 @@
</span><span class="cx"> height: 100vh;
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><del>- -webkit-scroll-snap-points-x: repeat(100vw);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .colorBox {
</span><span class="cx"> height: 100vh;
</span><span class="cx"> width: 100vw;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #item0 { background-color: red; }
</span><span class="cx"> #item1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorymainframeslowhorizontalhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -7,13 +7,13 @@
</span><span class="cx"> height: 100vh;
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><del>- -webkit-scroll-snap-points-x: repeat(100vw);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .colorBox {
</span><span class="cx"> height: 100vh;
</span><span class="cx"> width: 100vw;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #item0 { background-color: red; background-image: url('../../resources/green-blue.png'); background-attachment: fixed;}
</span><span class="cx"> #item1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorymainframeslowverticalhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -7,13 +7,13 @@
</span><span class="cx"> height: 600vh;
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><del>- -webkit-scroll-snap-points-y: repeat(100vh);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .colorBox {
</span><span class="cx"> height: 100vh;
</span><span class="cx"> width: 100vw;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #item0 { background-color: red; background-image: url('../../resources/green-blue.png'); background-attachment: fixed;}
</span><span class="cx"> #item1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorymainframeverticalthenhorizontalhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-then-horizontal.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-then-horizontal.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-then-horizontal.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -7,13 +7,13 @@
</span><span class="cx"> height: 600vh;
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><del>- -webkit-scroll-snap-points-y: repeat(100vh);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .colorBox {
</span><span class="cx"> height: 100vh;
</span><span class="cx"> width: 100vw;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #item0 { background-color: red; }
</span><span class="cx"> #item1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorymainframeverticalhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -7,13 +7,13 @@
</span><span class="cx"> height: 600vh;
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><del>- -webkit-scroll-snap-points-y: repeat(100vh);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .colorBox {
</span><span class="cx"> height: 100vh;
</span><span class="cx"> width: 100vw;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #item0 { background-color: red; }
</span><span class="cx"> #item1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatoryoverflowstatelesshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-stateless.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-stateless.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-stateless.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -8,12 +8,12 @@
</span><span class="cx"> display: inline-block;
</span><span class="cx"> overflow-x: hidden;
</span><span class="cx"> overflow-y: auto;
</span><del>- -webkit-scroll-snap-points-y: repeat(400px);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .colorBox {
</span><span class="cx"> height: 400px;
</span><span class="cx"> width: 400px;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #item0, #item2 { background-color: red; }
</span><span class="cx"> #item1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatoryoverflowhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -8,8 +8,7 @@
</span><span class="cx"> overflow-y: hidden;
</span><span class="cx"> overflow-x: auto;
</span><span class="cx"> margin-bottom: 2px;
</span><del>- -webkit-scroll-snap-points-x: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .horizontalGalleryDrawer {
</span><span class="cx"> width: 1800px;
</span><span class="lines">@@ -22,8 +21,7 @@
</span><span class="cx"> overflow-x: hidden;
</span><span class="cx"> overflow-y: auto;
</span><span class="cx"> margin-top: 2px;
</span><del>- -webkit-scroll-snap-points-y: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .verticalGalleryDrawer {
</span><span class="cx"> width: 300px;
</span><span class="lines">@@ -33,6 +31,7 @@
</span><span class="cx"> height: 300px;
</span><span class="cx"> width: 300px;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #itemH0, #itemV0 { background-color: red; }
</span><span class="cx"> #itemH1, #itemV1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatorypaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-padding.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-padding.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-padding.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -12,8 +12,7 @@
</span><span class="cx"> padding-top: 15px;
</span><span class="cx"> padding-bottom: 9px;
</span><span class="cx"> margin-bottom: 2px;
</span><del>- -webkit-scroll-snap-points-x: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .horizontalGalleryDrawer {
</span><span class="cx"> width: 1800px;
</span><span class="lines">@@ -30,8 +29,7 @@
</span><span class="cx"> padding-top: 15px;
</span><span class="cx"> padding-bottom: 9px;
</span><span class="cx"> margin-top: 2px;
</span><del>- -webkit-scroll-snap-points-y: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .verticalGalleryDrawer {
</span><span class="cx"> width: 300px;
</span><span class="lines">@@ -41,6 +39,7 @@
</span><span class="cx"> height: 300px;
</span><span class="cx"> width: 300px;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #itemH0, #itemV0 { background-color: red; }
</span><span class="cx"> #itemH1, #itemV1 { background-color: green; }
</span><span class="lines">@@ -128,10 +127,10 @@
</span><span class="cx"> var style = window.getComputedStyle(divTarget, null);
</span><span class="cx">
</span><span class="cx"> var actualPosition = divTarget.scrollTop;
</span><del>- var expectedPosition = divTarget.clientHeight - style.getPropertyValue('padding-top').replace("px", "") - style.getPropertyValue('padding-bottom').replace("px", "");
</del><ins>+ var expectedPosition = 300 + parseInt(style.paddingTop.replace("px", ""));
</ins><span class="cx"> if (targetLabel == 'horizontalTarget') {
</span><span class="cx"> actualPosition = divTarget.scrollLeft;
</span><del>- expectedPosition = divTarget.clientWidth - style.getPropertyValue('padding-right').replace("px", "") - style.getPropertyValue('padding-left').replace("px", "");
</del><ins>+ expectedPosition = 300 + parseInt(style.paddingLeft.replace("px", ""));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // The div should have scrolled (glided) to the next snap point.
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapmandatoryrotatedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-rotated.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-rotated.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-rotated.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -9,8 +9,7 @@
</span><span class="cx"> overflow-x: auto;
</span><span class="cx"> border: 2px solid black;
</span><span class="cx"> margin-bottom: 15px;
</span><del>- -webkit-scroll-snap-points-x: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: x mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .horizontalGalleryDrawer {
</span><span class="cx"> width: 1800px;
</span><span class="lines">@@ -24,8 +23,7 @@
</span><span class="cx"> overflow-y: auto;
</span><span class="cx"> border: 2px solid black;
</span><span class="cx"> margin-top: 15px;
</span><del>- -webkit-scroll-snap-points-y: repeat(100%);
- -webkit-scroll-snap-type: mandatory;
</del><ins>+ scroll-snap-type: y mandatory;
</ins><span class="cx"> }
</span><span class="cx"> .verticalGalleryDrawer {
</span><span class="cx"> width: 300px;
</span><span class="lines">@@ -35,6 +33,7 @@
</span><span class="cx"> height: 300px;
</span><span class="cx"> width: 300px;
</span><span class="cx"> float: left;
</span><ins>+ scroll-snap-align: start;
</ins><span class="cx"> }
</span><span class="cx"> #itemH0, #itemV0 { background-color: red; }
</span><span class="cx"> #itemH1, #itemV1 { background-color: green; }
</span></span></pre></div>
<a id="trunkLayoutTeststileddrawingscrollingscrollsnapscrollsnapscrollingjumpstotophtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-scrolling-jumps-to-top.html (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-scrolling-jumps-to-top.html 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-scrolling-jumps-to-top.html 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -14,7 +14,6 @@
</span><span class="cx"> overflow-x: hidden;
</span><span class="cx"> overflow-y: auto;
</span><span class="cx"> scroll-snap-type: y mandatory;
</span><del>- -webkit-scroll-snap-type: mandatory;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .child {
</span><span class="lines">@@ -22,7 +21,6 @@
</span><span class="cx"> width: 300px;
</span><span class="cx"> float: left;
</span><span class="cx"> scroll-snap-align: start;
</span><del>- -webkit-scroll-snap-coordinate: 0 0;
</del><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script>
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/ChangeLog 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,3 +1,294 @@
</span><ins>+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.
+
+ 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.
+
</ins><span class="cx"> 2016-12-19 Dean Jackson <dino@apple.com>
</span><span class="cx">
</span><span class="cx"> Use ENABLE() in place of ENABLE_CSS_SELECTORS_LEVEL4
</span></span></pre></div>
<a id="trunkSourceWebCoreWebCorexcodeprojprojectpbxproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -6488,7 +6488,6 @@
</span><span class="cx"> F3D4C47812E07663003DA150 /* InspectorDOMDebuggerAgent.cpp in Sources */ = {isa = PBXBuildFile; fileRef = F3D4C47612E07663003DA150 /* InspectorDOMDebuggerAgent.cpp */; };
</span><span class="cx"> F3D4C47912E07663003DA150 /* InspectorDOMDebuggerAgent.h in Headers */ = {isa = PBXBuildFile; fileRef = F3D4C47712E07663003DA150 /* InspectorDOMDebuggerAgent.h */; };
</span><span class="cx"> F40EA8AB1B867E4400CE5581 /* NSScrollingInputFilterSPI.h in Headers */ = {isa = PBXBuildFile; fileRef = F40EA8AA1B867D6500CE5581 /* NSScrollingInputFilterSPI.h */; settings = {ATTRIBUTES = (Private, ); }; };
</span><del>- F42FFB461984B71600F6837F /* LengthRepeat.h in Headers */ = {isa = PBXBuildFile; fileRef = F42FFB451984B71600F6837F /* LengthRepeat.h */; };
</del><span class="cx"> F433E9031DBBDBA200EF0D14 /* StaticPasteboard.h in Headers */ = {isa = PBXBuildFile; fileRef = F433E9021DBBDBA200EF0D14 /* StaticPasteboard.h */; settings = {ATTRIBUTES = (Private, ); }; };
</span><span class="cx"> F433E9051DBBDFCA00EF0D14 /* StaticPasteboard.cpp in Sources */ = {isa = PBXBuildFile; fileRef = F433E9041DBBDBC200EF0D14 /* StaticPasteboard.cpp */; };
</span><span class="cx"> F44EBBD91DB5D21400277334 /* StaticRange.h in Headers */ = {isa = PBXBuildFile; fileRef = F44EBBD81DB5D21400277334 /* StaticRange.h */; settings = {ATTRIBUTES = (Private, ); }; };
</span><span class="lines">@@ -14524,7 +14523,6 @@
</span><span class="cx"> F3D4C47612E07663003DA150 /* InspectorDOMDebuggerAgent.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = InspectorDOMDebuggerAgent.cpp; sourceTree = "<group>"; };
</span><span class="cx"> F3D4C47712E07663003DA150 /* InspectorDOMDebuggerAgent.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = InspectorDOMDebuggerAgent.h; sourceTree = "<group>"; };
</span><span class="cx"> F40EA8AA1B867D6500CE5581 /* NSScrollingInputFilterSPI.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = NSScrollingInputFilterSPI.h; sourceTree = "<group>"; };
</span><del>- F42FFB451984B71600F6837F /* LengthRepeat.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = LengthRepeat.h; sourceTree = "<group>"; };
</del><span class="cx"> F433E9021DBBDBA200EF0D14 /* StaticPasteboard.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = StaticPasteboard.h; sourceTree = "<group>"; };
</span><span class="cx"> F433E9041DBBDBC200EF0D14 /* StaticPasteboard.cpp */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; path = StaticPasteboard.cpp; sourceTree = "<group>"; };
</span><span class="cx"> F44EBBD61DB5D1B600277334 /* StaticRange.idl */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = StaticRange.idl; sourceTree = "<group>"; };
</span><span class="lines">@@ -16069,6 +16067,7 @@
</span><span class="cx"> 1AF62EE214DA22A70041556C /* mac */ = {
</span><span class="cx"> isa = PBXGroup;
</span><span class="cx"> children = (
</span><ins>+ 517DEEE31DE94ADC00B91644 /* ScrollingMomentumCalculatorMac.mm */,
</ins><span class="cx"> 9391A990162746CB00297330 /* ScrollingCoordinatorMac.h */,
</span><span class="cx"> 1AF62EE314DA22A70041556C /* ScrollingCoordinatorMac.mm */,
</span><span class="cx"> 517DEEE71DE94B0800B91644 /* ScrollingMomentumCalculatorMac.h */,
</span><span class="lines">@@ -16081,6 +16080,7 @@
</span><span class="cx"> 93C4A4141629DF5A00C3EB6E /* ScrollingTreeFrameScrollingNodeMac.mm */,
</span><span class="cx"> 0FE5806119327A6200DE32EB /* ScrollingTreeMac.cpp */,
</span><span class="cx"> 0FE5806219327A6200DE32EB /* ScrollingTreeMac.h */,
</span><ins>+ 517DEEE71DE94B0800B91644 /* ScrollingMomentumCalculatorMac.h */,
</ins><span class="cx"> 0FB88908167D2FA10010CDA5 /* ScrollingTreeStickyNode.h */,
</span><span class="cx"> 0FB88909167D2FA10010CDA5 /* ScrollingTreeStickyNode.mm */,
</span><span class="cx"> );
</span><span class="lines">@@ -23592,7 +23592,6 @@
</span><span class="cx"> 4A9CC81F16BF9BB400EC645A /* InspectorCSSOMWrappers.h */,
</span><span class="cx"> E55F4979151B888000BB67DB /* LengthFunctions.cpp */,
</span><span class="cx"> E5BA7D62151437CA00FE1E3F /* LengthFunctions.h */,
</span><del>- F42FFB451984B71600F6837F /* LengthRepeat.h */,
</del><span class="cx"> 93CA4C9A09DF93FA00DF8677 /* make-css-file-arrays.pl */,
</span><span class="cx"> 93CA4C9B09DF93FA00DF8677 /* makeprop.pl */,
</span><span class="cx"> 43B85ED018CBEACE00E31AF4 /* makeSelectorPseudoClassAndCompatibilityElementMap.py */,
</span><span class="lines">@@ -26759,7 +26758,6 @@
</span><span class="cx"> BCFF64910EAD15C200C1D6F7 /* LengthBox.h in Headers */,
</span><span class="cx"> E5BA7D63151437CA00FE1E3F /* LengthFunctions.h in Headers */,
</span><span class="cx"> 0F8716701C869D83004FF0DE /* LengthPoint.h in Headers */,
</span><del>- F42FFB461984B71600F6837F /* LengthRepeat.h in Headers */,
</del><span class="cx"> BCFF64920EAD15C200C1D6F7 /* LengthSize.h in Headers */,
</span><span class="cx"> 84730D911248F0B300D3A9C9 /* LightSource.h in Headers */,
</span><span class="cx"> B22279650D00BF220071B782 /* LinearGradientAttributes.h in Headers */,
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSCalculationValuecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSCalculationValue.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSCalculationValue.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/CSSCalculationValue.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -138,9 +138,6 @@
</span><span class="cx"> case CSSPrimitiveValue::CSS_SHAPE:
</span><span class="cx"> case CSSPrimitiveValue::CSS_QUAD:
</span><span class="cx"> case CSSPrimitiveValue::CSS_QUIRKY_EMS:
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- case CSSPrimitiveValue::CSS_LENGTH_REPEAT:
-#endif
</del><span class="cx"> case CSSPrimitiveValue::CSS_CALC:
</span><span class="cx"> case CSSPrimitiveValue::CSS_CALC_PERCENTAGE_WITH_NUMBER:
</span><span class="cx"> case CSSPrimitiveValue::CSS_CALC_PERCENTAGE_WITH_LENGTH:
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -75,6 +75,7 @@
</span><span class="cx"> #include "StylePropertyShorthandFunctions.h"
</span><span class="cx"> #include "StyleResolver.h"
</span><span class="cx"> #include "StyleScope.h"
</span><ins>+#include "StyleScrollSnapPoints.h"
</ins><span class="cx"> #include "Text.h"
</span><span class="cx"> #include "WebKitFontFamilyNames.h"
</span><span class="cx"> #include "WillChangeData.h"
</span><span class="lines">@@ -91,11 +92,6 @@
</span><span class="cx"> #include "DashboardRegion.h"
</span><span class="cx"> #endif
</span><span class="cx">
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
-#include "LengthRepeat.h"
-#include "StyleScrollSnapPoints.h"
-#endif
-
</del><span class="cx"> #if ENABLE(CSS_ANIMATIONS_LEVEL_2)
</span><span class="cx"> #include "AnimationTrigger.h"
</span><span class="cx"> #endif
</span><span class="lines">@@ -242,11 +238,18 @@
</span><span class="cx"> CSSPropertyWordSpacing,
</span><span class="cx"> CSSPropertyWordWrap,
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- CSSPropertyWebkitScrollSnapType,
- CSSPropertyWebkitScrollSnapPointsX,
- CSSPropertyWebkitScrollSnapPointsY,
- CSSPropertyWebkitScrollSnapDestination,
- CSSPropertyWebkitScrollSnapCoordinate,
</del><ins>+ CSSPropertyScrollSnapMargin,
+ CSSPropertyScrollSnapMarginLeft,
+ CSSPropertyScrollSnapMarginTop,
+ CSSPropertyScrollSnapMarginRight,
+ CSSPropertyScrollSnapMarginBottom,
+ CSSPropertyScrollPadding,
+ CSSPropertyScrollPaddingLeft,
+ CSSPropertyScrollPaddingTop,
+ CSSPropertyScrollPaddingRight,
+ CSSPropertyScrollPaddingBottom,
+ CSSPropertyScrollSnapType,
+ CSSPropertyScrollSnapAlign,
</ins><span class="cx"> #endif
</span><span class="cx"> CSSPropertyZIndex,
</span><span class="cx"> CSSPropertyZoom,
</span><span class="lines">@@ -1205,45 +1208,27 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>-static Ref<CSSValueList> scrollSnapDestination(const RenderStyle& style, const LengthSize& destination)
</del><ins>+
+static Ref<CSSValueList> valueForScrollSnapType(const ScrollSnapType& type)
</ins><span class="cx"> {
</span><del>- auto list = CSSValueList::createSpaceSeparated();
- list.get().append(zoomAdjustedPixelValueForLength(destination.width(), style));
- list.get().append(zoomAdjustedPixelValueForLength(destination.height(), style));
- return list;
</del><ins>+ auto value = CSSValueList::createSpaceSeparated();
+ if (type.strictness == ScrollSnapStrictness::None)
+ value->append(CSSValuePool::singleton().createValue(CSSValueNone));
+ else {
+ value->append(CSSPrimitiveValue::create(type.axis));
+ value->append(CSSPrimitiveValue::create(type.strictness));
+ }
+ return value;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static Ref<CSSValue> scrollSnapPoints(const RenderStyle& style, const ScrollSnapPoints* points)
</del><ins>+static Ref<CSSValueList> valueForScrollSnapAlignment(const ScrollSnapAlign& alignment)
</ins><span class="cx"> {
</span><del>- if (!points)
- return CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
-
- if (points->usesElements)
- return CSSValuePool::singleton().createIdentifierValue(CSSValueElements);
- auto list = CSSValueList::createSpaceSeparated();
- for (auto& point : points->offsets)
- list.get().append(zoomAdjustedPixelValueForLength(point, style));
- if (points->hasRepeat)
- list.get().append(CSSValuePool::singleton().createValue(LengthRepeat::create(zoomAdjustedPixelValueForLength(points->repeatOffset, style))));
- return WTFMove(list);
</del><ins>+ auto value = CSSValueList::createSpaceSeparated();
+ value->append(CSSPrimitiveValue::create(alignment.x));
+ value->append(CSSPrimitiveValue::create(alignment.y));
+ return value;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static Ref<CSSValue> scrollSnapCoordinates(const RenderStyle& style, const Vector<LengthSize>& coordinates)
-{
- if (coordinates.isEmpty())
- return CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
-
- auto list = CSSValueList::createCommaSeparated();
-
- for (auto& coordinate : coordinates) {
- auto pair = CSSValueList::createSpaceSeparated();
- pair.get().append(zoomAdjustedPixelValueForLength(coordinate.width(), style));
- pair.get().append(zoomAdjustedPixelValueForLength(coordinate.height(), style));
- list.get().append(WTFMove(pair));
- }
-
- return WTFMove(list);
-}
</del><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> static Ref<CSSValue> getWillChangePropertyValue(const WillChangeData* willChangeData)
</span><span class="lines">@@ -3798,16 +3783,30 @@
</span><span class="cx"> return getCSSPropertyValuesForSidesShorthand(paddingShorthand());
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- case CSSPropertyWebkitScrollSnapType:
- return cssValuePool.createValue(style->scrollSnapType());
- case CSSPropertyWebkitScrollSnapDestination:
- return scrollSnapDestination(*style, style->scrollSnapDestination());
- case CSSPropertyWebkitScrollSnapPointsX:
- return scrollSnapPoints(*style, style->scrollSnapPointsX());
- case CSSPropertyWebkitScrollSnapPointsY:
- return scrollSnapPoints(*style, style->scrollSnapPointsY());
- case CSSPropertyWebkitScrollSnapCoordinate:
- return scrollSnapCoordinates(*style, style->scrollSnapCoordinates());
</del><ins>+ case CSSPropertyScrollSnapMargin:
+ return getCSSPropertyValuesForSidesShorthand(scrollSnapMarginShorthand());
+ case CSSPropertyScrollSnapMarginBottom:
+ return zoomAdjustedPixelValueForLength(style->scrollSnapMarginBottom(), *style);
+ case CSSPropertyScrollSnapMarginTop:
+ return zoomAdjustedPixelValueForLength(style->scrollSnapMarginTop(), *style);
+ case CSSPropertyScrollSnapMarginRight:
+ return zoomAdjustedPixelValueForLength(style->scrollSnapMarginRight(), *style);
+ case CSSPropertyScrollSnapMarginLeft:
+ return zoomAdjustedPixelValueForLength(style->scrollSnapMarginLeft(), *style);
+ case CSSPropertyScrollPadding:
+ return getCSSPropertyValuesForSidesShorthand(scrollPaddingShorthand());
+ case CSSPropertyScrollPaddingBottom:
+ return zoomAdjustedPixelValueForLength(style->scrollPaddingBottom(), *style);
+ case CSSPropertyScrollPaddingTop:
+ return zoomAdjustedPixelValueForLength(style->scrollPaddingTop(), *style);
+ case CSSPropertyScrollPaddingRight:
+ return zoomAdjustedPixelValueForLength(style->scrollPaddingRight(), *style);
+ case CSSPropertyScrollPaddingLeft:
+ return zoomAdjustedPixelValueForLength(style->scrollPaddingLeft(), *style);
+ case CSSPropertyScrollSnapType:
+ return valueForScrollSnapType(style->scrollSnapType());
+ case CSSPropertyScrollSnapAlign:
+ return valueForScrollSnapAlignment(style->scrollSnapAlign());
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_TRAILING_WORD)
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPrimitiveValuecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPrimitiveValue.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSPrimitiveValue.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/CSSPrimitiveValue.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -54,10 +54,6 @@
</span><span class="cx"> #include "DashboardRegion.h"
</span><span class="cx"> #endif
</span><span class="cx">
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
-#include "LengthRepeat.h"
-#endif
-
</del><span class="cx"> using namespace WTF;
</span><span class="cx">
</span><span class="cx"> namespace WebCore {
</span><span class="lines">@@ -120,9 +116,6 @@
</span><span class="cx"> case CSSPrimitiveValue::CSS_UNKNOWN:
</span><span class="cx"> case CSSPrimitiveValue::CSS_URI:
</span><span class="cx"> case CSSPrimitiveValue::CSS_VALUE_ID:
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- case CSSPrimitiveValue::CSS_LENGTH_REPEAT:
-#endif
</del><span class="cx"> #if ENABLE(DASHBOARD_SUPPORT)
</span><span class="cx"> case CSSPrimitiveValue::CSS_DASHBOARD_REGION:
</span><span class="cx"> #endif
</span><span class="lines">@@ -191,9 +184,6 @@
</span><span class="cx"> #if ENABLE(DASHBOARD_SUPPORT)
</span><span class="cx"> case CSSPrimitiveValue::CSS_DASHBOARD_REGION:
</span><span class="cx"> #endif
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- case CSSPrimitiveValue::CSS_LENGTH_REPEAT:
-#endif
</del><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -461,15 +451,6 @@
</span><span class="cx"> m_value.quad = &quad.leakRef();
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
-void CSSPrimitiveValue::init(Ref<LengthRepeat>&& lengthRepeat)
-{
- m_primitiveUnitType = CSS_LENGTH_REPEAT;
- m_hasCachedCSSText = false;
- m_value.lengthRepeat = &lengthRepeat.leakRef();
-}
-#endif
-
</del><span class="cx"> #if ENABLE(DASHBOARD_SUPPORT)
</span><span class="cx"> void CSSPrimitiveValue::init(RefPtr<DashboardRegion>&& r)
</span><span class="cx"> {
</span><span class="lines">@@ -526,11 +507,6 @@
</span><span class="cx"> case CSS_QUAD:
</span><span class="cx"> m_value.quad->deref();
</span><span class="cx"> break;
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- case CSS_LENGTH_REPEAT:
- m_value.lengthRepeat->deref();
- break;
-#endif
</del><span class="cx"> case CSS_PAIR:
</span><span class="cx"> m_value.pair->deref();
</span><span class="cx"> break;
</span><span class="lines">@@ -1095,10 +1071,6 @@
</span><span class="cx"> return rectValue()->cssText();
</span><span class="cx"> case CSS_QUAD:
</span><span class="cx"> return quadValue()->cssText();
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- case CSS_LENGTH_REPEAT:
- return lengthRepeatValue()->cssText();
-#endif
</del><span class="cx"> case CSS_RGBCOLOR:
</span><span class="cx"> return color().cssText();
</span><span class="cx"> case CSS_PAIR:
</span><span class="lines">@@ -1229,10 +1201,6 @@
</span><span class="cx"> return m_value.rect && other.m_value.rect && m_value.rect->equals(*other.m_value.rect);
</span><span class="cx"> case CSS_QUAD:
</span><span class="cx"> return m_value.quad && other.m_value.quad && m_value.quad->equals(*other.m_value.quad);
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- case CSS_LENGTH_REPEAT:
- return m_value.lengthRepeat && other.m_value.lengthRepeat && m_value.lengthRepeat->equals(*other.m_value.lengthRepeat);
-#endif
</del><span class="cx"> case CSS_RGBCOLOR:
</span><span class="cx"> return color() == other.color();
</span><span class="cx"> case CSS_PAIR:
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPrimitiveValueh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPrimitiveValue.h (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSPrimitiveValue.h 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/CSSPrimitiveValue.h 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -39,7 +39,6 @@
</span><span class="cx"> class Counter;
</span><span class="cx"> class DashboardRegion;
</span><span class="cx"> class DeprecatedCSSOMPrimitiveValue;
</span><del>-class LengthRepeat;
</del><span class="cx"> class Pair;
</span><span class="cx"> class Quad;
</span><span class="cx"> class RGBColor;
</span><span class="lines">@@ -112,10 +111,6 @@
</span><span class="cx"> CSS_DPI = 31,
</span><span class="cx"> CSS_DPCM = 32,
</span><span class="cx"> CSS_FR = 33,
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- // FIXME-NEWPARSER: Remove once new parser lands.
- CSS_LENGTH_REPEAT = 34,
-#endif
</del><span class="cx"> CSS_PAIR = 100, // We envision this being exposed as a means of getting computed style values for pairs (border-spacing/radius, background-position, etc.)
</span><span class="cx"> #if ENABLE(DASHBOARD_SUPPORT)
</span><span class="cx"> CSS_DASHBOARD_REGION = 101, // FIXME: Dashboard region should not be a primitive value.
</span><span class="lines">@@ -185,9 +180,6 @@
</span><span class="cx"> bool isPercentage() const { return primitiveType() == CSS_PERCENTAGE; }
</span><span class="cx"> bool isPx() const { return primitiveType() == CSS_PX; }
</span><span class="cx"> bool isRect() const { return m_primitiveUnitType == CSS_RECT; }
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- bool isLengthRepeat() const { return m_primitiveUnitType == CSS_LENGTH_REPEAT; }
-#endif
</del><span class="cx"> bool isPair() const { return m_primitiveUnitType == CSS_PAIR; }
</span><span class="cx"> bool isPropertyID() const { return m_primitiveUnitType == CSS_PROPERTY_ID; }
</span><span class="cx"> bool isRGBColor() const { return m_primitiveUnitType == CSS_RGBCOLOR; }
</span><span class="lines">@@ -276,9 +268,6 @@
</span><span class="cx"> CSSBasicShape* shapeValue() const { return m_primitiveUnitType != CSS_SHAPE ? nullptr : m_value.shape; }
</span><span class="cx"> CSSValueID valueID() const { return m_primitiveUnitType == CSS_VALUE_ID ? m_value.valueID : CSSValueInvalid; }
</span><span class="cx">
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- LengthRepeat* lengthRepeatValue() const { return m_primitiveUnitType != CSS_LENGTH_REPEAT ? nullptr : m_value.lengthRepeat; }
-#endif
</del><span class="cx"> #if ENABLE(DASHBOARD_SUPPORT)
</span><span class="cx"> DashboardRegion* dashboardRegionValue() const { return m_primitiveUnitType != CSS_DASHBOARD_REGION ? nullptr : m_value.region; }
</span><span class="cx"> #endif
</span><span class="lines">@@ -334,9 +323,6 @@
</span><span class="cx"> void init(Ref<Quad>&&);
</span><span class="cx"> void init(Ref<Rect>&&);
</span><span class="cx">
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- void init(Ref<LengthRepeat>&&);
-#endif
</del><span class="cx"> #if ENABLE(DASHBOARD_SUPPORT)
</span><span class="cx"> void init(RefPtr<DashboardRegion>&&); // FIXME: Dashboard region should not be a primitive value.
</span><span class="cx"> #endif
</span><span class="lines">@@ -363,9 +349,6 @@
</span><span class="cx"> CSSBasicShape* shape;
</span><span class="cx"> CSSCalcValue* calc;
</span><span class="cx"> const CSSFontFamily* fontFamily;
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- LengthRepeat* lengthRepeat;
-#endif
</del><span class="cx"> } m_value;
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPrimitiveValueMappingsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -5367,39 +5367,121 @@
</span><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>-template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ScrollSnapType e)
</del><ins>+
+template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ScrollSnapStrictness strictness)
</ins><span class="cx"> : CSSValue(PrimitiveClass)
</span><span class="cx"> {
</span><span class="cx"> m_primitiveUnitType = CSS_VALUE_ID;
</span><del>- switch (e) {
- case ScrollSnapType::None:
</del><ins>+ switch (strictness) {
+ case ScrollSnapStrictness::None:
</ins><span class="cx"> m_value.valueID = CSSValueNone;
</span><span class="cx"> break;
</span><del>- case ScrollSnapType::Proximity:
</del><ins>+ case ScrollSnapStrictness::Proximity:
</ins><span class="cx"> m_value.valueID = CSSValueProximity;
</span><span class="cx"> break;
</span><del>- case ScrollSnapType::Mandatory:
</del><ins>+ case ScrollSnapStrictness::Mandatory:
</ins><span class="cx"> m_value.valueID = CSSValueMandatory;
</span><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>-template<> inline CSSPrimitiveValue::operator ScrollSnapType() const
</del><ins>+template<> inline CSSPrimitiveValue::operator ScrollSnapStrictness() const
</ins><span class="cx"> {
</span><span class="cx"> ASSERT(isValueID());
</span><span class="cx"> switch (m_value.valueID) {
</span><span class="cx"> case CSSValueNone:
</span><del>- return ScrollSnapType::None;
</del><ins>+ return ScrollSnapStrictness::None;
</ins><span class="cx"> case CSSValueProximity:
</span><del>- return ScrollSnapType::Proximity;
</del><ins>+ return ScrollSnapStrictness::Proximity;
</ins><span class="cx"> case CSSValueMandatory:
</span><del>- return ScrollSnapType::Mandatory;
</del><ins>+ return ScrollSnapStrictness::Mandatory;
</ins><span class="cx"> default:
</span><ins>+ ASSERT_NOT_REACHED();
+ return ScrollSnapStrictness::None;
+ }
+}
+
+template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ScrollSnapAxis axis)
+ : CSSValue(PrimitiveClass)
+{
+ m_primitiveUnitType = CSS_VALUE_ID;
+ switch (axis) {
+ case ScrollSnapAxis::XAxis:
+ m_value.valueID = CSSValueX;
</ins><span class="cx"> break;
</span><ins>+ case ScrollSnapAxis::YAxis:
+ m_value.valueID = CSSValueY;
+ break;
+ case ScrollSnapAxis::Block:
+ m_value.valueID = CSSValueBlock;
+ break;
+ case ScrollSnapAxis::Inline:
+ m_value.valueID = CSSValueInline;
+ break;
+ case ScrollSnapAxis::Both:
+ m_value.valueID = CSSValueBoth;
+ break;
</ins><span class="cx"> }
</span><del>- ASSERT_NOT_REACHED();
- return ScrollSnapType::None;
</del><span class="cx"> }
</span><ins>+
+template<> inline CSSPrimitiveValue::operator ScrollSnapAxis() const
+{
+ ASSERT(isValueID());
+ switch (m_value.valueID) {
+ case CSSValueX:
+ return ScrollSnapAxis::XAxis;
+ case CSSValueY:
+ return ScrollSnapAxis::YAxis;
+ case CSSValueBlock:
+ return ScrollSnapAxis::Block;
+ case CSSValueInline:
+ return ScrollSnapAxis::Inline;
+ case CSSValueBoth:
+ return ScrollSnapAxis::Both;
+ default:
+ ASSERT_NOT_REACHED();
+ return ScrollSnapAxis::Both;
+ }
+}
+
+template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ScrollSnapAxisAlignType type)
+ : CSSValue(PrimitiveClass)
+{
+ m_primitiveUnitType = CSS_VALUE_ID;
+ switch (type) {
+ case ScrollSnapAxisAlignType::None:
+ m_value.valueID = CSSValueNone;
+ break;
+ case ScrollSnapAxisAlignType::Start:
+ m_value.valueID = CSSValueStart;
+ break;
+ case ScrollSnapAxisAlignType::Center:
+ m_value.valueID = CSSValueCenter;
+ break;
+ case ScrollSnapAxisAlignType::End:
+ m_value.valueID = CSSValueEnd;
+ break;
+ }
+}
+
+template<> inline CSSPrimitiveValue::operator ScrollSnapAxisAlignType() const
+{
+ ASSERT(isValueID());
+ switch (m_value.valueID) {
+ case CSSValueNone:
+ return ScrollSnapAxisAlignType::None;
+ case CSSValueStart:
+ return ScrollSnapAxisAlignType::Start;
+ case CSSValueCenter:
+ return ScrollSnapAxisAlignType::Center;
+ case CSSValueEnd:
+ return ScrollSnapAxisAlignType::End;
+ default:
+ ASSERT_NOT_REACHED();
+ return ScrollSnapAxisAlignType::None;
+ }
+}
+
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_TRAILING_WORD)
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPropertiesjson"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSProperties.json (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSProperties.json 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/CSSProperties.json 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -3674,43 +3674,6 @@
</span><span class="cx"> "setter": "setRTLOrdering"
</span><span class="cx"> }
</span><span class="cx"> },
</span><del>- "-webkit-scroll-snap-points-x": {
- "codegen-properties": {
- "converter": "ScrollSnapPoints",
- "custom": "Initial|Inherit",
- "enable-if": "ENABLE_CSS_SCROLL_SNAP"
- }
- },
- "-webkit-scroll-snap-points-y": {
- "codegen-properties": {
- "converter": "ScrollSnapPoints",
- "custom": "Initial|Inherit",
- "enable-if": "ENABLE_CSS_SCROLL_SNAP"
- }
- },
- "-webkit-scroll-snap-type": {
- "values": [
- "none",
- "mandatory",
- "proximity"
- ],
- "codegen-properties": {
- "enable-if": "ENABLE_CSS_SCROLL_SNAP"
- }
- },
- "-webkit-scroll-snap-destination": {
- "codegen-properties": {
- "converter": "SnapCoordinatePair",
- "enable-if": "ENABLE_CSS_SCROLL_SNAP"
- }
- },
- "-webkit-scroll-snap-coordinate": {
- "codegen-properties": {
- "name-for-methods": "ScrollSnapCoordinates",
- "converter": "ScrollSnapCoordinates",
- "enable-if": "ENABLE_CSS_SCROLL_SNAP"
- }
- },
</del><span class="cx"> "-webkit-svg-shadow": {
</span><span class="cx"> "codegen-properties": {
</span><span class="cx"> "custom": "All",
</span><span class="lines">@@ -4031,6 +3994,96 @@
</span><span class="cx"> "enable-if": "ENABLE_CSS_REGIONS"
</span><span class="cx"> }
</span><span class="cx"> },
</span><ins>+ "scroll-padding": {
+ "codegen-properties": {
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP",
+ "longhands": [
+ "scroll-padding-top",
+ "scroll-padding-right",
+ "scroll-padding-bottom",
+ "scroll-padding-left"
+ ]
+ }
+ },
+ "scroll-padding-bottom": {
+ "codegen-properties": {
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP",
+ "initial": "initialScrollPadding",
+ "converter": "Length"
+ }
+ },
+ "scroll-padding-left": {
+ "codegen-properties": {
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP",
+ "initial": "initialScrollPadding",
+ "converter": "Length"
+ }
+ },
+ "scroll-padding-right": {
+ "codegen-properties": {
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP",
+ "initial": "initialScrollPadding",
+ "converter": "Length"
+ }
+ },
+ "scroll-padding-top": {
+ "codegen-properties": {
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP",
+ "initial": "initialScrollPadding",
+ "converter": "Length"
+ }
+ },
+ "scroll-snap-align": {
+ "codegen-properties": {
+ "converter": "ScrollSnapAlign",
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP"
+ }
+ },
+ "scroll-snap-margin": {
+ "codegen-properties": {
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP",
+ "longhands": [
+ "scroll-snap-margin-top",
+ "scroll-snap-margin-right",
+ "scroll-snap-margin-bottom",
+ "scroll-snap-margin-left"
+ ]
+ }
+ },
+ "scroll-snap-margin-bottom": {
+ "codegen-properties": {
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP",
+ "initial": "initialScrollSnapMargin",
+ "converter": "Length"
+ }
+ },
+ "scroll-snap-margin-left": {
+ "codegen-properties": {
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP",
+ "initial": "initialScrollSnapMargin",
+ "converter": "Length"
+ }
+ },
+ "scroll-snap-margin-right": {
+ "codegen-properties": {
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP",
+ "initial": "initialScrollSnapMargin",
+ "converter": "Length"
+ }
+ },
+ "scroll-snap-margin-top": {
+ "codegen-properties": {
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP",
+ "initial": "initialScrollSnapMargin",
+ "converter": "Length"
+ }
+ },
+ "scroll-snap-type": {
+ "codegen-properties": {
+ "converter": "ScrollSnapType",
+ "enable-if": "ENABLE_CSS_SCROLL_SNAP"
+ }
+ },
</ins><span class="cx"> "shape-outside": {
</span><span class="cx"> "codegen-properties": {
</span><span class="cx"> "aliases": [
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSValueKeywordsin"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSValueKeywords.in (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSValueKeywords.in 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/CSSValueKeywords.in 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1092,6 +1092,8 @@
</span><span class="cx"> // -webkit-scroll-snap-type
</span><span class="cx"> mandatory
</span><span class="cx"> proximity
</span><ins>+x
+y
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> // -webkit-region-fragment
</span></span></pre></div>
<a id="trunkSourceWebCorecssLengthRepeath"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebCore/css/LengthRepeat.h (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/LengthRepeat.h 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/LengthRepeat.h 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,64 +0,0 @@
</span><del>-/*
- * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-#pragma once
-
-#if ENABLE(CSS_SCROLL_SNAP)
-
-#include "CSSPrimitiveValue.h"
-#include <wtf/RefPtr.h>
-
-namespace WebCore {
-
-class LengthRepeat final : public RefCounted<LengthRepeat> {
-public:
- static Ref<LengthRepeat> create(PassRefPtr<CSSValue> interval) { return adoptRef(*new LengthRepeat(interval)); }
-
- CSSValue* interval() const { return m_interval.get(); }
-
- void setInterval(PassRefPtr<CSSValue> interval) { m_interval = interval; }
-
- bool equals(const LengthRepeat& other) const
- {
- return compareCSSValuePtr(m_interval, other.m_interval);
- }
-
- String cssText() const
- {
- return "repeat(" + interval()->cssText() + ")";
- }
-
-private:
- LengthRepeat(PassRefPtr<CSSValue> interval)
- : m_interval(interval)
- {
- }
-
- RefPtr<CSSValue> m_interval;
-};
-
-} // namespace WebCore
-
-#endif // ENABLE(CSS_SCROLL_SNAP)
</del></span></pre></div>
<a id="trunkSourceWebCorecssStyleBuilderConverterh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleBuilderConverter.h (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleBuilderConverter.h 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/StyleBuilderConverter.h 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -43,7 +43,6 @@
</span><span class="cx"> #include "Frame.h"
</span><span class="cx"> #include "LayoutUnit.h"
</span><span class="cx"> #include "Length.h"
</span><del>-#include "LengthRepeat.h"
</del><span class="cx"> #include "Pair.h"
</span><span class="cx"> #include "QuotesData.h"
</span><span class="cx"> #include "RuntimeEnabledFeatures.h"
</span><span class="lines">@@ -94,9 +93,8 @@
</span><span class="cx"> static TextDecorationSkip convertTextDecorationSkip(StyleResolver&, const CSSValue&);
</span><span class="cx"> static PassRefPtr<ShapeValue> convertShapeValue(StyleResolver&, CSSValue&);
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- static std::unique_ptr<ScrollSnapPoints> convertScrollSnapPoints(StyleResolver&, const CSSValue&);
- static LengthSize convertSnapCoordinatePair(StyleResolver&, const CSSValue&, size_t offset = 0);
- static Vector<LengthSize> convertScrollSnapCoordinates(StyleResolver&, const CSSValue&);
</del><ins>+ static ScrollSnapType convertScrollSnapType(StyleResolver&, const CSSValue&);
+ static ScrollSnapAlign convertScrollSnapAlign(StyleResolver&, const CSSValue&);
</ins><span class="cx"> #endif
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><span class="cx"> static GridTrackSize convertGridTrackSize(StyleResolver&, const CSSValue&);
</span><span class="lines">@@ -798,98 +796,44 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>-inline Length StyleBuilderConverter::parseSnapCoordinate(StyleResolver& styleResolver, const CSSValue& value)
-{
- return downcast<CSSPrimitiveValue>(value).convertToLength<FixedIntegerConversion | PercentConversion | CalculatedConversion | AutoConversion>(styleResolver.state().cssToLengthConversionData());
-}
</del><span class="cx">
</span><del>-inline std::unique_ptr<ScrollSnapPoints> StyleBuilderConverter::convertScrollSnapPoints(StyleResolver& styleResolver, const CSSValue& value)
</del><ins>+inline ScrollSnapType StyleBuilderConverter::convertScrollSnapType(StyleResolver&, const CSSValue& value)
</ins><span class="cx"> {
</span><del>- // FIXME-NEWPARSER: Old parser supports an identifier value called "elements" when it seems like
- // "none" is what others use. For now, support both in the converter.
- auto points = std::make_unique<ScrollSnapPoints>();
-
- if (is<CSSPrimitiveValue>(value)) {
- ASSERT(downcast<CSSPrimitiveValue>(value).valueID() == CSSValueElements || downcast<CSSPrimitiveValue>(value).valueID() == CSSValueNone);
- points->usesElements = true;
- return points;
</del><ins>+ ScrollSnapType type;
+ auto& values = downcast<CSSValueList>(value);
+ auto& firstValue = downcast<CSSPrimitiveValue>(*values.item(0));
+ if (values.length() == 2) {
+ type.axis = firstValue;
+ type.strictness = downcast<CSSPrimitiveValue>(*values.item(1));
+ return type;
</ins><span class="cx"> }
</span><del>-
- for (auto& currentValue : downcast<CSSValueList>(value)) {
- if (is<CSSFunctionValue>(currentValue.get())) {
- auto& functionValue = downcast<CSSFunctionValue>(currentValue.get());
- points->repeatOffset = parseSnapCoordinate(styleResolver, *functionValue.item(0));
- points->hasRepeat = true;
- break;
- }
-
- auto& itemValue = downcast<CSSPrimitiveValue>(currentValue.get());
- if (auto* lengthRepeat = itemValue.lengthRepeatValue()) {
- // FIXME-NEWPARSER: Old parsing code, which uses a special primitive value.
- // Can remove this once new parser turns on.
- if (auto* interval = lengthRepeat->interval()) {
- points->repeatOffset = parseSnapCoordinate(styleResolver, *interval);
- points->hasRepeat = true;
- break;
- }
- }
- points->offsets.append(parseSnapCoordinate(styleResolver, itemValue));
</del><ins>+
+ switch (firstValue.valueID()) {
+ case CSSValueNone:
+ case CSSValueMandatory:
+ case CSSValueProximity:
+ type.strictness = firstValue;
+ break;
+ default:
+ type.axis = firstValue;
+ type.strictness = ScrollSnapStrictness::Proximity;
+ break;
</ins><span class="cx"> }
</span><del>-
- return points;
</del><ins>+ return type;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-inline LengthSize StyleBuilderConverter::convertSnapCoordinatePair(StyleResolver& styleResolver, const CSSValue& value, size_t offset)
</del><ins>+inline ScrollSnapAlign StyleBuilderConverter::convertScrollSnapAlign(StyleResolver&, const CSSValue& value)
</ins><span class="cx"> {
</span><del>- // FIXME-NEWPARSER: Can make this unconditional once old parser is gone. This is just how
- // we detect that we're dealing with the new parser's pairs.
- if (value.isPrimitiveValue() && downcast<CSSPrimitiveValue>(value).pairValue()) {
- Pair* pair = downcast<CSSPrimitiveValue>(value).pairValue();
- Length lengthX = convertPositionComponent<CSSValueLeft, CSSValueRight>(styleResolver, *pair->first());
- Length lengthY = convertPositionComponent<CSSValueTop, CSSValueBottom>(styleResolver, *pair->second());
- return LengthSize(lengthX, lengthY);
- }
-
- // FIXME-NEWPARSER: Remove once old parser is gone.
- auto& valueList = downcast<CSSValueList>(value);
- return LengthSize(parseSnapCoordinate(styleResolver, *valueList.item(offset)), parseSnapCoordinate(styleResolver, *valueList.item(offset + 1)));
</del><ins>+ auto& values = downcast<CSSValueList>(value);
+ ScrollSnapAlign alignment;
+ alignment.x = downcast<CSSPrimitiveValue>(*values.item(0));
+ if (values.length() == 1)
+ alignment.y = alignment.x;
+ else
+ alignment.y = downcast<CSSPrimitiveValue>(*values.item(1));
+ return alignment;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-inline Vector<LengthSize> StyleBuilderConverter::convertScrollSnapCoordinates(StyleResolver& styleResolver, const CSSValue& value)
-{
- if (is<CSSPrimitiveValue>(value)) {
- ASSERT(downcast<CSSPrimitiveValue>(value).valueID() == CSSValueNone);
- return Vector<LengthSize>();
- }
-
- auto& valueList = downcast<CSSValueList>(value);
- if (!valueList.length())
- return Vector<LengthSize>();
-
- // FIXME-NEWPARSER: Can make this unconditional once old parser is gone. This is just how
- // we detect that we're dealing with the new parser's pairs.
- if (valueList.item(0)->isPrimitiveValue() && downcast<CSSPrimitiveValue>(*valueList.item(0)).pairValue()) {
- Vector<LengthSize> coordinates;
- coordinates.reserveInitialCapacity(valueList.length());
- for (auto& snapCoordinate : valueList) {
- Pair* pair = downcast<CSSPrimitiveValue>(*snapCoordinate.ptr()).pairValue();
- Length lengthX = convertPositionComponent<CSSValueLeft, CSSValueRight>(styleResolver, *pair->first());
- Length lengthY = convertPositionComponent<CSSValueTop, CSSValueBottom>(styleResolver, *pair->second());
- coordinates.uncheckedAppend(LengthSize(lengthX, lengthY));
- }
- return coordinates;
- }
-
- // FIXME-NEWPARSER: Remove all of this once old parser is gone, including all the functions
- // it calls.
- ASSERT(!(valueList.length() % 2));
- size_t pointCount = valueList.length() / 2;
- Vector<LengthSize> coordinates;
- coordinates.reserveInitialCapacity(pointCount);
- for (size_t i = 0; i < pointCount; ++i)
- coordinates.uncheckedAppend(convertSnapCoordinatePair(styleResolver, valueList, i * 2));
- return coordinates;
-}
</del><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleBuilderCustomh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleBuilderCustom.h (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleBuilderCustom.h 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/StyleBuilderCustom.h 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -135,12 +135,6 @@
</span><span class="cx"> static void applyValueWebkitTextZoom(StyleResolver&, CSSValue&);
</span><span class="cx"> static void applyValueWritingMode(StyleResolver&, CSSValue&);
</span><span class="cx"> static void applyValueAlt(StyleResolver&, CSSValue&);
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- static void applyInitialWebkitScrollSnapPointsX(StyleResolver&);
- static void applyInheritWebkitScrollSnapPointsX(StyleResolver&);
- static void applyInitialWebkitScrollSnapPointsY(StyleResolver&);
- static void applyInheritWebkitScrollSnapPointsY(StyleResolver&);
-#endif
</del><span class="cx"> static void applyValueWillChange(StyleResolver&, CSSValue&);
</span><span class="cx">
</span><span class="cx"> private:
</span><span class="lines">@@ -1781,30 +1775,6 @@
</span><span class="cx"> styleResolver.style()->setContentAltText(emptyAtom);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
-
-inline void StyleBuilderCustom::applyInitialWebkitScrollSnapPointsX(StyleResolver& styleResolver)
-{
- styleResolver.style()->setScrollSnapPointsX(nullptr);
-}
-
-inline void StyleBuilderCustom::applyInheritWebkitScrollSnapPointsX(StyleResolver& styleResolver)
-{
- styleResolver.style()->setScrollSnapPointsX(styleResolver.parentStyle()->scrollSnapPointsX() ? std::make_unique<ScrollSnapPoints>(*styleResolver.parentStyle()->scrollSnapPointsX()) : nullptr);
-}
-
-inline void StyleBuilderCustom::applyInitialWebkitScrollSnapPointsY(StyleResolver& styleResolver)
-{
- styleResolver.style()->setScrollSnapPointsY(nullptr);
-}
-
-inline void StyleBuilderCustom::applyInheritWebkitScrollSnapPointsY(StyleResolver& styleResolver)
-{
- styleResolver.style()->setScrollSnapPointsY(styleResolver.parentStyle()->scrollSnapPointsY() ? std::make_unique<ScrollSnapPoints>(*styleResolver.parentStyle()->scrollSnapPointsY()) : nullptr);
-}
-
-#endif
-
</del><span class="cx"> inline void StyleBuilderCustom::applyValueWillChange(StyleResolver& styleResolver, CSSValue& value)
</span><span class="cx"> {
</span><span class="cx"> if (is<CSSPrimitiveValue>(value)) {
</span></span></pre></div>
<a id="trunkSourceWebCorecssStylePropertiescpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleProperties.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleProperties.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/StyleProperties.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -227,6 +227,12 @@
</span><span class="cx"> }
</span><span class="cx"> case CSSPropertyBorderRadius:
</span><span class="cx"> return get4Values(borderRadiusShorthand());
</span><ins>+#if ENABLE(CSS_SCROLL_SNAP)
+ case CSSPropertyScrollSnapMargin:
+ return get4Values(scrollSnapMarginShorthand());
+ case CSSPropertyScrollPadding:
+ return get4Values(scrollPaddingShorthand());
+#endif
</ins><span class="cx"> default:
</span><span class="cx"> return String();
</span><span class="cx"> }
</span><span class="lines">@@ -960,6 +966,20 @@
</span><span class="cx"> case CSSPropertyPaddingLeft:
</span><span class="cx"> shorthandPropertyID = CSSPropertyPadding;
</span><span class="cx"> break;
</span><ins>+#if ENABLE(CSS_SCROLL_SNAP)
+ case CSSPropertyScrollPaddingTop:
+ case CSSPropertyScrollPaddingRight:
+ case CSSPropertyScrollPaddingBottom:
+ case CSSPropertyScrollPaddingLeft:
+ shorthandPropertyID = CSSPropertyScrollPadding;
+ break;
+ case CSSPropertyScrollSnapMarginTop:
+ case CSSPropertyScrollSnapMarginRight:
+ case CSSPropertyScrollSnapMarginBottom:
+ case CSSPropertyScrollSnapMarginLeft:
+ shorthandPropertyID = CSSPropertyScrollSnapMargin;
+ break;
+#endif
</ins><span class="cx"> case CSSPropertyTransitionProperty:
</span><span class="cx"> case CSSPropertyTransitionDuration:
</span><span class="cx"> case CSSPropertyTransitionTimingFunction:
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleResolvercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleResolver.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleResolver.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/StyleResolver.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -155,10 +155,6 @@
</span><span class="cx"> #include "WebVTTElement.h"
</span><span class="cx"> #endif
</span><span class="cx">
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
-#include "LengthRepeat.h"
-#endif
-
</del><span class="cx"> namespace WebCore {
</span><span class="cx">
</span><span class="cx"> using namespace HTMLNames;
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSParserFastPathscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSParserFastPaths.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/parser/CSSParserFastPaths.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/parser/CSSParserFastPaths.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -769,10 +769,6 @@
</span><span class="cx"> case CSSPropertyWebkitRegionFragment:
</span><span class="cx"> return valueID == CSSValueAuto || valueID == CSSValueBreak;
</span><span class="cx"> #endif
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- case CSSPropertyWebkitScrollSnapType: // none | mandatory | proximity
- return valueID == CSSValueNone || valueID == CSSValueMandatory || valueID == CSSValueProximity;
-#endif
</del><span class="cx"> #if ENABLE(TOUCH_EVENTS)
</span><span class="cx"> case CSSPropertyTouchAction: // auto | manipulation
</span><span class="cx"> return valueID == CSSValueAuto || valueID == CSSValueManipulation;
</span><span class="lines">@@ -982,9 +978,6 @@
</span><span class="cx"> // support custom WebKit-based Apple applications.
</span><span class="cx"> case CSSPropertyWebkitTouchCallout:
</span><span class="cx"> #endif
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- case CSSPropertyWebkitScrollSnapType:
-#endif
</del><span class="cx"> #if ENABLE(APPLE_PAY)
</span><span class="cx"> case CSSPropertyApplePayButtonStyle:
</span><span class="cx"> case CSSPropertyApplePayButtonType:
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSPropertyParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -2176,66 +2176,36 @@
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><span class="cx">
</span><del>-static RefPtr<CSSValueList> consumeSnapPointCoordinateList(CSSParserTokenRange& range, CSSParserMode cssParserMode)
</del><ins>+static RefPtr<CSSValueList> consumeScrollSnapAlign(CSSParserTokenRange& range)
</ins><span class="cx"> {
</span><del>- RefPtr<CSSValueList> positions = CSSValueList::createSpaceSeparated();
- do {
-
- RefPtr<CSSPrimitiveValue> first = consumePositionX(range, cssParserMode);
- if (!first || range.atEnd())
- return nullptr;
- RefPtr<CSSPrimitiveValue> second = consumePositionY(range, cssParserMode);
- if (!second)
- return nullptr;
- RefPtr<CSSValue> position = createPrimitiveValuePair(first.releaseNonNull(), second.releaseNonNull(), Pair::IdenticalValueEncoding::DoNotCoalesce);
- positions->append(position.releaseNonNull());
- } while (!range.atEnd());
- return positions;
</del><ins>+ RefPtr<CSSValueList> alignmentValue = CSSValueList::createSpaceSeparated();
+ if (RefPtr<CSSPrimitiveValue> firstValue = consumeIdent<CSSValueNone, CSSValueStart, CSSValueCenter, CSSValueEnd>(range)) {
+ alignmentValue->append(firstValue.releaseNonNull());
+ if (auto secondValue = consumeIdent<CSSValueNone, CSSValueStart, CSSValueCenter, CSSValueEnd>(range))
+ alignmentValue->append(secondValue.releaseNonNull());
+ }
+ return alignmentValue->length() ? alignmentValue : nullptr;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static RefPtr<CSSValue> consumeScrollSnapCoordinate(CSSParserTokenRange& range, CSSParserMode cssParserMode)
</del><ins>+static RefPtr<CSSValueList> consumeScrollSnapType(CSSParserTokenRange& range)
</ins><span class="cx"> {
</span><del>- if (range.peek().id() == CSSValueNone)
- return consumeIdent(range);
- return consumeSnapPointCoordinateList(range, cssParserMode);
-}
</del><ins>+ RefPtr<CSSValueList> typeValue = CSSValueList::createSpaceSeparated();
+ RefPtr<CSSPrimitiveValue> secondValue;
</ins><span class="cx">
</span><del>-static RefPtr<CSSValue> consumeScrollSnapDestination(CSSParserTokenRange& range, CSSParserMode cssParserMode)
-{
- RefPtr<CSSPrimitiveValue> first = consumePositionX(range, cssParserMode);
- if (!first || range.atEnd())
</del><ins>+ auto firstValue = consumeIdent<CSSValueX, CSSValueY, CSSValueBlock, CSSValueInline, CSSValueBoth>(range);
+ if (firstValue)
+ secondValue = consumeIdent<CSSValueProximity, CSSValueMandatory>(range);
+ else
+ firstValue = consumeIdent<CSSValueNone, CSSValueProximity, CSSValueMandatory>(range);
+
+ if (!firstValue)
</ins><span class="cx"> return nullptr;
</span><del>- RefPtr<CSSPrimitiveValue> second = consumePositionY(range, cssParserMode);
- if (!second)
- return nullptr;
- return createPrimitiveValuePair(first.releaseNonNull(), second.releaseNonNull(), Pair::IdenticalValueEncoding::DoNotCoalesce);
-}
</del><span class="cx">
</span><del>-static RefPtr<CSSValue> consumeScrollSnapPoints(CSSParserTokenRange& range, CSSParserMode cssParserMode)
-{
- if (range.peek().id() == CSSValueNone || range.peek().id() == CSSValueElements)
- return consumeIdent(range);
-
- RefPtr<CSSValueList> points = CSSValueList::createSpaceSeparated();
- do {
- if (range.peek().functionId() == CSSValueRepeat) {
- CSSParserTokenRange args = consumeFunction(range);
- RefPtr<CSSPrimitiveValue> parsedValue = consumeLengthOrPercent(args, cssParserMode, ValueRangeNonNegative);
- if (args.atEnd() && parsedValue && (parsedValue->isCalculated() || parsedValue->doubleValue() > 0)) {
- Ref<CSSFunctionValue> result = CSSFunctionValue::create(CSSValueRepeat);
- result->append(parsedValue.releaseNonNull());
- points->append(WTFMove(result));
- }
- } else {
- RefPtr<CSSValue> length = consumeLengthOrPercent(range, cssParserMode, ValueRangeAll, UnitlessQuirk::Forbid);
- if (!length)
- return nullptr;
- points->append(length.releaseNonNull());
- }
- } while (!range.atEnd());
-
-
- return points;
</del><ins>+ typeValue->append(firstValue.releaseNonNull());
+ if (secondValue)
+ typeValue->append(secondValue.releaseNonNull());
+
+ return typeValue;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #endif
</span><span class="lines">@@ -3762,6 +3732,22 @@
</span><span class="cx"> case CSSPropertyWebkitPaddingBefore:
</span><span class="cx"> case CSSPropertyWebkitPaddingAfter:
</span><span class="cx"> return consumeLengthOrPercent(m_range, m_context.mode, ValueRangeNonNegative, UnitlessQuirk::Forbid);
</span><ins>+#if ENABLE(CSS_SCROLL_SNAP)
+ case CSSPropertyScrollSnapMarginBottom:
+ case CSSPropertyScrollSnapMarginLeft:
+ case CSSPropertyScrollSnapMarginRight:
+ case CSSPropertyScrollSnapMarginTop:
+ return consumeLength(m_range, m_context.mode, ValueRangeAll);
+ case CSSPropertyScrollPaddingBottom:
+ case CSSPropertyScrollPaddingLeft:
+ case CSSPropertyScrollPaddingRight:
+ case CSSPropertyScrollPaddingTop:
+ return consumeLengthOrPercent(m_range, m_context.mode, ValueRangeAll);
+ case CSSPropertyScrollSnapAlign:
+ return consumeScrollSnapAlign(m_range);
+ case CSSPropertyScrollSnapType:
+ return consumeScrollSnapType(m_range);
+#endif
</ins><span class="cx"> case CSSPropertyClip:
</span><span class="cx"> return consumeClip(m_range, m_context.mode);
</span><span class="cx"> #if ENABLE(TOUCH_EVENTS)
</span><span class="lines">@@ -3958,15 +3944,6 @@
</span><span class="cx"> return consumeImageOrNone(m_range, m_context);
</span><span class="cx"> case CSSPropertyPerspective:
</span><span class="cx"> return consumePerspective(m_range, m_context.mode);
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- case CSSPropertyWebkitScrollSnapCoordinate:
- return consumeScrollSnapCoordinate(m_range, m_context.mode);
- case CSSPropertyWebkitScrollSnapDestination:
- return consumeScrollSnapDestination(m_range, m_context.mode);
- case CSSPropertyWebkitScrollSnapPointsX:
- case CSSPropertyWebkitScrollSnapPointsY:
- return consumeScrollSnapPoints(m_range, m_context.mode);
-#endif
</del><span class="cx"> case CSSPropertyBorderTopRightRadius:
</span><span class="cx"> case CSSPropertyBorderTopLeftRadius:
</span><span class="cx"> case CSSPropertyBorderBottomLeftRadius:
</span><span class="lines">@@ -5351,6 +5328,12 @@
</span><span class="cx"> return consume4Values(marginShorthand(), important);
</span><span class="cx"> case CSSPropertyPadding:
</span><span class="cx"> return consume4Values(paddingShorthand(), important);
</span><ins>+#if ENABLE(CSS_SCROLL_SNAP)
+ case CSSPropertyScrollSnapMargin:
+ return consume4Values(scrollSnapMarginShorthand(), important);
+ case CSSPropertyScrollPadding:
+ return consume4Values(scrollPaddingShorthand(), important);
+#endif
</ins><span class="cx"> case CSSPropertyWebkitTextEmphasis:
</span><span class="cx"> return consumeShorthandGreedily(webkitTextEmphasisShorthand(), important);
</span><span class="cx"> case CSSPropertyOutline:
</span></span></pre></div>
<a id="trunkSourceWebCorepagescrollingAxisScrollSnapOffsetscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/page/scrolling/AxisScrollSnapOffsets.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/page/scrolling/AxisScrollSnapOffsets.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/page/scrolling/AxisScrollSnapOffsets.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -30,6 +30,7 @@
</span><span class="cx"> #include "HTMLCollection.h"
</span><span class="cx"> #include "HTMLElement.h"
</span><span class="cx"> #include "Length.h"
</span><ins>+#include "Logging.h"
</ins><span class="cx"> #include "RenderBox.h"
</span><span class="cx"> #include "RenderView.h"
</span><span class="cx"> #include "ScrollableArea.h"
</span><span class="lines">@@ -39,165 +40,136 @@
</span><span class="cx">
</span><span class="cx"> namespace WebCore {
</span><span class="cx">
</span><del>-static void appendChildSnapOffsets(HTMLElement& parent, bool shouldAddHorizontalChildOffsets, Vector<LayoutUnit>& horizontalSnapOffsetSubsequence, bool shouldAddVerticalChildOffsets, Vector<LayoutUnit>& verticalSnapOffsetSubsequence)
</del><ins>+enum class InsetOrOutset {
+ Inset,
+ Outset
+};
+
+static LayoutRect computeScrollSnapPortOrAreaRect(const LayoutRect& rect, const LengthBox& insetOrOutsetBox, InsetOrOutset insetOrOutset)
</ins><span class="cx"> {
</span><del>- RenderElement* scrollContainer = parent.renderer();
- ASSERT(scrollContainer);
-
- RenderView& renderView = scrollContainer->view();
-
- Vector<const RenderBox*> elements;
- for (auto& element : renderView.boxesWithScrollSnapCoordinates()) {
- if (element->findEnclosingScrollableContainer() != scrollContainer)
- continue;
-
- elements.append(element);
- }
-
- for (auto& box : elements) {
- auto& scrollSnapCoordinates = box->style().scrollSnapCoordinates();
- if (scrollSnapCoordinates.isEmpty())
- continue;
-
- LayoutRect viewSize = box->contentBoxRect();
- FloatPoint position = box->localToContainerPoint(FloatPoint(parent.renderBox()->scrollLeft(), parent.renderBox()->scrollTop()), parent.renderBox());
- for (auto& coordinate : scrollSnapCoordinates) {
- LayoutUnit lastPotentialSnapPositionX = position.x() + valueForLength(coordinate.width(), viewSize.width());
- if (shouldAddHorizontalChildOffsets && lastPotentialSnapPositionX > 0)
- horizontalSnapOffsetSubsequence.append(lastPotentialSnapPositionX);
-
- LayoutUnit lastPotentialSnapPositionY = position.y() + valueForLength(coordinate.height(), viewSize.height());
- if (shouldAddVerticalChildOffsets && lastPotentialSnapPositionY > 0)
- verticalSnapOffsetSubsequence.append(lastPotentialSnapPositionY);
- }
- }
</del><ins>+ LayoutBoxExtent extents(valueForLength(insetOrOutsetBox.top(), rect.height()), valueForLength(insetOrOutsetBox.right(), rect.width()), valueForLength(insetOrOutsetBox.bottom(), rect.height()), valueForLength(insetOrOutsetBox.left(), rect.width()));
+ auto snapPortOrArea(rect);
+ if (insetOrOutset == InsetOrOutset::Inset)
+ snapPortOrArea.contract(extents);
+ else
+ snapPortOrArea.expand(extents);
+ return snapPortOrArea;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static LayoutUnit destinationOffsetForViewSize(ScrollEventAxis axis, const LengthSize& destination, LayoutUnit viewSize)
</del><ins>+static LayoutUnit computeScrollSnapAlignOffset(const LayoutUnit& leftOrTop, const LayoutUnit& widthOrHeight, ScrollSnapAxisAlignType alignment)
</ins><span class="cx"> {
</span><del>- const Length& dimension = (axis == ScrollEventAxis::Horizontal) ? destination.width() : destination.height();
- return valueForLength(dimension, viewSize);
</del><ins>+ switch (alignment) {
+ case ScrollSnapAxisAlignType::Start:
+ return leftOrTop;
+ case ScrollSnapAxisAlignType::Center:
+ return leftOrTop + widthOrHeight / 2;
+ case ScrollSnapAxisAlignType::End:
+ return leftOrTop + widthOrHeight;
+ default:
+ ASSERT_NOT_REACHED();
+ return 0;
+ }
</ins><span class="cx"> }
</span><del>-
-static void updateFromStyle(Vector<LayoutUnit>& snapOffsets, const RenderStyle& style, ScrollEventAxis axis, LayoutUnit viewSize, LayoutUnit scrollSize, Vector<LayoutUnit>& snapOffsetSubsequence)
-{
- std::sort(snapOffsetSubsequence.begin(), snapOffsetSubsequence.end());
- if (snapOffsetSubsequence.isEmpty())
- snapOffsetSubsequence.append(0);
</del><span class="cx">
</span><del>- auto* points = (axis == ScrollEventAxis::Horizontal) ? style.scrollSnapPointsX() : style.scrollSnapPointsY();
- bool hasRepeat = points ? points->hasRepeat : false;
- LayoutUnit repeatOffset = points ? valueForLength(points->repeatOffset, viewSize) : LayoutUnit::fromPixel(1);
- repeatOffset = std::max<LayoutUnit>(repeatOffset, LayoutUnit::fromPixel(1));
-
- LayoutUnit destinationOffset = destinationOffsetForViewSize(axis, style.scrollSnapDestination(), viewSize);
- LayoutUnit curSnapPositionShift = 0;
- LayoutUnit maxScrollOffset = scrollSize - viewSize;
- LayoutUnit lastSnapPosition = curSnapPositionShift;
- do {
- for (auto& snapPosition : snapOffsetSubsequence) {
- LayoutUnit potentialSnapPosition = curSnapPositionShift + snapPosition - destinationOffset;
- if (potentialSnapPosition < 0)
- continue;
</del><ins>+#if !LOG_DISABLED
</ins><span class="cx">
</span><del>- if (potentialSnapPosition >= maxScrollOffset)
- break;
</del><ins>+static String snapOffsetsToString(const Vector<LayoutUnit>& snapOffsets)
+{
+ StringBuilder s;
+ s.append("[ ");
+ for (auto offset : snapOffsets)
+ s.append(String::format("%.1f ", offset.toFloat()));
</ins><span class="cx">
</span><del>- // Don't add another zero offset value.
- if (potentialSnapPosition)
- snapOffsets.append(potentialSnapPosition);
-
- lastSnapPosition = potentialSnapPosition + destinationOffset;
- }
- curSnapPositionShift = lastSnapPosition + repeatOffset;
- } while (hasRepeat && curSnapPositionShift < maxScrollOffset);
-
- if (snapOffsets.isEmpty())
- return;
-
- // Always put a snap point on the zero offset.
- if (snapOffsets.first())
- snapOffsets.insert(0, 0);
-
- // Always put a snap point on the maximum scroll offset.
- // Not a part of the spec, but necessary to prevent unreachable content when snapping.
- if (snapOffsets.last() != maxScrollOffset)
- snapOffsets.append(maxScrollOffset);
</del><ins>+ s.append("]");
+ return s.toString();
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static bool styleUsesElements(ScrollEventAxis axis, const RenderStyle& style)
</del><ins>+static String snapPortOrAreaToString(const LayoutRect& rect)
</ins><span class="cx"> {
</span><del>- const ScrollSnapPoints* scrollSnapPoints = (axis == ScrollEventAxis::Horizontal) ? style.scrollSnapPointsX() : style.scrollSnapPointsY();
- if (scrollSnapPoints)
- return scrollSnapPoints->usesElements;
</del><ins>+ return String::format("{{%.1f, %.1f} {%.1f, %.1f}}", rect.x().toFloat(), rect.y().toFloat(), rect.width().toFloat(), rect.height().toFloat());
+}
</ins><span class="cx">
</span><del>- const Length& destination = (axis == ScrollEventAxis::Horizontal) ? style.scrollSnapDestination().width() : style.scrollSnapDestination().height();
</del><ins>+#endif
</ins><span class="cx">
</span><del>- return !destination.isUndefined();
-}
-
</del><span class="cx"> void updateSnapOffsetsForScrollableArea(ScrollableArea& scrollableArea, HTMLElement& scrollingElement, const RenderBox& scrollingElementBox, const RenderStyle& scrollingElementStyle)
</span><span class="cx"> {
</span><del>- if (scrollingElementStyle.scrollSnapType() == ScrollSnapType::None) {
</del><ins>+ auto* scrollContainer = scrollingElement.renderer();
+ auto scrollSnapType = scrollingElementStyle.scrollSnapType();
+ if (!scrollContainer || scrollSnapType.strictness == ScrollSnapStrictness::None || scrollContainer->view().boxesWithScrollSnapPositions().isEmpty()) {
</ins><span class="cx"> scrollableArea.clearHorizontalSnapOffsets();
</span><span class="cx"> scrollableArea.clearVerticalSnapOffsets();
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- LayoutRect viewSize = scrollingElementBox.contentBoxRect();
- LayoutUnit viewWidth = viewSize.width();
- LayoutUnit viewHeight = viewSize.height();
- LayoutUnit scrollWidth = scrollingElementBox.scrollWidth();
- LayoutUnit scrollHeight = scrollingElementBox.scrollHeight();
- bool canComputeHorizontalOffsets = scrollWidth > 0 && viewWidth > 0 && viewWidth < scrollWidth;
- bool canComputeVerticalOffsets = scrollHeight > 0 && viewHeight > 0 && viewHeight < scrollHeight;
</del><ins>+ auto verticalSnapOffsets = std::make_unique<Vector<LayoutUnit>>();
+ auto horizontalSnapOffsets = std::make_unique<Vector<LayoutUnit>>();
+ HashSet<float> seenVerticalSnapOffsets;
+ HashSet<float> seenHorizontalSnapOffsets;
+ bool hasHorizontalSnapOffsets = scrollSnapType.axis == ScrollSnapAxis::Both || scrollSnapType.axis == ScrollSnapAxis::XAxis || scrollSnapType.axis == ScrollSnapAxis::Inline;
+ bool hasVerticalSnapOffsets = scrollSnapType.axis == ScrollSnapAxis::Both || scrollSnapType.axis == ScrollSnapAxis::YAxis || scrollSnapType.axis == ScrollSnapAxis::Block;
+ auto maxScrollLeft = scrollingElementBox.scrollWidth() - scrollingElementBox.contentWidth();
+ auto maxScrollTop = scrollingElementBox.scrollHeight() - scrollingElementBox.contentHeight();
+ LayoutPoint containerScrollOffset(scrollingElementBox.scrollLeft(), scrollingElementBox.scrollTop());
</ins><span class="cx">
</span><del>- if (!canComputeHorizontalOffsets)
- scrollableArea.clearHorizontalSnapOffsets();
- if (!canComputeVerticalOffsets)
- scrollableArea.clearVerticalSnapOffsets();
</del><ins>+ // The bounds of the scrolling container's snap port, where the top left of the scrolling container's border box is the origin.
+ auto scrollSnapPort = computeScrollSnapPortOrAreaRect(scrollingElementBox.paddingBoxRect(), scrollingElementStyle.scrollPadding(), InsetOrOutset::Inset);
+#if !LOG_DISABLED
+ LOG(Scrolling, "Computing scroll snap offsets in snap port: %s", snapPortOrAreaToString(scrollSnapPort).utf8().data());
+#endif
+ for (auto* child : scrollContainer->view().boxesWithScrollSnapPositions()) {
+ if (child->findEnclosingScrollableContainer() != scrollContainer)
+ continue;
</ins><span class="cx">
</span><del>- if (!canComputeHorizontalOffsets && !canComputeVerticalOffsets)
- return;
-
- Vector<LayoutUnit> horizontalSnapOffsetSubsequence;
- Vector<LayoutUnit> verticalSnapOffsetSubsequence;
-
- bool scrollSnapPointsXUsesElements = styleUsesElements(ScrollEventAxis::Horizontal, scrollingElementStyle);
- bool scrollSnapPointsYUsesElements = styleUsesElements(ScrollEventAxis::Vertical, scrollingElementStyle);
-
- if (scrollSnapPointsXUsesElements || scrollSnapPointsYUsesElements) {
- bool shouldAddHorizontalChildOffsets = scrollSnapPointsXUsesElements && canComputeHorizontalOffsets;
- bool shouldAddVerticalChildOffsets = scrollSnapPointsYUsesElements && canComputeVerticalOffsets;
- appendChildSnapOffsets(scrollingElement, shouldAddHorizontalChildOffsets, horizontalSnapOffsetSubsequence, shouldAddVerticalChildOffsets, verticalSnapOffsetSubsequence);
</del><ins>+ // The bounds of the child element's snap area, where the top left of the scrolling container's border box is the origin.
+ // The snap area is the bounding box of the child element's border box, after applying transformations.
+ auto scrollSnapArea = LayoutRect(child->localToContainerQuad(FloatQuad(child->borderBoundingBox()), scrollingElement.renderBox()).boundingBox());
+ scrollSnapArea.moveBy(containerScrollOffset);
+ scrollSnapArea = computeScrollSnapPortOrAreaRect(scrollSnapArea, child->style().scrollSnapMargin(), InsetOrOutset::Outset);
+#if !LOG_DISABLED
+ LOG(Scrolling, " Considering scroll snap area: %s", snapPortOrAreaToString(scrollSnapArea).utf8().data());
+#endif
+ auto alignment = child->style().scrollSnapAlign();
+ if (hasHorizontalSnapOffsets && alignment.x != ScrollSnapAxisAlignType::None) {
+ auto absoluteScrollOffset = clampTo<LayoutUnit>(computeScrollSnapAlignOffset(scrollSnapArea.x(), scrollSnapArea.width(), alignment.x) - computeScrollSnapAlignOffset(scrollSnapPort.x(), scrollSnapPort.width(), alignment.x), 0, maxScrollLeft);
+ if (!seenHorizontalSnapOffsets.contains(absoluteScrollOffset)) {
+ seenHorizontalSnapOffsets.add(absoluteScrollOffset);
+ horizontalSnapOffsets->append(absoluteScrollOffset);
+ }
+ }
+ if (hasVerticalSnapOffsets && alignment.y != ScrollSnapAxisAlignType::None) {
+ auto absoluteScrollOffset = clampTo<LayoutUnit>(computeScrollSnapAlignOffset(scrollSnapArea.y(), scrollSnapArea.height(), alignment.y) - computeScrollSnapAlignOffset(scrollSnapPort.y(), scrollSnapPort.height(), alignment.y), 0, maxScrollTop);
+ if (!seenVerticalSnapOffsets.contains(absoluteScrollOffset)) {
+ seenVerticalSnapOffsets.add(absoluteScrollOffset);
+ verticalSnapOffsets->append(absoluteScrollOffset);
+ }
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if (scrollingElementStyle.scrollSnapPointsX() && !scrollSnapPointsXUsesElements && canComputeHorizontalOffsets) {
- for (auto& snapLength : scrollingElementStyle.scrollSnapPointsX()->offsets)
- horizontalSnapOffsetSubsequence.append(valueForLength(snapLength, viewWidth));
- }
</del><ins>+ std::sort(horizontalSnapOffsets->begin(), horizontalSnapOffsets->end());
+ if (horizontalSnapOffsets->size()) {
+ if (horizontalSnapOffsets->last() != maxScrollLeft)
+ horizontalSnapOffsets->append(maxScrollLeft);
+ if (horizontalSnapOffsets->first())
+ horizontalSnapOffsets->insert(0, 0);
+#if !LOG_DISABLED
+ LOG(Scrolling, " => Computed horizontal scroll snap offsets: %s", snapOffsetsToString(*horizontalSnapOffsets).utf8().data());
+#endif
+ scrollableArea.setHorizontalSnapOffsets(WTFMove(horizontalSnapOffsets));
+ } else
+ scrollableArea.clearHorizontalSnapOffsets();
</ins><span class="cx">
</span><del>- if (scrollingElementStyle.scrollSnapPointsY() && !scrollSnapPointsYUsesElements && canComputeVerticalOffsets) {
- for (auto& snapLength : scrollingElementStyle.scrollSnapPointsY()->offsets)
- verticalSnapOffsetSubsequence.append(valueForLength(snapLength, viewHeight));
- }
-
- if (canComputeHorizontalOffsets) {
- auto horizontalSnapOffsets = std::make_unique<Vector<LayoutUnit>>();
- updateFromStyle(*horizontalSnapOffsets, scrollingElementStyle, ScrollEventAxis::Horizontal, viewWidth, scrollWidth, horizontalSnapOffsetSubsequence);
- if (horizontalSnapOffsets->isEmpty())
- scrollableArea.clearHorizontalSnapOffsets();
- else
- scrollableArea.setHorizontalSnapOffsets(WTFMove(horizontalSnapOffsets));
- }
- if (canComputeVerticalOffsets) {
- auto verticalSnapOffsets = std::make_unique<Vector<LayoutUnit>>();
- updateFromStyle(*verticalSnapOffsets, scrollingElementStyle, ScrollEventAxis::Vertical, viewHeight, scrollHeight, verticalSnapOffsetSubsequence);
- if (verticalSnapOffsets->isEmpty())
- scrollableArea.clearVerticalSnapOffsets();
- else
- scrollableArea.setVerticalSnapOffsets(WTFMove(verticalSnapOffsets));
- }
</del><ins>+ std::sort(verticalSnapOffsets->begin(), verticalSnapOffsets->end());
+ if (verticalSnapOffsets->size()) {
+ if (verticalSnapOffsets->last() != maxScrollTop)
+ verticalSnapOffsets->append(maxScrollTop);
+ if (verticalSnapOffsets->first())
+ verticalSnapOffsets->insert(0, 0);
+#if !LOG_DISABLED
+ LOG(Scrolling, " => Computed vertical scroll snap offsets: %s", snapOffsetsToString(*verticalSnapOffsets).utf8().data());
+#endif
+ scrollableArea.setVerticalSnapOffsets(WTFMove(verticalSnapOffsets));
+ } else
+ scrollableArea.clearVerticalSnapOffsets();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> } // namespace WebCore
</span></span></pre></div>
<a id="trunkSourceWebCoreplatformcocoaScrollControllermm"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/platform/cocoa/ScrollController.mm (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/platform/cocoa/ScrollController.mm 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/platform/cocoa/ScrollController.mm 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -583,9 +583,13 @@
</span><span class="cx"> {
</span><span class="cx"> if (auto* snapOffsets = scrollableArea.horizontalSnapOffsets())
</span><span class="cx"> updateScrollSnapPoints(ScrollEventAxis::Horizontal, *snapOffsets);
</span><ins>+ else
+ updateScrollSnapPoints(ScrollEventAxis::Horizontal, { });
</ins><span class="cx">
</span><span class="cx"> if (auto* snapOffsets = scrollableArea.verticalSnapOffsets())
</span><span class="cx"> updateScrollSnapPoints(ScrollEventAxis::Vertical, *snapOffsets);
</span><ins>+ else
+ updateScrollSnapPoints(ScrollEventAxis::Vertical, { });
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void ScrollController::updateScrollSnapPoints(ScrollEventAxis axis, const Vector<LayoutUnit>& snapPoints)
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -66,6 +66,7 @@
</span><span class="cx"> #include "RenderView.h"
</span><span class="cx"> #include "ScrollAnimator.h"
</span><span class="cx"> #include "ScrollbarTheme.h"
</span><ins>+#include "StyleScrollSnapPoints.h"
</ins><span class="cx"> #include "TransformState.h"
</span><span class="cx"> #include "htmlediting.h"
</span><span class="cx"> #include <algorithm>
</span><span class="lines">@@ -323,11 +324,12 @@
</span><span class="cx"> view().repaintRootContents();
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- if (!newStyle.scrollSnapCoordinates().isEmpty() || (oldStyle && !oldStyle->scrollSnapCoordinates().isEmpty())) {
- if (newStyle.scrollSnapCoordinates().isEmpty())
- view().unregisterBoxWithScrollSnapCoordinates(*this);
</del><ins>+ bool boxContributesSnapPositions = newStyle.scrollSnapArea().hasSnapPosition();
+ if (boxContributesSnapPositions || (oldStyle && oldStyle->scrollSnapArea().hasSnapPosition())) {
+ if (boxContributesSnapPositions)
+ view().registerBoxWithScrollSnapPositions(*this);
</ins><span class="cx"> else
</span><del>- view().registerBoxWithScrollSnapCoordinates(*this);
</del><ins>+ view().unregisterBoxWithScrollSnapPositions(*this);
</ins><span class="cx"> }
</span><span class="cx"> #endif
</span><span class="cx">
</span><span class="lines">@@ -453,8 +455,8 @@
</span><span class="cx"> void RenderBox::willBeRemovedFromTree()
</span><span class="cx"> {
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- if (hasInitializedStyle() && !style().scrollSnapCoordinates().isEmpty())
- view().unregisterBoxWithScrollSnapCoordinates(*this);
</del><ins>+ if (hasInitializedStyle() && style().scrollSnapArea().hasSnapPosition())
+ view().unregisterBoxWithScrollSnapPositions(*this);
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> RenderBoxModelObject::willBeRemovedFromTree();
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderLayerModelObjectcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayerModelObject.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayerModelObject.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/RenderLayerModelObject.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -29,6 +29,7 @@
</span><span class="cx"> #include "RenderLayerCompositor.h"
</span><span class="cx"> #include "RenderView.h"
</span><span class="cx"> #include "Settings.h"
</span><ins>+#include "StyleScrollSnapPoints.h"
</ins><span class="cx">
</span><span class="cx"> namespace WebCore {
</span><span class="cx">
</span><span class="lines">@@ -129,10 +130,7 @@
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><span class="cx"> static bool scrollSnapContainerRequiresUpdateForStyleUpdate(const RenderStyle& oldStyle, const RenderStyle& newStyle)
</span><span class="cx"> {
</span><del>- return !(oldStyle.scrollSnapType() == newStyle.scrollSnapType()
- && oldStyle.scrollSnapPointsX() == newStyle.scrollSnapPointsX()
- && oldStyle.scrollSnapPointsY() == newStyle.scrollSnapPointsY()
- && oldStyle.scrollSnapDestination() == newStyle.scrollSnapDestination());
</del><ins>+ return oldStyle.scrollSnapPort() != newStyle.scrollSnapPort();
</ins><span class="cx"> }
</span><span class="cx"> #endif
</span><span class="cx">
</span><span class="lines">@@ -198,11 +196,11 @@
</span><span class="cx"> frameView.updateScrollingCoordinatorScrollSnapProperties();
</span><span class="cx"> }
</span><span class="cx"> }
</span><del>- if (oldStyle && oldStyle->scrollSnapCoordinates() != newStyle.scrollSnapCoordinates()) {
</del><ins>+ if (oldStyle && oldStyle->scrollSnapArea() != newStyle.scrollSnapArea()) {
</ins><span class="cx"> const RenderBox* scrollSnapBox = enclosingBox().findEnclosingScrollableContainer();
</span><span class="cx"> if (scrollSnapBox && scrollSnapBox->layer()) {
</span><span class="cx"> const RenderStyle& style = scrollSnapBox->style();
</span><del>- if (style.scrollSnapType() != ScrollSnapType::None) {
</del><ins>+ if (style.scrollSnapType().strictness != ScrollSnapStrictness::None) {
</ins><span class="cx"> scrollSnapBox->layer()->updateSnapOffsets();
</span><span class="cx"> scrollSnapBox->layer()->updateScrollSnapState();
</span><span class="cx"> if (scrollSnapBox->isBody() || scrollSnapBox->isDocumentElementRenderer())
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderViewcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderView.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderView.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/RenderView.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1473,14 +1473,14 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>-void RenderView::registerBoxWithScrollSnapCoordinates(const RenderBox& box)
</del><ins>+void RenderView::registerBoxWithScrollSnapPositions(const RenderBox& box)
</ins><span class="cx"> {
</span><del>- m_boxesWithScrollSnapCoordinates.add(&box);
</del><ins>+ m_boxesWithScrollSnapPositions.add(&box);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-void RenderView::unregisterBoxWithScrollSnapCoordinates(const RenderBox& box)
</del><ins>+void RenderView::unregisterBoxWithScrollSnapPositions(const RenderBox& box)
</ins><span class="cx"> {
</span><del>- m_boxesWithScrollSnapCoordinates.remove(&box);
</del><ins>+ m_boxesWithScrollSnapPositions.remove(&box);
</ins><span class="cx"> }
</span><span class="cx"> #endif
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderViewh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderView.h (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderView.h 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/RenderView.h 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -249,9 +249,9 @@
</span><span class="cx"> void releaseProtectedRenderWidgets() { m_protectedRenderWidgets.clear(); }
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- void registerBoxWithScrollSnapCoordinates(const RenderBox&);
- void unregisterBoxWithScrollSnapCoordinates(const RenderBox&);
- const HashSet<const RenderBox*>& boxesWithScrollSnapCoordinates() { return m_boxesWithScrollSnapCoordinates; }
</del><ins>+ void registerBoxWithScrollSnapPositions(const RenderBox&);
+ void unregisterBoxWithScrollSnapPositions(const RenderBox&);
+ const HashSet<const RenderBox*>& boxesWithScrollSnapPositions() { return m_boxesWithScrollSnapPositions; }
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if !ASSERT_DISABLED
</span><span class="lines">@@ -393,7 +393,7 @@
</span><span class="cx"> SelectionRectGatherer m_selectionRectGatherer;
</span><span class="cx"> #endif
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- HashSet<const RenderBox*> m_boxesWithScrollSnapCoordinates;
</del><ins>+ HashSet<const RenderBox*> m_boxesWithScrollSnapPositions;
</ins><span class="cx"> #endif
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStylecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1958,64 +1958,135 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>-LengthSize RenderStyle::initialScrollSnapDestination()
</del><ins>+ScrollSnapType RenderStyle::initialScrollSnapType()
</ins><span class="cx"> {
</span><del>- return defaultScrollSnapDestination();
</del><ins>+ return { };
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-Vector<LengthSize> RenderStyle::initialScrollSnapCoordinates()
</del><ins>+ScrollSnapAlign RenderStyle::initialScrollSnapAlign()
</ins><span class="cx"> {
</span><del>- return Vector<LengthSize>();
</del><ins>+ return { };
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-const ScrollSnapPoints* RenderStyle::scrollSnapPointsX() const
</del><ins>+const StyleScrollSnapArea& RenderStyle::scrollSnapArea() const
</ins><span class="cx"> {
</span><del>- return rareNonInheritedData->m_scrollSnapPoints->xPoints.get();
</del><ins>+ return *rareNonInheritedData->m_scrollSnapArea;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-const ScrollSnapPoints* RenderStyle::scrollSnapPointsY() const
</del><ins>+const StyleScrollSnapPort& RenderStyle::scrollSnapPort() const
</ins><span class="cx"> {
</span><del>- return rareNonInheritedData->m_scrollSnapPoints->yPoints.get();
</del><ins>+ return *rareNonInheritedData->m_scrollSnapPort;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-const LengthSize& RenderStyle::scrollSnapDestination() const
</del><ins>+const ScrollSnapType& RenderStyle::scrollSnapType() const
</ins><span class="cx"> {
</span><del>- return rareNonInheritedData->m_scrollSnapPoints->destination;
</del><ins>+ return rareNonInheritedData->m_scrollSnapPort->type;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-const Vector<LengthSize>& RenderStyle::scrollSnapCoordinates() const
</del><ins>+const LengthBox& RenderStyle::scrollPadding() const
</ins><span class="cx"> {
</span><del>- return rareNonInheritedData->m_scrollSnapPoints->coordinates;
</del><ins>+ return rareNonInheritedData->m_scrollSnapPort->scrollPadding;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-void RenderStyle::setScrollSnapPointsX(std::unique_ptr<ScrollSnapPoints> points)
</del><ins>+const Length& RenderStyle::scrollPaddingTop() const
</ins><span class="cx"> {
</span><del>- if (rareNonInheritedData->m_scrollSnapPoints->xPoints.get() == points.get())
- return;
- rareNonInheritedData.access()->m_scrollSnapPoints.access()->xPoints = WTFMove(points);
</del><ins>+ return scrollPadding().top();
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-void RenderStyle::setScrollSnapPointsY(std::unique_ptr<ScrollSnapPoints> points)
</del><ins>+const Length& RenderStyle::scrollPaddingBottom() const
</ins><span class="cx"> {
</span><del>- if (rareNonInheritedData->m_scrollSnapPoints->yPoints.get() == points.get())
- return;
- rareNonInheritedData.access()->m_scrollSnapPoints.access()->yPoints = WTFMove(points);
</del><ins>+ return scrollPadding().bottom();
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-void RenderStyle::setScrollSnapDestination(LengthSize destination)
</del><ins>+const Length& RenderStyle::scrollPaddingLeft() const
</ins><span class="cx"> {
</span><del>- if (rareNonInheritedData->m_scrollSnapPoints->destination == destination)
- return;
- rareNonInheritedData.access()->m_scrollSnapPoints.access()->destination = WTFMove(destination);
</del><ins>+ return scrollPadding().left();
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-void RenderStyle::setScrollSnapCoordinates(Vector<LengthSize> coordinates)
</del><ins>+const Length& RenderStyle::scrollPaddingRight() const
</ins><span class="cx"> {
</span><del>- if (rareNonInheritedData->m_scrollSnapPoints->coordinates == coordinates)
- return;
- rareNonInheritedData.access()->m_scrollSnapPoints.access()->coordinates = WTFMove(coordinates);
</del><ins>+ return scrollPadding().right();
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+const ScrollSnapAlign& RenderStyle::scrollSnapAlign() const
+{
+ return rareNonInheritedData->m_scrollSnapArea->alignment;
+}
+
+const LengthBox& RenderStyle::scrollSnapMargin() const
+{
+ return rareNonInheritedData->m_scrollSnapArea->scrollSnapMargin;
+}
+
+const Length& RenderStyle::scrollSnapMarginTop() const
+{
+ return scrollSnapMargin().top();
+}
+
+const Length& RenderStyle::scrollSnapMarginBottom() const
+{
+ return scrollSnapMargin().bottom();
+}
+
+const Length& RenderStyle::scrollSnapMarginLeft() const
+{
+ return scrollSnapMargin().left();
+}
+
+const Length& RenderStyle::scrollSnapMarginRight() const
+{
+ return scrollSnapMargin().right();
+}
+
+void RenderStyle::setScrollSnapType(const ScrollSnapType& type)
+{
+ rareNonInheritedData.access()->m_scrollSnapPort.access()->type = type;
+}
+
+void RenderStyle::setScrollPaddingTop(const Length& length)
+{
+ rareNonInheritedData.access()->m_scrollSnapPort.access()->scrollPadding.setTop(length);
+}
+
+void RenderStyle::setScrollPaddingBottom(const Length& length)
+{
+ rareNonInheritedData.access()->m_scrollSnapPort.access()->scrollPadding.setBottom(length);
+}
+
+void RenderStyle::setScrollPaddingLeft(const Length& length)
+{
+ rareNonInheritedData.access()->m_scrollSnapPort.access()->scrollPadding.setLeft(length);
+}
+
+void RenderStyle::setScrollPaddingRight(const Length& length)
+{
+ rareNonInheritedData.access()->m_scrollSnapPort.access()->scrollPadding.setRight(length);
+}
+
+void RenderStyle::setScrollSnapAlign(const ScrollSnapAlign& alignment)
+{
+ rareNonInheritedData.access()->m_scrollSnapArea.access()->alignment = alignment;
+}
+
+void RenderStyle::setScrollSnapMarginTop(const Length& length)
+{
+ rareNonInheritedData.access()->m_scrollSnapArea.access()->scrollSnapMargin.setTop(length);
+}
+
+void RenderStyle::setScrollSnapMarginBottom(const Length& length)
+{
+ rareNonInheritedData.access()->m_scrollSnapArea.access()->scrollSnapMargin.setBottom(length);
+}
+
+void RenderStyle::setScrollSnapMarginLeft(const Length& length)
+{
+ rareNonInheritedData.access()->m_scrollSnapArea.access()->scrollSnapMargin.setLeft(length);
+}
+
+void RenderStyle::setScrollSnapMarginRight(const Length& length)
+{
+ rareNonInheritedData.access()->m_scrollSnapArea.access()->scrollSnapMargin.setRight(length);
+}
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> bool RenderStyle::hasReferenceFilterOnly() const
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStyleh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.h 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.h 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -113,7 +113,12 @@
</span><span class="cx"> class StyleResolver;
</span><span class="cx"> class TransformationMatrix;
</span><span class="cx">
</span><del>-struct ScrollSnapPoints;
</del><ins>+#if ENABLE(CSS_SCROLL_SNAP)
+class StyleScrollSnapPort;
+class StyleScrollSnapArea;
+struct ScrollSnapType;
+struct ScrollSnapAlign;
+#endif
</ins><span class="cx">
</span><span class="cx"> typedef Vector<std::unique_ptr<RenderStyle>, 4> PseudoStyleCache;
</span><span class="cx">
</span><span class="lines">@@ -1125,11 +1130,23 @@
</span><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- ScrollSnapType scrollSnapType() const { return static_cast<ScrollSnapType>(rareNonInheritedData->m_scrollSnapType); }
- const ScrollSnapPoints* scrollSnapPointsX() const;
- const ScrollSnapPoints* scrollSnapPointsY() const;
- const LengthSize& scrollSnapDestination() const;
- WEBCORE_EXPORT const Vector<LengthSize>& scrollSnapCoordinates() const;
</del><ins>+ // Scroll snap port style.
+ const StyleScrollSnapPort& scrollSnapPort() const;
+ const ScrollSnapType& scrollSnapType() const;
+ const LengthBox& scrollPadding() const;
+ const Length& scrollPaddingTop() const;
+ const Length& scrollPaddingBottom() const;
+ const Length& scrollPaddingLeft() const;
+ const Length& scrollPaddingRight() const;
+
+ // Scroll snap area style.
+ const StyleScrollSnapArea& scrollSnapArea() const;
+ const ScrollSnapAlign& scrollSnapAlign() const;
+ const LengthBox& scrollSnapMargin() const;
+ const Length& scrollSnapMarginTop() const;
+ const Length& scrollSnapMarginBottom() const;
+ const Length& scrollSnapMarginLeft() const;
+ const Length& scrollSnapMarginRight() const;
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(TOUCH_EVENTS)
</span><span class="lines">@@ -1695,11 +1712,19 @@
</span><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- void setScrollSnapType(ScrollSnapType type) { SET_VAR(rareNonInheritedData, m_scrollSnapType, static_cast<unsigned>(type)); }
- void setScrollSnapPointsX(std::unique_ptr<ScrollSnapPoints>);
- void setScrollSnapPointsY(std::unique_ptr<ScrollSnapPoints>);
- void setScrollSnapDestination(LengthSize);
- void setScrollSnapCoordinates(Vector<LengthSize>);
</del><ins>+ // Scroll snap port style.
+ void setScrollSnapType(const ScrollSnapType&);
+ void setScrollPaddingTop(const Length&);
+ void setScrollPaddingBottom(const Length&);
+ void setScrollPaddingLeft(const Length&);
+ void setScrollPaddingRight(const Length&);
+
+ // Scroll snap area style.
+ void setScrollSnapAlign(const ScrollSnapAlign&);
+ void setScrollSnapMarginTop(const Length&);
+ void setScrollSnapMarginBottom(const Length&);
+ void setScrollSnapMarginLeft(const Length&);
+ void setScrollSnapMarginRight(const Length&);
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(TOUCH_EVENTS)
</span><span class="lines">@@ -2067,11 +2092,10 @@
</span><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- static ScrollSnapType initialScrollSnapType() { return ScrollSnapType::None; }
- static ScrollSnapPoints* initialScrollSnapPointsX() { return nullptr; }
- static ScrollSnapPoints* initialScrollSnapPointsY() { return nullptr; }
- static LengthSize initialScrollSnapDestination();
- static Vector<LengthSize> initialScrollSnapCoordinates();
</del><ins>+ static ScrollSnapType initialScrollSnapType();
+ static ScrollSnapAlign initialScrollSnapAlign();
+ static Length initialScrollSnapMargin() { return Length(Fixed); }
+ static Length initialScrollPadding() { return Length(Fixed); }
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_TRAILING_WORD)
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStyleConstantsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyleConstants.h (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyleConstants.h 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/style/RenderStyleConstants.h 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -681,11 +681,26 @@
</span><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>-enum class ScrollSnapType {
</del><ins>+enum class ScrollSnapStrictness {
</ins><span class="cx"> None,
</span><span class="cx"> Proximity,
</span><span class="cx"> Mandatory
</span><span class="cx"> };
</span><ins>+
+enum class ScrollSnapAxis {
+ XAxis,
+ YAxis,
+ Block,
+ Inline,
+ Both
+};
+
+enum class ScrollSnapAxisAlignType {
+ None,
+ Start,
+ Center,
+ End
+};
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_TRAILING_WORD)
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleStyleRareNonInheritedDatacpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -59,7 +59,8 @@
</span><span class="cx"> , m_gridItem(StyleGridItemData::create())
</span><span class="cx"> #endif
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- , m_scrollSnapPoints(StyleScrollSnapPoints::create())
</del><ins>+ , m_scrollSnapPort(StyleScrollSnapPort::create())
+ , m_scrollSnapArea(StyleScrollSnapArea::create())
</ins><span class="cx"> #endif
</span><span class="cx"> , m_willChange(RenderStyle::initialWillChange())
</span><span class="cx"> , m_mask(FillLayer(MaskFillLayer))
</span><span class="lines">@@ -81,9 +82,6 @@
</span><span class="cx"> #if ENABLE(TOUCH_EVENTS)
</span><span class="cx"> , m_touchAction(static_cast<unsigned>(RenderStyle::initialTouchAction()))
</span><span class="cx"> #endif
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- , m_scrollSnapType(static_cast<unsigned>(RenderStyle::initialScrollSnapType()))
-#endif
</del><span class="cx"> , m_regionFragment(RenderStyle::initialRegionFragment())
</span><span class="cx"> , m_pageSizeType(PAGE_SIZE_AUTO)
</span><span class="cx"> , m_transformStyle3D(RenderStyle::initialTransformStyle3D())
</span><span class="lines">@@ -140,7 +138,8 @@
</span><span class="cx"> , m_gridItem(o.m_gridItem)
</span><span class="cx"> #endif
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- , m_scrollSnapPoints(o.m_scrollSnapPoints)
</del><ins>+ , m_scrollSnapPort(o.m_scrollSnapPort)
+ , m_scrollSnapArea(o.m_scrollSnapArea)
</ins><span class="cx"> #endif
</span><span class="cx"> , m_content(o.m_content ? o.m_content->clone() : nullptr)
</span><span class="cx"> , m_counterDirectives(o.m_counterDirectives ? clone(*o.m_counterDirectives) : nullptr)
</span><span class="lines">@@ -178,9 +177,6 @@
</span><span class="cx"> #if ENABLE(TOUCH_EVENTS)
</span><span class="cx"> , m_touchAction(o.m_touchAction)
</span><span class="cx"> #endif
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- , m_scrollSnapType(o.m_scrollSnapType)
-#endif
</del><span class="cx"> , m_regionFragment(o.m_regionFragment)
</span><span class="cx"> , m_pageSizeType(o.m_pageSizeType)
</span><span class="cx"> , m_transformStyle3D(o.m_transformStyle3D)
</span><span class="lines">@@ -248,7 +244,8 @@
</span><span class="cx"> && m_gridItem == o.m_gridItem
</span><span class="cx"> #endif
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- && m_scrollSnapPoints == o.m_scrollSnapPoints
</del><ins>+ && m_scrollSnapPort == o.m_scrollSnapPort
+ && m_scrollSnapArea == o.m_scrollSnapArea
</ins><span class="cx"> #endif
</span><span class="cx"> && contentDataEquivalent(o)
</span><span class="cx"> && arePointingToEqualData(m_counterDirectives, o.m_counterDirectives)
</span><span class="lines">@@ -298,9 +295,6 @@
</span><span class="cx"> #if ENABLE(TOUCH_EVENTS)
</span><span class="cx"> && m_touchAction == o.m_touchAction
</span><span class="cx"> #endif
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- && m_scrollSnapType == o.m_scrollSnapType
-#endif
</del><span class="cx"> #if ENABLE(CSS_COMPOSITING)
</span><span class="cx"> && m_effectiveBlendMode == o.m_effectiveBlendMode
</span><span class="cx"> && m_isolation == o.m_isolation
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleStyleRareNonInheritedDatah"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.h (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.h 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.h 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -58,7 +58,8 @@
</span><span class="cx"> class StyleResolver;
</span><span class="cx"> class StyleTransformData;
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>-class StyleScrollSnapPoints;
</del><ins>+class StyleScrollSnapPort;
+class StyleScrollSnapArea;
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> class ContentData;
</span><span class="lines">@@ -133,7 +134,8 @@
</span><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><del>- DataRef<StyleScrollSnapPoints> m_scrollSnapPoints;
</del><ins>+ DataRef<StyleScrollSnapPort> m_scrollSnapPort;
+ DataRef<StyleScrollSnapArea> m_scrollSnapArea;
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> std::unique_ptr<ContentData> m_content;
</span><span class="lines">@@ -186,10 +188,6 @@
</span><span class="cx"> unsigned m_touchAction : 1; // TouchAction
</span><span class="cx"> #endif
</span><span class="cx">
</span><del>-#if ENABLE(CSS_SCROLL_SNAP)
- unsigned m_scrollSnapType : 2; // ScrollSnapType
-#endif
-
</del><span class="cx"> unsigned m_regionFragment : 1; // RegionFragment
</span><span class="cx">
</span><span class="cx"> unsigned m_pageSizeType : 2; // PageSizeType
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleStyleScrollSnapPointscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/StyleScrollSnapPoints.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/StyleScrollSnapPoints.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/style/StyleScrollSnapPoints.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2014-2016 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -30,53 +30,39 @@
</span><span class="cx">
</span><span class="cx"> namespace WebCore {
</span><span class="cx">
</span><del>-ScrollSnapPoints::ScrollSnapPoints()
- : repeatOffset(0, Fixed)
- , hasRepeat(false)
- , usesElements(false)
</del><ins>+Ref<StyleScrollSnapPort> StyleScrollSnapPort::copy() const
</ins><span class="cx"> {
</span><ins>+ return adoptRef(*new StyleScrollSnapPort(*this));
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-bool operator==(const ScrollSnapPoints& a, const ScrollSnapPoints& b)
</del><ins>+StyleScrollSnapPort::StyleScrollSnapPort()
</ins><span class="cx"> {
</span><del>- return a.repeatOffset == b.repeatOffset
- && a.hasRepeat == b.hasRepeat
- && a.usesElements == b.usesElements
- && a.offsets == b.offsets;
</del><span class="cx"> }
</span><span class="cx">
</span><del>-LengthSize defaultScrollSnapDestination()
</del><ins>+inline StyleScrollSnapPort::StyleScrollSnapPort(const StyleScrollSnapPort& other)
+ : RefCounted()
+ , type(other.type)
+ , scrollPadding(other.scrollPadding)
</ins><span class="cx"> {
</span><del>- return LengthSize(Length(0, Fixed), Length(0, Fixed));
</del><span class="cx"> }
</span><span class="cx">
</span><del>-StyleScrollSnapPoints::StyleScrollSnapPoints()
- : destination(defaultScrollSnapDestination())
</del><ins>+Ref<StyleScrollSnapArea> StyleScrollSnapArea::copy() const
</ins><span class="cx"> {
</span><ins>+ return adoptRef(*new StyleScrollSnapArea(*this));
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-inline StyleScrollSnapPoints::StyleScrollSnapPoints(const StyleScrollSnapPoints& other)
- : RefCounted()
- , xPoints(other.xPoints ? std::make_unique<ScrollSnapPoints>(*other.xPoints) : nullptr)
- , yPoints(other.yPoints ? std::make_unique<ScrollSnapPoints>(*other.yPoints) : nullptr)
- , destination(other.destination)
- , coordinates(other.coordinates)
</del><ins>+StyleScrollSnapArea::StyleScrollSnapArea()
+ : scrollSnapMargin(0, 0, 0, 0)
</ins><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx">
</span><del>-Ref<StyleScrollSnapPoints> StyleScrollSnapPoints::copy() const
</del><ins>+inline StyleScrollSnapArea::StyleScrollSnapArea(const StyleScrollSnapArea& other)
+ : RefCounted()
+ , alignment(other.alignment)
+ , scrollSnapMargin(other.scrollSnapMargin)
</ins><span class="cx"> {
</span><del>- return adoptRef(*new StyleScrollSnapPoints(*this));
</del><span class="cx"> }
</span><span class="cx">
</span><del>-bool operator==(const StyleScrollSnapPoints& a, const StyleScrollSnapPoints& b)
-{
- return a.xPoints == b.xPoints
- && a.yPoints == b.yPoints
- && a.destination == b.destination
- && a.coordinates == b.coordinates;
-}
-
</del><span class="cx"> } // namespace WebCore
</span><span class="cx">
</span><span class="cx"> #endif /* ENABLE(CSS_SCROLL_SNAP) */
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleStyleScrollSnapPointsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/StyleScrollSnapPoints.h (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/StyleScrollSnapPoints.h 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/rendering/style/StyleScrollSnapPoints.h 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2014-2016 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -27,44 +27,79 @@
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><span class="cx">
</span><ins>+#include "LengthBox.h"
</ins><span class="cx"> #include "LengthSize.h"
</span><ins>+#include "RenderStyleConstants.h"
</ins><span class="cx"> #include <wtf/RefCounted.h>
</span><span class="cx"> #include <wtf/Vector.h>
</span><span class="cx">
</span><span class="cx"> namespace WebCore {
</span><span class="cx">
</span><del>-struct ScrollSnapPoints {
- Length repeatOffset;
- bool hasRepeat;
- bool usesElements;
- Vector<Length> offsets;
</del><ins>+struct ScrollSnapType {
+ ScrollSnapAxis axis { ScrollSnapAxis::Both };
+ ScrollSnapStrictness strictness { ScrollSnapStrictness::None };
+};
</ins><span class="cx">
</span><del>- ScrollSnapPoints();
</del><ins>+inline bool operator==(const ScrollSnapType& a, const ScrollSnapType& b)
+{
+ return a.axis == b.axis && a.strictness == b.strictness;
+}
+
+inline bool operator!=(const ScrollSnapType& a, const ScrollSnapType& b) { return !(a == b); }
+
+class StyleScrollSnapPort : public RefCounted<StyleScrollSnapPort> {
+public:
+ static Ref<StyleScrollSnapPort> create() { return adoptRef(*new StyleScrollSnapPort); }
+ Ref<StyleScrollSnapPort> copy() const;
+
+ ScrollSnapType type;
+ LengthBox scrollPadding { 0, 0, 0, 0 };
+
+private:
+ StyleScrollSnapPort();
+ StyleScrollSnapPort(const StyleScrollSnapPort&);
</ins><span class="cx"> };
</span><span class="cx">
</span><del>-bool operator==(const ScrollSnapPoints&, const ScrollSnapPoints&);
-inline bool operator!=(const ScrollSnapPoints& a, const ScrollSnapPoints& b) { return !(a == b); }
</del><ins>+inline bool operator==(const StyleScrollSnapPort& a, const StyleScrollSnapPort& b)
+{
+ return a.type == b.type && a.scrollPadding == b.scrollPadding;
+}
</ins><span class="cx">
</span><del>-LengthSize defaultScrollSnapDestination();
</del><ins>+inline bool operator!=(const StyleScrollSnapPort& a, const StyleScrollSnapPort& b) { return !(a == b); }
</ins><span class="cx">
</span><del>-class StyleScrollSnapPoints : public RefCounted<StyleScrollSnapPoints> {
</del><ins>+struct ScrollSnapAlign {
+ ScrollSnapAxisAlignType x { ScrollSnapAxisAlignType::None };
+ ScrollSnapAxisAlignType y { ScrollSnapAxisAlignType::None };
+};
+
+inline bool operator==(const ScrollSnapAlign& a, const ScrollSnapAlign& b)
+{
+ return a.x == b.x && a.y == b.y;
+}
+
+inline bool operator!=(const ScrollSnapAlign& a, const ScrollSnapAlign& b) { return !(a == b); }
+
+class StyleScrollSnapArea : public RefCounted<StyleScrollSnapArea> {
</ins><span class="cx"> public:
</span><del>- static Ref<StyleScrollSnapPoints> create() { return adoptRef(*new StyleScrollSnapPoints); }
- Ref<StyleScrollSnapPoints> copy() const;
</del><ins>+ static Ref<StyleScrollSnapArea> create() { return adoptRef(*new StyleScrollSnapArea); }
+ Ref<StyleScrollSnapArea> copy() const;
+ bool hasSnapPosition() const { return alignment.x != ScrollSnapAxisAlignType::None || alignment.y != ScrollSnapAxisAlignType::None; }
</ins><span class="cx">
</span><del>- std::unique_ptr<ScrollSnapPoints> xPoints;
- std::unique_ptr<ScrollSnapPoints> yPoints;
- LengthSize destination;
- Vector<LengthSize> coordinates;
</del><ins>+ ScrollSnapAlign alignment;
+ LengthBox scrollSnapMargin { 0, 0, 0, 0 };
</ins><span class="cx">
</span><span class="cx"> private:
</span><del>- StyleScrollSnapPoints();
- StyleScrollSnapPoints(const StyleScrollSnapPoints&);
</del><ins>+ StyleScrollSnapArea();
+ StyleScrollSnapArea(const StyleScrollSnapArea&);
</ins><span class="cx"> };
</span><span class="cx">
</span><del>-bool operator==(const StyleScrollSnapPoints&, const StyleScrollSnapPoints&);
-inline bool operator!=(const StyleScrollSnapPoints& a, const StyleScrollSnapPoints& b) { return !(a == b); }
</del><ins>+inline bool operator==(const StyleScrollSnapArea& a, const StyleScrollSnapArea& b)
+{
+ return a.alignment == b.alignment && a.scrollSnapMargin == b.scrollSnapMargin;
+}
</ins><span class="cx">
</span><ins>+inline bool operator!=(const StyleScrollSnapArea& a, const StyleScrollSnapArea& b) { return !(a == b); }
+
</ins><span class="cx"> } // namespace WebCore
</span><span class="cx">
</span><span class="cx"> #endif // ENABLE(CSS_SCROLL_SNAP)
</span></span></pre></div>
<a id="trunkSourceWebCoretestingInternalscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/testing/Internals.cpp (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/testing/Internals.cpp 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebCore/testing/Internals.cpp 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -3291,6 +3291,8 @@
</span><span class="cx"> if (!element.renderBox())
</span><span class="cx"> return String();
</span><span class="cx">
</span><ins>+ element.document().updateLayout();
+
</ins><span class="cx"> RenderBox& box = *element.renderBox();
</span><span class="cx"> ScrollableArea* scrollableArea;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebKit2ChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebKit2/ChangeLog (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebKit2/ChangeLog 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebKit2/ChangeLog 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+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.
+
+ Remove unused code for adopting scroll snapping in the PDF plugin.
+
+ * WebProcess/Plugins/PDF/PDFPlugin.mm:
+ (WebKit::PDFPlugin::didCalculateSizes):
+
</ins><span class="cx"> 2016-12-19 Yusuke Suzuki <utatane.tea@gmail.com>
</span><span class="cx">
</span><span class="cx"> [ES6] Enable ES6 Modules
</span></span></pre></div>
<a id="trunkSourceWebKit2WebProcessPluginsPDFPDFPluginmm"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebKit2/WebProcess/Plugins/PDF/PDFPlugin.mm (210023 => 210024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebKit2/WebProcess/Plugins/PDF/PDFPlugin.mm 2016-12-20 18:26:10 UTC (rev 210023)
+++ trunk/Source/WebKit2/WebProcess/Plugins/PDF/PDFPlugin.mm 2016-12-20 18:44:38 UTC (rev 210024)
</span><span class="lines">@@ -840,23 +840,7 @@
</span><span class="cx"> pluginElement->setInlineStyleProperty(CSSPropertyWidth, m_pdfDocumentSize.width(), CSSPrimitiveValue::CSS_PX);
</span><span class="cx"> pluginElement->setInlineStyleProperty(CSSPropertyHeight, m_pdfDocumentSize.height(), CSSPrimitiveValue::CSS_PX);
</span><span class="cx">
</span><del>- // FIXME: Can't do this in the overflow/subframe case. Where does scroll-snap-type go?
- if (m_usingContinuousMode || !m_frame->isMainFrame() || !isFullFramePlugin())
- return;
-
- RetainPtr<NSArray> pageRects = [m_pdfLayerController pageRects];
-
- StringBuilder coordinates;
- for (NSValue *rect in pageRects.get()) {
- // FIXME: Why 4?
- coordinates.appendNumber((long)[rect rectValue].origin.y / 4);
- coordinates.appendLiteral("px ");
- }
-
- pluginElement->setInlineStyleProperty(CSSPropertyWebkitScrollSnapCoordinate, coordinates.toString());
-
- Document* document = webFrame()->coreFrame()->document();
- document->bodyOrFrameset()->setInlineStyleProperty(CSSPropertyWebkitScrollSnapType, "mandatory");
</del><ins>+ // FIXME: Adopt the new scroll snap specification.
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> bool PDFPlugin::initialize(const Parameters& parameters)
</span></span></pre>
</div>
</div>
</body>
</html>