mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1712496 - Adjust flex container's overflow area only if there are flex items. r=dholbert 

The rect `flexItemMarginBoxBounds` is initialized at position (0, 0),
not the flex container's content-box origin. Inflating its initial value
with flex container's padding is just wrong.

Differential Revision: https://phabricator.services.mozilla.com/D115854
This commit is contained in:
Ting-Yu Lin 2021-05-26 02:59:16 +00:00
Родитель 3104bf1689
Коммит 94aa79421f
3 изменённых файлов: 140 добавлений и 1 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

5
layout/generic/nsFlexContainerFrame.cpp
Просмотреть файл

@ -4657,7 +4657,10 @@ void nsFlexContainerFrame::Reflow(nsPresContext* aPresContext,
ConsiderChildOverflow(aReflowOutput.mOverflowAreas, childFrame);
}
if (Style()->GetPseudoType() == PseudoStyleType::scrolledContent) {
MOZ_ASSERT(!lines.IsEmpty(),
"Flex container should have at least one FlexLine!");
if (Style()->GetPseudoType() == PseudoStyleType::scrolledContent &&
!lines.IsEmpty() && !lines[0].IsEmpty()) {
MOZ_ASSERT(aReflowInput.ComputedLogicalBorderPadding(wm) ==
aReflowInput.ComputedLogicalPadding(wm),
"A scrolled inner frame shouldn't have any border!");

86
testing/web-platform/tests/css/css-flexbox/overflow-area-003.html Normal file
Просмотреть файл

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Flexible Box Layout Test: Test flex container's overflow rect</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1712496">
<link rel="match" href="reference/overflow-area-003-ref.html">
<meta name="assert" content="This test verifies that a flex container's padding rect should not not affect its overflow rect at all.">
<style>
.set {
clear: both;
margin: 1em;
}
.test {
display: flex;
overflow: auto;
padding: 10px;
width: 60px;
height: 60px;
background: teal;
margin: 1em 0.5em;
float: left;
}
.item {
width: 10px;
height: 10px;
}
.absolute {
position: absolute;
}
.center {
justify-content: center;
align-items: center
}
</style>
<p>Test passes if all the teal boxes have no scrollbars.</p>
<!-- This set tests empty flex containers. -->
<div class="set">
<div class="test" style="flex-direction: row;"></div>
<div class="test" style="flex-direction: column;"></div>
<div class="test" style="flex-direction: row-reverse;"></div>
<div class="test" style="flex-direction: column-reverse;"></div>
</div>
<!-- This set tests flex containers having only a abs-pos child, but no flex items. -->
<div class="set">
<div class="test" style="flex-direction: row;">
<div class="absolute item"></div>
</div>
<div class="test" style="flex-direction: column;">
<div class="absolute item"></div>
</div>
<div class="test" style="flex-direction: row-reverse;">
<div class="absolute item"></div>
</div>
<div class="test" style="flex-direction: column-reverse;">
<div class="absolute item"></div>
</div>
</div>
<!-- This set tests flex containers having a small centered flex item. -->
<div class="set">
<div class="test center" style="flex-direction: row;">
<div class="item"></div>
</div>
<div class="test center" style="flex-direction: column;">
<div class="item"></div>
</div>
<div class="test center" style="flex-direction: row-reverse;">
<div class="item"></div>
</div>
<div class="test center" style="flex-direction: column-reverse;">
<div class="item"></div>
</div>
</div>
</html>

50
testing/web-platform/tests/css/css-flexbox/reference/overflow-area-003-ref.html Normal file
Просмотреть файл

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Flexible Box Layout Reference: Test flex container's overflow rect</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>
.set {
clear: both;
margin: 1em;
}
.test {
display: flex;
padding: 10px;
width: 60px;
height: 60px;
background: teal;
margin: 1em 0.5em;
float: left;
}
</style>
<p>Test passes if all the teal boxes have no scrollbars.</p>
<!-- This set tests emply flex containers. -->
<div class="set">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<!-- This set tests flex containers having only abs-pos children, but no flex items. -->
<div class="set">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<!-- This set tests flex containers having a small centered flex item. -->
<div class="set">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</html>