Bug 1741776 - Make sure <option> is a containing-block for positioned descendants. r=miko

We have other code to make sure that options themselves are in-flow, so
we really want abspos boxes not to escape the select element.

Other browsers don't allow having out-of-flow option children at all
(they seem to force descendants to be in-flow). However that seems
fairly more complicated to implement, and I don't think it particularly
matters how we deal with this as long as we deal with it in a
sorta-reasonable way.

Differential Revision: https://phabricator.services.mozilla.com/D131785
This commit is contained in:
Emilio Cobos Álvarez 2021-11-23 15:11:55 +00:00
Родитель a9ed48385c
Коммит d6a2f350b2
2 изменённых файлов: 25 добавлений и 0 удалений

Просмотреть файл

@ -329,6 +329,9 @@ option {
display: block;
float: none !important;
position: static !important;
/* This makes sure that it is a containing block for positioned descendants. */
will-change: transform !important;
min-block-size: 1em;
padding-block: 2px;
/*

Просмотреть файл

@ -0,0 +1,22 @@
<!doctype html>
<meta charset=utf-8>
<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel=author href="https://mozilla.org" title="Mozilla">
<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1741776">
<style>
#a {
rotate: 1deg 1 0 44;
filter: drop-shadow(81px 6px 0px red);
}
</style>
<script>
window.onload = function() {
document.getElementById("b").appendChild(document.getElementById("c"));
}
</script>
<select id="a" multiple="multiple">
<option id="b">x</option>
</select>
<div id="c" style="position: fixed; top: 0; left: 0;">
x
</div>