Backed out changeset 4126c66c9a80 (bug 1166728) for Gaia sound_manager_test.js failures.

CLOSED TREE
This commit is contained in:
Ryan VanderMeulen 2015-05-29 15:16:53 -04:00
parent 8172565aa2
commit 0ffa99a47a
43 changed files with 514 additions and 42 deletions

View File

@ -8,7 +8,7 @@
body { body {
display: flex; display: flex;
box-sizing: border-box; box-sizing: padding-box;
min-height: 100vh; min-height: 100vh;
padding: 0 48px; padding: 0 48px;
align-items: center; align-items: center;

View File

@ -168,7 +168,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon
} }
.searchbar-engine-one-off-item:not(.last-row) { .searchbar-engine-one-off-item:not(.last-row) {
box-sizing: content-box; box-sizing: padding-box;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }

View File

@ -191,7 +191,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon
} }
.searchbar-engine-one-off-item:not(.last-row) { .searchbar-engine-one-off-item:not(.last-row) {
box-sizing: content-box; box-sizing: padding-box;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }

View File

@ -6,7 +6,7 @@
body { body {
display: flex; display: flex;
box-sizing: border-box; box-sizing: padding-box;
min-height: 100vh; min-height: 100vh;
padding: 0 48px; padding: 0 48px;
align-items: center; align-items: center;

View File

@ -225,7 +225,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon
} }
.searchbar-engine-one-off-item:not(.last-row) { .searchbar-engine-one-off-item:not(.last-row) {
box-sizing: content-box; box-sizing: padding-box;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }

View File

@ -11,7 +11,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=320799
<body> <body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=320799">Mozilla Bug 320799</a> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=320799">Mozilla Bug 320799</a>
<p id="display"> <p id="display">
<select id="s" style="width: 100px; box-sizing: border-box; border: 0"> <select id="s" style="width: 100px; box-sizing: padding-box">
<option>This is a test, it really is a test I tell you</option> <option>This is a test, it really is a test I tell you</option>
</select> </select>
<select id="s2"> <select id="s2">

View File

@ -4408,11 +4408,15 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext *aRenderingContext,
if (ratio.BSize(wm) != 0) { if (ratio.BSize(wm) != 0) {
nscoord bSizeTakenByBoxSizing = 0; nscoord bSizeTakenByBoxSizing = 0;
if (boxSizing == NS_STYLE_BOX_SIZING_BORDER) { switch (boxSizing) {
case NS_STYLE_BOX_SIZING_BORDER: {
const nsStyleBorder* styleBorder = aFrame->StyleBorder(); const nsStyleBorder* styleBorder = aFrame->StyleBorder();
bSizeTakenByBoxSizing += bSizeTakenByBoxSizing +=
wm.IsVertical() ? styleBorder->GetComputedBorder().LeftRight() wm.IsVertical() ? styleBorder->GetComputedBorder().LeftRight()
: styleBorder->GetComputedBorder().TopBottom(); : styleBorder->GetComputedBorder().TopBottom();
// fall through
}
case NS_STYLE_BOX_SIZING_PADDING: {
if (!(aFlags & IGNORE_PADDING)) { if (!(aFlags & IGNORE_PADDING)) {
const nsStyleSides& stylePadding = const nsStyleSides& stylePadding =
aFrame->StylePadding()->mPadding; aFrame->StylePadding()->mPadding;
@ -4428,6 +4432,11 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext *aRenderingContext,
bSizeTakenByBoxSizing += pad; bSizeTakenByBoxSizing += pad;
} }
} }
// fall through
}
case NS_STYLE_BOX_SIZING_CONTENT:
default:
break;
} }
nscoord h; nscoord h;
@ -4476,6 +4485,15 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext *aRenderingContext,
if (!(aFlags & IGNORE_PADDING)) { if (!(aFlags & IGNORE_PADDING)) {
coordOutsideISize += offsets.hPadding; coordOutsideISize += offsets.hPadding;
pctOutsideISize += offsets.hPctPadding; pctOutsideISize += offsets.hPctPadding;
if (boxSizing == NS_STYLE_BOX_SIZING_PADDING) {
min += coordOutsideISize;
result = NSCoordSaturatingAdd(result, coordOutsideISize);
pctTotal += pctOutsideISize;
coordOutsideISize = 0;
pctOutsideISize = 0.0f;
}
} }
coordOutsideISize += offsets.hBorder; coordOutsideISize += offsets.hBorder;
@ -4786,8 +4804,12 @@ nsLayoutUtils::ComputeSizeWithIntrinsicDimensions(WritingMode aWM,
const bool isAutoBSize = IsAutoBSize(*blockStyleCoord, aCBSize.BSize(aWM)); const bool isAutoBSize = IsAutoBSize(*blockStyleCoord, aCBSize.BSize(aWM));
LogicalSize boxSizingAdjust(aWM); LogicalSize boxSizingAdjust(aWM);
if (stylePos->mBoxSizing == NS_STYLE_BOX_SIZING_BORDER) { switch (stylePos->mBoxSizing) {
boxSizingAdjust += aBorder + aPadding; case NS_STYLE_BOX_SIZING_BORDER:
boxSizingAdjust += aBorder;
// fall through
case NS_STYLE_BOX_SIZING_PADDING:
boxSizingAdjust += aPadding;
} }
nscoord boxSizingToMarginEdgeISize = nscoord boxSizingToMarginEdgeISize =
aMargin.ISize(aWM) + aBorder.ISize(aWM) + aPadding.ISize(aWM) - aMargin.ISize(aWM) + aBorder.ISize(aWM) + aPadding.ISize(aWM) -

View File

@ -25,7 +25,7 @@ var currentResize = -1;
var currentBoxSizing = 0; var currentBoxSizing = 0;
var currentPointer = 0; var currentPointer = 0;
var resizeTypes = [ "horizontal", "vertical", "none", "inherit", "both" ]; var resizeTypes = [ "horizontal", "vertical", "none", "inherit", "both" ];
var boxSizingTypes = [ "", "border-box" ]; var boxSizingTypes = [ "", "border-box", "padding-box" ];
var pointerTypes = [ synthesizeMouse, synthesizeTouch] var pointerTypes = [ synthesizeMouse, synthesizeTouch]
function doTheTest() { function doTheTest() {

View File

@ -4180,8 +4180,12 @@ nsFrame::ComputeSize(nsRenderingContext *aRenderingContext,
LogicalSize boxSizingAdjust(aWM); LogicalSize boxSizingAdjust(aWM);
const nsStylePosition *stylePos = StylePosition(); const nsStylePosition *stylePos = StylePosition();
if (stylePos->mBoxSizing == NS_STYLE_BOX_SIZING_BORDER) { switch (stylePos->mBoxSizing) {
boxSizingAdjust += aBorder + aPadding; case NS_STYLE_BOX_SIZING_BORDER:
boxSizingAdjust += aBorder;
// fall through
case NS_STYLE_BOX_SIZING_PADDING:
boxSizingAdjust += aPadding;
} }
nscoord boxSizingToMarginEdgeISize = nscoord boxSizingToMarginEdgeISize =
aMargin.ISize(aWM) + aBorder.ISize(aWM) + aPadding.ISize(aWM) - aMargin.ISize(aWM) + aBorder.ISize(aWM) + aPadding.ISize(aWM) -

View File

@ -255,8 +255,13 @@ nsCSSOffsetState::ComputeWidthValue(nscoord aContainingBlockWidth,
{ {
nscoord inside = 0, outside = ComputedPhysicalBorderPadding().LeftRight() + nscoord inside = 0, outside = ComputedPhysicalBorderPadding().LeftRight() +
ComputedPhysicalMargin().LeftRight(); ComputedPhysicalMargin().LeftRight();
if (aBoxSizing == NS_STYLE_BOX_SIZING_BORDER) { switch (aBoxSizing) {
case NS_STYLE_BOX_SIZING_BORDER:
inside = ComputedPhysicalBorderPadding().LeftRight(); inside = ComputedPhysicalBorderPadding().LeftRight();
break;
case NS_STYLE_BOX_SIZING_PADDING:
inside = ComputedPhysicalPadding().LeftRight();
break;
} }
outside -= inside; outside -= inside;
@ -270,8 +275,13 @@ nsCSSOffsetState::ComputeHeightValue(nscoord aContainingBlockHeight,
const nsStyleCoord& aCoord) const nsStyleCoord& aCoord)
{ {
nscoord inside = 0; nscoord inside = 0;
if (aBoxSizing == NS_STYLE_BOX_SIZING_BORDER) { switch (aBoxSizing) {
case NS_STYLE_BOX_SIZING_BORDER:
inside = ComputedPhysicalBorderPadding().TopBottom(); inside = ComputedPhysicalBorderPadding().TopBottom();
break;
case NS_STYLE_BOX_SIZING_PADDING:
inside = ComputedPhysicalPadding().TopBottom();
break;
} }
return nsLayoutUtils::ComputeHeightValue(aContainingBlockHeight, return nsLayoutUtils::ComputeHeightValue(aContainingBlockHeight,
inside, aCoord); inside, aCoord);
@ -1086,8 +1096,12 @@ nsHTMLReflowState::CalculateHorizBorderPaddingMargin(
nscoord outside = nscoord outside =
padding.LeftRight() + border.LeftRight() + margin.LeftRight(); padding.LeftRight() + border.LeftRight() + margin.LeftRight();
nscoord inside = 0; nscoord inside = 0;
if (mStylePosition->mBoxSizing == NS_STYLE_BOX_SIZING_BORDER) { switch (mStylePosition->mBoxSizing) {
inside += border.LeftRight() + padding.LeftRight(); case NS_STYLE_BOX_SIZING_BORDER:
inside += border.LeftRight();
// fall through
case NS_STYLE_BOX_SIZING_PADDING:
inside += padding.LeftRight();
} }
outside -= inside; outside -= inside;
*aInsideBoxSizing = inside; *aInsideBoxSizing = inside;

View File

@ -46,6 +46,18 @@
</div></td> </div></td>
<td id="bspadding"><div>
<!-- box-sizing: padding-box -->
<div style="width: 37px">A B</div>
<div style="width: auto">A B</div>
<div style="width: auto">A<br>B</div>
<div style="width: auto">A B</div>
<div style="width: 37px">A B</div>
<div style="width: 38px">A B</div>
<div style="width: 48px">A B</div>
</div></td>
<td id="bsborder"><div> <td id="bsborder"><div>
<!-- box-sizing: border-box --> <!-- box-sizing: border-box -->
<div style="width: 37px">A B</div> <div style="width: 37px">A B</div>

View File

@ -13,6 +13,7 @@
td > div { width: 100px; } td > div { width: 100px; }
td#bscontent > div > div { box-sizing: content-box; } td#bscontent > div > div { box-sizing: content-box; }
td#bspadding > div > div { box-sizing: padding-box; }
td#bsborder > div > div { box-sizing: border-box; } td#bsborder > div > div { box-sizing: border-box; }
td > div > div { td > div > div {
@ -46,6 +47,18 @@
</div></td> </div></td>
<td id="bspadding"><div>
<!-- box-sizing: padding-box -->
<div style="width: auto">A B</div>
<div style="width: -moz-max-content">A B</div>
<div style="width: -moz-min-content">A B</div>
<div style="width: -moz-fit-content">A B</div>
<div style="width: -moz-available">A B</div>
<div style="width: 50px">A B</div>
<div style="width: 60%">A B</div>
</div></td>
<td id="bsborder"><div> <td id="bsborder"><div>
<!-- box-sizing: border-box --> <!-- box-sizing: border-box -->
<div style="width: auto">A B</div> <div style="width: auto">A B</div>

View File

@ -39,6 +39,17 @@
</td> </td>
<td id="bspadding">
<!-- box-sizing: padding-box -->
<table><tr><td><div>A B</div></td></tr></table>
<table><tr><td><div>A B</div></td></tr></table>
<table><tr><td><div>A<br>B</div></td></tr></table>
<table><tr><td><div>A B</div></td></tr></table>
<table><tr><td><div>A B</div></td></tr></table>
<table><tr><td><div style="width: 138px">A B</div></td></tr></table>
</td>
<td id="bsborder"> <td id="bsborder">
<!-- box-sizing: border-box --> <!-- box-sizing: border-box -->
<table><tr><td><div>A B</div></td></tr></table> <table><tr><td><div>A B</div></td></tr></table>

View File

@ -11,6 +11,7 @@
td { border: 1px solid; padding: 1px solid; } td { border: 1px solid; padding: 1px solid; }
td#bscontent td > div { box-sizing: content-box; } td#bscontent td > div { box-sizing: content-box; }
td#bspadding td > div { box-sizing: padding-box; }
td#bsborder td > div { box-sizing: border-box; } td#bsborder td > div { box-sizing: border-box; }
td td > div { td td > div {
@ -42,6 +43,17 @@
</td> </td>
<td id="bspadding">
<!-- box-sizing: padding-box -->
<table><tr><td><div style="width: auto">A B</div></td></tr></table>
<table><tr><td><div style="width: -moz-max-content">A B</div></td></tr></table>
<table><tr><td><div style="width: -moz-min-content">A B</div></td></tr></table>
<table><tr><td><div style="width: -moz-fit-content">A B</div></td></tr></table>
<table><tr><td><div style="width: -moz-available">A B</div></td></tr></table>
<table><tr><td><div style="width: 150px">A B</div></td></tr></table>
</td>
<td id="bsborder"> <td id="bsborder">
<!-- box-sizing: border-box --> <!-- box-sizing: border-box -->
<table><tr><td><div style="width: auto">A B</div></td></tr></table> <table><tr><td><div style="width: auto">A B</div></td></tr></table>

View File

@ -13,6 +13,7 @@
td > div { width: 100px; } td > div { width: 100px; }
td#bscontent > div > div { box-sizing: content-box; } td#bscontent > div > div { box-sizing: content-box; }
td#bspadding > div > div { box-sizing: padding-box; }
td#bsborder > div > div { box-sizing: border-box; } td#bsborder > div > div { box-sizing: border-box; }
td > div > div { td > div > div {
@ -46,6 +47,18 @@
</div></td> </div></td>
<td id="bspadding"><div>
<!-- box-sizing: padding-box -->
<div style="width: auto">A B</div>
<div style="width: -moz-max-content">A B</div>
<div style="width: -moz-min-content">A B</div>
<div style="width: -moz-fit-content">A B</div>
<div style="width: -moz-available">A B</div>
<div style="width: 50px">A B</div>
<div style="width: 60%">A B</div>
</div></td>
<td id="bsborder"><div> <td id="bsborder"><div>
<!-- box-sizing: border-box --> <!-- box-sizing: border-box -->
<div style="width: auto">A B</div> <div style="width: auto">A B</div>

View File

@ -48,6 +48,18 @@
</div></td> </div></td>
<td id="bspadding"><div>
<!-- box-sizing: padding-box -->
<div>A B</div>
<div>A B</div>
<div>A<br>B</div>
<div>A B</div>
<div style="width: 37px">A B</div>
<div style="width: 38px">A B</div>
<div style="width: 48px">A B</div>
</div></td>
<td id="bsborder"><div> <td id="bsborder"><div>
<!-- box-sizing: border-box --> <!-- box-sizing: border-box -->
<div>A B</div> <div>A B</div>

View File

@ -14,6 +14,7 @@
direction: rtl; position: relative; } direction: rtl; position: relative; }
td#bscontent > div > div { box-sizing: content-box; } td#bscontent > div > div { box-sizing: content-box; }
td#bspadding > div > div { box-sizing: padding-box; }
td#bsborder > div > div { box-sizing: border-box; } td#bsborder > div > div { box-sizing: border-box; }
td > div > div { td > div > div {
@ -58,6 +59,18 @@
</div></td> </div></td>
<td id="bspadding"><div>
<!-- box-sizing: padding-box -->
<div style="width: auto">A B</div>
<div style="width: -moz-max-content">A B</div>
<div style="width: -moz-min-content">A B</div>
<div style="width: -moz-fit-content">A B</div>
<div style="width: -moz-available">A B</div>
<div style="width: 50px">A B</div>
<div style="width: 60%">A B</div>
</div></td>
<td id="bsborder"><div> <td id="bsborder"><div>
<!-- box-sizing: border-box --> <!-- box-sizing: border-box -->
<div style="width: auto">A B</div> <div style="width: auto">A B</div>

View File

@ -43,5 +43,10 @@ hbox {
<div><hbox class="cb" style="height:29px;">content-box 20px</hbox></div> <div><hbox class="cb" style="height:29px;">content-box 20px</hbox></div>
<div><hbox class="pb" style="height:16px;">padding-box 20px</hbox></div>
<div><hbox class="pb" style="height:46px;">padding-box 50px</hbox></div>
<div><hbox class="pb" style="height:16px;">padding-box 20px</hbox></div>
</body> </body>
</html> </html>

View File

@ -25,6 +25,11 @@ hbox {
background:pink; background:pink;
} }
.pb {
box-sizing:padding-box;
background:cyan;
}
</style> </style>
</head> </head>
<body> <body>
@ -39,5 +44,10 @@ hbox {
<div><hbox class="cb" style="max-height:20px;">content-box 20px</hbox></div> <div><hbox class="cb" style="max-height:20px;">content-box 20px</hbox></div>
<div><hbox class="pb" style="height:20px;">padding-box 20px</hbox></div>
<div><hbox class="pb" style="min-height:50px;">padding-box 50px</hbox></div>
<div><hbox class="pb" style="max-height:20px;">padding-box 20px</hbox></div>
</body> </body>
</html> </html>

View File

@ -9,14 +9,26 @@
box-sizing:border-box; box-sizing:border-box;
} }
#paddingBox {
background:gold;
height:100px;
box-sizing:padding-box;
}
</style> </style>
<div id="borderBox"></div> <div id="borderBox"></div>
<p id="heightWidth1"></p> <p id="heightWidth1"></p>
<div id="paddingBox"></div>
<p id="heightWidth2"></p>
<script> <script>
var divs = document.getElementsByTagName("div"); var divs = document.getElementsByTagName("div");
var textEle1 = document.getElementById("heightWidth1"); var textEle1 = document.getElementById("heightWidth1");
textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height; textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height;
textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width; textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width;
var textEle2 = document.getElementById("heightWidth2");
textEle2.innerHTML += "height = " + getComputedStyle(divs[1]).height;
textEle2.innerHTML += ", width = " + getComputedStyle(divs[1]).width;
</script> </script>

View File

@ -10,14 +10,27 @@
border: 20px solid gold; border: 20px solid gold;
} }
#paddingBox {
background:gold;
height:100px;
box-sizing:padding-box;
padding: 20px;
}
</style> </style>
<div id="borderBox"></div> <div id="borderBox"></div>
<p id="heightWidth1"></p> <p id="heightWidth1"></p>
<div id="paddingBox"></div>
<p id="heightWidth2"></p>
<script> <script>
var divs = document.getElementsByTagName("div"); var divs = document.getElementsByTagName("div");
var textEle1 = document.getElementById("heightWidth1"); var textEle1 = document.getElementById("heightWidth1");
textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height; textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height;
textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width; textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width;
var textEle2 = document.getElementById("heightWidth2");
textEle2.innerHTML += "height = " + getComputedStyle(divs[1]).height;
textEle2.innerHTML += ", width = " + getComputedStyle(divs[1]).width;
</script> </script>

View File

@ -4,6 +4,6 @@
<img src="lime100x100.png" <img src="lime100x100.png"
style="height: 200px; display: block; visibility: hidden; style="height: 200px; display: block; visibility: hidden;
padding: 30px; padding: 30px;
box-sizing: border-box;"> box-sizing: padding-box;">
</div> </div>
</body> </body>

View File

@ -4,6 +4,6 @@
<img src="lime100x100.png" <img src="lime100x100.png"
style="height: 200px; display: block; visibility: hidden; style="height: 200px; display: block; visibility: hidden;
padding: 15% 30px; padding: 15% 30px;
box-sizing: border-box;"> box-sizing: padding-box;">
</div> </div>
</body> </body>

View File

@ -4,6 +4,6 @@
<img src="lime100x100.png" <img src="lime100x100.png"
style="height: 200px; display: block; visibility: hidden; style="height: 200px; display: block; visibility: hidden;
padding: calc(15%) 30px; padding: calc(15%) 30px;
box-sizing: border-box;"> box-sizing: padding-box;">
</div> </div>
</body> </body>

View File

@ -4,6 +4,6 @@
<img src="lime100x100.png" <img src="lime100x100.png"
style="height: 200px; display: block; visibility: hidden; style="height: 200px; display: block; visibility: hidden;
padding: calc(10% + 10px) 30px; padding: calc(10% + 10px) 30px;
box-sizing: border-box;"> box-sizing: padding-box;">
</div> </div>
</body> </body>

View File

@ -4,6 +4,6 @@
<img src="lime100x100.png" <img src="lime100x100.png"
style="height: 200px; display: block; visibility: hidden; style="height: 200px; display: block; visibility: hidden;
padding: calc(30px); padding: calc(30px);
box-sizing: border-box;"> box-sizing: padding-box;">
</div> </div>
</body> </body>

View File

@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reference: Box Sizing - Padding-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<style type="text/css"><![CDATA[
.container {
width: 300px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
width: 140px;
z-index: 1;
float: left;
padding: 0px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Box Sizing - Padding-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: padding-box should make the element's (percentage) width be the distance from the left padding edge to the right padding edge."/>
<style type="text/css"><![CDATA[
.container {
width: 300px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: padding-box;
width: 50%;
z-index: 1;
float: left;
padding: 0px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reference: Box Sizing - Padding-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<style type="text/css"><![CDATA[
.container {
width: 300px;
height: 400px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
width: 130px;
height: 350px;
z-index: 1;
float: left;
padding: 25px 10px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Box Sizing - Padding-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: padding-box should make the element's (percentage) width be the distance from the left padding edge to the right padding edge and the height be the distance from the top padding edge to the bottom padding edge."/>
<style type="text/css"><![CDATA[
.container {
width: 300px;
height: 400px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: padding-box;
width: 50%;
height: 100%;
z-index: 1;
float: left;
padding: 25px 10px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reference: Box Sizing - Padding-Box with min/max width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<style type="text/css"><![CDATA[
.container {
width: 500px;
height: 70px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
height: calc(100% - 10px);
width: calc(50% - 10px);
z-index: 1;
float: left;
padding: 5px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Box Sizing - Padding-Box with min/max width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: padding-box should make the element's (calc) width be the distance from the left padding edge to the right padding edge and the height be the distance from the top padding edge to the bottom padding edge."/>
<style type="text/css"><![CDATA[
.container {
min-width: 500px;
max-width: 700px;
min-height: 70px;
max-height: 90px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: padding-box;
min-width: 250px;
max-width: 350px;
min-height: 70px;
max-height: 90px;
z-index: 1;
float: left;
padding: 5px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -21,7 +21,7 @@
.with-padding { .with-padding {
padding: 5px 5px; padding: 5px 5px;
box-sizing: border-box; box-sizing: padding-box;
} }
#img1 { #img1 {

View File

@ -5,6 +5,9 @@
== box-sizing-content-box-001.xht box-sizing-content-box-001-ref.xht == box-sizing-content-box-001.xht box-sizing-content-box-001-ref.xht
== box-sizing-content-box-002.xht box-sizing-content-box-002-ref.xht == box-sizing-content-box-002.xht box-sizing-content-box-002-ref.xht
== box-sizing-content-box-003.xht box-sizing-content-box-003-ref.xht == box-sizing-content-box-003.xht box-sizing-content-box-003-ref.xht
== box-sizing-padding-box-001.xht box-sizing-padding-box-001-ref.xht
== box-sizing-padding-box-002.xht box-sizing-padding-box-002-ref.xht
== box-sizing-padding-box-003.xht box-sizing-padding-box-003-ref.xht
random-if(Android) skip-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-001.xht box-sizing-replaced-001-ref.xht #bug 982547 # Initial mulet triage: parity with B2G/B2G Desktop random-if(Android) skip-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-001.xht box-sizing-replaced-001-ref.xht #bug 982547 # Initial mulet triage: parity with B2G/B2G Desktop
fuzzy-if(Android,27,874) random-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-002.xht box-sizing-replaced-002-ref.xht # Bug 1128229 # Initial mulet triage: parity with B2G/B2G Desktop fuzzy-if(Android,27,874) random-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-002.xht box-sizing-replaced-002-ref.xht # Bug 1128229 # Initial mulet triage: parity with B2G/B2G Desktop
fuzzy-if(Android,14,869) random-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-003.xht box-sizing-replaced-003-ref.xht # Bug 1128229 # Initial mulet triage: parity with B2G/B2G Desktop fuzzy-if(Android,14,869) random-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-003.xht box-sizing-replaced-003-ref.xht # Bug 1128229 # Initial mulet triage: parity with B2G/B2G Desktop

View File

@ -888,6 +888,7 @@ const KTableValue nsCSSProps::kBoxShadowTypeKTable[] = {
const KTableValue nsCSSProps::kBoxSizingKTable[] = { const KTableValue nsCSSProps::kBoxSizingKTable[] = {
eCSSKeyword_content_box, NS_STYLE_BOX_SIZING_CONTENT, eCSSKeyword_content_box, NS_STYLE_BOX_SIZING_CONTENT,
eCSSKeyword_border_box, NS_STYLE_BOX_SIZING_BORDER, eCSSKeyword_border_box, NS_STYLE_BOX_SIZING_BORDER,
eCSSKeyword_padding_box, NS_STYLE_BOX_SIZING_PADDING,
eCSSKeyword_UNKNOWN,-1 eCSSKeyword_UNKNOWN,-1
}; };

View File

@ -517,8 +517,13 @@ nsComputedDOMStyle::GetAdjustedValuesForBoxSizing()
const nsStylePosition* stylePos = StylePosition(); const nsStylePosition* stylePos = StylePosition();
nsMargin adjustment; nsMargin adjustment;
if (stylePos->mBoxSizing == NS_STYLE_BOX_SIZING_BORDER) { switch(stylePos->mBoxSizing) {
adjustment += mInnerFrame->GetUsedBorderAndPadding(); case NS_STYLE_BOX_SIZING_BORDER:
adjustment += mInnerFrame->GetUsedBorder();
// fall through
case NS_STYLE_BOX_SIZING_PADDING:
adjustment += mInnerFrame->GetUsedPadding();
} }
return adjustment; return adjustment;

View File

@ -58,7 +58,8 @@ static inline mozilla::css::Side operator++(mozilla::css::Side& side, int) {
// box-sizing // box-sizing
#define NS_STYLE_BOX_SIZING_CONTENT 0 #define NS_STYLE_BOX_SIZING_CONTENT 0
#define NS_STYLE_BOX_SIZING_BORDER 1 #define NS_STYLE_BOX_SIZING_PADDING 1
#define NS_STYLE_BOX_SIZING_BORDER 2
// clip-path sizing // clip-path sizing
#define NS_STYLE_CLIP_SHAPE_SIZING_NOBOX 0 #define NS_STYLE_CLIP_SHAPE_SIZING_NOBOX 0

View File

@ -1045,8 +1045,8 @@ var gCSSProperties = {
inherited: false, inherited: false,
type: CSS_TYPE_LONGHAND, type: CSS_TYPE_LONGHAND,
initial_values: [ "content-box" ], initial_values: [ "content-box" ],
other_values: [ "border-box" ], other_values: [ "border-box", "padding-box" ],
invalid_values: [ "margin-box", "content", "padding", "border", "margin", "padding-box" ] invalid_values: [ "margin-box", "content", "padding", "border", "margin" ]
}, },
"-moz-box-sizing": { "-moz-box-sizing": {
domProp: "MozBoxSizing", domProp: "MozBoxSizing",
@ -1055,8 +1055,8 @@ var gCSSProperties = {
alias_for: "box-sizing", alias_for: "box-sizing",
subproperties: [ "box-sizing" ], subproperties: [ "box-sizing" ],
initial_values: [ "content-box" ], initial_values: [ "content-box" ],
other_values: [ "border-box" ], other_values: [ "border-box", "padding-box" ],
invalid_values: [ "margin-box", "content", "padding", "border", "margin", "padding-box" ] invalid_values: [ "margin-box", "content", "padding", "border", "margin" ]
}, },
"-moz-columns": { "-moz-columns": {
domProp: "MozColumns", domProp: "MozColumns",

View File

@ -113,13 +113,25 @@ GetWidthInfo(nsRenderingContext *aRenderingContext,
// for height). // for height).
// For this reason, we also do not use box-sizing for just one of // For this reason, we also do not use box-sizing for just one of
// them, as this may be confusing. // them, as this may be confusing.
if (isQuirks || stylePos->mBoxSizing == NS_STYLE_BOX_SIZING_CONTENT) { if (isQuirks) {
boxSizingToBorderEdge = offsets.hPadding + offsets.hBorder; boxSizingToBorderEdge = offsets.hPadding + offsets.hBorder;
} }
else { else {
// NS_STYLE_BOX_SIZING_BORDER and standards-mode switch (stylePos->mBoxSizing) {
case NS_STYLE_BOX_SIZING_CONTENT:
boxSizingToBorderEdge = offsets.hPadding + offsets.hBorder;
break;
case NS_STYLE_BOX_SIZING_PADDING:
minCoord += offsets.hPadding;
prefCoord += offsets.hPadding;
boxSizingToBorderEdge = offsets.hBorder;
break;
default:
// NS_STYLE_BOX_SIZING_BORDER
minCoord += offsets.hPadding + offsets.hBorder; minCoord += offsets.hPadding + offsets.hBorder;
prefCoord += offsets.hPadding + offsets.hBorder; prefCoord += offsets.hPadding + offsets.hBorder;
break;
}
} }
} else { } else {
minCoord = 0; minCoord = 0;

View File

@ -252,9 +252,19 @@ FixedTableLayoutStrategy::ComputeColumnISizes(const nsHTMLReflowState& aReflowSt
float pct = styleWidth->GetPercentValue(); float pct = styleWidth->GetPercentValue();
colWidth = NSToCoordFloor(pct * float(tableWidth)); colWidth = NSToCoordFloor(pct * float(tableWidth));
if (cellFrame->StylePosition()->mBoxSizing == NS_STYLE_BOX_SIZING_CONTENT) { nscoord boxSizingAdjust = 0;
colWidth += offsets.hPadding + offsets.hBorder; switch (cellFrame->StylePosition()->mBoxSizing) {
case NS_STYLE_BOX_SIZING_CONTENT:
boxSizingAdjust += offsets.hPadding;
// Fall through
case NS_STYLE_BOX_SIZING_PADDING:
boxSizingAdjust += offsets.hBorder;
// Fall through
case NS_STYLE_BOX_SIZING_BORDER:
// Don't add anything
break;
} }
colWidth += boxSizingAdjust;
pct /= float(colSpan); pct /= float(colSpan);
colFrame->AddPrefPercent(pct); colFrame->AddPrefPercent(pct);

View File

@ -629,8 +629,16 @@ nsTableRowFrame::CalculateCellActualHeight(nsTableCellFrame* aCellFrame,
// (since we can't specify one value of box-sizing for width and another // (since we can't specify one value of box-sizing for width and another
// for height) // for height)
if (PresContext()->CompatibilityMode() != eCompatibility_NavQuirks) { if (PresContext()->CompatibilityMode() != eCompatibility_NavQuirks) {
if (position->mBoxSizing == NS_STYLE_BOX_SIZING_CONTENT) { switch (position->mBoxSizing) {
case NS_STYLE_BOX_SIZING_CONTENT:
outsideBoxSizing = aCellFrame->GetUsedBorderAndPadding().TopBottom(); outsideBoxSizing = aCellFrame->GetUsedBorderAndPadding().TopBottom();
break;
case NS_STYLE_BOX_SIZING_PADDING:
outsideBoxSizing = aCellFrame->GetUsedBorder().TopBottom();
break;
default:
// NS_STYLE_BOX_SIZING_BORDER
break;
} }
} }

View File

@ -80,8 +80,13 @@ nsResizerFrame::HandleEvent(nsPresContext* aPresContext,
// GetScreenRectInAppUnits returns the border box rectangle, so // GetScreenRectInAppUnits returns the border box rectangle, so
// adjust to get the desired content rectangle. // adjust to get the desired content rectangle.
nsRect rect = frameToResize->GetScreenRectInAppUnits(); nsRect rect = frameToResize->GetScreenRectInAppUnits();
if (frameToResize->StylePosition()->mBoxSizing == NS_STYLE_BOX_SIZING_CONTENT) { switch (frameToResize->StylePosition()->mBoxSizing) {
rect.Deflate(frameToResize->GetUsedBorderAndPadding()); case NS_STYLE_BOX_SIZING_CONTENT:
rect.Deflate(frameToResize->GetUsedPadding());
case NS_STYLE_BOX_SIZING_PADDING:
rect.Deflate(frameToResize->GetUsedBorder());
default:
break;
} }
mMouseDownRect = mMouseDownRect =

View File

@ -7,7 +7,7 @@
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: padding-box;
min-height: 100vh; min-height: 100vh;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;