Bug 1535200 Part 1 - In fieldset, make absolute positioned frames relative to multicol container, not the column content frames. r=mats

Per spec, "Note: Column boxes do not become the containing block for
elements with position: fixed or position: absolute. The containing
block is the multicol container, it being the principal box."

https://drafts.csswg.org/css-multicol-1/#the-multi-column-model

contentFrame and contentFrameTop are different only if fieldset has
multicol layout. In that case, contentFrameTop is nsColumnSetFrame (or
ColumnSetWrapperFrame after applying Part 2 with
layout.css.column-span.enabled=true).

Differential Revision: https://phabricator.services.mozilla.com/D23617

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Ting-Yu Lin 2019-03-18 05:47:53 +00:00
Родитель 044c3936c7
Коммит cd5719b6d9
5 изменённых файлов: 55 добавлений и 6 удалений

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

@ -3131,9 +3131,9 @@ nsIFrame* nsCSSFrameConstructor::ConstructFieldSetFrame(
nsFrameConstructorSaveState absoluteSaveState;
nsFrameItems childItems;
contentFrame->AddStateBits(NS_FRAME_CAN_HAVE_ABSPOS_CHILDREN);
contentFrameTop->AddStateBits(NS_FRAME_CAN_HAVE_ABSPOS_CHILDREN);
if (absPosContainer) {
aState.PushAbsoluteContainingBlock(contentFrame, absPosContainer,
aState.PushAbsoluteContainingBlock(contentFrameTop, absPosContainer,
absoluteSaveState);
}

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

@ -29,9 +29,9 @@ fieldset {
position: relative;
}
</style>
<fieldset style="overflow:hidden; width:300px; height:200px;">
<fieldset class="rel" style="overflow:hidden; width:300px; height:200px;">
<legend>Legend</legend>
<div class="rel" style="-moz-columns: 2; width:100%; height:100%;">
<div style="-moz-columns: 2; width:100%; height:100%;">
<p>X
<p>X
<p>X
@ -51,9 +51,9 @@ fieldset {
<a></a><f></f>
</div>
</fieldset>
<fieldset style="width:600px; height:7em; overflow:hidden">
<fieldset class="rel" style="width:600px; height:7em; overflow:hidden">
<legend>Legend</legend>
<div class="rel" style="-moz-columns: 3; -moz-column-gap:2em; -moz-column-rule:3px solid; -moz-column-width:3em; width:100%; height:100%">
<div style="-moz-columns: 3; -moz-column-gap:2em; -moz-column-rule:3px solid; -moz-column-width:3em; width:100%; height:100%">
<p>X
<p>X
<p>X

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

@ -0,0 +1,23 @@
<!DOCTYPE HTML>
<html>
<style>
div {
position: absolute;
width: 10px;
height: 10px;
top: 0;
background: blue;
}
fieldset {
width: 300px;
height: 200px;
border: 1px solid;
position: relative;
overflow: hidden;
}
</style>
<fieldset>
<legend>Legend<div style="left: 0px;"></div></legend>
<div style="left: 10px;"></div>
</fieldset>
</html>

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

@ -0,0 +1,25 @@
<!DOCTYPE HTML>
<html>
<style>
div {
position: absolute;
width: 10px;
height: 10px;
top: 0;
background: blue;
}
fieldset {
width: 300px;
height: 200px;
border: 1px solid;
position: relative;
overflow: hidden;
}
</style>
<fieldset style="columns: 1;">
<!-- The position of <div>s should remain the same regardless of
the multicol style on fieldset. -->
<legend>Legend<div style="left: 0px;"></div></legend>
<div style="left: 10px;"></div>
</fieldset>
</html>

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

@ -35,6 +35,7 @@ fuzzy-if(OSX,0-32,0-1000) == columnfill-auto.html columnfill-auto-ref.html
== columns-table-caption-000.html columns-table-caption-000-ref.html
== positioning-transforms-bug1112501.html positioning-transforms-bug1112501-ref.html
fuzzy-if(browserIsRemote&&winWidget,0-142,0-276) == fieldset-columns-001.html fieldset-columns-001-ref.html
== fieldset-columns-002.html fieldset-columns-002-ref.html
== dynamic-change-with-overflow-1.html dynamic-change-with-overflow-1-ref.html
== dynamic-text-indent-1.html dynamic-text-indent-1-ref.html
== dynamic-text-indent-2.html dynamic-text-indent-2-ref.html