mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-26 06:11:37 +00:00
Bug 1553227 - Remove old CSS scroll snap implementation. r=hiro
This will save us some time from figuring out what's the best thing to do in bug 1552587, so that other patches I have in flight (mainly bug 1552708) can land, since we cannot add a single byte to nsStyleDisplay right now otherwise. The code removed here is well isolated and not that complicated, so it seems to me that should be easy to bring back should we have an emergency (and I commit to doing that while preserving the nsStyleDisplay size limit if we need to :)). Differential Revision: https://phabricator.services.mozilla.com/D32026 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
9d6c1cc1e1
commit
ca59532ce8
@ -3084,10 +3084,6 @@ exports.CSS_PROPERTIES = {
|
||||
"animation-play-state",
|
||||
"animation-fill-mode",
|
||||
"animation-delay",
|
||||
"scroll-snap-points-x",
|
||||
"scroll-snap-points-y",
|
||||
"scroll-snap-destination",
|
||||
"scroll-snap-coordinate",
|
||||
"transform",
|
||||
"rotate",
|
||||
"scale",
|
||||
@ -10719,10 +10715,6 @@ exports.PREFERENCES = [
|
||||
"scale",
|
||||
"layout.css.individual-transform.enabled"
|
||||
],
|
||||
[
|
||||
"scroll-snap-coordinate",
|
||||
"layout.css.scroll-snap.enabled"
|
||||
],
|
||||
[
|
||||
"scrollbar-color",
|
||||
"layout.css.scrollbar-color.enabled"
|
||||
@ -10731,18 +10723,6 @@ exports.PREFERENCES = [
|
||||
"translate",
|
||||
"layout.css.individual-transform.enabled"
|
||||
],
|
||||
[
|
||||
"scroll-snap-points-x",
|
||||
"layout.css.scroll-snap.enabled"
|
||||
],
|
||||
[
|
||||
"scroll-snap-points-y",
|
||||
"layout.css.scroll-snap.enabled"
|
||||
],
|
||||
[
|
||||
"scroll-snap-destination",
|
||||
"layout.css.scroll-snap.enabled"
|
||||
],
|
||||
[
|
||||
"-moz-binding",
|
||||
"layout.css.moz-binding.content.enabled"
|
||||
|
@ -53,11 +53,7 @@ ScrollStyles::ScrollStyles(WritingMode aWritingMode, StyleOverflow aH,
|
||||
mVertical(aV),
|
||||
mScrollBehavior(aDisplay->mScrollBehavior),
|
||||
mOverscrollBehaviorX(aDisplay->mOverscrollBehaviorX),
|
||||
mOverscrollBehaviorY(aDisplay->mOverscrollBehaviorY),
|
||||
mScrollSnapPointsX(aDisplay->mScrollSnapPointsX),
|
||||
mScrollSnapPointsY(aDisplay->mScrollSnapPointsY),
|
||||
mScrollSnapDestinationX(aDisplay->mScrollSnapDestination.horizontal),
|
||||
mScrollSnapDestinationY(aDisplay->mScrollSnapDestination.vertical) {
|
||||
mOverscrollBehaviorY(aDisplay->mOverscrollBehaviorY) {
|
||||
InitializeScrollSnapType(aWritingMode, aDisplay);
|
||||
}
|
||||
|
||||
@ -67,11 +63,7 @@ ScrollStyles::ScrollStyles(WritingMode aWritingMode,
|
||||
mVertical(aDisplay->mOverflowY),
|
||||
mScrollBehavior(aDisplay->mScrollBehavior),
|
||||
mOverscrollBehaviorX(aDisplay->mOverscrollBehaviorX),
|
||||
mOverscrollBehaviorY(aDisplay->mOverscrollBehaviorY),
|
||||
mScrollSnapPointsX(aDisplay->mScrollSnapPointsX),
|
||||
mScrollSnapPointsY(aDisplay->mScrollSnapPointsY),
|
||||
mScrollSnapDestinationX(aDisplay->mScrollSnapDestination.horizontal),
|
||||
mScrollSnapDestinationY(aDisplay->mScrollSnapDestination.vertical) {
|
||||
mOverscrollBehaviorY(aDisplay->mOverscrollBehaviorY) {
|
||||
InitializeScrollSnapType(aWritingMode, aDisplay);
|
||||
}
|
||||
|
||||
|
@ -28,10 +28,6 @@ struct ScrollStyles {
|
||||
StyleOverscrollBehavior mOverscrollBehaviorY;
|
||||
StyleScrollSnapStrictness mScrollSnapTypeX;
|
||||
StyleScrollSnapStrictness mScrollSnapTypeY;
|
||||
nsStyleCoord mScrollSnapPointsX;
|
||||
nsStyleCoord mScrollSnapPointsY;
|
||||
LengthPercentage mScrollSnapDestinationX;
|
||||
LengthPercentage mScrollSnapDestinationY;
|
||||
|
||||
ScrollStyles(StyleOverflow aH, StyleOverflow aV)
|
||||
: mHorizontal(aH),
|
||||
@ -40,11 +36,7 @@ struct ScrollStyles {
|
||||
mOverscrollBehaviorX(StyleOverscrollBehavior::Auto),
|
||||
mOverscrollBehaviorY(StyleOverscrollBehavior::Auto),
|
||||
mScrollSnapTypeX(StyleScrollSnapStrictness::None),
|
||||
mScrollSnapTypeY(StyleScrollSnapStrictness::None),
|
||||
mScrollSnapPointsX(nsStyleCoord(eStyleUnit_None)),
|
||||
mScrollSnapPointsY(nsStyleCoord(eStyleUnit_None)),
|
||||
mScrollSnapDestinationX(LengthPercentage::Zero()),
|
||||
mScrollSnapDestinationY(LengthPercentage::Zero()) {}
|
||||
mScrollSnapTypeY(StyleScrollSnapStrictness::None) {}
|
||||
|
||||
ScrollStyles(WritingMode aWritingMode, const nsStyleDisplay* aDisplay);
|
||||
ScrollStyles(WritingMode aWritingMode, StyleOverflow aH, StyleOverflow aV,
|
||||
@ -58,11 +50,7 @@ struct ScrollStyles {
|
||||
aStyles.mOverscrollBehaviorX == mOverscrollBehaviorX &&
|
||||
aStyles.mOverscrollBehaviorY == mOverscrollBehaviorY &&
|
||||
aStyles.mScrollSnapTypeX == mScrollSnapTypeX &&
|
||||
aStyles.mScrollSnapTypeY == mScrollSnapTypeY &&
|
||||
aStyles.mScrollSnapPointsX == mScrollSnapPointsX &&
|
||||
aStyles.mScrollSnapPointsY == mScrollSnapPointsY &&
|
||||
aStyles.mScrollSnapDestinationX == mScrollSnapDestinationX &&
|
||||
aStyles.mScrollSnapDestinationY == mScrollSnapDestinationY;
|
||||
aStyles.mScrollSnapTypeY == mScrollSnapTypeY;
|
||||
}
|
||||
bool operator!=(const ScrollStyles& aStyles) const {
|
||||
return !(*this == aStyles);
|
||||
|
@ -1,7 +1,6 @@
|
||||
<html class="reftest-wait">
|
||||
<style id='style'>
|
||||
:first-of-type {
|
||||
scroll-snap-coordinate: 0 right top;
|
||||
grid-column-gap: initial;
|
||||
outline-width: 68.8101389898pc;
|
||||
text-decoration: inherit;
|
||||
|
@ -1022,11 +1022,7 @@ static bool CheckOverflow(ComputedStyle* aComputedStyle,
|
||||
display->mScrollBehavior == NS_STYLE_SCROLL_BEHAVIOR_AUTO &&
|
||||
display->mOverscrollBehaviorX == StyleOverscrollBehavior::Auto &&
|
||||
display->mOverscrollBehaviorY == StyleOverscrollBehavior::Auto &&
|
||||
display->mScrollSnapType.strictness == StyleScrollSnapStrictness::None &&
|
||||
display->mScrollSnapPointsX == nsStyleCoord(eStyleUnit_None) &&
|
||||
display->mScrollSnapPointsY == nsStyleCoord(eStyleUnit_None) &&
|
||||
display->mScrollSnapDestination.horizontal == LengthPercentage::Zero() &&
|
||||
display->mScrollSnapDestination.vertical == LengthPercentage::Zero()) {
|
||||
display->mScrollSnapType.strictness == StyleScrollSnapStrictness::None) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
@ -408,10 +408,6 @@ skip-if = toolkit == 'android' # Bug 1355844
|
||||
support-files =
|
||||
scroll_selection_into_view_window.html
|
||||
scroll_selection_into_view_window_frame.html
|
||||
[test_scroll_snapping.html]
|
||||
skip-if = toolkit == 'android' # Bug 1355851
|
||||
[test_scroll_snapping_scrollbars.html]
|
||||
skip-if = toolkit == 'android' || os == 'win' # Bug 1355851, bug 1381932, Bug 1379810
|
||||
[test_transformed_scrolling_repaints.html]
|
||||
[test_transformed_scrolling_repaints_2.html]
|
||||
skip-if = (headless && os == 'mac') # Headless Bug 1414103
|
||||
|
@ -1,807 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test for scroll snapping</title>
|
||||
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<script src="/tests/SimpleTest/EventUtils.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p id="display"></p>
|
||||
<div id="sc" style="margin: 0px; padding: 0px; overflow: scroll; width: 500px; height: 250px;">
|
||||
<div id="sd" style="margin: 0px; padding: 0px; width: 1500px; height: 1250px;"></div>
|
||||
</div>
|
||||
|
||||
<pre id="test">
|
||||
<script class="testbody" type="text/javascript">
|
||||
|
||||
var testCases = [
|
||||
{
|
||||
"description" : "Proximity + Within proximity => Snaps to point (Right)",
|
||||
"scrollSnapType" : "both proximity",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "525px 500px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowRight",
|
||||
"expectedX" : 525,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Proximity + Within proximity => Snaps to point (Left)",
|
||||
"scrollSnapType" : "both proximity",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "475px 500px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowLeft",
|
||||
"expectedX" : 475,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Proximity + Within proximity => Snaps to point (Up)",
|
||||
"scrollSnapType" : "both proximity",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "500px 475px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowUp",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 475,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Proximity + Within proximity => Snaps to point (Down)",
|
||||
"scrollSnapType" : "both proximity",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "500px 525px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowDown",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 525,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Proximity + Beyond proximity => Does not snap to point (Right)",
|
||||
"scrollSnapType" : "both proximity",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "700px 500px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowRight",
|
||||
"expectedX" : 700,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : true
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Proximity + Beyond proximity => Does not snap to point (Left)",
|
||||
"scrollSnapType" : "both proximity",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "300px 500px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowLeft",
|
||||
"expectedX" : 300,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : true
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Proximity + Beyond proximity => Does not snap to point (Up)",
|
||||
"scrollSnapType" : "both proximity",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "500px 300px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowUp",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 300,
|
||||
"notExpected" : true
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Proximity + Beyond proximity => Does not snap to point (Down)",
|
||||
"scrollSnapType" : "both proximity",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "500px 700px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowDown",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 700,
|
||||
"notExpected" : true
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + Beyond proximity => Snaps to point (Right)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "700px 500px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowRight",
|
||||
"expectedX" : 700,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + Beyond proximity => Snaps to point (Left)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "300px 500px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowLeft",
|
||||
"expectedX" : 300,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + Beyond proximity => Snaps to point (Up)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "500px 300px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowUp",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 300,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + Beyond proximity => Snaps to point (Down)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "500px 700px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowDown",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 700,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + No snap points => Does not snap or scroll (Left)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowLeft",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + No snap points => Does not snap or scroll (Right)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowRight",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + No snap points => Does not snap or scroll (Up)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowUp",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + No snap points => Does not snap or scroll (Down)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowDown",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-y + scroll-snap-destination + Start of page + No snap point at start of page => Does not snap to top of page (Up)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "repeat(500px)",
|
||||
"scrollSnapDestination" : "25px 25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 0,
|
||||
"initialY" : 200,
|
||||
"key" : "KEY_ArrowUp",
|
||||
"expectedX" : 0,
|
||||
"expectedY" : 200,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-y + scroll-snap-destination + Start of page + No snap point at start of page => Does not snap to top of page (Page Up)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "repeat(500px)",
|
||||
"scrollSnapDestination" : "25px 25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 0,
|
||||
"initialY" : 200,
|
||||
"key" : "KEY_PageUp",
|
||||
"expectedX" : 0,
|
||||
"expectedY" : 200,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-y + scroll-snap-destination + Start of page + No snap point at start of page => Snaps to highest snap point (Home)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "repeat(500px)",
|
||||
"scrollSnapDestination" : "25px 25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 0,
|
||||
"initialY" : 200,
|
||||
"key" : "KEY_Home",
|
||||
"expectedX" : 0,
|
||||
"expectedY" : 475,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-x + scroll-snap-destination + Start of page + No snap point at start of page => Does not snap to left of page (Left)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "repeat(500px)",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "25px 25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 200,
|
||||
"initialY" : 0,
|
||||
"key" : "KEY_ArrowLeft",
|
||||
"expectedX" : 200,
|
||||
"expectedY" : 0,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-y + negative scroll-snap-destination + End of page + No snap point at end of page => Does not snap to end of page (Down)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "repeat(500px)",
|
||||
"scrollSnapDestination" : "-25px -25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 0,
|
||||
"initialY" : 800,
|
||||
"key" : "KEY_ArrowDown",
|
||||
"expectedX" : 0,
|
||||
"expectedY" : 800,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-y + negative scroll-snap-destination + End of page + No snap point at end of page => Does not snap to end of page (Page Down)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "repeat(500px)",
|
||||
"scrollSnapDestination" : "-25px -25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 0,
|
||||
"initialY" : 800,
|
||||
"key" : "KEY_PageDown",
|
||||
"expectedX" : 0,
|
||||
"expectedY" : 800,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-y + negative scroll-snap-destination + End of page + No snap point at end of page => Snaps to lowest snap point (End)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "repeat(500px)",
|
||||
"scrollSnapDestination" : "-25px -25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 0,
|
||||
"initialY" : 800,
|
||||
"key" : "KEY_End",
|
||||
"expectedX" : 0,
|
||||
"expectedY" : 525,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-coordinate + No snap point at start of page => Does not snap to top of page (Home)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "500px 100px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_Home",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 100,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-coordinate + No snap point at end of page => Does not snap to end of page (End)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "500px 900px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_End",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 900,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-y greater than scrolling rect + positive non-zero scroll-snap-destination => No snap points, does not scroll or snap (Left)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "repeat(1500px)",
|
||||
"scrollSnapDestination" : "25px 25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowLeft",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-y greater than scrolling rect + positive non-zero scroll-snap-destination => No snap points, does not scroll or snap (Right)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "repeat(1500px)",
|
||||
"scrollSnapDestination" : "25px 25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowRight",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-y greater than scrolling rect + positive non-zero scroll-snap-destination => No snap points, does not scroll or snap (Up)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "repeat(1500px)",
|
||||
"scrollSnapDestination" : "25px 25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowUp",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-y greater than scrolling rect + positive non-zero scroll-snap-destination => No snap points, does not scroll or snap (Down)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "repeat(1500px)",
|
||||
"scrollSnapDestination" : "25px 25px",
|
||||
"scrollSnapCoordinate" : "none",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_ArrowDown",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 500,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-{x|y} + scroll-snap-coordinate with two points => Interval and element snapping points are combined. Test 1 snap point generated by scroll-snap-points-{x|y} and two generated by scroll-snap-coordinate, ensure that they are evaluated as snap points. (Right #1)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "repeat(200px)",
|
||||
"scrollSnapPointsY" : "repeat(200px)",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "120px 120px, 220px 220px",
|
||||
"initialX" : 0,
|
||||
"initialY" : 0,
|
||||
"key" : "KEY_ArrowRight",
|
||||
"expectedX" : 120,
|
||||
"expectedY" : 0,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-{x|y} + scroll-snap-coordinate with two points => Interval and element snapping points are combined. Test 1 snap point generated by scroll-snap-points-{x|y} and two generated by scroll-snap-coordinate, ensure that they are evaluated as snap points. (Right #2)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "repeat(200px)",
|
||||
"scrollSnapPointsY" : "repeat(200px)",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "120px 120px, 220px 220px",
|
||||
"initialX" : 120,
|
||||
"initialY" : 0,
|
||||
"key" : "KEY_ArrowRight",
|
||||
"expectedX" : 200,
|
||||
"expectedY" : 0,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-{x|y} + scroll-snap-coordinate with two points => Interval and element snapping points are combined. Test 1 snap point generated by scroll-snap-points-{x|y} and two generated by scroll-snap-coordinate, ensure that they are evaluated as snap points. (Right #3)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "repeat(200px)",
|
||||
"scrollSnapPointsY" : "repeat(200px)",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "120px 120px, 220px 220px",
|
||||
"initialX" : 200,
|
||||
"initialY" : 0,
|
||||
"key" : "KEY_ArrowRight",
|
||||
"expectedX" : 220,
|
||||
"expectedY" : 0,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-{x|y} + scroll-snap-coordinate with two points => Interval and element snapping points are combined. Test 1 snap point generated by scroll-snap-points-{x|y} and two generated by scroll-snap-coordinate, ensure that they are evaluated as snap points. (Up #1)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "repeat(200px)",
|
||||
"scrollSnapPointsY" : "repeat(200px)",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "120px 120px, 220px 220px",
|
||||
"initialX" : 0,
|
||||
"initialY" : 300,
|
||||
"key" : "KEY_ArrowUp",
|
||||
"expectedX" : 0,
|
||||
"expectedY" : 220,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-{x|y} + scroll-snap-coordinate with two points => Interval and element snapping points are combined. Test 1 snap point generated by scroll-snap-points-{x|y} and two generated by scroll-snap-coordinate, ensure that they are evaluated as snap points. (Up #2)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "repeat(200px)",
|
||||
"scrollSnapPointsY" : "repeat(200px)",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "120px 120px, 220px 220px",
|
||||
"initialX" : 0,
|
||||
"initialY" : 220,
|
||||
"key" : "KEY_ArrowUp",
|
||||
"expectedX" : 0,
|
||||
"expectedY" : 200,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Mandatory + scroll-snap-points-{x|y} + scroll-snap-coordinate with two points => Interval and element snapping points are combined. Test 1 snap point generated by scroll-snap-points-{x|y} and two generated by scroll-snap-coordinate, ensure that they are evaluated as snap points. (Up #3)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "repeat(200px)",
|
||||
"scrollSnapPointsY" : "repeat(200px)",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "120px 120px, 220px 220px",
|
||||
"initialX" : 0,
|
||||
"initialY" : 200,
|
||||
"key" : "KEY_ArrowUp",
|
||||
"expectedX" : 0,
|
||||
"expectedY" : 120,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Ensure that when paging down/up that the next snap point in the direction of the scroll is selected rather than a closer point in the opposite direction (page Down)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "600px 600px, 475px 475px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_PageDown",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 600,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Ensure that when paging down/up that the next snap point in the direction of the scroll is selected rather than a closer point in the opposite direction (Page Up)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "400px 400px, 525px 525px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_PageUp",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 400,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Ensure that when paging down/up that the farthest snap point before the destination is selected and prioritized over a snap point that is past the destination, even if the snap point past the destination is closer to the destination. Setup - two snap points between current position and destination and one snap point past the destination which is closer than any of the other points. Scrollable rect size is 500px. (Page Down)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "525px 525px, 550px 550px, 800px 800px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_PageDown",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 550,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Ensure that when paging down/up that the farthest snap point before the destination is selected and prioritized over a snap point that is past the destination, even if the snap point past the destination is closer to the destination. Setup - two snap points between current position and destination and one snap point past the destination which is closer than any of the other points. Scrollable rect size is 500px. (Page Up)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "475px 475px, 450px 450px, 200px 200px",
|
||||
"initialX" : 500,
|
||||
"initialY" : 500,
|
||||
"key" : "KEY_PageUp",
|
||||
"expectedX" : 500,
|
||||
"expectedY" : 450,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Ensure that when paging down/up that the closest snap point past the destination is selected when no snap points exist between the starting position and the destination. Additionally, a snap point closer to the destination than the one past the snap point, but not in the scrolling direction, must not be selected. Setup - Two snap points beyond the destination and one snap point in the opposite direction of scrolling which is closest to the destination. Scrollable rect size is 500px. (Page Down)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "50px 50px, 800px 800px, 900px 900px",
|
||||
"initialX" : 100,
|
||||
"initialY" : 100,
|
||||
"key" : "KEY_PageDown",
|
||||
"expectedX" : 100,
|
||||
"expectedY" : 800,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Ensure that when paging down/up that the closest snap point past the destination is selected when no snap points exist between the starting position and the destination. Additionally, a snap point closer to the destination than the one past the snap point, but not in the scrolling direction, must not be selected. Setup - Two snap points beyond the destination and one snap point in the opposite direction of scrolling which is closest to the destination. Scrollable rect size is 500px. (Page Up)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "950px 950px, 200px 200px, 100px 100px",
|
||||
"initialX" : 900,
|
||||
"initialY" : 900,
|
||||
"key" : "KEY_PageUp",
|
||||
"expectedX" : 900,
|
||||
"expectedY" : 200,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Ensure that when scrolling by lines up,down,left,or right, that the closest snap point to the destination in the direction of travel is selected. Setup - Two snap points in the direction of travel and one in the opposite direction. Snap point in opposite direction is closest to the destination but must not be selected. (Down)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "50px 50px, 800px 800px, 900px 900px",
|
||||
"initialX" : 100,
|
||||
"initialY" : 100,
|
||||
"key" : "KEY_PageDown",
|
||||
"expectedX" : 100,
|
||||
"expectedY" : 800,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Ensure that when scrolling by lines up,down,left,or right, that the closest snap point to the destination in the direction of travel is selected. Setup - Two snap points in the direction of travel and one in the opposite direction. Snap point in opposite direction is closest to the destination but must not be selected. (Up)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "950px 950px, 200px 200px, 100px 100px",
|
||||
"initialX" : 900,
|
||||
"initialY" : 900,
|
||||
"key" : "KEY_PageUp",
|
||||
"expectedX" : 900,
|
||||
"expectedY" : 200,
|
||||
"notExpected" : false
|
||||
},
|
||||
|
||||
{
|
||||
"description" : "Ensure that when scrolling by lines up,down,left,or right, that the closest snap point to the destination in the direction of travel is selected. Setup - Two snap points in the direction of travel and one in the opposite direction. Snap point in opposite direction is closest to the destination but must not be selected. (Left)",
|
||||
"scrollSnapType" : "both mandatory",
|
||||
"scrollSnapPointsX" : "none",
|
||||
"scrollSnapPointsY" : "none",
|
||||
"scrollSnapDestination" : "0px 0px",
|
||||
"scrollSnapCoordinate" : "950px 950px, 200px 200px, 100px 100px",
|
||||
"initialX" : 900,
|
||||
"initialY" : 900,
|
||||
"key" : "KEY_ArrowLeft",
|
||||
"expectedX" : 200,
|
||||
"expectedY" : 900,
|
||||
"notExpected" : false
|
||||
}
|
||||
];
|
||||
|
||||
var step = 0;
|
||||
var sc; // Scroll Container
|
||||
var sd; // Scrolled Div
|
||||
|
||||
var lastScrollTop;
|
||||
var lastScrollLeft;
|
||||
var stopFrameCount;
|
||||
|
||||
// The tests should work the same way when all the values for the scroll
|
||||
// container are provided in percentages. To assert that, we just duplicate all
|
||||
// the test cases and replace the pixel values related to the scroll container
|
||||
// with percentage values, based on its clientWidth/Height sespectively.
|
||||
function addPercentageTests() {
|
||||
var width = sc.clientWidth;
|
||||
var height = sc.clientHeight;
|
||||
var pxRegexp = /(\d+)px/;
|
||||
var rewriteW = (_, w) => (parseInt(w, 10) / width * 100) + "%";
|
||||
var rewriteH = (_, h) => (parseInt(h, 10) / height * 100) + "%";
|
||||
testCases = testCases.concat(testCases.map(testCase => Object.assign({}, testCase, {
|
||||
description: "With Percentages: " + testCase.description,
|
||||
scrollSnapPointsX: testCase.scrollSnapPointsX.replace(pxRegexp, rewriteW),
|
||||
scrollSnapPointsY: testCase.scrollSnapPointsY.replace(pxRegexp, rewriteH),
|
||||
scrollSnapDestination: testCase.scrollSnapDestination
|
||||
.replace(pxRegexp, rewriteW).replace(pxRegexp, rewriteH),
|
||||
})));
|
||||
}
|
||||
|
||||
function initTest() {
|
||||
var testCase = testCases[step];
|
||||
sc.style.scrollSnapType = testCase.scrollSnapType;
|
||||
sc.style.scrollSnapPointsX = testCase.scrollSnapPointsX;
|
||||
sc.style.scrollSnapPointsY = testCase.scrollSnapPointsY;
|
||||
sc.style.scrollSnapDestination = testCase.scrollSnapDestination;
|
||||
sd.style.scrollSnapCoordinate = testCase.scrollSnapCoordinate;
|
||||
sc.scrollTo(testCase.initialX, testCase.initialY);
|
||||
sc.focus();
|
||||
synthesizeKey(testCase.key);
|
||||
|
||||
stopFrameCount = 0;
|
||||
lastScrollTop = sc.scrollTop;
|
||||
lastScrollLeft = sc.scrollLeft;
|
||||
|
||||
window.requestAnimationFrame(waitForScrollStop);
|
||||
}
|
||||
|
||||
function waitForScrollStop() {
|
||||
if (stopFrameCount > 30) {
|
||||
// We have the same position for 30 consecutive frames -- we are stopped
|
||||
testScrolling();
|
||||
} else {
|
||||
// Still moving
|
||||
if (lastScrollTop == sc.scrollTop && lastScrollLeft == sc.scrollLeft) {
|
||||
stopFrameCount++;
|
||||
} else {
|
||||
stopFrameCount = 0;
|
||||
lastScrollTop = sc.scrollTop;
|
||||
lastScrollLeft = sc.scrollLeft;
|
||||
}
|
||||
window.requestAnimationFrame(waitForScrollStop);
|
||||
}
|
||||
}
|
||||
|
||||
function testScrollSnapping() {
|
||||
sc = document.getElementById("sc");
|
||||
sd = document.getElementById("sd");
|
||||
|
||||
addPercentageTests();
|
||||
|
||||
initTest();
|
||||
}
|
||||
|
||||
function testScrolling() {
|
||||
var testCase = testCases[step];
|
||||
if (document.getElementById('display').style.direction == "rtl") {
|
||||
if (testCase.notExpected) {
|
||||
isnot("(" + -sc.scrollLeft + "," + sc.scrollTop + ")",
|
||||
"(" + -testCase.expectedX + "," + testCase.expectedY + ")",
|
||||
"rtl: " + testCase.description);
|
||||
} else {
|
||||
is("(" + -sc.scrollLeft + "," + sc.scrollTop + ")",
|
||||
"(" + -testCase.expectedX + "," + testCase.expectedY + ")",
|
||||
"rtl: " + testCase.description);
|
||||
}
|
||||
} else {
|
||||
// ltr direction
|
||||
if (testCase.notExpected) {
|
||||
isnot("(" + sc.scrollLeft + "," + sc.scrollTop + ")",
|
||||
"(" + testCase.expectedX + "," + testCase.expectedY + ")",
|
||||
"ltr: " + testCase.description);
|
||||
} else {
|
||||
is("(" + sc.scrollLeft + "," + sc.scrollTop + ")",
|
||||
"(" + testCase.expectedX + "," + testCase.expectedY + ")",
|
||||
"ltr: " + testCase.description);
|
||||
}
|
||||
}
|
||||
|
||||
step++;
|
||||
if (step < Object.keys(testCases).length) {
|
||||
initTest();
|
||||
} else {
|
||||
if (document.getElementById('display').style.direction == "rtl") {
|
||||
SimpleTest.finish();
|
||||
} else {
|
||||
// Do everything again, but with rtl
|
||||
document.getElementById('display').style.direction = "rtl";
|
||||
step = 0;
|
||||
initTest();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function doTest() {
|
||||
SpecialPowers.pushPrefEnv({
|
||||
"set": [["layout.css.scroll-snap.enabled", true],
|
||||
["layout.css.scroll-snap-v1.enabled", false],
|
||||
["layout.css.scroll-snap.proximity-threshold", 100]]},
|
||||
testScrollSnapping);
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
addLoadEvent(doTest);
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
|
||||
</html>
|
@ -1,354 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test for scroll snapping</title>
|
||||
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<script src="/tests/SimpleTest/EventUtils.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p id="display"></p>
|
||||
<div id="sc" style="margin: 0px; padding: 0px; overflow: scroll; width:250px; height: 250px;">
|
||||
<div id="sd" style="margin: 0px; padding: 0px; width: 1250px; height: 1250px;"></div>
|
||||
</div>
|
||||
|
||||
<pre id="test">
|
||||
<script class="testbody" type="text/javascript">
|
||||
|
||||
var runtime = SpecialPowers.Cc["@mozilla.org/xre/app-info;1"]
|
||||
.getService(SpecialPowers.Ci.nsIXULRuntime);
|
||||
var isMac = navigator.platform.includes("Mac");
|
||||
var isGtk = runtime.widgetToolkit.includes("gtk");
|
||||
var isWin = navigator.platform.includes("Win");
|
||||
var isSN = /mac os x 10\.6/.test(navigator.userAgent.toLowerCase());
|
||||
|
||||
// Half of the scrollbar control width, in CSS pixels
|
||||
var scrollbarOffset = isWin ? 8 : 5;
|
||||
|
||||
// OSX 10.6 scroll bar thumbs are off-center due to the bundling of buttons on one end
|
||||
// of the scroll bar frame.
|
||||
var scrollbarCenter = isSN ? 100 : 125;
|
||||
|
||||
var testCases = [
|
||||
{
|
||||
"description" : "Drag scrollbar left, expect scroll snapping.",
|
||||
"snapCoord" : "500px 500px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 500, "y" : 500 },
|
||||
"mousePosition" : { "x" : scrollbarCenter, "y" : 250 - scrollbarOffset },
|
||||
"mouseOffset" : { "x" : -10, "y" : 0 },
|
||||
"duration" : "0",
|
||||
"runMac" : true,
|
||||
"runGtk" : true,
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Drag scrollbar right, expect scroll snapping.",
|
||||
"snapCoord" : "500px 500px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 500, "y" : 500 },
|
||||
"mousePosition" : { "x" : scrollbarCenter, "y" : 250 - scrollbarOffset },
|
||||
"mouseOffset" : { "x" : 10, "y" : 0 },
|
||||
"duration" : "0",
|
||||
"runMac" : true,
|
||||
"runGtk" : true,
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Drag scrollbar up, expect scroll snapping.",
|
||||
"snapCoord" : "500px 500px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 500, "y" : 500 },
|
||||
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : scrollbarCenter },
|
||||
"mouseOffset" : { "x" : 0, "y" : -10 },
|
||||
"duration" : "0",
|
||||
"runMac" : true,
|
||||
"runGtk" : true,
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Drag scrollbar down, expect scroll snapping.",
|
||||
"snapCoord" : "500px 500px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 500, "y" : 500 },
|
||||
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : scrollbarCenter },
|
||||
"mouseOffset" : { "x" : 0, "y" : 10 },
|
||||
"duration" : "0",
|
||||
"runMac" : true,
|
||||
"runGtk" : true,
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Page scrollbar left, expect scroll snapping.",
|
||||
"snapCoord" : "500px 500px, 1000px 500px",
|
||||
"startScroll" : { "x" : 1000, "y" : 500 },
|
||||
"endScroll" : { "x" : 500, "y" : 500 },
|
||||
"mousePosition" : { "x" : 50, "y" : 250 - scrollbarOffset },
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "0",
|
||||
"runMac" : true,
|
||||
"runGtk" : true,
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Page scrollbar right, expect scroll snapping.",
|
||||
"snapCoord" : "500px 500px, 0px 500px",
|
||||
"startScroll" : { "x" : 0, "y" : 500 },
|
||||
"endScroll" : { "x" : 500, "y" : 500 },
|
||||
"mousePosition" : { "x" : 200, "y" : 250 - scrollbarOffset },
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "0",
|
||||
"runMac" : true,
|
||||
"runGtk" : true,
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Page scrollbar up, expect scroll snapping.",
|
||||
"snapCoord" : "500px 500px, 500px 1000px",
|
||||
"startScroll" : { "x" : 500, "y" : 1000 },
|
||||
"endScroll" : { "x" : 500, "y" : 500 },
|
||||
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : 50 },
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "0",
|
||||
"runMac" : true,
|
||||
"runGtk" : true,
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Page scrollbar down, expect scroll snapping.",
|
||||
"snapCoord" : "500px 500px, 500px 0px",
|
||||
"startScroll" : { "x" : 500, "y" : 0 },
|
||||
"endScroll" : { "x" : 500, "y" : 500 },
|
||||
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : 200 },
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "0",
|
||||
"runMac" : true,
|
||||
"runGtk" : true,
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Click scrollbar left button, expect scroll snapping.",
|
||||
"snapCoord" : "50px 500px, 250px 500px, 500px 500px, 750px 500px, 950px 500px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 250, "y" : 500 },
|
||||
"mousePosition" : { "x" : scrollbarOffset, "y" : 250 - scrollbarOffset },
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "0",
|
||||
"runMac" : false, // OSX does not have have line-scroll buttons
|
||||
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Hold scrollbar left button until repeating, expect scroll snapping.",
|
||||
"snapCoord" : "50px 500px, 500px 500px, 950px 500px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 50, "y" : 500 },
|
||||
"mousePosition" : { "x" : scrollbarOffset, "y" : 250 - scrollbarOffset },
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "500",
|
||||
"runMac" : false, // OSX does not have have line-scroll buttons
|
||||
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Click scrollbar right button, expect scroll snapping.",
|
||||
"snapCoord" : "50px 500px, 250px 500px, 500px 500px, 750px 500px, 950px 500px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 750, "y" : 500 },
|
||||
"mousePosition" : { "x" : 250 - scrollbarOffset * 3, "y" : 250 - scrollbarOffset },
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "0",
|
||||
"runMac" : false, // OSX does not have have line-scroll buttons
|
||||
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Hold scrollbar right button until repeating, expect scroll snapping.",
|
||||
"snapCoord" : "50px 500px, 500px 500px, 950px 500px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 950, "y" : 500 },
|
||||
"mousePosition" : { "x" : 250 - scrollbarOffset * 3, "y" : 250 - scrollbarOffset },
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "500",
|
||||
"runMac" : false, // OSX does not have have line-scroll buttons
|
||||
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Click scrollbar up button, expect scroll snapping.",
|
||||
"snapCoord" : "500px 50px, 500px 250px, 500px 500px, 500px 750px, 500px 950px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 500, "y" : 250 },
|
||||
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : scrollbarOffset },
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "0",
|
||||
"runMac" : false, // OSX does not have have line-scroll buttons
|
||||
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Hold scrollbar up button until repeating, expect scroll snapping.",
|
||||
"snapCoord" : "500px 50px, 500px 500px, 500px 950px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 500, "y" : 50 },
|
||||
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : scrollbarOffset },
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "500",
|
||||
"runMac" : false, // OSX does not have have line-scroll buttons
|
||||
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Click scrollbar down button, expect scroll snapping.",
|
||||
"snapCoord" : "500px 50px, 500px 250px, 500px 500px, 500px 750px, 500px 950px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 500, "y" : 750 },
|
||||
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : 250 - scrollbarOffset * 3},
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "0",
|
||||
"runMac" : false, // OSX does not have have line-scroll buttons
|
||||
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
||||
"runWin" : true
|
||||
},
|
||||
{
|
||||
"description" : "Hold scrollbar down button until repeating, expect scroll snapping.",
|
||||
"snapCoord" : "500px 50px, 500px 500px, 500px 950px",
|
||||
"startScroll" : { "x" : 500, "y" : 500 },
|
||||
"endScroll" : { "x" : 500, "y" : 950 },
|
||||
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : 250 - scrollbarOffset * 3},
|
||||
"mouseOffset" : { "x" : 0, "y" : 0 },
|
||||
"duration" : "500",
|
||||
"runMac" : false, // OSX does not have have line-scroll buttons
|
||||
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
||||
"runWin" : true
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
var step = 0;
|
||||
var sc; // Scroll Container
|
||||
var sd; // Scrolled Div
|
||||
|
||||
var lastScrollTop;
|
||||
var lastScrollLeft;
|
||||
var stopFrameCount;
|
||||
var winUtils = SpecialPowers.DOMWindowUtils;
|
||||
|
||||
function doTest() {
|
||||
var testCase = testCases[step];
|
||||
|
||||
stopFrameCount = 0;
|
||||
lastScrollTop = sc.scrollTop;
|
||||
lastScrollLeft = sc.scrollLeft;
|
||||
|
||||
sc.scrollTo(testCase.startScroll.x, testCase.startScroll.y);
|
||||
sc.style.scrollSnapType = "both mandatory";
|
||||
sd.style.scrollSnapCoordinate = testCase.snapCoord;
|
||||
|
||||
synthesizeMouse(sc,
|
||||
testCase.mousePosition.x,
|
||||
testCase.mousePosition.y,
|
||||
{ type: "mousedown" });
|
||||
|
||||
synthesizeMouse(sc,
|
||||
testCase.mousePosition.x + testCase.mouseOffset.x,
|
||||
testCase.mousePosition.y + testCase.mouseOffset.y,
|
||||
{ type: "mousemove" });
|
||||
|
||||
stopFrameCount = 0;
|
||||
waitForScrollStart();
|
||||
}
|
||||
|
||||
function waitForScrollStart() {
|
||||
// Wait for up to 30 frames for scrolling to start
|
||||
var testCase = testCases[step];
|
||||
if (++stopFrameCount > 30) {
|
||||
ok(false,
|
||||
"Step " + step + ": Frame count limit reached without scrolling. " +
|
||||
"(" + testCase.description + ")");
|
||||
window.requestAnimationFrame(doMouseUp);
|
||||
} else if (testCase.startScroll.y != sc.scrollTop
|
||||
|| testCase.startScroll.x != sc.scrollLeft) {
|
||||
window.requestAnimationFrame(doMouseUp);
|
||||
} else {
|
||||
window.requestAnimationFrame(waitForScrollStart);
|
||||
}
|
||||
}
|
||||
|
||||
function doMouseUp() {
|
||||
var testCase = testCases[step];
|
||||
isnot("(" + sc.scrollLeft + "," + sc.scrollTop + ")",
|
||||
"(" + testCase.startScroll.x +"," + testCase.startScroll.y + ")",
|
||||
"Step " + step + ": Synthesized mouse events move scroll position. ("
|
||||
+ testCase.description + ")");
|
||||
|
||||
window.setTimeout(function() {
|
||||
synthesizeMouse(sc,
|
||||
testCase.mousePosition.x + testCase.mouseOffset.x,
|
||||
testCase.mousePosition.y + testCase.mouseOffset.y,
|
||||
{ type: "mouseup" });
|
||||
|
||||
stopFrameCount = 0;
|
||||
window.requestAnimationFrame(waitForScrollStop);
|
||||
}, testCase.duration);
|
||||
}
|
||||
|
||||
function waitForScrollStop() {
|
||||
if (stopFrameCount > 30) {
|
||||
// We have the same position for 30 consecutive frames -- we are stopped
|
||||
verifyTest();
|
||||
} else {
|
||||
// Still moving
|
||||
if (lastScrollTop == sc.scrollTop && lastScrollLeft == sc.scrollLeft) {
|
||||
stopFrameCount++;
|
||||
} else {
|
||||
stopFrameCount = 0;
|
||||
lastScrollTop = sc.scrollTop;
|
||||
lastScrollLeft = sc.scrollLeft;
|
||||
}
|
||||
window.requestAnimationFrame(waitForScrollStop);
|
||||
}
|
||||
}
|
||||
|
||||
function verifyTest() {
|
||||
// Test ended, check if scroll position matches expected position
|
||||
var testCase = testCases[step];
|
||||
is("(" + sc.scrollLeft + "," + sc.scrollTop + ")",
|
||||
"(" + testCase.endScroll.x +"," + testCase.endScroll.y + ")",
|
||||
"Step " + step + ": " + testCase.description);
|
||||
|
||||
// Find next test to run
|
||||
while (true) {
|
||||
if (++step == testCases.length) {
|
||||
SimpleTest.finish();
|
||||
break;
|
||||
} else {
|
||||
testCase = testCases[step];
|
||||
if ((testCase.runGtk && isGtk)
|
||||
|| (testCase.runMac && isMac)
|
||||
|| (testCase.runWin && isWin)) {
|
||||
doTest();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
SimpleTest.requestFlakyTimeout("Delays added to allow synthesized mouse " +
|
||||
"events to trigger scrollbar repeating scrolls.");
|
||||
addLoadEvent(function() {
|
||||
sc = document.getElementById("sc");
|
||||
sd = document.getElementById("sd");
|
||||
SpecialPowers.pushPrefEnv({
|
||||
"set": [["layout.css.scroll-snap.enabled", true],
|
||||
["layout.css.scroll-snap-v1.enabled", false],
|
||||
["layout.css.scroll-snap.proximity-threshold", 100]]},
|
||||
doTest);
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
|
||||
</html>
|
@ -6769,45 +6769,6 @@ static void CollectScrollPositionsForSnap(
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Collect the scroll-snap-coordinates of frames in the subtree rooted at
|
||||
* |aFrame|, relative to |aScrolledFrame|, into |aOutCoords|.
|
||||
*/
|
||||
static void CollectScrollSnapCoordinates(nsIFrame* aFrame,
|
||||
nsIFrame* aScrolledFrame,
|
||||
nsTArray<nsPoint>& aOutCoords) {
|
||||
MOZ_ASSERT(!StaticPrefs::layout_css_scroll_snap_v1_enabled());
|
||||
|
||||
nsIFrame::ChildListIterator childLists(aFrame);
|
||||
for (; !childLists.IsDone(); childLists.Next()) {
|
||||
nsFrameList::Enumerator childFrames(childLists.CurrentList());
|
||||
for (; !childFrames.AtEnd(); childFrames.Next()) {
|
||||
nsIFrame* f = childFrames.get();
|
||||
|
||||
const nsStyleDisplay* styleDisplay = f->StyleDisplay();
|
||||
size_t coordCount = styleDisplay->mScrollSnapCoordinate.Length();
|
||||
|
||||
if (coordCount) {
|
||||
nsRect frameRect = f->GetRect();
|
||||
nsPoint offset = f->GetOffsetTo(aScrolledFrame);
|
||||
nsRect edgesRect = nsRect(offset, frameRect.Size());
|
||||
for (size_t coordNum = 0; coordNum < coordCount; coordNum++) {
|
||||
const Position& coordPosition =
|
||||
f->StyleDisplay()->mScrollSnapCoordinate[coordNum];
|
||||
nsPoint coordPoint = edgesRect.TopLeft();
|
||||
coordPoint += nsPoint(coordPosition.horizontal.Resolve(
|
||||
frameRect.width, NSToCoordRoundWithClamp),
|
||||
coordPosition.vertical.Resolve(
|
||||
frameRect.height, NSToCoordRoundWithClamp));
|
||||
aOutCoords.AppendElement(coordPoint);
|
||||
}
|
||||
}
|
||||
|
||||
CollectScrollSnapCoordinates(f, aScrolledFrame, aOutCoords);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static nscoord ResolveScrollPaddingStyleValue(
|
||||
const StyleRect<mozilla::NonNegativeLengthPercentageOrAuto>&
|
||||
aScrollPaddingStyle,
|
||||
@ -6859,44 +6820,6 @@ nsMargin ScrollFrameHelper::GetScrollPadding() const {
|
||||
GetScrollPortRect().Size());
|
||||
}
|
||||
|
||||
layers::ScrollSnapInfo ScrollFrameHelper::ComputeOldScrollSnapInfo() const {
|
||||
MOZ_ASSERT(!StaticPrefs::layout_css_scroll_snap_v1_enabled());
|
||||
ScrollSnapInfo result;
|
||||
|
||||
ScrollStyles styles = GetScrollStylesFromFrame();
|
||||
|
||||
if (styles.mScrollSnapTypeY == StyleScrollSnapStrictness::None &&
|
||||
styles.mScrollSnapTypeX == StyleScrollSnapStrictness::None) {
|
||||
// We won't be snapping, short-circuit the computation.
|
||||
return result;
|
||||
}
|
||||
|
||||
result.mScrollSnapTypeX = styles.mScrollSnapTypeX;
|
||||
result.mScrollSnapTypeY = styles.mScrollSnapTypeY;
|
||||
|
||||
nsSize scrollPortSize = GetScrollPortRect().Size();
|
||||
|
||||
result.mScrollSnapDestination =
|
||||
nsPoint(styles.mScrollSnapDestinationX.Resolve(scrollPortSize.width),
|
||||
styles.mScrollSnapDestinationY.Resolve(scrollPortSize.height));
|
||||
|
||||
if (styles.mScrollSnapPointsX.GetUnit() != eStyleUnit_None) {
|
||||
result.mScrollSnapIntervalX =
|
||||
Some(styles.mScrollSnapPointsX.ComputeCoordPercentCalc(
|
||||
scrollPortSize.width));
|
||||
}
|
||||
if (styles.mScrollSnapPointsY.GetUnit() != eStyleUnit_None) {
|
||||
result.mScrollSnapIntervalY =
|
||||
Some(styles.mScrollSnapPointsY.ComputeCoordPercentCalc(
|
||||
scrollPortSize.height));
|
||||
}
|
||||
|
||||
CollectScrollSnapCoordinates(mScrolledFrame, mScrolledFrame,
|
||||
result.mScrollSnapCoordinates);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
layers::ScrollSnapInfo ScrollFrameHelper::ComputeScrollSnapInfo(
|
||||
const Maybe<nsPoint>& aDestination) const {
|
||||
MOZ_ASSERT(StaticPrefs::layout_css_scroll_snap_v1_enabled());
|
||||
@ -6938,12 +6861,11 @@ layers::ScrollSnapInfo ScrollFrameHelper::ComputeScrollSnapInfo(
|
||||
|
||||
layers::ScrollSnapInfo ScrollFrameHelper::GetScrollSnapInfo(
|
||||
const Maybe<nsPoint>& aDestination) const {
|
||||
// TODO(botond): Should we cache it?
|
||||
if (StaticPrefs::layout_css_scroll_snap_v1_enabled()) {
|
||||
return ComputeScrollSnapInfo(aDestination);
|
||||
if (!StaticPrefs::layout_css_scroll_snap_v1_enabled()) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return ComputeOldScrollSnapInfo();
|
||||
// TODO(botond): Should we cache it?
|
||||
return ComputeScrollSnapInfo(aDestination);
|
||||
}
|
||||
|
||||
bool ScrollFrameHelper::GetSnapPointForDestination(
|
||||
|
@ -2998,10 +2998,6 @@ nsStyleDisplay::nsStyleDisplay(const Document& aDocument)
|
||||
mScrollSnapType(
|
||||
{StyleScrollSnapAxis::Both, StyleScrollSnapStrictness::None}),
|
||||
mLineClamp(0),
|
||||
mScrollSnapPointsX(eStyleUnit_None),
|
||||
mScrollSnapPointsY(eStyleUnit_None),
|
||||
mScrollSnapDestination(
|
||||
{LengthPercentage::Zero(), LengthPercentage::Zero()}),
|
||||
mBackfaceVisibility(NS_STYLE_BACKFACE_VISIBILITY_VISIBLE),
|
||||
mTransformStyle(NS_STYLE_TRANSFORM_STYLE_FLAT),
|
||||
mTransformBox(StyleGeometryBox::BorderBox),
|
||||
@ -3063,10 +3059,6 @@ nsStyleDisplay::nsStyleDisplay(const nsStyleDisplay& aSource)
|
||||
mOverscrollBehaviorY(aSource.mOverscrollBehaviorY),
|
||||
mScrollSnapType(aSource.mScrollSnapType),
|
||||
mLineClamp(aSource.mLineClamp),
|
||||
mScrollSnapPointsX(aSource.mScrollSnapPointsX),
|
||||
mScrollSnapPointsY(aSource.mScrollSnapPointsY),
|
||||
mScrollSnapDestination(aSource.mScrollSnapDestination),
|
||||
mScrollSnapCoordinate(aSource.mScrollSnapCoordinate),
|
||||
mTransform(aSource.mTransform),
|
||||
mRotate(aSource.mRotate),
|
||||
mTranslate(aSource.mTranslate),
|
||||
@ -3152,9 +3144,6 @@ nsChangeHint nsStyleDisplay::CalcDifference(
|
||||
(mFloat == StyleFloat::None) != (aNewData.mFloat == StyleFloat::None) ||
|
||||
mScrollBehavior != aNewData.mScrollBehavior ||
|
||||
mScrollSnapType != aNewData.mScrollSnapType ||
|
||||
mScrollSnapPointsX != aNewData.mScrollSnapPointsX ||
|
||||
mScrollSnapPointsY != aNewData.mScrollSnapPointsY ||
|
||||
mScrollSnapDestination != aNewData.mScrollSnapDestination ||
|
||||
mTopLayer != aNewData.mTopLayer || mResize != aNewData.mResize) {
|
||||
return nsChangeHint_ReconstructFrame;
|
||||
}
|
||||
@ -3181,16 +3170,17 @@ nsChangeHint nsStyleDisplay::CalcDifference(
|
||||
hint |= nsChangeHint_ScrollbarChange;
|
||||
}
|
||||
|
||||
/* Note: When mScrollBehavior, mScrollSnapTypeX, mScrollSnapTypeY,
|
||||
* mScrollSnapPointsX, mScrollSnapPointsY, or mScrollSnapDestination are
|
||||
* changed, nsChangeHint_NeutralChange is not sufficient to enter
|
||||
* nsCSSFrameConstructor::PropagateScrollToViewport. By using the same hint
|
||||
* as used when the overflow css property changes,
|
||||
* nsChangeHint_ReconstructFrame, PropagateScrollToViewport will be called.
|
||||
/* Note: When mScrollBehavior or mScrollSnapType are changed,
|
||||
* nsChangeHint_NeutralChange is not sufficient to enter
|
||||
* nsCSSFrameConstructor::PropagateScrollToViewport. By using the same hint as
|
||||
* used when the overflow css property changes, nsChangeHint_ReconstructFrame,
|
||||
* PropagateScrollToViewport will be called.
|
||||
*
|
||||
* The scroll-behavior css property is not expected to change often (the
|
||||
* CSSOM-View DOM methods are likely to be used in those cases); however,
|
||||
* if this does become common perhaps a faster-path might be worth while.
|
||||
*
|
||||
* FIXME(emilio): Can we do what we do for overflow changes?
|
||||
*/
|
||||
|
||||
if (mFloat != aNewData.mFloat) {
|
||||
@ -3371,7 +3361,6 @@ nsChangeHint nsStyleDisplay::CalcDifference(
|
||||
mAnimationPlayStateCount != aNewData.mAnimationPlayStateCount ||
|
||||
mAnimationIterationCountCount !=
|
||||
aNewData.mAnimationIterationCountCount ||
|
||||
mScrollSnapCoordinate != aNewData.mScrollSnapCoordinate ||
|
||||
mWillChange != aNewData.mWillChange ||
|
||||
mOverflowAnchor != aNewData.mOverflowAnchor)) {
|
||||
hint |= nsChangeHint_NeutralChange;
|
||||
|
@ -1738,10 +1738,6 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleDisplay {
|
||||
mozilla::StyleScrollSnapAlign mScrollSnapAlign;
|
||||
mozilla::StyleScrollSnapType mScrollSnapType;
|
||||
uint32_t mLineClamp;
|
||||
nsStyleCoord mScrollSnapPointsX;
|
||||
nsStyleCoord mScrollSnapPointsY;
|
||||
mozilla::Position mScrollSnapDestination;
|
||||
nsTArray<mozilla::Position> mScrollSnapCoordinate;
|
||||
|
||||
mozilla::StyleTransform mTransform;
|
||||
mozilla::StyleRotate mRotate;
|
||||
|
@ -7718,69 +7718,6 @@ if (IsCSSPropertyPrefEnabled("layout.css.overscroll-behavior.enabled")) {
|
||||
};
|
||||
}
|
||||
|
||||
if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap.enabled") &&
|
||||
!IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) {
|
||||
gCSSProperties["scroll-snap-coordinate"] = {
|
||||
domProp: "scrollSnapCoordinate",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "none" ],
|
||||
other_values: [ "25% 25%", "top", "0px 100px, 10em 50%",
|
||||
"top left, top right, bottom left, bottom right, center",
|
||||
"calc(2px)",
|
||||
"calc(50%)",
|
||||
"calc(3*25px)",
|
||||
"calc(3*25px) 5px",
|
||||
"5px calc(3*25px)",
|
||||
"calc(20%) calc(3*25px)",
|
||||
"calc(25px*3)",
|
||||
"calc(3*25px + 50%)",
|
||||
"calc(20%) calc(3*25px), center"],
|
||||
invalid_values: [ "auto", "default" ]
|
||||
}
|
||||
gCSSProperties["scroll-snap-destination"] = {
|
||||
domProp: "scrollSnapDestination",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "0px 0px" ],
|
||||
other_values: [ "25% 25%", "6px 5px", "20% 3em", "0in 1in",
|
||||
"top", "right", "top left", "top right", "center",
|
||||
"calc(2px)",
|
||||
"calc(50%)",
|
||||
"calc(3*25px)",
|
||||
"calc(3*25px) 5px",
|
||||
"5px calc(3*25px)",
|
||||
"calc(20%) calc(3*25px)",
|
||||
"calc(25px*3)",
|
||||
"calc(3*25px + 50%)"],
|
||||
invalid_values: [ "auto", "none", "default" ]
|
||||
}
|
||||
gCSSProperties["scroll-snap-points-x"] = {
|
||||
domProp: "scrollSnapPointsX",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "none" ],
|
||||
other_values: [ "repeat(100%)", "repeat(120px)", "repeat(calc(3*25px))" ],
|
||||
invalid_values: [ "auto", "1px", "left", "rgb(1,2,3)" ]
|
||||
}
|
||||
gCSSProperties["scroll-snap-points-y"] = {
|
||||
domProp: "scrollSnapPointsY",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "none" ],
|
||||
other_values: [ "repeat(100%)", "repeat(120px)", "repeat(calc(3*25px))" ],
|
||||
invalid_values: [ "auto", "1px", "top", "rgb(1,2,3)" ]
|
||||
}
|
||||
gCSSProperties["scroll-snap-type"] = {
|
||||
domProp: "scrollSnapType",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "none" ],
|
||||
other_values: [ "both mandatory", "both" ],
|
||||
invalid_values: [ "auto", "1px" ]
|
||||
};
|
||||
}
|
||||
|
||||
if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) {
|
||||
gCSSProperties["scroll-snap-type"] = {
|
||||
domProp: "scrollSnapType",
|
||||
|
@ -1298,14 +1298,6 @@ VARCACHE_PREF(
|
||||
RelaxedAtomicBool, true
|
||||
)
|
||||
|
||||
// Is support for the old unspecced scroll-snap enabled?
|
||||
// E.g. scroll-snap-points-{x,y}, scroll-snap-coordinate, etc.
|
||||
VARCACHE_PREF(
|
||||
"layout.css.scroll-snap.enabled",
|
||||
layout_css_scroll_snap_enabled,
|
||||
bool, false
|
||||
)
|
||||
|
||||
// Are shared memory User Agent style sheets enabled?
|
||||
VARCACHE_PREF(
|
||||
"layout.css.shared-memory-ua-sheets.enabled",
|
||||
|
@ -12,7 +12,6 @@ use crate::gecko_bindings::structs::{nsStyleCoord, CounterStylePtr};
|
||||
use crate::gecko_bindings::sugar::ns_style_coord::{CoordData, CoordDataMut, CoordDataValue};
|
||||
use crate::values::computed::{Angle, Length, LengthPercentage};
|
||||
use crate::values::computed::{Number, NumberOrPercentage, Percentage};
|
||||
use crate::values::generics::gecko::ScrollSnapPoint;
|
||||
use crate::values::generics::grid::{TrackBreadth, TrackKeyword};
|
||||
use crate::values::generics::length::LengthPercentageOrAuto;
|
||||
use crate::values::generics::{CounterStyleOrNone, NonNegative};
|
||||
@ -217,27 +216,6 @@ impl GeckoStyleCoordConvertible for Angle {
|
||||
}
|
||||
}
|
||||
|
||||
impl GeckoStyleCoordConvertible for ScrollSnapPoint<LengthPercentage> {
|
||||
fn to_gecko_style_coord<T: CoordDataMut>(&self, coord: &mut T) {
|
||||
match self.repeated() {
|
||||
None => coord.set_value(CoordDataValue::None),
|
||||
Some(l) => l.to_gecko_style_coord(coord),
|
||||
};
|
||||
}
|
||||
|
||||
fn from_gecko_style_coord<T: CoordData>(coord: &T) -> Option<Self> {
|
||||
use crate::gecko_bindings::structs::root::nsStyleUnit;
|
||||
|
||||
Some(match coord.unit() {
|
||||
nsStyleUnit::eStyleUnit_None => ScrollSnapPoint::None,
|
||||
_ => ScrollSnapPoint::Repeat(
|
||||
LengthPercentage::from_gecko_style_coord(coord)
|
||||
.expect("coord could not convert to LengthPercentage"),
|
||||
),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/// Convert a given RGBA value to `nscolor`.
|
||||
pub fn convert_rgba_to_nscolor(rgba: &RGBA) -> u32 {
|
||||
((rgba.alpha as u32) << 24) |
|
||||
|
@ -696,28 +696,6 @@ def set_gecko_property(ffi_name, expr):
|
||||
}
|
||||
</%def>
|
||||
|
||||
<%def name="impl_style_coord(ident, gecko_ffi_name)">
|
||||
#[allow(non_snake_case)]
|
||||
pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
|
||||
v.to_gecko_style_coord(&mut self.gecko.${gecko_ffi_name});
|
||||
}
|
||||
#[allow(non_snake_case)]
|
||||
pub fn copy_${ident}_from(&mut self, other: &Self) {
|
||||
self.gecko.${gecko_ffi_name}.copy_from(&other.gecko.${gecko_ffi_name});
|
||||
}
|
||||
#[allow(non_snake_case)]
|
||||
pub fn reset_${ident}(&mut self, other: &Self) {
|
||||
self.copy_${ident}_from(other)
|
||||
}
|
||||
|
||||
#[allow(non_snake_case)]
|
||||
pub fn clone_${ident}(&self) -> longhands::${ident}::computed_value::T {
|
||||
use crate::properties::longhands::${ident}::computed_value::T;
|
||||
T::from_gecko_style_coord(&self.gecko.${gecko_ffi_name})
|
||||
.expect("clone for ${ident} failed")
|
||||
}
|
||||
</%def>
|
||||
|
||||
<%def name="copy_sides_style_coord(ident)">
|
||||
<% gecko_ffi_name = "m" + to_camel_case(ident) %>
|
||||
#[allow(non_snake_case)]
|
||||
@ -2184,9 +2162,8 @@ fn static_assert() {
|
||||
animation-iteration-count animation-timing-function
|
||||
clear transition-duration transition-delay
|
||||
transition-timing-function transition-property
|
||||
transform-style scroll-snap-points-x
|
||||
scroll-snap-points-y scroll-snap-coordinate
|
||||
-moz-binding shape-outside -webkit-line-clamp""" %>
|
||||
transform-style -moz-binding shape-outside
|
||||
-webkit-line-clamp""" %>
|
||||
<%self:impl_trait style_struct_name="Box" skip_longhands="${skip_box_longhands}">
|
||||
#[inline]
|
||||
pub fn set_display(&mut self, v: longhands::display::computed_value::T) {
|
||||
@ -2226,33 +2203,7 @@ fn static_assert() {
|
||||
gecko_inexhaustive=True,
|
||||
) %>
|
||||
${impl_keyword('clear', 'mBreakType', clear_keyword)}
|
||||
|
||||
${impl_style_coord("scroll_snap_points_x", "mScrollSnapPointsX")}
|
||||
${impl_style_coord("scroll_snap_points_y", "mScrollSnapPointsY")}
|
||||
|
||||
pub fn set_scroll_snap_coordinate<I>(&mut self, v: I)
|
||||
where I: IntoIterator<Item = longhands::scroll_snap_coordinate::computed_value::single_value::T>,
|
||||
I::IntoIter: ExactSizeIterator
|
||||
{
|
||||
self.gecko.mScrollSnapCoordinate.assign_from_iter_pod(v.into_iter());
|
||||
}
|
||||
|
||||
pub fn copy_scroll_snap_coordinate_from(&mut self, other: &Self) {
|
||||
let iter = other.gecko.mScrollSnapCoordinate.iter().map(|c| *c);
|
||||
self.gecko.mScrollSnapCoordinate.assign_from_iter_pod(iter);
|
||||
}
|
||||
|
||||
pub fn reset_scroll_snap_coordinate(&mut self, other: &Self) {
|
||||
self.copy_scroll_snap_coordinate_from(other)
|
||||
}
|
||||
|
||||
pub fn clone_scroll_snap_coordinate(&self) -> longhands::scroll_snap_coordinate::computed_value::T {
|
||||
let vec = self.gecko.mScrollSnapCoordinate.iter().cloned().collect();
|
||||
longhands::scroll_snap_coordinate::computed_value::List(vec)
|
||||
}
|
||||
|
||||
${impl_css_url('_moz_binding', 'mBinding')}
|
||||
|
||||
${impl_transition_time_value('delay', 'Delay')}
|
||||
${impl_transition_time_value('duration', 'Duration')}
|
||||
${impl_transition_timing_function()}
|
||||
|
@ -309,41 +309,6 @@ ${helpers.predefined_type(
|
||||
allowed_in_keyframe_block=False,
|
||||
)}
|
||||
|
||||
% for axis in ["x", "y"]:
|
||||
${helpers.predefined_type(
|
||||
"scroll-snap-points-" + axis,
|
||||
"ScrollSnapPoint",
|
||||
"computed::ScrollSnapPoint::none()",
|
||||
animation_value_type="discrete",
|
||||
gecko_pref="layout.css.scroll-snap.enabled",
|
||||
products="gecko",
|
||||
spec="Nonstandard (https://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points)",
|
||||
)}
|
||||
% endfor
|
||||
|
||||
${helpers.predefined_type(
|
||||
"scroll-snap-destination",
|
||||
"Position",
|
||||
"computed::Position::zero()",
|
||||
products="gecko",
|
||||
gecko_pref="layout.css.scroll-snap.enabled",
|
||||
boxed=True,
|
||||
spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination)",
|
||||
animation_value_type="discrete",
|
||||
)}
|
||||
|
||||
${helpers.predefined_type(
|
||||
"scroll-snap-coordinate",
|
||||
"Position",
|
||||
"computed::Position::zero()",
|
||||
vector=True,
|
||||
allow_empty=True,
|
||||
products="gecko",
|
||||
gecko_pref="layout.css.scroll-snap.enabled",
|
||||
spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination)",
|
||||
animation_value_type="discrete",
|
||||
)}
|
||||
|
||||
<% transform_extra_prefixes = "moz:layout.css.prefixes.transforms webkit" %>
|
||||
|
||||
${helpers.predefined_type(
|
||||
|
@ -1,11 +0,0 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||||
|
||||
//! Computed types for legacy Gecko-only properties.
|
||||
|
||||
use crate::values::computed::length::LengthPercentage;
|
||||
use crate::values::generics::gecko::ScrollSnapPoint as GenericScrollSnapPoint;
|
||||
|
||||
/// A computed type for scroll snap points.
|
||||
pub type ScrollSnapPoint = GenericScrollSnapPoint<LengthPercentage>;
|
@ -56,8 +56,6 @@ pub use self::font::{FontSize, FontSizeAdjust, FontStretch, FontSynthesis};
|
||||
pub use self::font::{FontVariantAlternates, FontWeight};
|
||||
pub use self::font::{FontVariantEastAsian, FontVariationSettings};
|
||||
pub use self::font::{MozScriptLevel, MozScriptMinSize, MozScriptSizeMultiplier, XLang, XTextZoom};
|
||||
#[cfg(feature = "gecko")]
|
||||
pub use self::gecko::ScrollSnapPoint;
|
||||
pub use self::image::{Gradient, GradientItem, Image, ImageLayer, LineDirection, MozImageRect};
|
||||
pub use self::length::{CSSPixelLength, ExtremumLength, NonNegativeLength};
|
||||
pub use self::length::{Length, LengthOrNumber, LengthPercentage, NonNegativeLengthOrNumber};
|
||||
@ -106,8 +104,6 @@ pub mod easing;
|
||||
pub mod effects;
|
||||
pub mod flex;
|
||||
pub mod font;
|
||||
#[cfg(feature = "gecko")]
|
||||
pub mod gecko;
|
||||
pub mod image;
|
||||
pub mod length;
|
||||
pub mod list;
|
||||
|
@ -1,44 +0,0 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||||
|
||||
//! Generic types for legacy Gecko-only properties that should probably be
|
||||
//! un-shipped at some point in the future.
|
||||
|
||||
/// A generic value for scroll snap points.
|
||||
#[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
|
||||
#[derive(
|
||||
Clone,
|
||||
Copy,
|
||||
Debug,
|
||||
PartialEq,
|
||||
SpecifiedValueInfo,
|
||||
ToComputedValue,
|
||||
ToCss,
|
||||
ToResolvedValue,
|
||||
ToShmem,
|
||||
)]
|
||||
pub enum ScrollSnapPoint<LengthPercentage> {
|
||||
/// `none`
|
||||
None,
|
||||
/// `repeat(<length-or-percentage>)`
|
||||
#[css(function)]
|
||||
Repeat(LengthPercentage),
|
||||
}
|
||||
|
||||
impl<L> ScrollSnapPoint<L> {
|
||||
/// Returns `none`.
|
||||
#[inline]
|
||||
pub fn none() -> Self {
|
||||
ScrollSnapPoint::None
|
||||
}
|
||||
|
||||
/// Returns the repeat argument, if any.
|
||||
#[inline]
|
||||
pub fn repeated(&self) -> Option<&L> {
|
||||
match *self {
|
||||
ScrollSnapPoint::None => None,
|
||||
ScrollSnapPoint::Repeat(ref length) => Some(length),
|
||||
}
|
||||
}
|
||||
}
|
@ -26,8 +26,6 @@ pub mod easing;
|
||||
pub mod effects;
|
||||
pub mod flex;
|
||||
pub mod font;
|
||||
#[cfg(feature = "gecko")]
|
||||
pub mod gecko;
|
||||
pub mod grid;
|
||||
pub mod image;
|
||||
pub mod length;
|
||||
|
@ -7,33 +7,12 @@
|
||||
use crate::parser::{Parse, ParserContext};
|
||||
use crate::values::computed::length::CSSPixelLength;
|
||||
use crate::values::computed::{self, LengthPercentage};
|
||||
use crate::values::generics::gecko::ScrollSnapPoint as GenericScrollSnapPoint;
|
||||
use crate::values::generics::rect::Rect;
|
||||
use crate::values::specified::length::LengthPercentage as SpecifiedLengthPercentage;
|
||||
use cssparser::{Parser, Token};
|
||||
use std::fmt;
|
||||
use style_traits::values::SequenceWriter;
|
||||
use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
|
||||
|
||||
/// A specified type for scroll snap points.
|
||||
pub type ScrollSnapPoint = GenericScrollSnapPoint<SpecifiedLengthPercentage>;
|
||||
|
||||
impl Parse for ScrollSnapPoint {
|
||||
fn parse<'i, 't>(
|
||||
context: &ParserContext,
|
||||
input: &mut Parser<'i, 't>,
|
||||
) -> Result<Self, ParseError<'i>> {
|
||||
if input.try(|i| i.expect_ident_matching("none")).is_ok() {
|
||||
return Ok(GenericScrollSnapPoint::None);
|
||||
}
|
||||
input.expect_function_matching("repeat")?;
|
||||
// FIXME(emilio): This won't clamp properly when animating.
|
||||
let length = input
|
||||
.parse_nested_block(|i| SpecifiedLengthPercentage::parse_non_negative(context, i))?;
|
||||
Ok(GenericScrollSnapPoint::Repeat(length))
|
||||
}
|
||||
}
|
||||
|
||||
fn parse_pixel_or_percent<'i, 't>(
|
||||
_context: &ParserContext,
|
||||
input: &mut Parser<'i, 't>,
|
||||
|
@ -54,8 +54,6 @@ pub use self::font::{FontSize, FontSizeAdjust, FontStretch, FontSynthesis};
|
||||
pub use self::font::{FontVariantAlternates, FontWeight};
|
||||
pub use self::font::{FontVariantEastAsian, FontVariationSettings};
|
||||
pub use self::font::{MozScriptLevel, MozScriptMinSize, MozScriptSizeMultiplier, XLang, XTextZoom};
|
||||
#[cfg(feature = "gecko")]
|
||||
pub use self::gecko::ScrollSnapPoint;
|
||||
pub use self::image::{ColorStop, EndingShape as GradientEndingShape, Gradient};
|
||||
pub use self::image::{GradientItem, GradientKind, Image, ImageLayer, MozImageRect};
|
||||
pub use self::length::{AbsoluteLength, CalcLengthPercentage, CharacterWidth};
|
||||
|
Loading…
Reference in New Issue
Block a user