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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1970563002: Compute snap offsets according to CSS Scroll Snap Spec Level 1 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 7 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
« no previous file with comments | « 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..8b6395cb05aac5ebda6e65fe0a27b2ae46f458c4
--- /dev/null
+++ b/third_party/WebKit/Source/core/page/scrolling/SnapCoordinatorTest.cpp
@@ -0,0 +1,388 @@
+// 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::TestWithParam<FrameSettingOverrideFunction> {
+protected:
+ SnapCoordinatorTest() {}
+
+ void SetUp() override
+ {
+ m_pageHolder = DummyPageHolder::create(
+ IntSize(), nullptr, nullptr, GetParam());
+
+ setHTML(
+ "<style>"
+ " #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();
+ }
+
+ void TearDown() override
+ {
+ m_pageHolder = nullptr;
+ }
+
+ Document& document()
+ {
+ return m_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 ContainerNode& node, ScrollbarOrientation orientation)
+ {
+ return coordinator().snapOffsets(node, orientation);
+ }
+
+ OwnPtr<DummyPageHolder> m_pageHolder;
+};
+
+INSTANTIATE_TEST_CASE_P(All, SnapCoordinatorTest, ::testing::Values(
+ nullptr,
+ RootLayerScrollsFrameSettingOverride));
+
+TEST_P(SnapCoordinatorTest, ValidRepeat)
+{
+ snapContainer().setAttribute(styleAttr, "scroll-snap-points-x: repeat(20%); scroll-snap-points-y: repeat(400px);");
+ document().updateLayout();
+ {
+ const int expectedStepSize = snapContainer().clientWidth() * 0.2;
+ Vector<double> actual = snapOffsets(snapContainer(), HorizontalScrollbar);
+ EXPECT_EQ(5U, actual.size());
+ for (size_t i = 0; i < actual.size(); ++i)
+ EXPECT_EQ((i + 1) * expectedStepSize, actual[i]);
+ }
+ {
+ Vector<double> actual = snapOffsets(snapContainer(), VerticalScrollbar);
+ EXPECT_EQ(2U, actual.size());
+ EXPECT_EQ(400, actual[0]);
+ EXPECT_EQ(800, actual[1]);
+ }
+}
+
+TEST_P(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_P(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();
+
+ // A repeat value of 1px should give us |(scroll size - client size) / 1| snap offsets
+ unsigned expectedHorizontalSnapOffsets = snapContainer().scrollWidth() - snapContainer().clientWidth();
+ EXPECT_EQ(expectedHorizontalSnapOffsets, snapOffsets(snapContainer(), HorizontalScrollbar).size());
+ unsigned expectedVerticalSnapOffsets = snapContainer().scrollHeight() - snapContainer().clientHeight();
+ EXPECT_EQ(expectedVerticalSnapOffsets, snapOffsets(snapContainer(), VerticalScrollbar).size());
+}
+
+TEST_P(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_P(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_P(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_P(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_P(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(200px); 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_P(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_P(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_P(SnapCoordinatorTest, LayoutViewCapturesWhenBodyElementViewportDefining)
+{
+ setHTML(
+ "<style>"
+ "body {"
+ " overflow: scroll;"
+ " scroll-snap-type: mandatory;"
+ " height: 1000px;"
+ " width: 1000px;"
+ " margin: 5px;"
+ "}"
+ "</style>"
+ "<body>"
+ " <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();
+
+ // Sanity check that body is the viewport defining element
+ EXPECT_EQ(document().body(), document().viewportDefiningElement());
+
+ // When body is viewport defining and overflows then any snap points on the
+ // body element will be captured by layout view as the snap container.
+ Vector<double> result = snapOffsets(document(), HorizontalScrollbar);
+ EXPECT_EQ(10, result[0]);
+ EXPECT_EQ(15, result[1]);
+ result = snapOffsets(document(), VerticalScrollbar);
+ EXPECT_EQ(11, result[0]);
+ EXPECT_EQ(16, result[1]);
+}
+
+TEST_P(SnapCoordinatorTest, LayoutViewCapturesWhenDocumentElementViewportDefining)
+{
+ setHTML(
+ "<style>"
+ ":root {"
+ " overflow: scroll;"
+ " scroll-snap-type: mandatory;"
+ " height: 500px;"
+ " width: 500px;"
+ "}"
+ "body {"
+ " margin: 5px;"
+ "}"
+ "</style>"
+ "<html>"
+ " <body>"
+ " <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>"
+ "</html>");
+
+ document().updateLayout();
+
+ // Sanity check that document element is the viewport defining element
+ EXPECT_EQ(document().documentElement(), document().viewportDefiningElement());
+
+ // When body is viewport defining and overflows then any snap points on the
+ // the document element will be captured by layout view as the snap
+ // container.
+ Vector<double> result = snapOffsets(document(), HorizontalScrollbar);
+ EXPECT_EQ(10, result[0]);
+ EXPECT_EQ(15, result[1]);
+ result = snapOffsets(document(), VerticalScrollbar);
+ EXPECT_EQ(11, result[0]);
+ EXPECT_EQ(16, result[1]);
+}
+
+TEST_P(SnapCoordinatorTest, BodyCapturesWhenBodyOverflowAndDocumentElementViewportDefining)
+{
+ setHTML(
+ "<style>"
+ ":root {"
+ " overflow: scroll;"
+ " scroll-snap-type: mandatory;"
+ " height: 500px;"
+ " width: 500px;"
+ "}"
+ "body {"
+ " overflow: scroll;"
+ " scroll-snap-type: mandatory;"
+ " height: 1000px;"
+ " width: 1000px;"
+ " margin: 5px;"
+ "}"
+ "</style>"
+ "<html>"
+ " <body style='overflow: scroll; scroll-snap-type: mandatory; height:1000px; width:1000px;'>"
+ " <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>"
+ "</html>");
+
+ document().updateLayout();
+
+ // Sanity check that document element is the viewport defining element
+ EXPECT_EQ(document().documentElement(), document().viewportDefiningElement());
+
+ // When body and document elements are both scrollable then body element
+ // should capture snap points defined on it as opposed to layout view.
+ Element& body = *document().body();
+ 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
« no previous file with comments | « 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