Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(14)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/Source/core/page/scrolling/SnapCoordinatorTest.cpp

Issue 1188563005: Compute snap offsets (both repeat and element based) (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: rebase Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« third_party/WebKit/Source/core/page/scrolling/SnapCoordinator.cpp ('K') | « third_party/WebKit/Source/core/page/scrolling/SnapCoordinator.cpp ('k') | third_party/WebKit/Source/core/style/ComputedStyle.h » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/Source/core/page/scrolling/SnapCoordinatorTest.cpp
diff --git a/third_party/WebKit/Source/core/page/scrolling/SnapCoordinatorTest.cpp b/third_party/WebKit/Source/core/page/scrolling/SnapCoordinatorTest.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..d7512aa07932fde28e17a24196a9ec8091214907
--- /dev/null
+++ b/third_party/WebKit/Source/core/page/scrolling/SnapCoordinatorTest.cpp
@@ -0,0 +1,277 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "SnapCoordinator.h"
+
+#include "core/dom/Document.h"
+#include "core/dom/Element.h"
+#include "core/frame/FrameView.h"
+#include "core/style/ComputedStyle.h"
+#include "core/testing/DummyPageHolder.h"
+#include "platform/scroll/ScrollTypes.h"
+
+#include <gtest/gtest.h>
+
+namespace blink {
+
+using HTMLNames::styleAttr;
+
+class SnapCoordinatorTest : public testing::Test {
+protected:
+ SnapCoordinatorTest()
+ : pageHolder(DummyPageHolder::create())
+ {
+ setHTML(
+ "<style>"
+ " ::-webkit-scrollbar { display: none; }"
skobes 2016/03/07 03:42:27 It would be good to also test with scrollbars pres
majidvp 2016/05/03 17:23:36 Add the scrollbars back. Their only affect is the
+ " #snap-container {"
+ " height: 1000px;"
+ " width: 1000px;"
+ " overflow: scroll;"
+ " scroll-snap-type: mandatory;"
+ " }"
+ " #snap-element-fixed-position {"
+ " position: fixed;"
+ " }"
+ "</style>"
+ "<body>"
+ " <div id='snap-container'>"
+ " <div id='snap-element'></div>"
+ " <div id='intermediate'>"
+ " <div id='nested-snap-element'></div>"
+ " </div>"
+ " <div id='snap-element-fixed-position'></div>"
+ " <div style='width:2000px; height:2000px;'></div>"
+ " </div>"
+ "</body>");
+ document().updateLayout();
+ }
+
+ Document& document()
+ {
+ return pageHolder->document();
+ }
+
+ void setHTML(const char* htmlContent)
+ {
+ document().documentElement()->setInnerHTML(htmlContent, ASSERT_NO_EXCEPTION);
+ }
+
+ Element& snapContainer()
+ {
+ return *document().getElementById("snap-container");
+ }
+
+ SnapCoordinator& coordinator()
+ {
+ return *document().snapCoordinator();
+ }
+
+ Vector<double> snapOffsets(const Element& node, ScrollbarOrientation orientation)
+ {
+ return coordinator().snapOffsets(node, orientation);
+ }
+
+ OwnPtr<DummyPageHolder> pageHolder;
+ TrackExceptionState exceptionState;
+};
+
+TEST_F(SnapCoordinatorTest, ValidRepeat)
+{
+ snapContainer().setAttribute(styleAttr, "scroll-snap-points-x: repeat(20%); scroll-snap-points-y: repeat(400px);");
+ document().updateLayout();
+
+ {
+ Vector<double> actual = snapOffsets(snapContainer(), HorizontalScrollbar);
+ EXPECT_EQ(5U, actual.size());
+ for (size_t i = 0; i < actual.size(); ++i)
+ EXPECT_EQ((i + 1) * 200, actual[i]);
+ }
+ {
+ Vector<double> actual = snapOffsets(snapContainer(), VerticalScrollbar);
+ EXPECT_EQ(2U, actual.size());
+ EXPECT_EQ(400, actual[0]);
+ EXPECT_EQ(800, actual[1]);
+ }
+}
+
+TEST_F(SnapCoordinatorTest, EmptyRepeat)
+{
+ snapContainer().setAttribute(styleAttr, "scroll-snap-points-x: none; scroll-snap-points-y: none;");
+ document().updateLayout();
+
+ EXPECT_EQ(0U, snapOffsets(snapContainer(), HorizontalScrollbar).size());
+ EXPECT_EQ(0U, snapOffsets(snapContainer(), VerticalScrollbar).size());
+}
+
+TEST_F(SnapCoordinatorTest, ZeroAndNegativeRepeat)
+{
+ // These be rejected as an invalid repeat values thus no snap offset is created
+ snapContainer().setAttribute(styleAttr, "scroll-snap-points-x: repeat(-1px); scroll-snap-points-y: repeat(0px);");
+ document().updateLayout();
+
+ EXPECT_EQ(0U, snapOffsets(snapContainer(), HorizontalScrollbar).size());
+ EXPECT_EQ(0U, snapOffsets(snapContainer(), VerticalScrollbar).size());
+
+ // Calc values are not be rejected outright but instead clamped to 1px min repeat value
+ snapContainer().setAttribute(styleAttr, "scroll-snap-points-x: repeat(calc(10px - 100%)); scroll-snap-points-y: repeat(calc(0px));");
+ document().updateLayout();
+
+ EXPECT_EQ(1000U, snapOffsets(snapContainer(), HorizontalScrollbar).size());
+ EXPECT_EQ(1000U, snapOffsets(snapContainer(), VerticalScrollbar).size());
+}
+
+TEST_F(SnapCoordinatorTest, SimpleSnapElement)
+{
+ Element& snapElement = *document().getElementById("snap-element");
+ snapElement.setAttribute(styleAttr, "scroll-snap-coordinate: 10px 11px;");
+ document().updateLayout();
+
+ EXPECT_EQ(10, snapOffsets(snapContainer(), HorizontalScrollbar)[0]);
+ EXPECT_EQ(11, snapOffsets(snapContainer(), VerticalScrollbar)[0]);
+
+ // Multiple coordinate and translates
+ snapElement.setAttribute(styleAttr, "scroll-snap-coordinate: 20px 21px, 40px 41px; transform: translate(10px, 10px);");
+ document().updateLayout();
+
+
+ Vector<double> result = snapOffsets(snapContainer(), HorizontalScrollbar);
+ EXPECT_EQ(30, result[0]);
+ EXPECT_EQ(50, result[1]);
+ result = snapOffsets(snapContainer(), VerticalScrollbar);
+ EXPECT_EQ(31, result[0]);
+ EXPECT_EQ(51, result[1]);
+}
+
+TEST_F(SnapCoordinatorTest, NestedSnapElement)
+{
+ Element& snapElement = *document().getElementById("nested-snap-element");
+ snapElement.setAttribute(styleAttr, "scroll-snap-coordinate: 20px 25px;");
+ document().updateLayout();
+
+ EXPECT_EQ(20, snapOffsets(snapContainer(), HorizontalScrollbar)[0]);
+ EXPECT_EQ(25, snapOffsets(snapContainer(), VerticalScrollbar)[0]);
+}
+
+TEST_F(SnapCoordinatorTest, NestedSnapElementCaptured)
+{
+ Element& snapElement = *document().getElementById("nested-snap-element");
+ snapElement.setAttribute(styleAttr, "scroll-snap-coordinate: 20px 25px;");
+
+ Element* intermediate = document().getElementById("intermediate");
+ intermediate->setAttribute(styleAttr, "overflow: scroll;");
+
+ document().updateLayout();
+
+ // Intermediate scroller captures nested snap elements first so ancestor
+ // does not get them.
+ EXPECT_EQ(0U, snapOffsets(snapContainer(), HorizontalScrollbar).size());
+ EXPECT_EQ(0U, snapOffsets(snapContainer(), VerticalScrollbar).size());
+}
+
+TEST_F(SnapCoordinatorTest, PositionFixedSnapElement)
+{
+ Element& snapElement = *document().getElementById("snap-element-fixed-position");
+ snapElement.setAttribute(styleAttr, "scroll-snap-coordinate: 1px 1px;");
+ document().updateLayout();
+
+ // Position fixed elements are contained in document and not its immediate
+ // ancestor scroller. They cannot be a valid snap destination so they should
+ // not contribute snap points to their immediate snap container or document
+ // See: https://lists.w3.org/Archives/Public/www-style/2015Jun/0376.html
+ EXPECT_EQ(0U, snapOffsets(snapContainer(), HorizontalScrollbar).size());
+ EXPECT_EQ(0U, snapOffsets(snapContainer(), VerticalScrollbar).size());
+
+ Element* body = document().viewportDefiningElement();
+ EXPECT_EQ(0U, snapOffsets(*body, HorizontalScrollbar).size());
+ EXPECT_EQ(0U, snapOffsets(*body, VerticalScrollbar).size());
+}
+
+TEST_F(SnapCoordinatorTest, RepeatAndSnapElementTogether)
+{
+ document().getElementById("snap-element")->setAttribute(styleAttr, "scroll-snap-coordinate: 5px 10px;");
+ document().getElementById("nested-snap-element")->setAttribute(styleAttr, "scroll-snap-coordinate: 250px 450px;");
+
+ snapContainer().setAttribute(styleAttr, "scroll-snap-points-x: repeat(20%); scroll-snap-points-y: repeat(400px);");
+ document().updateLayout();
+
+ {
+ Vector<double> result = snapOffsets(snapContainer(), HorizontalScrollbar);
+ EXPECT_EQ(7U, result.size());
+ EXPECT_EQ(5, result[0]);
+ EXPECT_EQ(200, result[1]);
+ EXPECT_EQ(250, result[2]);
+ }
+ {
+ Vector<double> result = snapOffsets(snapContainer(), VerticalScrollbar);
+ EXPECT_EQ(4U, result.size());
+ EXPECT_EQ(10, result[0]);
+ EXPECT_EQ(400, result[1]);
+ EXPECT_EQ(450, result[2]);
+ }
+}
+
+TEST_F(SnapCoordinatorTest, SnapPointsAreScrollOffsetIndependent)
+{
+ Element& snapElement = *document().getElementById("snap-element");
+ snapElement.setAttribute(styleAttr, "scroll-snap-coordinate: 10px 11px;");
+ snapContainer().scrollBy(100, 100);
+ document().updateLayout();
+
+ EXPECT_EQ(snapContainer().scrollLeft(), 100);
+ EXPECT_EQ(snapContainer().scrollTop(), 100);
+ EXPECT_EQ(10, snapOffsets(snapContainer(), HorizontalScrollbar)[0]);
+ EXPECT_EQ(11, snapOffsets(snapContainer(), VerticalScrollbar)[0]);
+}
+
+TEST_F(SnapCoordinatorTest, UpdateStyleForSnapElement)
+{
+ Element& snapElement = *document().getElementById("snap-element");
+ snapElement.setAttribute(styleAttr, "scroll-snap-coordinate: 10px 11px;");
+ document().updateLayout();
+
+
+ EXPECT_EQ(10, snapOffsets(snapContainer(), HorizontalScrollbar)[0]);
+ EXPECT_EQ(11, snapOffsets(snapContainer(), VerticalScrollbar)[0]);
+
+ snapElement.remove();
+ document().updateLayout();
+
+ EXPECT_EQ(0U, snapOffsets(snapContainer(), HorizontalScrollbar).size());
+ EXPECT_EQ(0U, snapOffsets(snapContainer(), VerticalScrollbar).size());
+
+ // Add a new snap element
+ Element& container = *document().getElementById("snap-container");
+ container.setInnerHTML("<div style='scroll-snap-coordinate: 20px 22px;'><div style='width:2000px; height:2000px;'></div></div>", ASSERT_NO_EXCEPTION);
+ document().updateLayout();
+
+ EXPECT_EQ(20, snapOffsets(snapContainer(), HorizontalScrollbar)[0]);
+ EXPECT_EQ(22, snapOffsets(snapContainer(), VerticalScrollbar)[0]);
+}
+
+TEST_F(SnapCoordinatorTest, DocumentWithSnapElement)
+{
+ setHTML(
+ "<body style='scroll-snap-type: mandatory; height:1000px; width:1000px; overflow:scroll;'>"
skobes 2016/03/07 03:42:27 Setting overflow:scroll on <body> probably masks s
majidvp 2016/05/03 17:23:36 Added two other tests where body, document are vie
+ " <div id='snap-element' style='scroll-snap-coordinate: 5px 6px;'></div>"
+ " <div>"
+ " <div id='nested-snap-element' style='scroll-snap-coordinate: 10px 11px;'></div>"
+ " </div>"
+ " <div style='width:2000px; height:2000px;'></div>"
+ "</body>");
+
+ document().updateLayout();
+
+ // we should be able to set snap points on the document element
+ Element& body = *document().viewportDefiningElement();
+ Vector<double> result = snapOffsets(body, HorizontalScrollbar);
+ EXPECT_EQ(5, result[0]);
+ EXPECT_EQ(10, result[1]);
+ result = snapOffsets(body, VerticalScrollbar);
+ EXPECT_EQ(6, result[0]);
+ EXPECT_EQ(11, result[1]);
+}
+
+
+} // namespace
« third_party/WebKit/Source/core/page/scrolling/SnapCoordinator.cpp ('K') | « third_party/WebKit/Source/core/page/scrolling/SnapCoordinator.cpp ('k') | third_party/WebKit/Source/core/style/ComputedStyle.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698