diff --git a/css/css-contain/contain-paint-stacking-context-001-ref.html b/css/css-contain/contain-paint-stacking-context-001-ref.html
index e2516f3d3788fd..c7553716ab6c25 100644
--- a/css/css-contain/contain-paint-stacking-context-001-ref.html
+++ b/css/css-contain/contain-paint-stacking-context-001-ref.html
@@ -1,13 +1,62 @@
 <!DOCTYPE HTML>
-<meta charset="utf-8">
-<title>Paint Containment Stacking Context Reference</title>
-<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com">
-<style>
-  div {
-    width: 100px;
-    height: 100px;
-    background-color: green;
-  }
-</style>
-<div></div>
-Test succeeds if there is no red.
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+  <style>
+    div {
+      position: relative;
+      width: 100px;
+    }
+    #div1,
+    #div3 {
+      background-color: #cfc;
+    }
+    #div1 {
+      z-index: 5;
+    }
+    #div2 {
+      z-index: 1;
+      background-color: #fdd;
+      height: 100px;
+      top: -20px;
+    }
+    #div2_1 {
+      background-color: #ffc;
+      z-index: 6;
+      top: -10px;
+    }
+    #div2_2 {
+      z-index: 3;
+      position: absolute;
+      top: -15px;
+      width: 40px;
+      height: 100px;
+      background-color: #ddf;
+    }
+    #div3 {
+      z-index: 2;
+      top: -50px;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <br/><br/>
+  </div>
+
+  <div id="div2">
+    <div id="div2_1">
+      <br/><br/>
+    </div>
+
+    <div id="div2_2">
+    </div>
+  </div>
+
+  <div id="div3">
+    <br/><br/>
+  </div>
+</body>
+</html>
diff --git a/css/css-contain/contain-paint-stacking-context-001a.html b/css/css-contain/contain-paint-stacking-context-001a.html
index 5e588cb61742ca..71102b6c73a3d8 100644
--- a/css/css-contain/contain-paint-stacking-context-001a.html
+++ b/css/css-contain/contain-paint-stacking-context-001a.html
@@ -1,32 +1,66 @@
 <!DOCTYPE HTML>
-<title>'contain: paint' establishes stacking context.</title>
-<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
-<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
-<link rel="match" href="contain-paint-stacking-context-001-ref.html">
-<style>
-  div {
-    width: 100px;
-    height: 100px;
-  }
-  #front {
-    background-color: green;
-    /* makes a stacking context and puts this on top */
-    position: absolute;
-    z-index: 10;
-  }
-  #back {
-    contain: paint;
-  }
-  #notOnTop {
-    background-color: red;
-    /* z-index is higher than on #front, but this should still be covered up because it is inside #back, which has 'contain: paint' */
-    position: absolute;
-    z-index: 1000;
-  }
-</style>
-<div id="front"></div>
-<div id="back">
-  <div id="notOnTop"></div>
-</div>
-Test succeeds if there is no red.
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' with stacking contents. Z-index is defined only for siblings and children.</title>
+  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+
+  <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
+  <link rel="match" href="contain-paint-stacking-context-001-ref.html">
+  <style>
+    div {
+      position: relative;
+      width: 100px;
+    }
+    #div1,
+    #div3 {
+      background-color: #cfc;
+    }
+    #div1 {
+      z-index: 5;
+    }
+    #div2 {
+      contain: paint;
+      background-color: #fdd;
+      height: 100px;
+      top: -20px;
+    }
+    #div2_1 {
+      background-color: #ffc;
+      z-index: 6;
+      top: -10px;
+    }
+    #div2_2 {
+      z-index: 3;
+      position: absolute;
+      top: -15px;
+      width: 40px;
+      height: 100px;
+      background-color: #ddf;
+    }
+    #div3 {
+      z-index: 2;
+      top: -50px;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <br/><br/>
+  </div>
+
+  <div id="div2">
+    <div id="div2_1">
+      <br/><br/>
+    </div>
+
+    <div id="div2_2">
+    </div>
+  </div>
+
+  <div id="div3">
+    <br/><br/>
+  </div>
+</body>
+</html>
diff --git a/css/css-contain/contain-paint-stacking-context-001b.html b/css/css-contain/contain-paint-stacking-context-001b.html
index e03323782a7fbf..0c4d3323bf7cb2 100644
--- a/css/css-contain/contain-paint-stacking-context-001b.html
+++ b/css/css-contain/contain-paint-stacking-context-001b.html
@@ -1,32 +1,66 @@
 <!DOCTYPE HTML>
-<title>'will-change: contain' establishes stacking context.</title>
-<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
-<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
-<link rel="match" href="contain-paint-stacking-context-001-ref.html">
-<style>
-  div {
-    width: 100px;
-    height: 100px;
-  }
-  #front {
-    background-color: green;
-    /* makes a stacking context and puts this on top */
-    position: absolute;
-    z-index: 10;
-  }
-  #back {
-    will-change: contain;
-  }
-  #notOnTop {
-    background-color: red;
-    /* z-index is higher than on #front, but this should still be covered up because it is inside #back, which has 'will-change: contain' */
-    position: absolute;
-    z-index: 1000;
-  }
-</style>
-<div id="front"></div>
-<div id="back">
-  <div id="notOnTop"></div>
-</div>
-Test succeeds if there is no red.
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'will-change: contain' with stacking contents. Z-index is defined only for siblings and children.</title>
+  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+
+  <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
+  <link rel="match" href="contain-paint-stacking-context-001-ref.html">
+  <style>
+    div {
+      position: relative;
+      width: 100px;
+    }
+    #div1,
+    #div3 {
+      background-color: #cfc;
+    }
+    #div1 {
+      z-index: 5;
+    }
+    #div2 {
+      will-change: contain;
+      background-color: #fdd;
+      height: 100px;
+      top: -20px;
+    }
+    #div2_1 {
+      background-color: #ffc;
+      z-index: 6;
+      top: -10px;
+    }
+    #div2_2 {
+      z-index: 3;
+      position: absolute;
+      top: -15px;
+      width: 40px;
+      height: 100px;
+      background-color: #ddf;
+    }
+    #div3 {
+      z-index: 2;
+      top: -50px;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <br/><br/>
+  </div>
+
+  <div id="div2">
+    <div id="div2_1">
+      <br/><br/>
+    </div>
+
+    <div id="div2_2">
+    </div>
+  </div>
+
+  <div id="div3">
+    <br/><br/>
+  </div>
+</body>
+</html>
