Bug 1698428: Adjust WPT reference case "overflow-top-left-ref.html" to use a white border as a mockup for the testcase's margins. r=TYLin

Per https://drafts.csswg.org/css-overflow-3/#scrollable , the scrollable
overflow area of a scrollable flex container is supposed to contain "the margin
areas of...flex item boxes for which the box establishes a containing block."

Before this patch, the reference case didn't properly require this behavior (in
its mockup of the inline-end edge of the testcase's flex containers).  The
reference case was using "margin" on blocks in a block container to represent
this space, and that didn't match the testcase because margins behave
differently in block layout vs. flex layout with respect to creating scrollable
overflow in their container.

This patch changes the reference case to use borders to represent this space.
This works better because borders do reliably create scrollable
overflow. (Also, borders don't collapse like margins do in block layout; this
lets us remove an extra hack that the reference case was having to use to
counteract this.)

Differential Revision: https://phabricator.services.mozilla.com/D111025

testing/web-platform/meta/css/css-flexbox/overflow-top-left.html.ini

@@ -1,3 +1,3 @@
 [overflow-top-left.html]
-  expected: FAIL
-  bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1698428
+  fuzzy: # The text antialiasing can cause some fuzz, on Windows w/o webrender.
+    if (os == "win") and not webrender: maxDifference=0-103;totalPixels=0-228

testing/web-platform/tests/css/css-flexbox/overflow-top-left-ref.html

@@ -17,21 +17,24 @@
 }
 
 .column-wrapper > div {
-  margin: 4px;
+  /* This border represents the expected rendering of the testcase's
+     "margin:4px". This border should occupy the same space as that margin
+     would, and it should create the same amount of scrollable overflow.  (We
+     can't just use "margin:4px" here, because this reference case uses block
+     layout, and margins have different behavior with respect to collapsing and
+     scrollable-overflow impact in block vs. flexbox layout.) */
+  border: 4px solid white;
   height: 30px;
   background: #CCC;
 }
 
-.column-wrapper > .h-overflow {
-  margin-top: 8px;  // Compensate for margin collapsing.
-}
-
 .h-overflow {
   width: 500px;
 }
 
 .row-wrapper > div {
-  margin: 4px;
+  /* As noted above, this is a mockup for the "margin:4px" in the testcase. */
+  border: 4px solid white;
   width: 30px;
   background: #CCC;
 }
@@ -40,10 +43,6 @@
   height: 500px;
 }
 
-.row-wrapper > .v-overflow {
-  margin-right: 8px;  // Compensate for margin collapsing.
-}
-
 </style>
 
 <div class=column-wrapper>