roytam1/palemoon27
1
0
Fork 0
mirror of https://github.com/roytam1/palemoon27.git synced 2026-05-26 14:18:48 +00:00
Code Issues Projects Releases Wiki Activity

CSS - Block elements next to floats aren't wrapped to the next line with insufficient clearance

Browse Source
This commit is contained in:
janekptacijarabaci
2017-10-23 23:13:01 +02:00
committed by Roy Tam
parent 2540f89f7d
commit db0742e6b6
12 changed files with 168 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layout/generic/nsBlockFrame.cpp
-1
View File
@@ -7398,7 +7398,6 @@ nsBlockFrame::ISizeToClearPastFloats(const nsBlockReflowState& aState,
LogicalMargin computedMargin =
offsetState.ComputedLogicalMargin().ConvertTo(wm, frWM);
result.marginIStart = computedMargin.IStart(wm);
result.marginIEnd = computedMargin.IEnd(wm);
return result;
}
layout/generic/nsBlockFrame.h
+3 -3
View File
@@ -320,9 +320,9 @@ public:
* care about (which need not be its current mBCoord)
*/
struct ReplacedElementISizeToClear {
nscoord marginIStart, borderBoxISize, marginIEnd;
nscoord MarginBoxISize() const
{ return marginIStart + borderBoxISize + marginIEnd; }
// Note that we care about the inline-start margin but can ignore
// the inline-end margin.
nscoord marginIStart, borderBoxISize;
};
static ReplacedElementISizeToClear
ISizeToClearPastFloats(const nsBlockReflowState& aState,
layout/generic/nsBlockReflowState.cpp
+6 -3
View File
@@ -315,13 +315,16 @@ nsBlockReflowState::ReplacedBlockFitsInAvailSpace(nsIFrame* aReplacedBlock,
nsBlockFrame::ReplacedElementISizeToClear replacedISize =
nsBlockFrame::ISizeToClearPastFloats(*this, aFloatAvailableSpace.mRect,
aReplacedBlock);
// The inline-start side of the replaced element should be offset by
// the larger of the float intrusion or the replaced element's own
// start margin. The inline-end side is similar, except for Web
// compatibility we ignore the margin.
return std::max(aFloatAvailableSpace.mRect.IStart(wm) -
mContentArea.IStart(wm),
replacedISize.marginIStart) +
replacedISize.borderBoxISize +
std::max(mContentArea.IEnd(wm) -
aFloatAvailableSpace.mRect.IEnd(wm),
replacedISize.marginIEnd) <=
(mContentArea.IEnd(wm) -
aFloatAvailableSpace.mRect.IEnd(wm)) <=
mContentArea.ISize(wm);
}
layout/reftests/bugs/1062963-floatmanager-reflow.html
+1 -1
View File
@@ -18,7 +18,7 @@
}
.fl, .fr { height: 20px; }
.fl { float: left; width: 56px; }
.fl { float: left; width: 100px; }
.fr { float: right; width: 73px; }
.t { background: blue; height: 10px; width: 100px; border-spacing: 0; }
layout/reftests/bugs/427129-image.html
+23
View File
@@ -137,6 +137,18 @@
<img src="solidblue2.png" class="t" style="margin: 0 74px 0 15px; width: 56px">
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<img src="solidblue2.png" class="t" style="margin: 0 0 0 15px; width: 56px">
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<img src="solidblue2.png" class="t" style="margin: 0 0 0 15px; width: 57px">
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
@@ -184,6 +196,17 @@
<div class="fr"></div>
<img src="solidblue2.png" class="t" style="margin: 0 74px 0 15px; width: 28%">
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<img src="solidblue2.png" class="t" style="margin: 0 0 0 15px; width: 28%">
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<img src="solidblue2.png" class="t" style="margin: 0 0 0 15px; width: 29%">
</div>
</div>
</body>
layout/reftests/bugs/427129-ref.html
+18 -6
View File
@@ -92,9 +92,15 @@
</div>
<div class="contain">
<!-- maybe we should ignore margin-right here? It's hard to do
for tables, though. -->
<div class="t" style="margin-top: 5px; margin-left: 15px; width: 71px"></div>
<div class="t" style="margin-left: 56px; width: 71px"></div>
</div>
<div class="contain">
<div class="t" style="margin-left: 56px; width: 71px"></div>
</div>
<div class="contain">
<div class="t" style="margin-top: 5px; margin-left: 15px; width: 72px"></div>
</div>
<div class="contain">
@@ -126,9 +132,15 @@
</div>
<div class="contain">
<!-- maybe we should ignore margin-right here? It's hard to do
for tables, though. -->
<div class="t" style="margin-top: 5px; margin-left: 15px; width: 71px"></div>
<div class="t" style="margin-left: 56px; width: 71px"></div>
</div>
<div class="contain">
<div class="t" style="margin-left: 56px; width: 71px"></div>
</div>
<div class="contain">
<div class="t" style="margin-top: 5px; margin-left: 15px; width: 73px"></div>
</div>
</div>
layout/reftests/bugs/427129-scrollframe.html
+24
View File
@@ -137,6 +137,18 @@
<div class="t" style="margin: 0 74px 0 15px; width: 56px"></div>
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<div class="t" style="margin: 0 0 0 15px; width: 56px"></div>
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<div class="t" style="margin: 0 0 0 15px; width: 57px"></div>
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
@@ -184,6 +196,18 @@
<div class="fr"></div>
<div class="t" style="margin: 0 74px 0 15px; width: 28%"></div>
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<div class="t" style="margin: 0 0 0 15px; width: 28%"></div>
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<div class="t" style="margin: 0 0 0 15px; width: 29%"></div>
</div>
</div>
</body>
layout/reftests/bugs/427129-table-caption-ref.html
+2 -14
View File
@@ -252,7 +252,6 @@
<div style="width: 654px">
<div class="contain">
<div class="pushed"></div>
<div class="side caption" style="margin-left: 155px"></div
><div class="side t" style="margin-left: 100px"></div>
</div>
@@ -274,7 +273,6 @@
<div style="width: 655px">
<div class="contain">
<div class="pushed"></div>
<div class="side caption" style="margin-left: 156px"></div
><div class="side t" style="margin-left: 100px"></div>
</div>
@@ -296,7 +294,6 @@
<div style="width: 656px">
<div class="contain">
<div class="pushed"></div>
<div class="side caption" style="margin-left: 157px"></div
><div class="side t" style="margin-left: 100px"></div>
</div>
@@ -318,8 +315,7 @@
<div style="width: 655px">
<div class="contain">
<div class="pushed"></div>
<div class="side t" style="margin-left: 55px"></div
<div class="side t" style="margin-left: 56px"></div
><div class="side caption" style="margin-left: 100px"></div>
</div>
</div>
@@ -340,7 +336,6 @@
<div style="width: 655px">
<div class="contain">
<div class="pushed"></div>
<div class="side t" style="margin-left: 56px"></div
><div class="side caption" style="margin-left: 100px"></div>
</div>
@@ -362,7 +357,6 @@
<div style="width: 656px">
<div class="contain">
<div class="pushed"></div>
<div class="side t" style="margin-left: 57px"></div
><div class="side caption" style="margin-left: 100px"></div>
</div>
@@ -584,7 +578,6 @@
<div style="width: 671px">
<div class="contain rtl">
<div class="pushed"></div>
<!-- margins showing up in the wrong places? -->
<div class="side caption" style="margin-left: 199px"></div
><div class="side t" style="margin-left: 72px"></div>
@@ -609,7 +602,6 @@
<div style="width: 672px">
<div class="contain rtl">
<div class="pushed"></div>
<!-- margins showing up in the wrong places? -->
<div class="side caption" style="margin-left: 199px"></div
><div class="side t" style="margin-left: 73px"></div>
@@ -634,7 +626,6 @@
<div style="width: 673px">
<div class="contain rtl">
<div class="pushed"></div>
<!-- margins showing up in the wrong places? -->
<div class="side caption" style="margin-left: 199px"></div
><div class="side t" style="margin-left: 74px"></div>
@@ -657,8 +648,7 @@
<div style="width: 672px">
<div class="contain rtl">
<div class="pushed"></div>
<div class="side t" style="margin-left: 100px"></div
<div class="side t" style="margin-left: 99px"></div
><div class="side caption" style="margin-left: 100px"></div>
</div>
</div>
@@ -679,7 +669,6 @@
<div style="width: 672px">
<div class="contain rtl">
<div class="pushed"></div>
<div class="side t" style="margin-left: 99px"></div
><div class="side caption" style="margin-left: 100px"></div>
</div>
@@ -701,7 +690,6 @@
<div style="width: 673px">
<div class="contain rtl">
<div class="pushed"></div>
<div class="side t" style="margin-left: 99px"></div
><div class="side caption" style="margin-left: 100px"></div>
</div>
layout/reftests/bugs/427129-table.html
+24
View File
@@ -139,6 +139,18 @@
<table class="t" style="margin: 0 74px 0 15px; width: 71px"><tr><td></td></tr></table>
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<table class="t" style="margin: 0 0 0 15px; width: 71px"><tr><td></td></tr></table>
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<table class="t" style="margin: 0 0 0 15px; width: 72px"><tr><td></td></tr></table>
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
@@ -186,6 +198,18 @@
<div class="fr"></div>
<table class="t" style="margin: 0 74px 0 15px; width: 35.5%"><tr><td></td></tr></table>
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<table class="t" style="margin: 0 0 0 15px; width: 35.5%"><tr><td></td></tr></table>
</div>
<div class="contain">
<div class="fl"></div>
<div class="fr"></div>
<table class="t" style="margin: 0 0 0 15px; width: 36.5%"><tr><td></td></tr></table>
</div>
</div>
</body>
layout/reftests/floats/bfc-displace-4-ref.html
+31
View File
@@ -0,0 +1,31 @@
<!DOCTYPE HTML>
<title>Test of block formatting context displacement by floats</title>
<style>
.contain {
border: medium solid;
width: 400px;
height: 400px;
background: yellow;
}
.float {
float: left;
height: 20px;
background: blue;
}
.bfc {
float: left;
width: 200px;
height: 15px;
background: fuchsia;
}
</style>
<div class="contain">
<div class="float" style="width: 200px"></div>
<div class="bfc"></div>
</div>
layout/reftests/floats/bfc-displace-4.html
+35
View File
@@ -0,0 +1,35 @@
<!DOCTYPE HTML>
<title>Test of block formatting context displacement by floats</title>
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
<style>
.contain {
border: medium solid;
width: 400px;
height: 400px;
background: yellow;
}
.float {
float: left;
clear: left;
height: 20px;
background: blue;
}
.bfc {
overflow: hidden;
width: 200px;
margin-right: 100px; /* ignored */
height: 15px;
background: fuchsia;
}
</style>
<div class="contain">
<div class="float" style="width: 200px"></div>
<div class="bfc"></div>
</div>
layout/reftests/floats/reftest.list
+1
View File
@@ -43,4 +43,5 @@ fails == 345369-2.html 345369-2-ref.html
== bfc-displace-2b.html bfc-displace-2b-ref.html
== bfc-displace-3a.html bfc-displace-3a-ref.html
== bfc-displace-3b.html bfc-displace-3b-ref.html
== bfc-displace-4.html bfc-displace-4-ref.html
== bfc-shrink-1.html bfc-shrink-1-ref.html