Don't show red on success; add some red failure cases.

Author: tabatkins

css/css-overflow/overflow-clip-content-visual-overflow-ref.html

@@ -13,7 +13,7 @@
     height: 100px;
     will-change: transform;
     background: black;
-    box-shadow: 10px 50px 5px red;
+    box-shadow: 50px 50px 5px green;
   }
 
   .cover {

css/css-overflow/overflow-clip-content-visual-overflow.html

@@ -19,19 +19,29 @@
     width: 100px;
     height: 100px;
     background: black;
-    box-shadow: 10px 50px 5px red;
+    box-shadow: 50px 50px 5px green;
   }
 
   .spacer {
     width: 100px;
     height: 150px;
   }
+
+  .fail {
+    width: 10px;
+    height: 10px;
+    background: red;
+    position: absolute;
+    z-index: -1;
+  }
 </style>
 <div class="parent" style="overflow-x: clip; overflow-y: visible">
   <div class="child"></div>
 </div>
+<div class="fail" style="left: 70px; top: 120px;"></div>
 <div class="spacer"></div>
 <div class="parent" style="overflow-x: visible; overflow-y: clip">
   <div class="child"></div>
 </div>
+<div class="fail" style="left: 120px; top: 320px;"></div>
 </script>

css/css-overflow/overflow-clip-hit-testing.html

@@ -23,7 +23,7 @@
   }
 
   .child2 {
-    background-color: red;
+    background-color: blue;
   }
 </style>
 <div class="parent" style="display: flex; overflow-x: visible; overflow-y: clip">

css/css-overflow/overflow-clip-margin-003-ref.html

@@ -8,8 +8,8 @@
       width: 100px;
       height: 100px;
       background-color: green;
-      box-shadow: 20px 20px 5px red;
+      box-shadow: 20px 20px 5px blue;
   }
 </style>
-<p>You should see a green box with a red box shadow.
+<p>You should see a green box with a blue box shadow.
 <div class="parent"></div>

css/css-overflow/overflow-clip-margin-003.html

@@ -11,8 +11,18 @@
       background-color: green;
       overflow: clip;
       overflow-clip-margin: 1px;
-      box-shadow: 20px 20px 5px red;
+      box-shadow: 20px 20px 5px blue;
+  }
+  .fail {
+      width: 20px;
+      height: 20px;
+      background-color: red;
+      position: relative;
+      top: -15px;
+      left: 85px;
+      z-index: -1;
   }
 </style>
-<p>You should see a green box with a red box shadow.
+<p>You should see a green box with a blue box shadow.
 <div class="parent"></div>
+<div class="fail"></div>

css/css-overflow/overflow-clip-margin-006-ref.html

@@ -8,8 +8,8 @@
       width: 100px;
       height: 100px;
       background-color: green;
-      box-shadow: 20px 20px 5px red;
+      box-shadow: 20px 20px 5px blue;
   }
 </style>
-<p>You should see a green box with a red box shadow.
+<p>You should see a green box with a blue box shadow.
 <div class="parent"></div>

css/css-overflow/overflow-clip-margin-006.html

@@ -11,8 +11,18 @@
       background-color: green;
       contain: paint;
       overflow-clip-margin: 1px;
-      box-shadow: 20px 20px 5px red;
+      box-shadow: 20px 20px 5px blue;
+  }
+  .fail {
+      width: 20px;
+      height: 20px;
+      background-color: red;
+      position: relative;
+      top: -15px;
+      left: 85px;
+      z-index: -1;
   }
 </style>
-<p>You should see a green box with a red box shadow.
+<p>You should see a green box with a blue box shadow.
 <div class="parent"></div>
+<div class="fail"></div>

css/css-overflow/overflow-hidden-resize-with-stacking-context-child.html

@@ -22,6 +22,14 @@
   height: 20px;
   background: green;
 }
+.fail {
+  width: 20px;
+  height: 20px;
+  background: red;
+  position: relative;
+  top: -60px;
+  left: 40px;
+}
 </style>
 <p>Test passes if there is a filled green square.</p>
 <div id="container">
@@ -33,6 +41,7 @@
     <div class="content"></div>
   </div>
 </div>
+<div class="fail"></div>
 <script>
 waitForAtLeastOneFrame().then(() => {
   container.style.height = '100px';