wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1166728 - Remove box-sizing: padding-box, as per CSS WG. r=dholbert

Browse Source
This commit is contained in:
Kyle Zentner 2015-05-29 09:17:00 -04:00
parent 142a036045
commit 4bf19f4100
43 changed files with 42 additions and 514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
View File

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

2
browser/themes/linux/searchbar.css
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) {
box-sizing: padding-box;
box-sizing: content-box;
border-bottom: 1px solid #ccc;
}

2
browser/themes/osx/searchbar.css
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) {
box-sizing: padding-box;
box-sizing: content-box;
border-bottom: 1px solid #ccc;
}

2
browser/themes/shared/aboutNetError.css
View File

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

2
browser/themes/windows/searchbar.css
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) {
box-sizing: padding-box;
box-sizing: content-box;
border-bottom: 1px solid #ccc;
}

2
dom/base/test/test_bug320799.html
View File

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

28
layout/base/nsLayoutUtils.cpp
View File

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

2
layout/forms/test/test_textarea_resize.html
View File

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

8
layout/generic/nsFrame.cpp
View File

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

26
layout/generic/nsHTMLReflowState.cpp
View File

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

12
layout/reftests/box-properties/box-sizing-1-ref.html
View File

@ -46,18 +46,6 @@
</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>
<!-- box-sizing: border-box -->
<div style="width: 37px">A B</div>

13
layout/reftests/box-properties/box-sizing-1.html
View File

@ -13,7 +13,6 @@
td > div { width: 100px; }
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 > div > div {
@ -47,18 +46,6 @@
</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>
<!-- box-sizing: border-box -->
<div style="width: auto">A B</div>

11
layout/reftests/box-properties/box-sizing-2-ref.html
View File

@ -39,17 +39,6 @@
</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">
<!-- box-sizing: border-box -->
<table><tr><td><div>A B</div></td></tr></table>

12
layout/reftests/box-properties/box-sizing-2.html
View File

@ -11,7 +11,6 @@
td { border: 1px solid; padding: 1px solid; }
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 td > div {
@ -43,17 +42,6 @@
</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">
<!-- box-sizing: border-box -->
<table><tr><td><div style="width: auto">A B</div></td></tr></table>

13
layout/reftests/box-properties/box-sizing-3.html
View File

@ -13,7 +13,6 @@
td > div { width: 100px; }
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 > div > div {
@ -47,18 +46,6 @@
</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>
<!-- box-sizing: border-box -->
<div style="width: auto">A B</div>

12
layout/reftests/box-properties/box-sizing-4-ref.html
View File

@ -48,18 +48,6 @@
</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>
<!-- box-sizing: border-box -->
<div>A B</div>

13
layout/reftests/box-properties/box-sizing-4.html
View File

@ -14,7 +14,6 @@
direction: rtl; position: relative; }
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 > div > div {
@ -59,18 +58,6 @@
</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>
<!-- box-sizing: border-box -->
<div style="width: auto">A B</div>

5
layout/reftests/box-properties/box-sizing-mozbox-minmax-height-ref.html
View File

@ -43,10 +43,5 @@ hbox {
<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>
</html>

10
layout/reftests/box-properties/box-sizing-mozbox-minmax-height.html
View File

@ -25,11 +25,6 @@ hbox {
background:pink;
}
.pb {
box-sizing:padding-box;
background:cyan;
}
</style>
</head>
<body>
@ -44,10 +39,5 @@ hbox {
<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>
</html>

12
layout/reftests/box-sizing/computed-size-reporting-ref.html
View File

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

13
layout/reftests/box-sizing/computed-size-reporting.html
View File

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

2
layout/reftests/box-sizing/intrinsic-1a.html
View File

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

2
layout/reftests/box-sizing/intrinsic-1b.html
View File

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

2
layout/reftests/box-sizing/intrinsic-1d.html
View File

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

2
layout/reftests/box-sizing/intrinsic-1e.html
View File

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

2
layout/reftests/box-sizing/intrinsic-1f.html
View File

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

40
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001-ref.xht
View File

@ -1,40 +0,0 @@
<!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>

43
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001.xht
View File

@ -1,43 +0,0 @@
<!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>

42
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-002-ref.xht
View File

@ -1,42 +0,0 @@
<!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>

45
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-002.xht
View File

@ -1,45 +0,0 @@
<!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>

42
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-003-ref.xht
View File

@ -1,42 +0,0 @@
<!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>

49
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-003.xht
View File

@ -1,49 +0,0 @@
<!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>

2
layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht
View File

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

3
layout/reftests/w3c-css/submitted/ui3/reftest.list
View File

@ -5,9 +5,6 @@
== 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-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
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

1
layout/style/nsCSSProps.cpp
View File

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

9
layout/style/nsComputedDOMStyle.cpp
View File

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

3
layout/style/nsStyleConsts.h
View File

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

8
layout/style/test/property_database.js
View File

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

20
layout/tables/BasicTableLayoutStrategy.cpp
View File

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

14
layout/tables/FixedTableLayoutStrategy.cpp
View File

@ -252,19 +252,9 @@ FixedTableLayoutStrategy::ComputeColumnISizes(const nsHTMLReflowState& aReflowSt
float pct = styleWidth->GetPercentValue();
colWidth = NSToCoordFloor(pct * float(tableWidth));
nscoord boxSizingAdjust = 0;
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;
if (cellFrame->StylePosition()->mBoxSizing == NS_STYLE_BOX_SIZING_CONTENT) {
colWidth += offsets.hPadding + offsets.hBorder;
}
colWidth += boxSizingAdjust;
pct /= float(colSpan);
colFrame->AddPrefPercent(pct);

12
layout/tables/nsTableRowFrame.cpp
View File

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

9
layout/xul/nsResizerFrame.cpp
View File

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

2
toolkit/themes/shared/in-content/info-pages.inc.css
View File

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