mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 06:08:24 +02:00
55218a3adc
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
53 lines
2.5 KiB
HTML
53 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Test: Check inline negative margin should not cause the line to wrap</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<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" />
|
|
<style>
|
|
#container {
|
|
font-family: Ahem;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
margin-left: 10ch;
|
|
}
|
|
inline-block {
|
|
display: inline-block;
|
|
}
|
|
.w1 { width: 1ch; }
|
|
.w2 { width: 2ch; }
|
|
.w3 { width: 3ch; }
|
|
.w4 { width: 4ch; }
|
|
.w5 { width: 5ch; }
|
|
span {
|
|
color: orange;
|
|
}
|
|
img {
|
|
height: .6em;
|
|
background: orange;
|
|
}
|
|
</style>
|
|
<body>
|
|
<section id="container">
|
|
<div><inline-block data-expected-height=10>123 <span style="margin-left: -8ch">1234 </span></inline-block></div>
|
|
<div><inline-block data-expected-height=10>123 <span style="margin-left: -8ch">123 </span></inline-block></div>
|
|
<div class="w4" data-expected-height=10>123 <span style="margin-left: -4ch">1234 </span></div>
|
|
<div class="w4" data-expected-height=10>123 <span style="margin-left: -4ch">123 </span></div>
|
|
<div class="w4" data-expected-height=10><img class="w4"><span style="margin-left: -4ch">123</span></div>
|
|
<div class="w4" data-expected-height=10><img class="w5"><span style="margin-left: -5ch">123</span></div>
|
|
<div class="w4" data-expected-height=20><img class="w5"><span style="margin-left: -3ch">123</span></div>
|
|
<div class="w4" data-expected-height=10><img class="w4"><img class="w1" style="margin-left: -1ch"></div>
|
|
<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>
|