Upstream inflow-sticky.html test to WPT
Bug: 699244
Change-Id: Ib879c1866054f8e1a04aa615c55fba1371ba1eee
Reviewed-on: https://chromium-review.googlesource.com/556361
Cr-Commit-Position: refs/heads/master@{#483527}
WPT-Export-Revision: a865d38b7f582c45aa7ff35189150015ee8989cb
diff --git a/css/css-position-3/position-sticky-inflow-position-ref.html b/css/css-position-3/position-sticky-inflow-position-ref.html
new file mode 100644
index 0000000..beebd7e
--- /dev/null
+++ b/css/css-position-3/position-sticky-inflow-position-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>Reference for position:sticky elements should not affect the flow position of other elements</title>
+
+<style>
+.scroller {
+ height: 200px;
+ width: 100px;
+ overflow-y: scroll;
+ margin-bottom: 15px;
+}
+
+.sticky {
+ background-color: green;
+}
+
+.box {
+ height: 50px;
+ width: 50px;
+}
+
+.before {
+ background-color: fuchsia;
+}
+
+.after {
+ background-color: orange;
+}
+
+.padding {
+ height: 450px;
+}
+</style>
+
+<div class="scroller">
+ <div class="before box"></div>
+ <div class="box"></div>
+ <div class="after box"></div>
+ <div class="sticky box"></div>
+ <div class="padding"></div>
+</div>
+
+<div>You should see a fuchsia box, a one-box gap, an orange box, and then a green box above.</div>
diff --git a/css/css-position-3/position-sticky-inflow-position.html b/css/css-position-3/position-sticky-inflow-position.html
new file mode 100644
index 0000000..fc7e829
--- /dev/null
+++ b/css/css-position-3/position-sticky-inflow-position.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>position:sticky elements should not affect the flow position of other elements</title>
+<link rel="match" href="position-sticky-inflow-position-ref.html" />
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
+<meta name="assert" content="This test checks that position:sticky elements do not affect the flow position of other elements" />
+
+<style>
+.scroller {
+ height: 200px;
+ width: 100px;
+ overflow-y: scroll;
+ margin-bottom: 15px;
+}
+
+.sticky {
+ background-color: green;
+ position: sticky;
+ top: 150px;
+}
+
+.box {
+ height: 50px;
+ width: 50px;
+}
+
+.before {
+ background-color: fuchsia;
+}
+
+.after {
+ background-color: orange;
+}
+
+.padding {
+ height: 500px;
+}
+</style>
+
+<div class="scroller">
+ <div class="before box"></div>
+ <div class="sticky box"></div>
+ <div class="after box"></div>
+ <div class="padding"></div>
+</div>
+
+<div>You should see a fuchsia box, a one-box gap, an orange box, and then a green box above.</div>
