adding container-type: inline-size to an element, makes the height of that element 0px
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox108 | --- | fixed |
People
(Reporter: o.zwagers, Assigned: emilio)
References
(Blocks 1 open bug)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:105.0) Gecko/20100101 Firefox/105.0
Steps to reproduce:
I am using the experimental feature "layout.css.container-queries.enabled". In my css I have added the property container-type to an parent element with the value "inline-size". However that parent element's height becomes 0, even though there are children inside the parent with a height larger than 0. In other browser (safari and chrome), the height of children is used to determine the size of the parent.
so to replicate this issue:
- style a div element and give it the class parent. add the css property container-type to the parent element.
- in your html, add children to the parent, which have a height.
- look in the devtools and check the height of the parent element.
Actual results:
the parent element's height got removed when using the css property container-type, with the value "inline-size".
Expected results:
while using inline-size, I expect that the height of the parent will get a size so it can fit the children.
please contact me if something is unclear.
|
||
Comment 1•3 years ago
|
||
Is it possible to provide a test case to make sure we are using the same case in order to confirm the issue?
Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
container-type: inline-size;
}
</style>
</head>
<body>
<div class="parent">
<h3>Hello World</h3>
</div>
</body>
</html>
Here the parent class will have the height 0px when using container-type with the value inline-size. However you would expect it to be the same height as the h3 element (19px). When I remove the parent class from the div element, the height becomes the same as the height of the h3 element.
I hope this is what you meant with test case.
|
||
Comment 3•3 years ago
|
||
|
|
||
Updated•3 years ago
|
|
Assignee | |
Comment 4•3 years ago
|
||
It was made a bitfield so that we could include style. But then style
containment was removed and the bitfield keeps causing us to do wrong
check (since INLINE_SIZE intersects SIZE).
So just make it an enum. This causes a progression and a test that
failed now times out (which is a pre-existing issue, just like the
pseudo-elements test that times out).
|
||
Updated•3 years ago
|
|
||
Comment 6•3 years ago
|
||
Backed out changeset bee94ed5a33d (Bug 1794040) for causing wpt failures on container-type-containment.html.
Backout link
Push with failures <--> wpt11
Failure Log
|
|
Assignee | |
Updated•3 years ago
|
|
||
Comment 9•3 years ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/60960388df11
https://hg.mozilla.org/mozilla-central/rev/9cf49271f15e
Description
•