Bug 1497724 [wpt PR 13441] - Convert multicolumn sticky test to a WPT test, a=testonly
authorPhilip Rogers <pdr@chromium.org>
Sat, 13 Oct 2018 19:30:55 +0000
changeset 489469 3bd3e8980c2f6ce2c0ece44b1fdea4edfdd7d6b6
parent 489468 1c6be9d4a3698eeaeb056c611b196d7d8bcc5f45
child 489470 a9f42748483700ec4e6d4f79bcc8ffef9f0b4824
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewerstestonly
bugs1497724, 13441, 597741, 891166, 1272021, 598585
milestone64.0a1
Bug 1497724 [wpt PR 13441] - Convert multicolumn sticky test to a WPT test, a=testonly Automatic update from web-platform-testsConvert multicolumn sticky test to a WPT test In https://crrev.com/597741 I landed a regular layout test for multicolumn under position: sticky but this should have been a WPT test. This patch makes everything right again with a brand new WPT test: css/position/position-sticky-child-multicolumn.html Bug: 891166 Change-Id: I85e774ad0f307d98f7dbfbf7aa86227f4d34ea6b Reviewed-on: https://chromium-review.googlesource.com/c/1272021 Commit-Queue: Philip Rogers <pdr@chromium.org> Reviewed-by: vmpstr <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/master@{#598585} -- wpt-commits: a9314c45ca0586c359afe44be1c807d94da1a806 wpt-pr: 13441
testing/web-platform/tests/css/css-position/position-sticky-child-multicolumn-ref.html
testing/web-platform/tests/css/css-position/position-sticky-child-multicolumn.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/position-sticky-child-multicolumn-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>Reference for multicolumn under position:sticky should be positioned correctly</title>
+<style>
+  body {
+    margin: 0;
+  }
+  #scroller {
+    overflow-y: scroll;
+    width: 200px;
+    height: 200px;
+  }
+  #relative {
+    position: relative;
+    top: 100px;
+    margin: 10px;
+  }
+  #child {
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+  #contents {
+    position: relative;
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80%;
+    background: lightgreen;
+  }
+  #spacer {
+    height: 400px;
+  }
+</style>
+
+<div id="scroller">
+  <div id="relative">
+    <div id="child">
+      <div id="contents"></div>
+    </div>
+  </div>
+  <div id="spacer"></div>
+</div>
+
+<div>You should see a light green box above with a dark green border.</div>
+
+<script>
+  window.addEventListener('load', function() {
+    scroller.scrollTop = 100;
+  });
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/position-sticky-child-multicolumn.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<title>Multicolumn under position:sticky should be positioned correctly</title>
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
+<link rel="match" href="position-sticky-child-multicolumn-ref.html" />
+<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org" />
+<meta name="assert" content="This test checks that a multicolumn element is positioned relative to a sticky position" />
+
+<style>
+  body {
+    margin: 0;
+  }
+  #scroller {
+    overflow-y: scroll;
+    width: 200px;
+    height: 200px;
+  }
+  #sticky {
+    position: sticky;
+    top: 10px;
+    margin: 10px;
+  }
+  #multicolumn {
+    width: 100px;
+    height: 100px;
+    background: green;
+    columns: 1;
+  }
+  #contents {
+    margin-left: 10%;
+    margin-top: 10%;
+    width: 80%;
+    height: 80%;
+    background: lightgreen;
+  }
+  #spacer {
+    height: 400px;
+  }
+</style>
+
+<div id="scroller">
+  <div id="sticky">
+    <div id="multicolumn">
+      <div id="contents"></div>
+    </div>
+  </div>
+  <div id="spacer"></div>
+</div>
+
+<div>You should see a light green box above with a dark green border.</div>
+
+<script>
+  window.addEventListener('load', function() {
+    scroller.scrollTop = 100;
+  });
+</script>