Backed out changeset 4126c66c9a80 (bug 1166728) for Gaia sound_manager_test.js failures.
authorRyan VanderMeulen <ryanvm@gmail.com>
Fri, 29 May 2015 15:16:53 -0400
changeset 246315 a62605b318383d83e944b664af30292d606c7a00
parent 246314 7aec151a5d61ac96d517adc73f723db0a73ae0b6
child 246316 9aad1ac832f7fa6a31473238fc20e7070689cc2c
push id60405
push userryanvm@gmail.com
push dateFri, 29 May 2015 19:17:08 +0000
treeherdermozilla-inbound@a62605b31838 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1166728
milestone41.0a1
backs out4126c66c9a80bd7d165643c3c979463e8c9b5e43
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Backed out changeset 4126c66c9a80 (bug 1166728) for Gaia sound_manager_test.js failures. CLOSED TREE
browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
browser/themes/linux/searchbar.css
browser/themes/osx/searchbar.css
browser/themes/shared/aboutNetError.css
browser/themes/windows/searchbar.css
dom/base/test/test_bug320799.html
layout/base/nsLayoutUtils.cpp
layout/forms/test/test_textarea_resize.html
layout/generic/nsFrame.cpp
layout/generic/nsHTMLReflowState.cpp
layout/reftests/box-properties/box-sizing-1-ref.html
layout/reftests/box-properties/box-sizing-1.html
layout/reftests/box-properties/box-sizing-2-ref.html
layout/reftests/box-properties/box-sizing-2.html
layout/reftests/box-properties/box-sizing-3.html
layout/reftests/box-properties/box-sizing-4-ref.html
layout/reftests/box-properties/box-sizing-4.html
layout/reftests/box-properties/box-sizing-mozbox-minmax-height-ref.html
layout/reftests/box-properties/box-sizing-mozbox-minmax-height.html
layout/reftests/box-sizing/computed-size-reporting-ref.html
layout/reftests/box-sizing/computed-size-reporting.html
layout/reftests/box-sizing/intrinsic-1a.html
layout/reftests/box-sizing/intrinsic-1b.html
layout/reftests/box-sizing/intrinsic-1d.html
layout/reftests/box-sizing/intrinsic-1e.html
layout/reftests/box-sizing/intrinsic-1f.html
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001-ref.xht
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001.xht
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-002-ref.xht
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-002.xht
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-003-ref.xht
layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-003.xht
layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht
layout/reftests/w3c-css/submitted/ui3/reftest.list
layout/style/nsCSSProps.cpp
layout/style/nsComputedDOMStyle.cpp
layout/style/nsStyleConsts.h
layout/style/test/property_database.js
layout/tables/BasicTableLayoutStrategy.cpp
layout/tables/FixedTableLayoutStrategy.cpp
layout/tables/nsTableRowFrame.cpp
layout/xul/nsResizerFrame.cpp
toolkit/themes/shared/in-content/info-pages.inc.css
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
@@ -3,17 +3,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
 @import url("chrome://global/skin/in-content/common.css");
 
 body {
   display: flex;
-  box-sizing: border-box;
+  box-sizing: padding-box;
   min-height: 100vh;
   padding: 0 48px;
   align-items: center;
   justify-content: center;
 }
 
 body.normal .showPrivate,
 body.private .showNormal {
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -163,17 +163,17 @@ searchbar[oneoffui] .search-go-button:-m
   padding: 0 0;
   background: none;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gofECQNNVW2/AAAABBJREFUGFdjOHPmzH8GehEA/KpKg9YTf4AAAAAASUVORK5CYII=');
   background-repeat: no-repeat;
   background-position: right center;
 }
 
 .searchbar-engine-one-off-item:not(.last-row) {
-  box-sizing: content-box;
+  box-sizing: padding-box;
   border-bottom: 1px solid #ccc;
 }
 
 .searchbar-engine-one-off-item.last-of-row {
   background-image: none;
 }
 
 .searchbar-engine-one-off-item[selected] {
--- a/browser/themes/osx/searchbar.css
+++ b/browser/themes/osx/searchbar.css
@@ -186,17 +186,17 @@ searchbar[oneoffui] .search-go-button:-m
   margin: 0 0;
   padding: 0 0;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gofECQNNVW2/AAAABBJREFUGFdjOHPmzH8GehEA/KpKg9YTf4AAAAAASUVORK5CYII=');
   background-repeat: no-repeat;
   background-position: right center;
 }
 
 .searchbar-engine-one-off-item:not(.last-row) {
-  box-sizing: content-box;
+  box-sizing: padding-box;
   border-bottom: 1px solid #ccc;
 }
 
 .searchbar-engine-one-off-item.last-of-row {
   background-image: none;
 }
 
 .searchbar-engine-one-off-item[selected] {
--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError.css
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://global/skin/in-content/common.css");
 
 body {
   display: flex;
-  box-sizing: border-box;
+  box-sizing: padding-box;
   min-height: 100vh;
   padding: 0 48px;
   align-items: center;
   justify-content: center;
 }
 
 ul, ol {
   margin: 0;
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -220,17 +220,17 @@ searchbar[oneoffui] .search-go-button:-m
   padding: 0 0;
   background: none;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gofECQNNVW2/AAAABBJREFUGFdjOHPmzH8GehEA/KpKg9YTf4AAAAAASUVORK5CYII=');
   background-repeat: no-repeat;
   background-position: right center;
 }
 
 .searchbar-engine-one-off-item:not(.last-row) {
-  box-sizing: content-box;
+  box-sizing: padding-box;
   border-bottom: 1px solid #ccc;
 }
 
 .searchbar-engine-one-off-item.last-of-row {
   background-image: none;
 }
 
 .searchbar-engine-one-off-item[selected] {
--- a/dom/base/test/test_bug320799.html
+++ b/dom/base/test/test_bug320799.html
@@ -6,17 +6,17 @@ https://bugzilla.mozilla.org/show_bug.cg
 <head>
   <title>Test for Bug 320799</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 </head>
 <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: 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>
   </select>
   <select id="s2">
     <option>x</option>
     <option>x</option>
     <option>x</option>
     <option>x</option>
     <option>x</option>
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -4403,36 +4403,45 @@ nsLayoutUtils::IntrinsicForContainer(nsR
           (styleMinBSize.GetUnit() == eStyleUnit_Coord &&
            styleMinBSize.GetCoordValue() == 0)) ||
         styleMaxBSize.GetUnit() != eStyleUnit_None) {
 
       LogicalSize ratio(wm, aFrame->GetIntrinsicRatio());
 
       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;
             const nsStyleCoord& paddingStart = stylePadding.GetBStart(wm);
             const nsStyleCoord& paddingEnd = stylePadding.GetBEnd(wm);
             nscoord pad;
             if (GetAbsoluteCoord(paddingStart, pad) ||
                 GetPercentBSize(paddingStart, aFrame, pad)) {
               bSizeTakenByBoxSizing += pad;
             }
             if (GetAbsoluteCoord(paddingEnd, pad) ||
                 GetPercentBSize(paddingEnd, aFrame, pad)) {
               bSizeTakenByBoxSizing += pad;
             }
           }
+          // fall through
+        }
+        case NS_STYLE_BOX_SIZING_CONTENT:
+        default:
+          break;
         }
 
         nscoord h;
         if (GetAbsoluteCoord(styleBSize, h) ||
             GetPercentBSize(styleBSize, aFrame, h)) {
           h = std::max(0, h - bSizeTakenByBoxSizing);
           result = NSCoordMulDiv(h, ratio.ISize(wm), ratio.BSize(wm));
         }
@@ -4471,16 +4480,25 @@ nsLayoutUtils::IntrinsicForContainer(nsR
   // linearly, they are handled monotonically.
   nscoord coordOutsideISize = 0;
   float pctOutsideISize = 0;
   float pctTotal = 0.0f;
 
   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;
 
   if (boxSizing == NS_STYLE_BOX_SIZING_BORDER) {
     min += coordOutsideISize;
     result = NSCoordSaturatingAdd(result, coordOutsideISize);
     pctTotal += pctOutsideISize;
@@ -4781,18 +4799,22 @@ nsLayoutUtils::ComputeSizeWithIntrinsicD
   // Note: throughout the following section of the function, I avoid
   // a * (b / c) because of its reduced accuracy relative to a * b / c
   // or (a * b) / c (which are equivalent).
 
   const bool isAutoISize = inlineStyleCoord->GetUnit() == eStyleUnit_Auto;
   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) -
       boxSizingAdjust.ISize(aWM);
 
   nscoord iSize, minISize, maxISize, bSize, minBSize, maxBSize;
 
   if (!isAutoISize) {
--- a/layout/forms/test/test_textarea_resize.html
+++ b/layout/forms/test/test_textarea_resize.html
@@ -20,17 +20,17 @@ SimpleTest.waitForExplicitFinish();
 addLoadEvent(function() SimpleTest.executeSoon(doTheTest));
 
 // -1 means use the default value which is 'both', then test explicitly
 // setting each possible value.
 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() {
   runTest(pointerTypes[currentPointer]);
 }
 
 function runTest(aPointerFunc) {
   var boxSizingText = " with box sizing " + (currentBoxSizing ? boxSizingTypes[currentBoxSizing] : "content-box");
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -4175,18 +4175,22 @@ nsFrame::ComputeSize(nsRenderingContext 
 {
   LogicalSize result = ComputeAutoSize(aRenderingContext, aWM,
                                        aCBSize, aAvailableISize,
                                        aMargin, aBorder, aPadding,
                                        aFlags & ComputeSizeFlags::eShrinkWrap);
   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) -
     boxSizingAdjust.ISize(aWM);
 
   const nsStyleCoord* inlineStyleCoord = &stylePos->ISize(aWM);
   const nsStyleCoord* blockStyleCoord = &stylePos->BSize(aWM);
 
--- a/layout/generic/nsHTMLReflowState.cpp
+++ b/layout/generic/nsHTMLReflowState.cpp
@@ -250,33 +250,43 @@ nsCSSOffsetState::ComputeWidthValue(nsco
 
 nscoord
 nsCSSOffsetState::ComputeWidthValue(nscoord aContainingBlockWidth,
                                     uint8_t aBoxSizing,
                                     const nsStyleCoord& aCoord)
 {
   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;
 
   return ComputeWidthValue(aContainingBlockWidth, inside,
                            outside, aCoord);
 }
 
 nscoord
 nsCSSOffsetState::ComputeHeightValue(nscoord aContainingBlockHeight,
                                      uint8_t aBoxSizing,
                                      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);
 }
 
 void
 nsHTMLReflowState::SetComputedWidth(nscoord aComputedWidth)
 {
@@ -1081,18 +1091,22 @@ nsHTMLReflowState::CalculateHorizBorderP
         ComputeCBDependentValue(aContainingBlockWidth,
                                 mStyleMargin->mMargin.GetRight());
     }
   }
 
   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;
   *aOutsideBoxSizing = outside;
   return;
 }
 
 /**
--- a/layout/reftests/box-properties/box-sizing-1-ref.html
+++ b/layout/reftests/box-properties/box-sizing-1-ref.html
@@ -41,16 +41,28 @@
 <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: 50px">A B</div>
 <div style="width: 60px">A B</div>
 
 </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>
 <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: 20px">A B</div>
--- a/layout/reftests/box-properties/box-sizing-1.html
+++ b/layout/reftests/box-properties/box-sizing-1.html
@@ -8,16 +8,17 @@
 
     body { font-size: 10px; line-height: 1; }
     table { border-spacing: 0; margin: 0; }
     td { border: 1px solid; padding: 1px; }
 
     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 {
       margin-left: 1px;
       border-left: 2px solid;
       padding-left: 4px;
       padding-right: 8px;
       border-right: 16px solid;
@@ -41,16 +42,28 @@
 <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="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>
 <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>
--- a/layout/reftests/box-properties/box-sizing-2-ref.html
+++ b/layout/reftests/box-properties/box-sizing-2-ref.html
@@ -34,16 +34,27 @@
 <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: 150px">A B</div></td></tr></table>
 
 </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>
 <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: 120px">A B</div></td></tr></table>
--- a/layout/reftests/box-properties/box-sizing-2.html
+++ b/layout/reftests/box-properties/box-sizing-2.html
@@ -6,16 +6,17 @@
   <meta http-equiv="Content-Style-Type" content="text/css">
   <style type="text/css">
 
     body { font-size: 10px; line-height: 1; }
     table { border-spacing: 0; margin: 0; }
     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 {
       margin-left: 1px;
       border-left: 2px solid;
       padding-left: 4px;
       padding-right: 8px;
       border-right: 16px solid;
@@ -37,16 +38,27 @@
 <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="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>
 <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>
--- a/layout/reftests/box-properties/box-sizing-3.html
+++ b/layout/reftests/box-properties/box-sizing-3.html
@@ -8,16 +8,17 @@
 
     body { font-size: 10px; line-height: 1; }
     table { border-spacing: 0; margin: 0; }
     td { border: 1px solid; padding: 1px solid; }
 
     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 {
       margin-left: 1%;
       border-left: 2px solid;
       padding-left: 4%;
       padding-right: 8%;
       border-right: 16px solid;
@@ -41,16 +42,28 @@
 <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="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>
 <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>
--- a/layout/reftests/box-properties/box-sizing-4-ref.html
+++ b/layout/reftests/box-properties/box-sizing-4-ref.html
@@ -43,16 +43,28 @@
 <div>A<br>B</div>
 <div>A B</div>
 <div style="width: 37px">A B</div>
 <div style="width: 50px">A B</div>
 <div style="width: 60px">A B</div>
 
 </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>
 <div>A B</div>
 <div>A<br>B</div>
 <div>A B</div>
 <div style="width: 37px">A B</div>
 <div style="width: 20px">A B</div>
--- a/layout/reftests/box-properties/box-sizing-4.html
+++ b/layout/reftests/box-properties/box-sizing-4.html
@@ -9,16 +9,17 @@
     body { font-size: 10px; line-height: 1; }
     table { border-spacing: 0; margin: 0 100px; }
     td { border: 1px solid; padding: 1px solid; }
 
     td > div { width: 100px; height: 350px;
                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 {
       margin-left: 1px;
       border-left: 2px solid;
       padding-left: 4px;
       padding-right: 8px;
       border-right: 16px solid;
@@ -53,16 +54,28 @@
 <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="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>
 <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>
--- a/layout/reftests/box-properties/box-sizing-mozbox-minmax-height-ref.html
+++ b/layout/reftests/box-properties/box-sizing-mozbox-minmax-height-ref.html
@@ -38,10 +38,15 @@ hbox {
 <div><hbox style="height:41px;">border-box 50px</hbox></div>
 <div><hbox style="height:11px;">border-box 20px</hbox></div>
 
 <div><hbox class="cb" style="height:29px;">content-box 20px</hbox></div>
 <div><hbox class="cb" style="height:59px;">content-box 50px</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>
 </html>
--- a/layout/reftests/box-properties/box-sizing-mozbox-minmax-height.html
+++ b/layout/reftests/box-properties/box-sizing-mozbox-minmax-height.html
@@ -20,24 +20,34 @@ hbox {
   background:lime;
 }
 
 .cb {
   box-sizing:content-box;
   background:pink;
 }
 
+.pb {
+  box-sizing:padding-box;
+  background:cyan;
+}
+
     </style>
 </head>
 <body>
 
 
 <div><hbox style="height:20px;">border-box 20px</hbox></div>
 <div><hbox style="min-height:50px;">border-box 50px</hbox></div>
 <div><hbox style="max-height:20px;">border-box 20px</hbox></div>
 
 <div><hbox class="cb" style="height:20px;">content-box 20px</hbox></div>
 <div><hbox class="cb" style="min-height:50px;">content-box 50px</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>
 </html>
--- a/layout/reftests/box-sizing/computed-size-reporting-ref.html
+++ b/layout/reftests/box-sizing/computed-size-reporting-ref.html
@@ -4,19 +4,31 @@
 
 <style>
   #borderBox {
     background:gold;
     height:100px;
     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>
--- a/layout/reftests/box-sizing/computed-size-reporting.html
+++ b/layout/reftests/box-sizing/computed-size-reporting.html
@@ -5,19 +5,32 @@
 <style>
   #borderBox {
     background:gold;
     height:100px;
     box-sizing:border-box;
     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>
--- a/layout/reftests/box-sizing/intrinsic-1a.html
+++ b/layout/reftests/box-sizing/intrinsic-1a.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <body>
   <div style="display: inline-block; background: blue">
     <img src="lime100x100.png"
          style="height: 200px; display: block; visibility: hidden;
                 padding: 30px;
-                box-sizing: border-box;">
+                box-sizing: padding-box;">
   </div>
 </body>
--- a/layout/reftests/box-sizing/intrinsic-1b.html
+++ b/layout/reftests/box-sizing/intrinsic-1b.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <body>
   <div style="display: inline-block; background: blue; height: 200px">
     <img src="lime100x100.png"
          style="height: 200px; display: block; visibility: hidden;
                 padding: 15% 30px;
-                box-sizing: border-box;">
+                box-sizing: padding-box;">
   </div>
 </body>
--- a/layout/reftests/box-sizing/intrinsic-1d.html
+++ b/layout/reftests/box-sizing/intrinsic-1d.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <body>
   <div style="display: inline-block; background: blue; height: 200px">
     <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>
--- a/layout/reftests/box-sizing/intrinsic-1e.html
+++ b/layout/reftests/box-sizing/intrinsic-1e.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <body>
   <div style="display: inline-block; background: blue; height: 200px">
     <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>
--- a/layout/reftests/box-sizing/intrinsic-1f.html
+++ b/layout/reftests/box-sizing/intrinsic-1f.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <body>
   <div style="display: inline-block; background: blue">
     <img src="lime100x100.png"
          style="height: 200px; display: block; visibility: hidden;
                 padding: calc(30px);
-                box-sizing: border-box;">
+                box-sizing: padding-box;">
   </div>
 </body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001-ref.xht
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001.xht
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-002-ref.xht
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-002.xht
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-003-ref.xht
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-003.xht
@@ -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>
--- a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht
@@ -16,17 +16,17 @@
         display: inline-block;
         background-color: white;
         padding: 0px 0px;
         margin: 0px 0px;
       }
 
       .with-padding {
         padding: 5px 5px;
-        box-sizing: border-box;
+        box-sizing: padding-box;
       }
 
       #img1 {
         min-width:   70px;
         max-width:  115px;
         min-height:  55px;
         max-height: 130px;
       }
--- a/layout/reftests/w3c-css/submitted/ui3/reftest.list
+++ b/layout/reftests/w3c-css/submitted/ui3/reftest.list
@@ -1,10 +1,13 @@
 == box-sizing-border-box-001.xht box-sizing-border-box-001-ref.xht
 == box-sizing-border-box-002.xht box-sizing-border-box-002-ref.xht
 == box-sizing-border-box-003.xht box-sizing-border-box-003-ref.xht
 == box-sizing-border-box-004.xht box-sizing-border-box-004-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-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
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -883,16 +883,17 @@ const KTableValue nsCSSProps::kBoxDecora
 const KTableValue nsCSSProps::kBoxShadowTypeKTable[] = {
   eCSSKeyword_inset, NS_STYLE_BOX_SHADOW_INSET,
   eCSSKeyword_UNKNOWN,-1
 };
 
 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
 };
 
 const KTableValue nsCSSProps::kCaptionSideKTable[] = {
   eCSSKeyword_top,                  NS_STYLE_CAPTION_SIDE_TOP,
   eCSSKeyword_right,                NS_STYLE_CAPTION_SIDE_RIGHT,
   eCSSKeyword_bottom,               NS_STYLE_CAPTION_SIDE_BOTTOM,
   eCSSKeyword_left,                 NS_STYLE_CAPTION_SIDE_LEFT,
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -512,18 +512,23 @@ nsComputedDOMStyle::GetStyleContextForEl
 nsMargin
 nsComputedDOMStyle::GetAdjustedValuesForBoxSizing()
 {
   // We want the width/height of whatever parts 'width' or 'height' controls,
   // which can be different depending on the value of the 'box-sizing' property.
   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;
 }
 
 /* static */
 nsIPresShell*
 nsComputedDOMStyle::GetPresShellForContent(nsIContent* aContent)
--- a/layout/style/nsStyleConsts.h
+++ b/layout/style/nsStyleConsts.h
@@ -53,17 +53,18 @@ static inline mozilla::css::Side operato
 #define NS_SIDE_IS_VERTICAL(side_) ((side_) % 2)
 #define NS_SIDE_TO_FULL_CORNER(side_, second_) \
   (((side_) + !!(second_)) % 4)
 #define NS_SIDE_TO_HALF_CORNER(side_, second_, parallel_) \
   ((((side_) + !!(second_))*2 + ((side_) + !(parallel_))%2) % 8)
 
 // 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
 #define NS_STYLE_CLIP_SHAPE_SIZING_CONTENT 1
 #define NS_STYLE_CLIP_SHAPE_SIZING_PADDING 2
 #define NS_STYLE_CLIP_SHAPE_SIZING_BORDER  3
 #define NS_STYLE_CLIP_SHAPE_SIZING_MARGIN  4
 #define NS_STYLE_CLIP_SHAPE_SIZING_FILL    5
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -1040,28 +1040,28 @@ var gCSSProperties = {
     other_values: [ "center", "end", "justify" ],
     invalid_values: []
   },
   "box-sizing": {
     domProp: "boxSizing",
     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",
     inherited: false,
     type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
     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",
     inherited: false,
     type: CSS_TYPE_TRUE_SHORTHAND,
     subproperties: [ "-moz-column-count", "-moz-column-width" ],
     initial_values: [ "auto", "auto auto" ],
     other_values: [ "3", "20px", "2 10px", "10px 2", "2 auto", "auto 2", "auto 50px", "50px auto" ],
--- a/layout/tables/BasicTableLayoutStrategy.cpp
+++ b/layout/tables/BasicTableLayoutStrategy.cpp
@@ -108,23 +108,35 @@ GetWidthInfo(nsRenderingContext *aRender
 
         // In quirks mode, table cell width should be content-box,
         // but height should be border box.
         // Because of this historic anomaly, we do not use quirk.css.
         // (We can't specify one value of box-sizing for width and another
         // 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;
         prefCoord = 0;
     }
     float prefPercent = 0.0f;
     bool hasSpecifiedWidth = false;
 
--- a/layout/tables/FixedTableLayoutStrategy.cpp
+++ b/layout/tables/FixedTableLayoutStrategy.cpp
@@ -247,19 +247,29 @@ FixedTableLayoutStrategy::ComputeColumnI
                                  cellFrame, nsLayoutUtils::MIN_ISIZE);
                 } else if (styleWidth->GetUnit() == eStyleUnit_Percent) {
                     // XXX This should use real percentage padding
                     nsIFrame::IntrinsicISizeOffsetData offsets =
                         cellFrame->IntrinsicISizeOffsets(aReflowState.rendContext);
                     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);
                     pctTotal += pct;
                 } else {
                     // 'auto', '-moz-available', '-moz-fit-content', and
                     // 'calc()' with percentages
                     colWidth = unassignedMarker;
--- a/layout/tables/nsTableRowFrame.cpp
+++ b/layout/tables/nsTableRowFrame.cpp
@@ -624,18 +624,26 @@ nsTableRowFrame::CalculateCellActualHeig
     case eStyleUnit_Coord: {
       nscoord outsideBoxSizing = 0;
       // In quirks mode, table cell width should be content-box, but height
       // should be border-box.
       // Because of this historic anomaly, we do not use quirk.css
       // (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;
         }
       }
 
       specifiedHeight =
         nsRuleNode::ComputeCoordPercentCalc(position->mHeight, 0) +
           outsideBoxSizing;
 
       if (1 == rowSpan)
--- a/layout/xul/nsResizerFrame.cpp
+++ b/layout/xul/nsResizerFrame.cpp
@@ -75,18 +75,23 @@ nsResizerFrame::HandleEvent(nsPresContex
           nsIFrame* frameToResize = contentToResize->GetPrimaryFrame();
           if (!frameToResize)
             break;
 
           // cache the content rectangle for the frame to resize
           // 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 =
             LayoutDeviceIntRect::FromAppUnitsToNearest(rect, aPresContext->AppUnitsPerDevPixel());
           doDefault = false;
         }
         else {
           // If there is no window, then resizing isn't allowed.
--- a/toolkit/themes/shared/in-content/info-pages.inc.css
+++ b/toolkit/themes/shared/in-content/info-pages.inc.css
@@ -2,17 +2,17 @@
 % License, v. 2.0. If a copy of the MPL was not distributed with this
 % file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 @import url("chrome://global/skin/in-content/common.css");
 /* Body and container */
 body {
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
+  box-sizing: padding-box;
   min-height: 100vh;
   padding-top: 0;
   padding-bottom: 0;
   -moz-padding-start: calc(48px + 4.6em);
   -moz-padding-end: 48px;
   align-items: center;
   justify-content: center;
 }