<!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>[181352] 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/181352">181352</a></dd>
<dt>Author</dt> <dd>bfulgham@apple.com</dd>
<dt>Date</dt> <dd>2015-03-10 16:19:38 -0700 (Tue, 10 Mar 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>CSS scroll-snap-destination and scroll-snap-coordinate are not honoring position values
https://bugs.webkit.org/show_bug.cgi?id=142411
Reviewed by Simon Fraser.
Source/WebCore:
Tested by css3/scroll-snap/scroll-snap-position-values.html.
Revise the CSSParser to recognize that scroll-snap-coordinates and scroll-snap-destination
may be specified as positions, therefore allowing 'top', 'bottom', and 'center' for the Y axis,
and 'left', 'right', and 'center' for the X axis.
Correct implementation to support calculated values for Scroll Snap Point markup. This required the
Scroll Snap Point-specific LengthRepeat class to change its internal representation from a CSSPrimitiveValue
to a regular CSSValue.
Add tests that these position labels, as well as combinations with percentages and pixel offsets
are parsed properly.
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::scrollSnapDestination): Switch from 'percentageOrZoomAdjustedValue' to 'zoomAdjustedPixelValueForLength'
when working with Length values. This is necessary to allow calculated results to be based on the proper default
page dimensions.
(WebCore::scrollSnapPoints): Ditto.
(WebCore::scrollSnapCoordinates): Ditto.
* css/CSSParser.cpp:
(WebCore::CSSParser::parseScrollSnapPositions): Consolidated code for dealing with snap point
positions.
(WebCore::CSSParser::parseScrollSnapDestination): Revise to call new helper function.
(WebCore::CSSParser::parseScrollSnapCoordinate): Ditto.
(WebCore::CSSParser::parseFillPositionX): Rename as parsePositionX.
(WebCore::CSSParser::parseFillPositionY): Rename as parsePositionY.
(WebCore::CSSParser::parseFillProperty): Update to call renamed parsePosition{X|Y} methods.
(WebCore::CSSParser::parseTransformOrigin): Ditto.
(WebCore::CSSParser::parsePerspectiveOrigin): Ditto.
* css/CSSParser.h:
* css/LengthRepeat.h: Revise class to use a CSSValue, rather than a CSSPrimitiveValue, so that we can represent
repeat values as calculations.
LayoutTests:
Add a test for <position> types in scroll snap operations. Also update the test expectations
for computed styles now that double-precision math is being used for calculated values.
* css3/scroll-snap/scroll-snap-position-values-expected.txt: Added.
* css3/scroll-snap/scroll-snap-position-values.html: Added.
* css3/scroll-snap/scroll-snap-property-computed-style-expected.txt: Updated
* css3/scroll-snap/scroll-snap-property-computed-style.js: Updated</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</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="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSComputedStyleDeclarationcpp">trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSParsercpp">trunk/Source/WebCore/css/CSSParser.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSParserh">trunk/Source/WebCore/css/CSSParser.h</a></li>
<li><a href="#trunkSourceWebCorecssLengthRepeath">trunk/Source/WebCore/css/LengthRepeat.h</a></li>
<li><a href="#trunkSourceWebCorecssStyleBuilderConverterh">trunk/Source/WebCore/css/StyleBuilderConverter.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<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>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (181351 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-03-10 23:12:53 UTC (rev 181351)
+++ trunk/LayoutTests/ChangeLog 2015-03-10 23:19:38 UTC (rev 181352)
</span><span class="lines">@@ -1,3 +1,19 @@
</span><ins>+2015-03-10 Brent Fulgham <bfulgham@apple.com>
+
+ CSS scroll-snap-destination and scroll-snap-coordinate are not honoring position values
+ https://bugs.webkit.org/show_bug.cgi?id=142411
+
+ Reviewed by Simon Fraser.
+
+ Add a test for <position> types in scroll snap operations. Also update the test expectations
+ for computed styles now that double-precision math is being used for calculated values.
+
+ * css3/scroll-snap/scroll-snap-position-values-expected.txt: Added.
+ * css3/scroll-snap/scroll-snap-position-values.html: Added.
+ * css3/scroll-snap/scroll-snap-property-computed-style-expected.txt: Updated
+ * css3/scroll-snap/scroll-snap-property-computed-style.js: Updated
+
+
</ins><span class="cx"> 2015-03-10 Enrica Casucci <enrica@apple.com>
</span><span class="cx">
</span><span class="cx"> Add support for more emoji with variation.
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappositionvaluesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values-expected.txt (0 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values-expected.txt 2015-03-10 23:19:38 UTC (rev 181352)
</span><span class="lines">@@ -0,0 +1,99 @@
</span><ins>+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 ""
+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 ""
+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappositionvalueshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values.html (0 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-position-values.html 2015-03-10 23:19:38 UTC (rev 181352)
</span><span class="lines">@@ -0,0 +1,310 @@
</span><ins>+<!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");
+ shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-coordinate']");
+ 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");
+ shouldBeEmptyString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-coordinate']");
+ 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>
+
</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 (181351 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style-expected.txt 2015-03-10 23:12:53 UTC (rev 181351)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style-expected.txt 2015-03-10 23:19:38 UTC (rev 181352)
</span><span class="lines">@@ -155,19 +155,19 @@
</span><span class="cx"> PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is '50% 100%, 150% 100%, 200% 100%'
</span><span class="cx">
</span><span class="cx"> mm along x axis with pixel repeat : 10mm repeat(42mm)
</span><del>-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '37.78125px repeat(158.734375px)'
</del><ins>+PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '37.7952766418457px repeat(158.7401580810547px)'
</ins><span class="cx">
</span><span class="cx"> in along x axis with pixel repeat : 10in repeat(4in)
</span><span class="cx"> PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '960px repeat(384px)'
</span><span class="cx">
</span><span class="cx"> pt along x axis with pixel repeat : 10pt repeat(42pt)
</span><del>-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '13.328125px repeat(56px)'
</del><ins>+PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '13.333333015441895px repeat(56px)'
</ins><span class="cx">
</span><span class="cx"> in/cm destination : 2in 5cm
</span><del>-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '192px 188.96875px'
</del><ins>+PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-destination') is '192px 188.97637939453125px'
</ins><span class="cx">
</span><span class="cx"> in/cm coordinate : 2in 5cm 5in 2cm
</span><del>-PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is '192px 188.96875px, 480px 75.578125px'
</del><ins>+PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-coordinate') is '192px 188.97637939453125px, 480px 75.5905532836914px'
</ins><span class="cx">
</span><span class="cx"> subpixel along x axis with pixel repeat : 100.5px repeat(50.25px)
</span><span class="cx"> PASS window.getComputedStyle(document.body).getPropertyValue('-webkit-scroll-snap-points-x') is '100.5px repeat(50.25px)'
</span></span></pre></div>
<a id="trunkLayoutTestscss3scrollsnapscrollsnappropertycomputedstylejs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style.js (181351 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style.js 2015-03-10 23:12:53 UTC (rev 181351)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-property-computed-style.js 2015-03-10 23:19:38 UTC (rev 181352)
</span><span class="lines">@@ -72,11 +72,11 @@
</span><span class="cx"> testComputedScrollSnapRule("multiple pixel coordinates", "coordinate", "50px 100px 150px 100px 200px 100px", "50px 100px, 150px 100px, 200px 100px");
</span><span class="cx"> testComputedScrollSnapRule("multiple percentage coordinates", "coordinate", "50% 100% 150% 100% 200% 100%", "50% 100%, 150% 100%, 200% 100%");
</span><span class="cx">
</span><del>-testComputedScrollSnapRule("mm along x axis with pixel repeat", "points-x", "10mm repeat(42mm)", "37.78125px repeat(158.734375px)");
</del><ins>+testComputedScrollSnapRule("mm along x axis with pixel repeat", "points-x", "10mm repeat(42mm)", "37.7952766418457px repeat(158.7401580810547px)");
</ins><span class="cx"> testComputedScrollSnapRule("in along x axis with pixel repeat", "points-x", "10in repeat(4in)", "960px repeat(384px)");
</span><del>-testComputedScrollSnapRule("pt along x axis with pixel repeat", "points-x", "10pt repeat(42pt)", "13.328125px repeat(56px)");
-testComputedScrollSnapRule("in/cm destination", "destination", "2in 5cm", "192px 188.96875px");
-testComputedScrollSnapRule("in/cm coordinate", "coordinate", "2in 5cm 5in 2cm", "192px 188.96875px, 480px 75.578125px");
</del><ins>+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");
</ins><span class="cx">
</span><span class="cx"> testComputedScrollSnapRule("subpixel along x axis with pixel repeat", "points-x", "100.5px repeat(50.25px)", "100.5px repeat(50.25px)");
</span><span class="cx"> testComputedScrollSnapRule("subpixel destination", "destination", "0.125px 2.4375px", "0.125px 2.4375px");
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (181351 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-03-10 23:12:53 UTC (rev 181351)
+++ trunk/Source/WebCore/ChangeLog 2015-03-10 23:19:38 UTC (rev 181352)
</span><span class="lines">@@ -1,3 +1,43 @@
</span><ins>+2015-03-10 Brent Fulgham <bfulgham@apple.com>
+
+ CSS scroll-snap-destination and scroll-snap-coordinate are not honoring position values
+ https://bugs.webkit.org/show_bug.cgi?id=142411
+
+ Reviewed by Simon Fraser.
+
+ Tested by css3/scroll-snap/scroll-snap-position-values.html.
+
+ Revise the CSSParser to recognize that scroll-snap-coordinates and scroll-snap-destination
+ may be specified as positions, therefore allowing 'top', 'bottom', and 'center' for the Y axis,
+ and 'left', 'right', and 'center' for the X axis.
+
+ Correct implementation to support calculated values for Scroll Snap Point markup. This required the
+ Scroll Snap Point-specific LengthRepeat class to change its internal representation from a CSSPrimitiveValue
+ to a regular CSSValue.
+
+ Add tests that these position labels, as well as combinations with percentages and pixel offsets
+ are parsed properly.
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::scrollSnapDestination): Switch from 'percentageOrZoomAdjustedValue' to 'zoomAdjustedPixelValueForLength'
+ when working with Length values. This is necessary to allow calculated results to be based on the proper default
+ page dimensions.
+ (WebCore::scrollSnapPoints): Ditto.
+ (WebCore::scrollSnapCoordinates): Ditto.
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseScrollSnapPositions): Consolidated code for dealing with snap point
+ positions.
+ (WebCore::CSSParser::parseScrollSnapDestination): Revise to call new helper function.
+ (WebCore::CSSParser::parseScrollSnapCoordinate): Ditto.
+ (WebCore::CSSParser::parseFillPositionX): Rename as parsePositionX.
+ (WebCore::CSSParser::parseFillPositionY): Rename as parsePositionY.
+ (WebCore::CSSParser::parseFillProperty): Update to call renamed parsePosition{X|Y} methods.
+ (WebCore::CSSParser::parseTransformOrigin): Ditto.
+ (WebCore::CSSParser::parsePerspectiveOrigin): Ditto.
+ * css/CSSParser.h:
+ * css/LengthRepeat.h: Revise class to use a CSSValue, rather than a CSSPrimitiveValue, so that we can represent
+ repeat values as calculations.
+
</ins><span class="cx"> 2015-03-10 Enrica Casucci <enrica@apple.com>
</span><span class="cx">
</span><span class="cx"> Add support for more emoji with variation.
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (181351 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2015-03-10 23:12:53 UTC (rev 181351)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2015-03-10 23:19:38 UTC (rev 181352)
</span><span class="lines">@@ -1109,8 +1109,8 @@
</span><span class="cx"> static Ref<CSSValueList> scrollSnapDestination(RenderStyle& style, const LengthSize& destination)
</span><span class="cx"> {
</span><span class="cx"> auto list = CSSValueList::createSpaceSeparated();
</span><del>- list.get().append(percentageOrZoomAdjustedValue(destination.width(), &style));
- list.get().append(percentageOrZoomAdjustedValue(destination.height(), &style));
</del><ins>+ list.get().append(zoomAdjustedPixelValueForLength(destination.width(), &style));
+ list.get().append(zoomAdjustedPixelValueForLength(destination.height(), &style));
</ins><span class="cx"> return list;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1123,9 +1123,9 @@
</span><span class="cx"> return cssValuePool().createIdentifierValue(CSSValueElements);
</span><span class="cx"> auto list = CSSValueList::createSpaceSeparated();
</span><span class="cx"> for (auto& point : points->offsets)
</span><del>- list.get().append(percentageOrZoomAdjustedValue(point, &style));
</del><ins>+ list.get().append(zoomAdjustedPixelValueForLength(point, &style));
</ins><span class="cx"> if (points->hasRepeat)
</span><del>- list.get().append(cssValuePool().createValue(LengthRepeat::create(percentageOrZoomAdjustedValue(points->repeatOffset, &style))));
</del><ins>+ list.get().append(cssValuePool().createValue(LengthRepeat::create(zoomAdjustedPixelValueForLength(points->repeatOffset, &style))));
</ins><span class="cx"> return WTF::move(list);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1138,8 +1138,8 @@
</span><span class="cx">
</span><span class="cx"> for (auto& coordinate : coordinates) {
</span><span class="cx"> auto pair = CSSValueList::createSpaceSeparated();
</span><del>- pair.get().append(percentageOrZoomAdjustedValue(coordinate.width(), &style));
- pair.get().append(percentageOrZoomAdjustedValue(coordinate.height(), &style));
</del><ins>+ pair.get().append(zoomAdjustedPixelValueForLength(coordinate.width(), &style));
+ pair.get().append(zoomAdjustedPixelValueForLength(coordinate.height(), &style));
</ins><span class="cx"> list.get().append(WTF::move(pair));
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.cpp (181351 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSParser.cpp 2015-03-10 23:12:53 UTC (rev 181351)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2015-03-10 23:19:38 UTC (rev 181352)
</span><span class="lines">@@ -3319,20 +3319,33 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+bool CSSParser::parseScrollSnapPositions(RefPtr<CSSValue>& cssValueX, RefPtr<CSSValue>& cssValueY)
+{
+ cssValueX = parsePositionX(*m_valueList);
+ if (!cssValueX)
+ return false;
+
+ // Don't accept odd-length lists of positions (must always have an X and a Y):
+ if (!m_valueList->next())
+ return false;
+
+ cssValueY = parsePositionY(*m_valueList);
+ if (!cssValueY)
+ return false;
+
+ return true;
+}
+
</ins><span class="cx"> bool CSSParser::parseScrollSnapDestination(CSSPropertyID propId, bool important)
</span><span class="cx"> {
</span><span class="cx"> RefPtr<CSSValueList> position = CSSValueList::createSpaceSeparated();
</span><span class="cx"> if (m_valueList->size() != 2)
</span><span class="cx"> return false;
</span><del>- ValueWithCalculation valueXWithCalculation(*m_valueList->current());
- if (!validateUnit(valueXWithCalculation, FPercent | FLength))
</del><ins>+
+ RefPtr<CSSValue> cssValueX, cssValueY;
+ if (!parseScrollSnapPositions(cssValueX, cssValueY))
</ins><span class="cx"> return false;
</span><del>- RefPtr<CSSValue> cssValueX = createPrimitiveNumericValue(valueXWithCalculation);
</del><span class="cx">
</span><del>- ValueWithCalculation valueYWithCalculation(*m_valueList->next());
- if (!validateUnit(valueYWithCalculation, FPercent | FLength))
- return false;
- RefPtr<CSSValue> cssValueY = createPrimitiveNumericValue(valueYWithCalculation);
</del><span class="cx"> position->append(cssValueX.releaseNonNull());
</span><span class="cx"> position->append(cssValueY.releaseNonNull());
</span><span class="cx"> addProperty(propId, position, important);
</span><span class="lines">@@ -3344,17 +3357,15 @@
</span><span class="cx"> {
</span><span class="cx"> RefPtr<CSSValueList> positions = CSSValueList::createSpaceSeparated();
</span><span class="cx"> while (m_valueList->current()) {
</span><del>- ValueWithCalculation valueXWithCalculation(*m_valueList->current());
- // Don't accept odd-length lists of coordinates.
- if (!m_valueList->next())
</del><ins>+ RefPtr<CSSValue> cssValueX, cssValueY;
+ if (!parseScrollSnapPositions(cssValueX, cssValueY))
</ins><span class="cx"> return false;
</span><del>- ValueWithCalculation valueYWithCalculation(*m_valueList->current());
- if (!validateUnit(valueXWithCalculation, FPercent | FLength) || !validateUnit(valueYWithCalculation, FPercent | FLength))
- return false;
- positions->append(createPrimitiveNumericValue(valueXWithCalculation));
- positions->append(createPrimitiveNumericValue(valueYWithCalculation));
</del><ins>+
+ positions->append(cssValueX.releaseNonNull());
+ positions->append(cssValueY.releaseNonNull());
</ins><span class="cx"> m_valueList->next();
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> if (positions->length()) {
</span><span class="cx"> addProperty(propId, positions.release(), important);
</span><span class="cx"> return true;
</span><span class="lines">@@ -4037,7 +4048,7 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-PassRefPtr<CSSValue> CSSParser::parseFillPositionX(CSSParserValueList& valueList)
</del><ins>+PassRefPtr<CSSValue> CSSParser::parsePositionX(CSSParserValueList& valueList)
</ins><span class="cx"> {
</span><span class="cx"> int id = valueList.current()->id;
</span><span class="cx"> if (id == CSSValueLeft || id == CSSValueRight || id == CSSValueCenter) {
</span><span class="lines">@@ -4054,7 +4065,7 @@
</span><span class="cx"> return nullptr;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-PassRefPtr<CSSValue> CSSParser::parseFillPositionY(CSSParserValueList& valueList)
</del><ins>+PassRefPtr<CSSValue> CSSParser::parsePositionY(CSSParserValueList& valueList)
</ins><span class="cx"> {
</span><span class="cx"> int id = valueList.current()->id;
</span><span class="cx"> if (id == CSSValueTop || id == CSSValueBottom || id == CSSValueCenter) {
</span><span class="lines">@@ -4564,14 +4575,14 @@
</span><span class="cx"> break;
</span><span class="cx"> case CSSPropertyBackgroundPositionX:
</span><span class="cx"> case CSSPropertyWebkitMaskPositionX: {
</span><del>- currValue = parseFillPositionX(*m_valueList);
</del><ins>+ currValue = parsePositionX(*m_valueList);
</ins><span class="cx"> if (currValue)
</span><span class="cx"> m_valueList->next();
</span><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx"> case CSSPropertyBackgroundPositionY:
</span><span class="cx"> case CSSPropertyWebkitMaskPositionY: {
</span><del>- currValue = parseFillPositionY(*m_valueList);
</del><ins>+ currValue = parsePositionY(*m_valueList);
</ins><span class="cx"> if (currValue)
</span><span class="cx"> m_valueList->next();
</span><span class="cx"> break;
</span><span class="lines">@@ -9714,13 +9725,13 @@
</span><span class="cx"> // parseTransformOriginShorthand advances the m_valueList pointer
</span><span class="cx"> break;
</span><span class="cx"> case CSSPropertyWebkitTransformOriginX: {
</span><del>- value = parseFillPositionX(*m_valueList);
</del><ins>+ value = parsePositionX(*m_valueList);
</ins><span class="cx"> if (value)
</span><span class="cx"> m_valueList->next();
</span><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx"> case CSSPropertyWebkitTransformOriginY: {
</span><del>- value = parseFillPositionY(*m_valueList);
</del><ins>+ value = parsePositionY(*m_valueList);
</ins><span class="cx"> if (value)
</span><span class="cx"> m_valueList->next();
</span><span class="cx"> break;
</span><span class="lines">@@ -9757,13 +9768,13 @@
</span><span class="cx"> parse2ValuesFillPosition(*m_valueList, value, value2);
</span><span class="cx"> break;
</span><span class="cx"> case CSSPropertyWebkitPerspectiveOriginX: {
</span><del>- value = parseFillPositionX(*m_valueList);
</del><ins>+ value = parsePositionX(*m_valueList);
</ins><span class="cx"> if (value)
</span><span class="cx"> m_valueList->next();
</span><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx"> case CSSPropertyWebkitPerspectiveOriginY: {
</span><del>- value = parseFillPositionY(*m_valueList);
</del><ins>+ value = parsePositionY(*m_valueList);
</ins><span class="cx"> if (value)
</span><span class="cx"> m_valueList->next();
</span><span class="cx"> break;
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParserh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.h (181351 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSParser.h 2015-03-10 23:12:53 UTC (rev 181351)
+++ trunk/Source/WebCore/css/CSSParser.h 2015-03-10 23:19:38 UTC (rev 181352)
</span><span class="lines">@@ -154,8 +154,8 @@
</span><span class="cx"> enum FillPositionFlag { InvalidFillPosition = 0, AmbiguousFillPosition = 1, XFillPosition = 2, YFillPosition = 4 };
</span><span class="cx"> enum FillPositionParsingMode { ResolveValuesAsPercent = 0, ResolveValuesAsKeyword = 1 };
</span><span class="cx"> PassRefPtr<CSSPrimitiveValue> parseFillPositionComponent(CSSParserValueList&, unsigned& cumulativeFlags, FillPositionFlag& individualFlag, FillPositionParsingMode = ResolveValuesAsPercent);
</span><del>- PassRefPtr<CSSValue> parseFillPositionX(CSSParserValueList&);
- PassRefPtr<CSSValue> parseFillPositionY(CSSParserValueList&);
</del><ins>+ PassRefPtr<CSSValue> parsePositionX(CSSParserValueList&);
+ PassRefPtr<CSSValue> parsePositionY(CSSParserValueList&);
</ins><span class="cx"> void parse2ValuesFillPosition(CSSParserValueList&, RefPtr<CSSValue>&, RefPtr<CSSValue>&);
</span><span class="cx"> bool isPotentialPositionValue(CSSParserValue&);
</span><span class="cx"> void parseFillPosition(CSSParserValueList&, RefPtr<CSSValue>&, RefPtr<CSSValue>&);
</span><span class="lines">@@ -559,6 +559,7 @@
</span><span class="cx"> bool parseNonElementSnapPoints(CSSPropertyID propId, bool important);
</span><span class="cx"> bool parseScrollSnapDestination(CSSPropertyID propId, bool important);
</span><span class="cx"> bool parseScrollSnapCoordinate(CSSPropertyID propId, bool important);
</span><ins>+ bool parseScrollSnapPositions(RefPtr<CSSValue>& cssValueX, RefPtr<CSSValue>& cssValueY);
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> bool parseFontFaceSrcURI(CSSValueList&);
</span></span></pre></div>
<a id="trunkSourceWebCorecssLengthRepeath"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/LengthRepeat.h (181351 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/LengthRepeat.h 2015-03-10 23:12:53 UTC (rev 181351)
+++ trunk/Source/WebCore/css/LengthRepeat.h 2015-03-10 23:19:38 UTC (rev 181352)
</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-2015 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">@@ -36,13 +36,13 @@
</span><span class="cx">
</span><span class="cx"> class LengthRepeat : public RefCounted<LengthRepeat> {
</span><span class="cx"> public:
</span><del>- static PassRefPtr<LengthRepeat> create(PassRefPtr<CSSPrimitiveValue> interval) { return adoptRef(new LengthRepeat(interval)); }
</del><ins>+ static PassRefPtr<LengthRepeat> create(PassRefPtr<CSSValue> interval) { return adoptRef(new LengthRepeat(interval)); }
</ins><span class="cx">
</span><span class="cx"> PassRefPtr<LengthRepeat> cloneForCSSOM() const { return create(interval()); }
</span><span class="cx">
</span><del>- CSSPrimitiveValue* interval() const { return m_interval.get(); }
</del><ins>+ CSSValue* interval() const { return m_interval.get(); }
</ins><span class="cx">
</span><del>- void setInterval(PassRefPtr<CSSPrimitiveValue> interval) { m_interval = interval; }
</del><ins>+ void setInterval(PassRefPtr<CSSValue> interval) { m_interval = interval; }
</ins><span class="cx">
</span><span class="cx"> bool equals(const LengthRepeat& other) const
</span><span class="cx"> {
</span><span class="lines">@@ -55,12 +55,12 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> private:
</span><del>- LengthRepeat(PassRefPtr<CSSPrimitiveValue> interval)
</del><ins>+ LengthRepeat(PassRefPtr<CSSValue> interval)
</ins><span class="cx"> : m_interval(interval)
</span><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx">
</span><del>- RefPtr<CSSPrimitiveValue> m_interval;
</del><ins>+ RefPtr<CSSValue> m_interval;
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> } // namespace WebCore
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleBuilderConverterh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleBuilderConverter.h (181351 => 181352)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleBuilderConverter.h 2015-03-10 23:12:53 UTC (rev 181351)
+++ trunk/Source/WebCore/css/StyleBuilderConverter.h 2015-03-10 23:19:38 UTC (rev 181352)
</span><span class="lines">@@ -705,7 +705,7 @@
</span><span class="cx"> #if ENABLE(CSS_SCROLL_SNAP)
</span><span class="cx"> inline Length StyleBuilderConverter::parseSnapCoordinate(StyleResolver& styleResolver, const CSSValue& value)
</span><span class="cx"> {
</span><del>- return downcast<CSSPrimitiveValue>(value).convertToLength<FixedIntegerConversion | PercentConversion | AutoConversion>(styleResolver.state().cssToLengthConversionData());
</del><ins>+ return downcast<CSSPrimitiveValue>(value).convertToLength<FixedIntegerConversion | PercentConversion | CalculatedConversion | AutoConversion>(styleResolver.state().cssToLengthConversionData());
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> inline std::unique_ptr<ScrollSnapPoints> StyleBuilderConverter::convertScrollSnapPoints(StyleResolver& styleResolver, CSSValue& value)
</span></span></pre>
</div>
</div>
</body>
</html>