Bug 1609992 [wpt PR 21239] - Limit inline negative margin quirks only when line overflows, a=testonly

Automatic update from web-platform-tests
Limit inline negative margin quirks only when line overflows

crbug.com/979894 and crbug.com/1011816 revealed that, boxes
with inline negative margins can be put back to the line even
if they appear beyond the end margin. The behavior is not
defined in the spec, but supported because all browsers do it
and there are good amount of sites relying on the behavior.

The special behavior, however, turned out that it should
apply only when the line overflows.

As described in fixes for the above issues, this behavior is
not well-defined, not really interoperable, and sometimes
the result of combinations of bugs. This patch takes the parts
of observable behaviors that are interoperable and reasonable,
while fixes the reported page.

Bug: 1040461
Change-Id: I3e4883220645a59dd3c33bdad4116f200fc4208d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2000412
Commit-Queue: Koji Ishii <kojii@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#733154}

--

wpt-commits: 2f346208c2a115a601b580e7869fe112b97c4246
wpt-pr: 21239

testing/web-platform/tests/css/CSS2/linebox/inline-negative-margin-001.html

@@ -5,6 +5,7 @@
 <script src="/resources/check-layout-th.js"></script>
 <link rel="help" href="https://crbug.com/979894">
 <link rel="help" href="https://crbug.com/1011816">
+<link rel="help" href="https://crbug.com/1040461">
 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#inline-width">
 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
@@ -20,6 +21,7 @@ inline-block {
 }
 .w1 { width: 1ch; }
 .w2 { width: 2ch; }
+.w3 { width: 3ch; }
 .w4 { width: 4ch; }
 .w5 { width: 5ch; }
 span {
@@ -43,6 +45,9 @@ img {
     <div class="w4" data-expected-height=20><img class="w4"><img class="w2" style="margin-left: -1ch"></div>
     <div class="w4" data-expected-height=10><img class="w5"><img class="w1" style="margin-left: -2ch"></div>
     <div class="w4" data-expected-height=20><img class="w5"><img class="w2" style="margin-left: -2ch"></div>
+
+    <div class="w4" data-expected-height=20><img class="w3"><img class="w2"><img class="w1" style="margin-left: -2ch"></div>
+    <div class="w4" data-expected-height=20><img class="w2"> <img class="w2"><img class="w1" style="margin-left: -2ch"></div>
   </section>
 <script>checkLayout('[data-expected-height]');</script>
 </body>