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

Backed out changeset 541cd29ea626 (bug 1166728) because the updated patch wasn't posted to the bug.

This commit is contained in:
Ryan VanderMeulen 2015-05-29 12:48:22 -04:00
Родитель 551b2900b8
Коммит 45b95898e0
43 изменённых файлов: 514 добавлений и 42 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
Просмотреть файл

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

2
browser/themes/linux/searchbar.css
Просмотреть файл

@ -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: content-box;
box-sizing: padding-box;
border-bottom: 1px solid #ccc;
}

2
browser/themes/osx/searchbar.css
Просмотреть файл

@ -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: content-box;
box-sizing: padding-box;
border-bottom: 1px solid #ccc;
}

2
browser/themes/shared/aboutNetError.css
Просмотреть файл

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

2
browser/themes/windows/searchbar.css
Просмотреть файл

@ -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: content-box;
box-sizing: padding-box;
border-bottom: 1px solid #ccc;
}

2
dom/base/test/test_bug320799.html
Просмотреть файл

@ -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: content-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>
</select>
<select id="s2">

28
layout/base/nsLayoutUtils.cpp
Просмотреть файл

@ -4408,11 +4408,15 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext *aRenderingContext,
if (ratio.BSize(wm) != 0) {
nscoord bSizeTakenByBoxSizing = 0;
if (boxSizing == NS_STYLE_BOX_SIZING_BORDER) {
switch (boxSizing) {
case 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;
@ -4428,6 +4432,11 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext *aRenderingContext,
bSizeTakenByBoxSizing += pad;
}
}
// fall through
}
case NS_STYLE_BOX_SIZING_CONTENT:
default:
break;
}
nscoord h;
@ -4476,6 +4485,15 @@ 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;
@ -4786,8 +4804,12 @@ nsLayoutUtils::ComputeSizeWithIntrinsicDimensions(WritingMode aWM,
const bool isAutoBSize = IsAutoBSize(*blockStyleCoord, aCBSize.BSize(aWM));
LogicalSize boxSizingAdjust(aWM);
if (stylePos->mBoxSizing == NS_STYLE_BOX_SIZING_BORDER) {
boxSizingAdjust += aBorder + aPadding;
switch (stylePos->mBoxSizing) {
case NS_STYLE_BOX_SIZING_BORDER:
boxSizingAdjust += aBorder;
// fall through
case NS_STYLE_BOX_SIZING_PADDING:
boxSizingAdjust += aPadding;
}
nscoord boxSizingToMarginEdgeISize =
aMargin.ISize(aWM) + aBorder.ISize(aWM) + aPadding.ISize(aWM) -

2
layout/forms/test/test_textarea_resize.html
Просмотреть файл

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

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

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

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

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

12
layout/reftests/box-properties/box-sizing-1-ref.html
Просмотреть файл

@ -46,6 +46,18 @@
</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
Просмотреть файл

@ -13,6 +13,7 @@
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 {
@ -46,6 +47,18 @@
</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
Просмотреть файл

@ -39,6 +39,17 @@
</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
Просмотреть файл

@ -11,6 +11,7 @@
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 {
@ -42,6 +43,17 @@
</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
Просмотреть файл

@ -13,6 +13,7 @@
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 {
@ -46,6 +47,18 @@
</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
Просмотреть файл

@ -48,6 +48,18 @@
</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
Просмотреть файл

@ -14,6 +14,7 @@
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 {
@ -58,6 +59,18 @@
</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
Просмотреть файл

@ -43,5 +43,10 @@ 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
Просмотреть файл

@ -25,6 +25,11 @@ hbox {
background:pink;
}
.pb {
box-sizing:padding-box;
background:cyan;
}
</style>
</head>
<body>
@ -39,5 +44,10 @@ 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
Просмотреть файл

@ -9,14 +9,26 @@
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
Просмотреть файл

@ -10,14 +10,27 @@
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
Просмотреть файл

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

2
layout/reftests/box-sizing/intrinsic-1b.html
Просмотреть файл

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

2
layout/reftests/box-sizing/intrinsic-1d.html
Просмотреть файл

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

2
layout/reftests/box-sizing/intrinsic-1e.html
Просмотреть файл

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

2
layout/reftests/box-sizing/intrinsic-1f.html
Просмотреть файл

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

40
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001-ref.xht Normal 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>

43
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001.xht Normal 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>

42
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-002-ref.xht Normal 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>

45
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-002.xht Normal 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>

42
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-003-ref.xht Normal 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>

49
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-003.xht Normal 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>

2
layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht
Просмотреть файл

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

3
layout/reftests/w3c-css/submitted/ui3/reftest.list
Просмотреть файл

@ -5,6 +5,9 @@
== 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
Просмотреть файл

@ -888,6 +888,7 @@ 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
Просмотреть файл

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

3
layout/style/nsStyleConsts.h
Просмотреть файл

@ -58,7 +58,8 @@ 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_BORDER 1
#define NS_STYLE_BOX_SIZING_PADDING 1
#define NS_STYLE_BOX_SIZING_BORDER 2
// clip-path sizing
#define NS_STYLE_CLIP_SHAPE_SIZING_NOBOX 0

8
layout/style/test/property_database.js
Просмотреть файл

@ -1045,8 +1045,8 @@ var gCSSProperties = {
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "content-box" ],
other_values: [ "border-box" ],
invalid_values: [ "margin-box", "content", "padding", "border", "margin", "padding-box" ]
other_values: [ "border-box", "padding-box" ],
invalid_values: [ "margin-box", "content", "padding", "border", "margin" ]
},
"-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" ],
invalid_values: [ "margin-box", "content", "padding", "border", "margin", "padding-box" ]
other_values: [ "border-box", "padding-box" ],
invalid_values: [ "margin-box", "content", "padding", "border", "margin" ]
},
"-moz-columns": {
domProp: "MozColumns",

20
layout/tables/BasicTableLayoutStrategy.cpp
Просмотреть файл

@ -113,13 +113,25 @@ 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 || stylePos->mBoxSizing == NS_STYLE_BOX_SIZING_CONTENT) {
if (isQuirks) {
boxSizingToBorderEdge = offsets.hPadding + offsets.hBorder;
}
else {
// NS_STYLE_BOX_SIZING_BORDER and standards-mode
minCoord += offsets.hPadding + offsets.hBorder;
prefCoord += offsets.hPadding + offsets.hBorder;
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;
}
}
} else {
minCoord = 0;

14
layout/tables/FixedTableLayoutStrategy.cpp
Просмотреть файл

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

12
layout/tables/nsTableRowFrame.cpp
Просмотреть файл

@ -629,8 +629,16 @@ 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) {
if (position->mBoxSizing == NS_STYLE_BOX_SIZING_CONTENT) {
outsideBoxSizing = aCellFrame->GetUsedBorderAndPadding().TopBottom();
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;
}
}

9
layout/xul/nsResizerFrame.cpp
Просмотреть файл

@ -80,8 +80,13 @@ nsResizerFrame::HandleEvent(nsPresContext* aPresContext,
// GetScreenRectInAppUnits returns the border box rectangle, so
// adjust to get the desired content rectangle.
nsRect rect = frameToResize->GetScreenRectInAppUnits();
if (frameToResize->StylePosition()->mBoxSizing == NS_STYLE_BOX_SIZING_CONTENT) {
rect.Deflate(frameToResize->GetUsedBorderAndPadding());
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;
}
mMouseDownRect =

2
toolkit/themes/shared/in-content/info-pages.inc.css
Просмотреть файл

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