From f1456685df89847717d2a59516120682f2fd6646 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rard=20Talbot?= <github@gtalbot.org>
Date: Sun, 30 Jan 2022 19:26:30 -0500
Subject: [PATCH 1/6] Added 4 new sticky tests

---
 .../position-sticky-fixed-ancestor-002.html   | 52 +++++++++++++
 .../position-sticky-fixed-ancestor-003.html   | 43 +++++++++++
 ...-sticky-scrolled-remove-horiz-sibling.html | 74 +++++++++++++++++++
 .../position-sticky-stacking-context-002.html | 38 ++++++++++
 ...osition-sticky-fixed-ancestor-002-ref.html | 18 +++++
 5 files changed, 225 insertions(+)
 create mode 100644 css/css-position/sticky/position-sticky-fixed-ancestor-002.html
 create mode 100644 css/css-position/sticky/position-sticky-fixed-ancestor-003.html
 create mode 100644 css/css-position/sticky/position-sticky-scrolled-remove-horiz-sibling.html
 create mode 100644 css/css-position/sticky/position-sticky-stacking-context-002.html
 create mode 100644 css/css-position/sticky/reference/position-sticky-fixed-ancestor-002-ref.html
diff --git a/css/css-position/sticky/position-sticky-fixed-ancestor-002.html b/css/css-position/sticky/position-sticky-fixed-ancestor-002.html
new file mode 100644
index 00000000000000..e8b35cb6a03e08
--- /dev/null
+++ b/css/css-position/sticky/position-sticky-fixed-ancestor-002.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Positioned Layout Test: a sticky element inside a fixed ancestor</title>
+
+  <link rel="match" href="reference/position-sticky-fixed-ancestor-002-ref.html">
+  <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+
+  <meta name="assert" content="This test checks that a sticky element inside a fixed subtree does not scroll with the viewport.">
+
+  <style>
+  html, body, div
+    {
+      height: 100%;
+      margin: 0;
+      width: 100%;
+    }
+
+  div#positioned-container
+    {
+      background-color: red;
+      color: yellow;
+      font-size: 40vh;
+      position: absolute;
+    }
+
+  div#sticky
+    {
+      background-color: green;
+      bottom: 0;
+      color: white;
+      position: sticky;
+    }
+  </style>
+
+  <script type="text/javascript">
+  function startTest()
+  {
+  document.getElementById("positioned-container").style.position = "fixed";
+  }
+  </script>
+
+ <body onload="startTest();">
+
+    <div id="positioned-container">
+
+      <div id="vertical-spacer">FAIL</div>
+
+      <div id="sticky">PASS</div>
+
+    </div>
diff --git a/css/css-position/sticky/position-sticky-fixed-ancestor-003.html b/css/css-position/sticky/position-sticky-fixed-ancestor-003.html
new file mode 100644
index 00000000000000..db1d5998c4b3bd
--- /dev/null
+++ b/css/css-position/sticky/position-sticky-fixed-ancestor-003.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Positioned Layout Test: a sticky element inside a fixed ancestor</title>
+
+  <link rel="match" href="reference/position-sticky-fixed-ancestor-002-ref.html">
+  <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+
+  <meta name="assert" content="This test checks that a sticky element inside a fixed subtree does not scroll with the viewport.">
+
+  <style>
+  html, body, div
+    {
+      height: 100%;
+      margin: 0;
+      width: 100%;
+    }
+
+  div#fixed-container
+    {
+      background-color: red;
+      color: yellow;
+      font-size: 40vh;
+      position: fixed;
+    }
+
+  div#sticky
+    {
+      background-color: green;
+      bottom: 0;
+      color: white;
+      position: sticky;
+    }
+  </style>
+
+    <div id="fixed-container">
+
+      <div id="vertical-spacer">FAIL</div>
+
+      <div id="sticky">PASS</div>
+
+    </div>
diff --git a/css/css-position/sticky/position-sticky-scrolled-remove-horiz-sibling.html b/css/css-position/sticky/position-sticky-scrolled-remove-horiz-sibling.html
new file mode 100644
index 00000000000000..94bd7a1edd75ec
--- /dev/null
+++ b/css/css-position/sticky/position-sticky-scrolled-remove-horiz-sibling.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Positioned Layout Test: element with 'position: sticky' and removing a sibling in the horizontal axis</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <!--
+
+  This test is the horizontal-axis correspondent
+  to the test
+  http://wpt.live/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html
+  created by Morten Stenshorne
+
+  Credit given to him here.
+
+  -->
+
+  <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+
+  <style>
+  div#scrollingContainer
+    {
+      background-color: red;
+      height: 100px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      width: 100px;
+    }
+
+  div#scrollingContainer > div
+    {
+      display: inline-block;
+      height: 100%;
+    }
+
+  div#elemSticky
+    {
+      background-color: green;
+      left: 0px;
+      position: sticky;
+      width: 100px;
+    }
+
+  div#wideItem
+    {
+      width: 600px;
+    }
+  </style>
+
+  <script src="/resources/testharness.js"></script>
+
+  <script src="/resources/testharnessreport.js"></script>
+
+  <p>Test passes if there is a filled green square and no horizontal scrollbar.
+
+  <div id="scrollingContainer">
+
+    <div id="elemSticky"></div><div id="wideItem"></div>
+
+  </div>
+
+  <script>
+  scrollingContainer.scrollLeft = 600;
+    requestAnimationFrame(()=>{
+      requestAnimationFrame(()=>{
+        wideItem.style.display = "none";
+        test(()=> {
+        assert_equals(scrollingContainer.scrollWidth, 100);
+      }, "Sticky position and its overflow contribution in the horizontal axis");
+    });
+  });
+  </script>
diff --git a/css/css-position/sticky/position-sticky-stacking-context-002.html b/css/css-position/sticky/position-sticky-stacking-context-002.html
new file mode 100644
index 00000000000000..938cd8c99076dd
--- /dev/null
+++ b/css/css-position/sticky/position-sticky-stacking-context-002.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Positioned Layout Test: an element with 'position: sticky' creates a stacking context</title>
+
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+
+  <meta name="assert" content="This test checks that an element with 'position: sticky' creates a stacking context. In this test, both divs have the same z-index value but since div#sticky is last in document tree order, then it must overlap div#overlapped-red.">
+
+  <style>
+  div
+    {
+      height: 100px;
+      width: 100px;
+    }
+
+  div#overlapped-red
+    {
+      background-color: red;
+      position: absolute;
+      z-index: 2;
+    }
+
+  div#sticky
+    {
+      background-color: green;
+      position: sticky;
+      z-index: 2;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="overlapped-red"></div>
+
+  <div id="sticky"></div>
diff --git a/css/css-position/sticky/reference/position-sticky-fixed-ancestor-002-ref.html b/css/css-position/sticky/reference/position-sticky-fixed-ancestor-002-ref.html
new file mode 100644
index 00000000000000..7f90c2674f0faa
--- /dev/null
+++ b/css/css-position/sticky/reference/position-sticky-fixed-ancestor-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference File</title>
+
+  <style>
+  html, body, div
+    {
+      background-color: green;
+      color: white;
+      font-size: 40vh;
+      height: 100%;
+      margin: 0;
+    }
+  </style>
+
+  <div>PASS</div>

From 1f3a46261daaa3784c21ca6559e7c33a52a1e1df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rard=20Talbot?= <github@gtalbot.org>
Date: Sun, 3 Apr 2022 13:42:01 -0400
Subject: [PATCH 2/6] Improving position-sticky-fixed-ancestor-002/003 tests

---
 .../sticky/position-sticky-fixed-ancestor-002.html             | 3 ++-
 .../sticky/position-sticky-fixed-ancestor-003.html             | 3 ++-
 .../reference/position-sticky-fixed-ancestor-002-ref.html      | 2 ++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/css/css-position/sticky/position-sticky-fixed-ancestor-002.html b/css/css-position/sticky/position-sticky-fixed-ancestor-002.html
index e8b35cb6a03e08..dc3c383ea5e9c8 100644
--- a/css/css-position/sticky/position-sticky-fixed-ancestor-002.html
+++ b/css/css-position/sticky/position-sticky-fixed-ancestor-002.html
@@ -4,10 +4,11 @@
 
   <title>CSS Positioned Layout Test: a sticky element inside a fixed ancestor</title>
 
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="match" href="reference/position-sticky-fixed-ancestor-002-ref.html">
   <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
 
-  <meta name="assert" content="This test checks that a sticky element inside a fixed subtree does not scroll with the viewport.">
+  <meta name="flags" content="">
 
   <style>
   html, body, div
diff --git a/css/css-position/sticky/position-sticky-fixed-ancestor-003.html b/css/css-position/sticky/position-sticky-fixed-ancestor-003.html
index db1d5998c4b3bd..382112cae42f13 100644
--- a/css/css-position/sticky/position-sticky-fixed-ancestor-003.html
+++ b/css/css-position/sticky/position-sticky-fixed-ancestor-003.html
@@ -4,10 +4,11 @@
 
   <title>CSS Positioned Layout Test: a sticky element inside a fixed ancestor</title>
 
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="match" href="reference/position-sticky-fixed-ancestor-002-ref.html">
   <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
 
-  <meta name="assert" content="This test checks that a sticky element inside a fixed subtree does not scroll with the viewport.">
+  <meta name="flags" content="">
 
   <style>
   html, body, div
diff --git a/css/css-position/sticky/reference/position-sticky-fixed-ancestor-002-ref.html b/css/css-position/sticky/reference/position-sticky-fixed-ancestor-002-ref.html
index 7f90c2674f0faa..abdc1dbcfa7ea2 100644
--- a/css/css-position/sticky/reference/position-sticky-fixed-ancestor-002-ref.html
+++ b/css/css-position/sticky/reference/position-sticky-fixed-ancestor-002-ref.html
@@ -4,6 +4,8 @@
 
  <title>CSS Reference File</title>
 
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
   <style>
   html, body, div
     {

From 9bbc380e6c3823fb47acc9b7717dbe082f9325a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rard=20Talbot?= <github@gtalbot.org>
Date: Sun, 3 Apr 2022 15:51:28 -0400
Subject: [PATCH 3/6] Merged 2 (both axis) tests into
 position-sticky-scrolled-remove-sibling.html

---
 ...-sticky-scrolled-remove-horiz-sibling.html |  74 -----------
 ...sition-sticky-scrolled-remove-sibling.html | 118 +++++++++++++++---
 2 files changed, 98 insertions(+), 94 deletions(-)
 delete mode 100644 css/css-position/sticky/position-sticky-scrolled-remove-horiz-sibling.html

diff --git a/css/css-position/sticky/position-sticky-scrolled-remove-horiz-sibling.html b/css/css-position/sticky/position-sticky-scrolled-remove-horiz-sibling.html
deleted file mode 100644
index 94bd7a1edd75ec..00000000000000
--- a/css/css-position/sticky/position-sticky-scrolled-remove-horiz-sibling.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-
-  <meta charset="UTF-8">
-
-  <title>CSS Positioned Layout Test: element with 'position: sticky' and removing a sibling in the horizontal axis</title>
-
-  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
-
-  <!--
-
-  This test is the horizontal-axis correspondent
-  to the test
-  http://wpt.live/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html
-  created by Morten Stenshorne
-
-  Credit given to him here.
-
-  -->
-
-  <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
-
-  <style>
-  div#scrollingContainer
-    {
-      background-color: red;
-      height: 100px;
-      overflow-x: auto;
-      overflow-y: hidden;
-      width: 100px;
-    }
-
-  div#scrollingContainer > div
-    {
-      display: inline-block;
-      height: 100%;
-    }
-
-  div#elemSticky
-    {
-      background-color: green;
-      left: 0px;
-      position: sticky;
-      width: 100px;
-    }
-
-  div#wideItem
-    {
-      width: 600px;
-    }
-  </style>
-
-  <script src="/resources/testharness.js"></script>
-
-  <script src="/resources/testharnessreport.js"></script>
-
-  <p>Test passes if there is a filled green square and no horizontal scrollbar.
-
-  <div id="scrollingContainer">
-
-    <div id="elemSticky"></div><div id="wideItem"></div>
-
-  </div>
-
-  <script>
-  scrollingContainer.scrollLeft = 600;
-    requestAnimationFrame(()=>{
-      requestAnimationFrame(()=>{
-        wideItem.style.display = "none";
-        test(()=> {
-        assert_equals(scrollingContainer.scrollWidth, 100);
-      }, "Sticky position and its overflow contribution in the horizontal axis");
-    });
-  });
-  </script>
diff --git a/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html b/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html
index f2cf8a98b30a2c..845454e1b3d6c5 100644
--- a/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html
+++ b/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html
@@ -1,21 +1,99 @@
 <!DOCTYPE html>
-<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
-<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
-<p>Test passes if there is a filled green square, and no scrollbars</p>
-<div id="container" style="overflow:auto; width:100px; height:100px; background:red;">
-  <div style="position:sticky; top:0; height:100px; background:green;"></div>
-  <div id="bigItem" style="height:600px;"></div>
-</div>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script>
-  container.scrollTop = 600;
-  requestAnimationFrame(()=>{
-    requestAnimationFrame(()=>{
-      bigItem.style.display = "none";
-      test(()=> {
-        assert_equals(container.scrollHeight, 100);
-      }, "Sticky position and its overflow contribution");
-    });
-  });
-</script>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Positioned Layout Test: element with 'position: sticky' and removing a sibling in the vertical axis and in the horizontal axis</title>
+
+  <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+
+  <meta name="flags" content="">
+
+  <style>
+  div#scrollingContainerVert
+    {
+      background-color: red;
+      height: 100px;
+      overflow: auto;
+      width: 200px;
+    }
+
+  div#scrollingContainerHoriz
+    {
+      background-color: red;
+      height: 100px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      width: 200px;
+    }
+
+  div#elemStickyVert
+    {
+      background-color: green;
+      height: 100px;
+      position: sticky;
+      top: 0px;
+    }
+
+  div#scrollingContainerHoriz > div
+    {
+      display: inline-block;
+      height: 100%;
+    }
+
+  div#elemStickyHoriz
+    {
+      background-color: green;
+      left: 0px;
+      position: sticky;
+      width: 200px;
+    }
+
+  div#tallItem
+    {
+      height: 600px;
+    }
+
+  div#wideItem
+    {
+      width: 600px;
+    }
+  </style>
+
+
+  <script src="/resources/testharness.js"></script>
+
+  <script src="/resources/testharnessreport.js"></script>
+
+  <p>Test passes if there is a filled green square and <strong>no scrollbar</strong>.
+
+  <div id="scrollingContainerVert">
+
+    <div id="elemStickyVert"></div>
+
+    <div id="tallItem"></div>
+
+  </div>
+
+
+  <div id="scrollingContainerHoriz">
+
+    <div id="elemStickyHoriz"></div><div id="wideItem"></div>
+
+  </div>
+
+
+  <script>
+  test(()=> {
+  scrollingContainerVert.scrollTop = 600;
+  tallItem.style.display = "none";
+  assert_equals(scrollingContainerVert.scrollHeight, 100);
+  }, "Sticky position and its overflow contribution in the vertical axis");
+
+  test(()=> {
+  scrollingContainerHoriz.scrollLeft = 600;
+  wideItem.style.display = "none";
+  assert_equals(scrollingContainerHoriz.scrollWidth, 200);
+  }, "Sticky position and its overflow contribution in the horizontal axis");
+  </script>

From fe4b47894c7343fe2ec91c80ab76eaa0c06fa0b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rard=20Talbot?= <github@gtalbot.org>
Date: Sun, 3 Apr 2022 16:36:20 -0400
Subject: [PATCH 4/6] Improved position-sticky-stacking-context-002.html
 according to review comments

---
 .../position-sticky-stacking-context-002.html     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/css/css-position/sticky/position-sticky-stacking-context-002.html b/css/css-position/sticky/position-sticky-stacking-context-002.html
index 938cd8c99076dd..c8b72ae009ca08 100644
--- a/css/css-position/sticky/position-sticky-stacking-context-002.html
+++ b/css/css-position/sticky/position-sticky-stacking-context-002.html
@@ -7,7 +7,7 @@
   <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
   <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
 
-  <meta name="assert" content="This test checks that an element with 'position: sticky' creates a stacking context. In this test, both divs have the same z-index value but since div#sticky is last in document tree order, then it must overlap div#overlapped-red.">
+  <meta name="assert" content="This test checks that an element with 'position: sticky' creates a stacking context. In this test, the first 2 divs have the same z-index value but since div#sticky is last in document tree order, then it must overlap div#overlapped-red. The final div#overlap-bottom-half-of-sticky exists to make sure that the div#sticky is squeezed, 'sandwiched' between the other 2.">
 
   <style>
   div
@@ -25,10 +25,19 @@
 
   div#sticky
     {
-      background-color: green;
+      background: linear-gradient(to bottom, green 50%, red 50%);
       position: sticky;
       z-index: 2;
     }
+
+  div#overlap-bottom-half-of-sticky
+    {
+      background-color: green;
+      bottom: 50px;
+      height: 50px;
+      position: relative;
+      z-index: 3;
+    }
   </style>
 
   <p>Test passes if there is a filled green square and <strong>no red</strong>.
@@ -36,3 +45,5 @@
   <div id="overlapped-red"></div>
 
   <div id="sticky"></div>
+
+  <div id="overlap-bottom-half-of-sticky"></div>

From f76f1e06cd9586f7b392fce1e8d3b4dc82c77e82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rard=20Talbot?= <github@gtalbot.org>
Date: Sun, 3 Apr 2022 16:51:31 -0400
Subject: [PATCH 5/6] Tweaked position-sticky-stacking-context-002.html

---
 .../sticky/position-sticky-stacking-context-002.html         | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/css/css-position/sticky/position-sticky-stacking-context-002.html b/css/css-position/sticky/position-sticky-stacking-context-002.html
index c8b72ae009ca08..03d7db546a2d83 100644
--- a/css/css-position/sticky/position-sticky-stacking-context-002.html
+++ b/css/css-position/sticky/position-sticky-stacking-context-002.html
@@ -4,10 +4,11 @@
 
   <title>CSS Positioned Layout Test: an element with 'position: sticky' creates a stacking context</title>
 
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
   <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
 
-  <meta name="assert" content="This test checks that an element with 'position: sticky' creates a stacking context. In this test, the first 2 divs have the same z-index value but since div#sticky is last in document tree order, then it must overlap div#overlapped-red. The final div#overlap-bottom-half-of-sticky exists to make sure that the div#sticky is squeezed, 'sandwiched' between the other 2.">
+  <meta name="assert" content="This test checks that an element with 'position: sticky' creates a stacking context. In this test, the first 2 divs have the same z-index value but since div#sticky is last in document tree order, then it must overlap div#overlapped-red. The final div#overlap-bottom-half-of-sticky exists to make sure that the div#sticky is squeezed, is 'sandwiched' between the other 2.">
 
   <style>
   div
@@ -36,7 +37,7 @@
       bottom: 50px;
       height: 50px;
       position: relative;
-      z-index: 3;
+      z-index: 2;
     }
   </style>
 

From 9e927411e51116200d803f6b960c743505ae0b21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rard=20Talbot?= <github@gtalbot.org>
Date: Sat, 7 May 2022 10:56:14 -0400
Subject: [PATCH 6/6] Adjusted position-sticky-stacking-context-002 according
 to review comments

---
 .../sticky/position-sticky-stacking-context-002.html       | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/css/css-position/sticky/position-sticky-stacking-context-002.html b/css/css-position/sticky/position-sticky-stacking-context-002.html
index 03d7db546a2d83..1cc162880a3755 100644
--- a/css/css-position/sticky/position-sticky-stacking-context-002.html
+++ b/css/css-position/sticky/position-sticky-stacking-context-002.html
@@ -8,7 +8,7 @@
   <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
   <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
 
-  <meta name="assert" content="This test checks that an element with 'position: sticky' creates a stacking context. In this test, the first 2 divs have the same z-index value but since div#sticky is last in document tree order, then it must overlap div#overlapped-red. The final div#overlap-bottom-half-of-sticky exists to make sure that the div#sticky is squeezed, is 'sandwiched' between the other 2.">
+  <meta name="assert" content="This test checks that an element with 'position: sticky' creates a stacking context. In this test, the first 2 divs have the same 'auto' z-index value but since div#sticky is last in document tree order, then it must overlap div#overlapped-red. The final div#overlap-bottom-half-of-sticky exists to make sure that the div#sticky is squeezed, is 'sandwiched' between the other 2.">
 
   <style>
   div
@@ -21,14 +21,12 @@
     {
       background-color: red;
       position: absolute;
-      z-index: 2;
     }
 
   div#sticky
     {
-      background: linear-gradient(to bottom, green 50%, red 50%);
+      background: linear-gradient(to bottom, green 51%, red 49%);
       position: sticky;
-      z-index: 2;
     }
 
   div#overlap-bottom-half-of-sticky
@@ -37,7 +35,6 @@
       bottom: 50px;
       height: 50px;
       position: relative;
-      z-index: 2;
     }
   </style>
 
