WebKit export of https://bugs.webkit.org/show_bug.cgi?id=283995

web-platform-tests · Dec 13, 2024 · edf0e21 · edf0e21
1 parent 896ac5e
commit edf0e21
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/css/css-sizing/aspect-ratio/grid-aspect-ratio-align-items-center.html b/css/css-sizing/aspect-ratio/grid-aspect-ratio-align-items-center.html
@@ -3,29 +3,40 @@
 <head>
 <link rel="author" title="Sammy Gill" href="mailto:[email protected]">
 <link rel="help" href="https://www.w3.org/TR/2021/WD-css-sizing-4-20210520/#aspect-ratio-automatic">
-<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-1977" />
 <meta name="assert" content="Grid has a definite block size computed using the inline size/aspect ratio and item is aligned accordingly (centered vertically).">
 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
 <style>
 .grid {
   display: grid;
   aspect-ratio: 1/1;
   align-items: center;
-  background: linear-gradient(to bottom, green 0, green 25px, red 25px, red 75px, green 75px, green 100px);
+  position: relative;
 }
 .item {
   width: 100px;
   height: 50px;
   background-color: green;
 }
+.abspos {
+  position: absolute;
+  width: 100px;
+  height: 25px;
+  background-color: green;
+  align-self: start;
+  z-index: -1;
+}
 </style>
 </head>
 <body>
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 <div style="width: 100px">
   <div class="grid">
+      <div class="abspos"></div>
+      <div class="abspos" style="top: 75px;"></div>
+
       <div class="item"></div>
   </div>
 </div>
 </body>
 </html>
+