Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Gecko Bug 1931466] Ensure inline elements inside an empty line has zero block-size and no baseline in scrolled block frames. #49313

Merged
merged 1 commit into from
Nov 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions css/css-inline/empty-span-size-001-ref.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,16 @@
border: 1px solid;
}

.oa {
height: 100px;
}

.filler {
height: 100px;
box-sizing: border-box;
border: 1px solid;
}

ul {
margin: 0;
}
Expand All @@ -21,6 +31,7 @@
}
</style>
<div class="container"></div><br>
<div class="container oa"><div class="filler"></div></div><br>
<div class="container"><span style="border: 1px solid; border-right: 2px solid;"></span></div><br>
<div class="container"><ul><li>&nbsp;</li><li>&nbsp;</li></ul></div><br>
<div class="container"><div class="button"></div><span>&nbsp;</span></div><br>
28 changes: 28 additions & 0 deletions css/css-inline/empty-span-size-001.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="author" title="David Shin" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#invisible-line-boxes">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1931466">
Expand All @@ -21,18 +22,45 @@
vertical-align: top;
}

.oa {
overflow: hidden;
height: 100px;
}

.filler {
height: 100px;
box-sizing: border-box;
border: 1px solid;
}

.bad {
background: red;
}

ul {
margin: 0;
}

li {
width: 0;
}

</style>
<!-- Empty inline element in empty line has a height of zero. -->
<div class="container"><span class="inline"></span></div><br>
<!-- Empty inline element should not contribute to scrollable overflow. -->
<div class="container oa">
<div class="filler bad"></div>
<span id="scrollTarget"></span>
<div class="filler"></div>
</div><br>
<!-- ... But not if the line has a meaningful height. -->
<div class="container"><span class="inline"></span><span class="has-height"></span><span class="inline"></span></div><br>
<!-- ... Or if the line is present in some kind of context that gives a meaningful height. -->
<div class="container"><ul><li></li><li></li></ul></div><br>
<div class="container"><input type="button" value=""></div><br>
<script>
scrollTarget.scrollIntoView();
document.documentElement.className = "";
</script>
</html>