Attachment #8365750 for bug #243412

Attachment #8365750: Bug 243412. Use unprefixed box-sizing internally for bug #243412

(-)a/browser/base/content/aboutaccounts/main.css (-2 lines)

Line	Link Here

Lines 1-12	Link Here

/* Border box all the things by default */

/* Border box all the things by default */

*, *:before, *:after {

*, *:before, *:after {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  box-sizing: border-box;

html {

html {

  background-color: #f1f1f1;

  background-color: #f1f1f1;

  background-image: -webkit-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);

  background-image: -webkit-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);

  background-image:    -moz-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);

  background-image:    -moz-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);

  background-image:     -ms-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);

  background-image:     -ms-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);





    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */


input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome.
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    box-sizing: content-box; /* 2 */
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,





  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
}

/* hide chat chrome when chat is fullscreen */
chatbox:-moz-full-screen-ancestor > .chat-titlebar {
  display: none;
}

/* hide chatbar if browser tab is fullscreen */





}

body {
  margin: 0;
  padding: 0;
}

#header {
  box-sizing: border-box;
  width: 100%;
  padding: 6px 9px;
  display: -moz-box;
  vertical-align: top;
}

#header:-moz-dir(rtl) {
  -moz-box-direction: reverse;

}

#element-size:-moz-dir(rtl) {
  -moz-box-pack: end;
}

#main {
  margin: 0 10px 10px 10px;
  box-sizing: border-box;
  width: calc(100% - 2 * 10px);
  position: absolute;
  border-width: 1px;
}

@media (min-width: 320px) {
  body {
    position: absolute;





#infoBar dd {
  margin-left: 0;
}
#infoBar dd::after {
  content: "\a";
  white-space:pre;
}
.sideBar {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 480px;
  overflow: auto;
  padding: 3px;





.CodeMirror-scroll {
  /* 30px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -30px; margin-right: -30px;
  padding-bottom: 30px; padding-right: 30px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.CodeMirror-sizer {
  position: relative;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actuall scrolling happens, thus preventing shaking and

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  padding-bottom: 30px;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding-bottom: 30px;
  margin-bottom: -32px;
  display: inline-block;
  /* Hack to make IE7 behave */
  *zoom:1;
  *display:inline;
}






.toolbarButton.download::before,
.secondaryToolbarButton.download::before {
  content: url(images/toolbarButton-download.png);
}

.toolbarButton.bookmark,
.secondaryToolbarButton.bookmark {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 4px;
  text-decoration: none;
}
.secondaryToolbarButton.bookmark {
  padding-top: 5px;
}






#filter-input:-moz-placeholder {
    color: rgba(255,255,255,0.5);
}

.toolbar input {
    display: inline-block;
    height: 100%;
    min-width: 3em;
    box-sizing: border-box;
    opacity: 0.75;
}

#new-pref-toggle-button {
    background-position: center center;
    background-image: url("chrome://browser/skin/images/reader-plus-icon-xhdpi.png");
    background-size: 48px 48px;
    height: 48px;

    list-style-position: inside;
    border: 1px solid #808080;
    background-color: #ffffff;
    min-height: 100%;
    width: 100%;
    padding-top: 0;
    margin: 0;
    padding-left: 0;
    box-sizing: border-box;
    box-shadow: 0 0 5px #000000;
    overflow-x: hidden;
}

#new-pref-container {
    width: 100%;
    margin: 0;
    background-color: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 0 5px #000000;
    overflow-x: hidden;
    max-width: 40em;
    max-height: 100%;
    position: fixed;
    top: 3em;
    left: auto;
    display: none;

}

.pref-item.selected {
    background-color: rgba(0,0,255,0.05);
}

.pref-button {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 1em;
    border-left: 1px solid rgba(0,0,0,0.1);
    opacity: 0;
    transition-property: opacity;
    transition-duration: 500ms;
}






richgrid > .richgrid-grid {
  -moz-column-width: @grid_double_column_width@; /* tile width (2x unit + gutter) */
  min-width: @grid_double_column_width@; /* min 1 column */
  min-height: @grid_double_row_height@; /* 2 rows (or 1 double rows) minimum; multiple of tile_height */
  -moz-column-fill: auto; /* do not attempt to balance content between columns */
  -moz-column-gap: 0;
  -moz-column-count: auto;
  display: block;
  box-sizing: content-box;
  overflow-x: hidden; /* clipping will only kick in if an explicit width is set */
  transition: 100ms transform ease-out;
}

richgrid[search] > .richgrid-grid {
  -moz-column-width: auto;
  min-width: 0;
}

richgriditem {
  display: block;
  position: relative;
  width: @grid_double_column_width@;
  height: @grid_row_height@;
  box-sizing: border-box;
  -moz-column-gap: 0;
  overflow:hidden;
  cursor: default;
}

.tile-content {
  display: block;
  position: absolute;

(-)a/browser/themes/linux/devtools/computedview.css (-1 / +1 lines)

Line	Link Here

Lines 1-15	Link Here

/* vim:set ts=2 sw=2 sts=2 et: */

/* vim:set ts=2 sw=2 sts=2 et: */

/* This Source Code Form is subject to the terms of the Mozilla Public

/* 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

 * 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/. */

 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

* {

* {

  -moz-box-sizing: border-box;

  box-sizing: border-box;

:root {

:root {

  height: 100%;

  height: 100%;

body {

body {

  margin: 0;

  margin: 0;

(-)a/browser/themes/linux/devtools/font-inspector.css (-1 / +1 lines)

Line	Link Here

Lines 1-10	Link Here

* {

* {

  -moz-box-sizing: border-box;

  box-sizing: border-box;

body {

body {

  margin: 0;

  margin: 0;

  padding-bottom: 20px;

  padding-bottom: 20px;

#all-fonts {

#all-fonts {





}

.theme-light .theme-body {
  background-image: url(layout-background-grid.png), radial-gradient(circle at 50% 70%, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
}

.theme-body {
  color: hsl(210,100%,85%) !important;
  box-sizing: border-box;
}

#main {
  border-color: hsla(210,100%,85%,0.7);
  border-style: dotted;
}

#main > .border {





}
.link:hover {
  text-decoration: underline;
}

/* From content */

* {
  box-sizing: border-box;
}

:root {
  height: 100%;
}

body {
  margin: 0;

(-)a/browser/themes/osx/devtools/font-inspector.css (-1 / +1 lines)

Line	Link Here

Lines 1-10	Link Here

* {

* {

  -moz-box-sizing: border-box;

  box-sizing: border-box;

body {

body {

  margin: 0;

  margin: 0;

  padding-bottom: 20px;

  padding-bottom: 20px;

#all-fonts {

#all-fonts {





}

.theme-light .theme-body {
  background-image: url(layout-background-grid.png), radial-gradient(circle at 50% 70%, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
}

.theme-body {
  color: hsl(210,100%,85%) !important;
  box-sizing: border-box;
}

#main {
  border-color: hsla(210,100%,85%,0.7);
  border-style: dotted;
}

#main > .border {





  display: inline;
}

/************** PIXELS **************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 0.9rem;
}

body {
  color: #333;
  background-color: white;
  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
}





 * 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/. */

/*****************      GENERAL      *****************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-size: 0.9rem;





/* 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/. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
}

#tabs {
  box-shadow: inset -4px 0 0 rgba(0,0,0,0.3);
  background: #252C33;
}






/* 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/. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 0.9rem;
}

html, body {
  height: 100%;
}

template {





}
.link:hover {
  text-decoration: underline;
}

/* From content */

* {
  box-sizing: border-box;
}

:root {
  height: 100%;
}

body {
  margin: 0;

(-)a/browser/themes/windows/devtools/font-inspector.css (-1 / +1 lines)

Line	Link Here

Lines 1-10	Link Here

* {

* {

  -moz-box-sizing: border-box;

  box-sizing: border-box;

body {

body {

  margin: 0;

  margin: 0;

  padding-bottom: 20px;

  padding-bottom: 20px;

#all-fonts {

#all-fonts {





}

.theme-light .theme-body {
  background-image: url(layout-background-grid.png), radial-gradient(circle at 50% 70%, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
}

.theme-body {
  color: hsl(210,100%,85%) !important;
  box-sizing: border-box;
}

#main {
  border-color: hsla(210,100%,85%,0.7);
  border-style: dotted;
}

#main > .border {





<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: 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>





      </tr>
      <tr>
        <td id="tableCell2" style="overflow: hidden"><div style="margin-top: 5px; margin-left: 7px; width: 100px; height: 100px; background-color: SkyBlue">2</div></td>
      </tr>
      <tr>
        <td id="tableCell3" style="overflow: hidden"><div style="display: inline-block; margin-right: 8px; margin-bottom: 10px; width: 100px; height: 100px; background-color: Khaki">3</div></td>
      </tr>
      <tr>
        <td id="tableCell4" style="overflow: hidden"><div style="display: inline-block; margin-right: 3px; margin-left: 1px; box-sizing: border-box; width: 100px; height: 100px; border-left: 6px solid black; border-bottom: 2px solid black; background-color: LightCoral">4</div></td>
      </tr>
      <tr>
        <td id="tableCell5" style="overflow: hidden"><div style="display: inline-block; border-right: 9px solid black; width: 100px; height: 100px; background-color: LightSeaGreen">5</div></td>
      </tr>
      <tr>
        <td id="tableCell6" style="overflow: hidden"><div style="box-sizing: border-box; width: 100px; height: 100px; padding-top: 3px; padding-right: 13px; background-color: Orange">6</div></td>
      </tr>
      <tr>
        <td id="tableCell7" style="overflow: hidden"><div style="display: inline-block; margin-right: 11px; margin-left: 4px; box-sizing: border-box; width: 100px; height: 100px; border-right: 6px solid black; border-bottom: 8px solid black; padding-top: 5px; padding-right: 9px; padding-bottom: 8px; padding-left: 7px; background-color: Silver">7</div></td>
      </tr>
      <tr>
        <td id="tableCell8" style="overflow: hidden"><div style="display: inline-block; margin-top: 7px; margin-bottom: 1px; border-right: 6px solid black; border-bottom: 8px solid black; padding-top: 5px; padding-right: 9px; padding-bottom: 8px; padding-left: 7px; width: 100px; height: 100px; background-color: Turquoise">8</div></td>
      </tr>
    </tbody>
  </table>
  <div id="status" style="display: none"></div>
</div>

(-)a/dom/tests/mochitest/general/test_offsets.css (-1 / +1 lines)

Line	Link Here

Lines 1-3	Link Here

  button, vbox, menu, menuitem, menupopup  {

  button, vbox, menu, menuitem, menupopup  {

    -moz-box-sizing: content-box;

    box-sizing: content-box;





<head>
  <title>HTML Tests for offset/client/scroll properties</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="test_offsets.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">

<style>
  input {
    box-sizing: content-box;
  }
</style>
</head>
<body id="body" onload="setTimeout(testElements, 0, 'testelements', SimpleTest.finish);"
      style="margin: 1px; border: 2px solid black; padding: 4px;">

<div id="testelements" style="margin: 0; border: 0; padding: 0;">
  <div id="div1" style="margin: 0; margin-left: 6px; margin-top: 2px; border: 1px solid green; padding: 6px; width: 50px; height: 20px"





  // this case GetAbsoluteCoord(styleWidth, w) will always succeed, so
  // we'll never need the intrinsic dimensions.
  if (styleWidth.GetUnit() == eStyleUnit_Enumerated &&
      (styleWidth.GetIntValue() == NS_STYLE_WIDTH_MAX_CONTENT ||
       styleWidth.GetIntValue() == NS_STYLE_WIDTH_MIN_CONTENT)) {
    // -moz-fit-content and -moz-available enumerated widths compute intrinsic
    // widths just like auto.
    // For -moz-max-content and -moz-min-content, we handle them like
    // specified widths, but ignore box-sizing.
    boxSizing = NS_STYLE_BOX_SIZING_CONTENT;
  } else if (!styleWidth.ConvertsToLength() &&
             !(haveFixedMinWidth && haveFixedMaxWidth && maxw <= minw)) {
#ifdef DEBUG_INTRINSIC_WIDTH
    ++gNoiseIndent;
#endif
    if (aType == MIN_WIDTH)
      result = aFrame->GetMinWidth(aRenderingContext);





   * on aContentEdgeToBoxSizing and aBoxSizingToMarginEdge (which are
   * also used for the enumerated values for width.  This function does
   * not handle 'auto'.  It ensures that the result is nonnegative.
   *
   * @param aRenderingContext Rendering context for font measurement/metrics.
   * @param aFrame Frame whose (min-/max-/)width is being computed
   * @param aContainingBlockWidth Width of aFrame's containing block.
   * @param aContentEdgeToBoxSizing The sum of any left/right padding and
   *          border that goes inside the rect chosen by box-sizing.
   * @param aBoxSizingToMarginEdge The sum of any left/right padding, border,
   *          and margin that goes outside the rect chosen by box-sizing.
   * @param aCoord The width value to compute.
   */
  static nscoord ComputeWidthValue(
                   nsRenderingContext* aRenderingContext,
                   nsIFrame*            aFrame,
                   nscoord              aContainingBlockWidth,
                   nscoord              aContentEdgeToBoxSizing,
                   nscoord              aBoxSizingToMarginEdge,






  table {
    margin: auto;
  }

  table.box {
    border-collapse: collapse;
	border: 2px solid black;
	box-sizing: border-box;
	width:98%;
	height:96%;
  }

  row {
    border: 2px solid black;
  }
  row.title {





  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<div id="content" style="display: none">
</div>

<textarea id="textarea" style="-moz-appearance: none; border: 2px solid black; padding: 3px; box-sizing: border-box; min-width: 15px; min-height: 15px;">Text</textarea>

<pre id="test">
<script type="application/javascript">

/** Test for textbox resizing **/
SimpleTest.waitForExplicitFinish();
addLoadEvent(function() SimpleTest.executeSoon(doTheTest));


(-)a/layout/generic/crashtests/730559.html (-1 / +1 lines)

Line	Link Here

Line 1	Link Here

<!DOCTYPE html><html style="height: 6523790304542em; width: 6207636626031em; -moz-box-sizing: border-box; border-style: dotted; -moz-column-width: 20px;"></html>

<!DOCTYPE html><html style="height: 6523790304542em; width: 6207636626031em; box-sizing: border-box; border-style: dotted; -moz-column-width: 20px;"></html>





      .wrapper {
                background-color: rgb(255, 0, 155); max-width: 910px;
                border: 1px solid green;
               }

      .column {
        width: 73%;
        padding: 20px 60px 20px 40px;
        box-sizing: border-box;
        background-color: rgb(0, 95, 255);
      }

      .img {
        float: left;
        width: 261px;
        height: 150px;
        background-color: rgb(88, 20, 100);





      success = (aIntrinsicSize != nsSize(0, 0));
    }
  }
  return success;
}

/**
 * aInsideBoxSizing returns the part of the horizontal padding, border,
 * and margin that goes inside the edge given by box-sizing;
 * aOutsideBoxSizing returns the rest.
 */
void
nsHTMLReflowState::CalculateHorizBorderPaddingMargin(
                       nscoord aContainingBlockWidth,
                       nscoord* aInsideBoxSizing,
                       nscoord* aOutsideBoxSizing)
{


  if (aFrameType == nsGkAtoms::tableFrame) {
    nsTableFrame *tableFrame = static_cast<nsTableFrame*>(frame);

    if (tableFrame->IsBorderCollapse()) {
      // border-collapsed tables don't use any of their padding, and
      // only part of their border.  We need to do this here before we
      // try to do anything like handling 'auto' widths,
      // 'box-sizing', or 'auto' margins.
      ComputedPhysicalPadding().SizeTo(0,0,0,0);
      ComputedPhysicalBorderPadding() = tableFrame->GetIncludedOuterBCBorder();
    }

    // The margin is inherited to the outer table frame via
    // the ::-moz-table-outer rule in ua.css.
    ComputedPhysicalMargin().SizeTo(0, 0, 0, 0);
  } else if (aFrameType == nsGkAtoms::scrollbarFrame) {





<!doctype html>
<html><head>
<title>border-image: repeat with zero-height top and bottom</title>
<style>
span {
  display: inline-block;
  margin: 10px;
  box-sizing: border-box;
  height: 24px;
  border-style: solid;
  border-color: transparent;
  border-width: 0 6px;
  border-image: url("roundrectbutton.png") 0 6 repeat stretch;
}
</style>
</head><body>





<!doctype html>
<html><head>
<title>border-image: repeat with zero-height top and bottom</title>
<style>
span {
  display: inline-block;
  margin: 10px;
  box-sizing: border-box;
  height: 24px;
  border-style: solid;
  border-color: transparent;
  border-width: 0 6px;
  border-image: url("roundrectbutton.png") 0 6 repeat;
}
</style>
</head><body>





<!doctype html>
<html><head>
<title>border-image: repeat with zero-width left and right</title>
<style>
span {
  display: inline-block;
  margin: 5px;
  box-sizing: border-box;
  width: 13px;
  border-style: solid;
  border-color: transparent;
  border-width: 10px 0;
  border-image: url("roundrectbutton.png") 10 0 stretch repeat;
}
</style>
</head><body>





<!doctype html>
<html><head>
<title>border-image: repeat with zero-width left and right</title>
<style>
span {
  display: inline-block;
  margin: 5px;
  box-sizing: border-box;
  width: 13px;
  border-style: solid;
  border-color: transparent;
  border-width: 10px 0;
  border-image: url("roundrectbutton.png") 10 0 repeat;
}
</style>
</head><body>

(-)a/layout/reftests/border-radius/border-reduce-height-ref.html (-2 / +1 lines)

Line	Link Here

Lines 1-13	Link Here

<html>

<html>

  <head>

  <head>

    <style>

    <style>

      div { -moz-box-sizing: border-box;

      div { box-sizing: border-box;

            box-sizing: border-box;

            width: 60px;

            width: 60px;

            height: 20px;

            height: 20px;

            border: 2px solid black;

            border: 2px solid black;

            background: green;

            background: green;

            position: absolute;

            position: absolute;

            top: 12px;

            top: 12px;

            left: 12px;

            left: 12px;

            border-radius: 4px 16px 4px 16px;

            border-radius: 4px 16px 4px 16px;

(-)a/layout/reftests/border-radius/border-reduce-height.html (-2 / +1 lines)

Line	Link Here

Lines 1-13	Link Here

<html>

<html>

  <head>

  <head>

    <style>

    <style>

      div { -moz-box-sizing: border-box;

      div { box-sizing: border-box;

            box-sizing: border-box;

            width: 60px;

            width: 60px;

            height: 20px;

            height: 20px;

            border: 2px solid black;

            border: 2px solid black;

            background: green;

            background: green;

            position: absolute;

            position: absolute;

            top: 12px;

            top: 12px;

            left: 12px;

            left: 12px;

            border-radius: 5px 20px 5px 20px;

            border-radius: 5px 20px 5px 20px;

(-)a/layout/reftests/border-radius/curved-stripe-border.html (-1 / +1 lines)

Line	Link Here

Lines 1-15	Link Here

<!doctype html>

<!doctype html>

<html><head>

<html><head>

<title>Curved stripe border (HTML)</title>

<title>Curved stripe border (HTML)</title>

<style>

<style>

body { margin: 0 }

body { margin: 0 }

div {

div {

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  width: 180px;

  width: 180px;

  height: 180px;

  height: 180px;

  border: 30px double black;

  border: 30px double black;

  border-radius: 60px / 40px;

  border-radius: 60px / 40px;

  margin: 20px;

  margin: 20px;

</style>

</style>

</head><body>

</head><body>





<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>test of box-sizing</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <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; }


  </style>
</head>
<body>

<table><tr>

<td id="bscontent"><div>

<!-- box-sizing: content-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: 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>
<div style="width: 30px">A B</div>






<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>test of box-sizing</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <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; }

    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;
      margin-right: 32px;

  </style>
</head>
<body>

<table><tr>

<td id="bscontent"><div>

<!-- box-sizing: content-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="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>
<div style="width: 60%">A B</div>


(-)a/layout/reftests/box-properties/box-sizing-2-ref.html (-4 / +4 lines)

Line	Link Here

Lines 1-12	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<html lang="en-US">

<html lang="en-US">

<head>

<head>

  <title>test of -moz-box-sizing</title>

  <title>test of box-sizing</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta http-equiv="Content-Style-Type" content="text/css">

  <meta http-equiv="Content-Style-Type" content="text/css">

  <style type="text/css">

  <style type="text/css">

    body { font-size: 10px; line-height: 1; }

    body { font-size: 10px; line-height: 1; }

    table { border-spacing: 0; margin: 0; }

    table { border-spacing: 0; margin: 0; }

    td { border: 1px solid; padding: 1px solid; }

    td { border: 1px solid; padding: 1px solid; }

Lines 24-62	Link Here

  </style>

  </style>

</head>

</head>

<body>

<body>

<table><tr>

<table><tr>

<td id="bscontent">

<td id="bscontent">

<!-- -moz-box-sizing: content-box -->

<!-- box-sizing: content-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 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<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>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>

<table><tr><td><div style="width: 150px">A B</div></td></tr></table>

</td>

</td>

<td id="bspadding">

<td id="bspadding">

<!-- -moz-box-sizing: padding-box -->

<!-- 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 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<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>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>

<table><tr><td><div style="width: 138px">A B</div></td></tr></table>

</td>

</td>

<td id="bsborder">

<td id="bsborder">

<!-- -moz-box-sizing: border-box -->

<!-- box-sizing: border-box -->

<table><tr><td><div>A B</div></td></tr></table>

<table><tr><td><div>A B</div></td></tr></table>

<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<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>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>

<table><tr><td><div style="width: 120px">A B</div></td></tr></table>

</td>

</td>





<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>test of box-sizing</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <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;
      margin-right: 32px;

  </style>
</head>
<body>

<table><tr>

<td id="bscontent">

<!-- box-sizing: content-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="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>

</td>





<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>test of box-sizing</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <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 > 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;
      margin-right: 32%;

  </style>
</head>
<body>

<table><tr>

<td id="bscontent"><div>

<!-- box-sizing: content-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="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>
<div style="width: 60%">A B</div>






<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>test of box-sizing</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <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 100px; }
    td { border: 1px solid; padding: 1px solid; }


  </style>
</head>
<body>

<table><tr>

<td id="bscontent"><div>

<!-- box-sizing: content-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: 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>
<div style="width: 30px">A B</div>






<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>test of box-sizing</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <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 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;
      margin-right: 32px;

  </style>
</head>
<body>

<table><tr>

<td id="bscontent"><div>

<!-- box-sizing: content-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="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>
<div style="width: 60%">A B</div>






        }
        
	.min { min-height:37px; }
	.max { max-height:37px; }
	.hidden { overflow:hidden;  }

        .box {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        .test1 {
            border:1px solid black;
        }

        .test2 {
            padding:3px;





        }
        
	.min { min-width:100px; }
	.max { max-width:100px; }
	.hidden { overflow:hidden; }

        .box {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        .test1 {
            border:10px solid black;
        }

        .test2 {
            padding:10px;





hbox {
  display:-moz-box;
  border-top:3px solid;
  border-bottom:2px solid;
  padding-bottom:4px;
  background:lime;

  box-sizing:content-box;
  -moz-box-sizing:content-box;
}

.cb {
  background:pink;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
}

.pb {
  background:cyan;
}

    </style>
</head>






hbox {
  display:-moz-box;
  border-top:3px solid;
  border-bottom:2px solid;
  padding-bottom:4px;
  height:auto;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  background:lime;
}

.cb {
  box-sizing:content-box;
  -moz-box-sizing:content-box;
  background:pink;
}

.pb {
  box-sizing:padding-box;
  -moz-box-sizing:padding-box;
  background:cyan;
}

    </style>
</head>
<body>







      margin-bottom: 1px;
    }

    div.v1 { width: -moz-max-content; }
    div.v2 { width: -moz-min-content; }
    div.v3 { width: -moz-fit-content; }
    div.v4 { width: -moz-available; }

    div.s1 { box-sizing: content; }
    div.s2 { box-sizing: padding; }
    div.s3 { box-sizing: border; }

  </style>
</head>
<body style="width: 100px">
<div class="v1 s1">A B</div>
<div class="v1 s2">A B</div>
<div class="v1 s3">A B</div>
<div class="v2 s1">A B</div>





      margin-bottom: 1px;
    }

    div.v1 { width: -moz-max-content; }
    div.v2 { width: -moz-min-content; }
    div.v3 { width: -moz-fit-content; }
    div.v4 { width: -moz-available; }

    div.s1 { box-sizing: content; }
    div.s2 { box-sizing: padding; }
    div.s3 { box-sizing: border; }

  </style>
</head>
<body style="width: 100px">
<div class="v1 s1">A B</div>
<div class="v1 s2">A B</div>
<div class="v1 s3">A B</div>
<div class="v2 s1">A B</div>





    img {
      display: block;
      margin-left: 1px;
      border-left: 2px solid;
      padding-left: 4px;
      padding-right: 8px;
      border-right: 16px solid;
      margin-right: 32px;
      box-sizing: content;
      margin-bottom: 1px;
    }

    img.v1 {  }
    img.v2 {  }
    img.v3 {  }
    img.v4 { width: 37px; }






      margin-bottom: 1px;
    }

    img.v1 { width: -moz-max-content; }
    img.v2 { width: -moz-min-content; }
    img.v3 { width: -moz-fit-content; }
    img.v4 { width: -moz-available; }

    img.s1 { box-sizing: content; }
    img.s2 { box-sizing: padding; }
    img.s3 { box-sizing: border; }

  </style>
</head>
<body style="width: 100px">
<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s1">
<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s2">
<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s3">
<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s1">






    img {
      margin-left: 1px;
      border-left: 2px solid;
      padding-left: 4px;
      padding-right: 8px;
      border-right: 16px solid;
      margin-right: 32px;
      box-sizing: content;
      margin-bottom: 1px;
    }

    img.v1 {  }
    img.v2 {  }
    img.v3 {  }
    img.v4 { width: 37px; }






      margin-bottom: 1px;
    }

    img.v1 { width: -moz-max-content; }
    img.v2 { width: -moz-min-content; }
    img.v3 { width: -moz-fit-content; }
    img.v4 { width: -moz-available; }

    img.s1 { box-sizing: content; }
    img.s2 { box-sizing: padding; }
    img.s3 { box-sizing: border; }

  </style>
</head>
<body style="width: 100px">
<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s1">
<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s2">
<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s3">
<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s1">





<p><button>2px Blur Radius</button>
<p><button>2px Blur Radius</button>
<p><button>2px Blur Radius</button>
<p><button>2px Blur Radius</button>
<p><button>2px Blur Radius</button>

<p><span>No Blur Radius</span>
<p><span>No Blur Radius</span>
<p><span style="box-sizing:border-box;">No Blur Radius</span>
<p><span>No Blur Radius</span>
<p><span>No Blur Radius</span>

<p><span>2px Blur Radius</span>
<p><span>2px Blur Radius</span>
<p><span style="box-sizing:border-box;">2px Blur Radius</span>
<p><span>2px Blur Radius</span>
<p><span>2px Blur Radius</span>

<p><fieldset>No Blur Radius</fieldset>
<p><fieldset><legend>No</legend> Blur Radius</fieldset>
<p><fieldset>No Blur Radius</fieldset>
<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset>
<p><fieldset>No Blur Radius</fieldset>
<p><fieldset>No Blur Radius</fieldset>

<p><fieldset>2px Blur Radius</fieldset>
<p><fieldset><legend>2px</legend> Blur Radius</fieldset>
<p><fieldset>2px Blur Radius</fieldset>
<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset>
<p><fieldset>2px Blur Radius</fieldset>
<p><fieldset>2px Blur Radius</fieldset>

<p><fieldset style="display:inline;">No Blur Radius</fieldset>
<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset>
<p><fieldset style="display:inline;">No Blur Radius</fieldset>
<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset>
<p><fieldset style="display:inline;">No Blur Radius</fieldset>
<p><fieldset style="display:inline;">No Blur Radius</fieldset>

<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset>
<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline;">2px Blur Radius</fieldset>

</div>
</body>
</html>





<p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button>
<p><button style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</button>
<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button>
<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button>
<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button>

<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span>
<p><span style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</span>
<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span>
<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span>
<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span>

<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span>
<p><span style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</span>
<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span>
<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span>
<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span>

<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</fieldset>
<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>

<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>

<p><fieldset style="display:inline; box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
<p><fieldset style="display:inline; box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
<p><fieldset style="display:inline; box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</fieldset>
<p><fieldset style="display:inline; box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
<p><fieldset style="display:inline; box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
<p><fieldset style="display:inline; box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>

<p><fieldset style="display:inline; box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline; box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
<p><fieldset style="display:inline; box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline; box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline; box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline; box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>

</div>
</body>
</html>





<p><button>2px Blur Radius</button>
<p><button>2px Blur Radius</button>
<p><button>2px Blur Radius</button>
<p><button>2px Blur Radius</button>

<!--  XXX TODO: SPAN does not work due to differences in anti-aliasing with the test
<p><span>No Blur Radius</span>
<p><span>No Blur Radius</span>
<p><span style="box-sizing:border-box;">No Blur Radius</span>
<p><span>No Blur Radius</span>
<p><span>No Blur Radius</span>

<p><span>2px Blur Radius</span>
<p><span>2px Blur Radius</span>
<p><span style="box-sizing:border-box;">2px Blur Radius</span>
<p><span>2px Blur Radius</span>
<p><span>2px Blur Radius</span>
-->

<p><fieldset>No Blur Radius</fieldset>
<p><fieldset><legend>No</legend> Blur Radius</fieldset>
<p><fieldset>No Blur Radius</fieldset>
<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset>
<p><fieldset>No Blur Radius</fieldset>
<p><fieldset>No Blur Radius</fieldset>

<p><fieldset>2px Blur Radius</fieldset>
<p><fieldset><legend>2px</legend> Blur Radius</fieldset>
<p><fieldset>2px Blur Radius</fieldset>
<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset>
<p><fieldset>2px Blur Radius</fieldset>
<p><fieldset>2px Blur Radius</fieldset>

<p><fieldset style="display:inline;">No Blur Radius</fieldset>
<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset>
<p><fieldset style="display:inline;">No Blur Radius</fieldset>
<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset>
<p><fieldset style="display:inline;">No Blur Radius</fieldset>
<p><fieldset style="display:inline;">No Blur Radius</fieldset>

<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset>
<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline;">2px Blur Radius</fieldset>

</div>
</body>
</html>





<p><button style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</button>
<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button>
<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button>
<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button>

<!--  XXX TODO: SPAN does not work due to differences in anti-aliasing with the reference
<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span>
<p><span style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</span>
<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span>
<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span>
<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span>

<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span>
<p><span style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</span>
<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span>
<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span>
<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span>
-->

<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</fieldset>
<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>

<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>

<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
<p><fieldset style="display:inline;box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</fieldset>
<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
<p><fieldset style="display:inline;box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
<p><fieldset style="display:inline;box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>

<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
<p><fieldset style="display:inline;box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline;box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
<p><fieldset style="display:inline;box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>

</div>


</body>
</html>





<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Bug 520992</title>

<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>





<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Bug 520992</title>

<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>


(-)a/layout/reftests/box-sizing/intrinsic-1a.html (-1 lines)

Line	Link Here

Lines 1-10	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<body>

<body>

  <div style="display: inline-block; background: blue">

  <div style="display: inline-block; background: blue">

    <img src="lime100x100.png"

    <img src="lime100x100.png"

         style="height: 200px; display: block; visibility: hidden;

         style="height: 200px; display: block; visibility: hidden;

                padding: 30px;

                padding: 30px;

                -moz-box-sizing: padding-box;

                box-sizing: padding-box;">

                box-sizing: padding-box;">

  </div>

  </div>

</body>

</body>

(-)a/layout/reftests/box-sizing/intrinsic-1b.html (-1 lines)

Line	Link Here

Lines 1-10	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<body>

<body>

  <div style="display: inline-block; background: blue; height: 200px">

  <div style="display: inline-block; background: blue; height: 200px">

    <img src="lime100x100.png"

    <img src="lime100x100.png"

         style="height: 200px; display: block; visibility: hidden;

         style="height: 200px; display: block; visibility: hidden;

                padding: 15% 30px;

                padding: 15% 30px;

                -moz-box-sizing: padding-box;

                box-sizing: padding-box;">

                box-sizing: padding-box;">

  </div>

  </div>

</body>

</body>

(-)a/layout/reftests/box-sizing/intrinsic-1c.html (-1 lines)

Line	Link Here

Lines 1-10	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<body>

<body>

  <div style="display: inline-block; background: blue">

  <div style="display: inline-block; background: blue">

    <img src="lime100x100.png"

    <img src="lime100x100.png"

         style="height: 200px; display: block; visibility: hidden;

         style="height: 200px; display: block; visibility: hidden;

                padding: 30px; border: 20px solid;

                padding: 30px; border: 20px solid;

                -moz-box-sizing: border-box;

                box-sizing: border-box;">

                box-sizing: border-box;">

  </div>

  </div>

</body>

</body>

(-)a/layout/reftests/box-sizing/intrinsic-1d.html (-1 lines)

Line	Link Here

Lines 1-10	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<body>

<body>

  <div style="display: inline-block; background: blue; height: 200px">

  <div style="display: inline-block; background: blue; height: 200px">

    <img src="lime100x100.png"

    <img src="lime100x100.png"

         style="height: 200px; display: block; visibility: hidden;

         style="height: 200px; display: block; visibility: hidden;

                padding: calc(15%) 30px;

                padding: calc(15%) 30px;

                -moz-box-sizing: padding-box;

                box-sizing: padding-box;">

                box-sizing: padding-box;">

  </div>

  </div>

</body>

</body>

(-)a/layout/reftests/box-sizing/intrinsic-1e.html (-1 lines)

Line	Link Here

Lines 1-10	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<body>

<body>

  <div style="display: inline-block; background: blue; height: 200px">

  <div style="display: inline-block; background: blue; height: 200px">

    <img src="lime100x100.png"

    <img src="lime100x100.png"

         style="height: 200px; display: block; visibility: hidden;

         style="height: 200px; display: block; visibility: hidden;

                padding: calc(10% + 10px) 30px;

                padding: calc(10% + 10px) 30px;

                -moz-box-sizing: padding-box;

                box-sizing: padding-box;">

                box-sizing: padding-box;">

  </div>

  </div>

</body>

</body>

(-)a/layout/reftests/box-sizing/intrinsic-1f.html (-1 lines)

Line	Link Here

Lines 1-10	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<body>

<body>

  <div style="display: inline-block; background: blue">

  <div style="display: inline-block; background: blue">

    <img src="lime100x100.png"

    <img src="lime100x100.png"

         style="height: 200px; display: block; visibility: hidden;

         style="height: 200px; display: block; visibility: hidden;

                padding: calc(30px);

                padding: calc(30px);

                -moz-box-sizing: padding-box;

                box-sizing: padding-box;">

                box-sizing: padding-box;">

  </div>

  </div>

</body>

</body>

(-)a/layout/reftests/bugs/130767-1-ref.html (-1 / +1 lines)

Line	Link Here

Lines 1-9	Link Here

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<html>

<head>

<head>

  <title>Bug 130767 Reference</title>

  <title>Bug 130767 Reference</title>

</head>

</head>

<body style="padding: 2%">

<body style="padding: 2%">

<table style="background-color: blue; height: 3em; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%;"><tr><td>&nbsp;</td></tr></table>

<table style="background-color: blue; height: 3em; box-sizing: border-box; width: 100%;"><tr><td>&nbsp;</td></tr></table>

</body>

</body>

</html>

</html>

(-)a/layout/reftests/bugs/363858-5-ref.html (-1 / +1 lines)

Line	Link Here

Lines 1-13	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<html>

<html>

<head>

<head>

<style>

<style>

select { width: 100%; -moz-box-sizing: border-box }

select { width: 100%; box-sizing: border-box }

</style>

</style>

</head>

</head>

<body>

<body>

<div>

<div>

<select>

<select>

  <option>This is option one</option>

  <option>This is option one</option>

</select>

</select>

</div>

</div>

(-)a/layout/reftests/bugs/363858-6-ref.html (-1 / +1 lines)

Line	Link Here

Lines 1-13	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<html>

<html>

<head>

<head>

<style>

<style>

select { width: 100%; -moz-box-sizing: border-box }

select { width: 100%; box-sizing: border-box }

* { -moz-appearance: none; }

* { -moz-appearance: none; }

</style>

</style>

</head>

</head>

<body>

<body>

<div>

<div>

<select>

<select>

  <option>This is option one</option>

  <option>This is option one</option>

</select>

</select>





      border: 2pt silver solid;
      border-top: none;
      border-bottom: solid 10px blue;
    }
    #following {
      position: absolute;
      top: 0; left: 0;
      margin: 0;
      box-sizing: border-box;
      width: 100pt;
      height: 72pt;
      background: white;
      border: 2pt black;
      border-style: none solid;

      font-size: 10pt;
      line-height: 10pt;





table {
  border-collapse: collapse;
  background-color: red;
}
td, th {
  background-color: lime;
  width:100px;
  height:100px;
  box-sizing:border-box;
}
td {
  border-top: 4px solid lime;
}
</style>
</head>
<body>
<table cellpadding="0">





  border-collapse: collapse;
  background-color: red;
}
td, th {
  background-color: lime;
  width:100px;
  height:100px;
  border:4px solid lime;
  box-sizing:border-box;
}
td {
  border-top:hidden;
}
</style>
</head>
<body>
<table cellpadding="0">





<style type="text/css">
textarea {
    float: left;
    height: 40px;
    width: 50px;
    min-height: 50px;
    border: 1px solid #aaa;
    padding: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style>
</head>
<body><textarea></textarea>
</body>
</html>





<style type="text/css">
textarea {
    float: left;
    height: 70px;
    width: 50px;
    max-height: 50px;
    border: 1px solid #aaa;
    padding: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style>
</head>
<body><textarea></textarea>
</body>
</html>





<style type="text/css">
textarea {
    float: left;
    width: 40px;
    height: 50px;
    min-width: 50px;
    border: 1px solid #aaa;
    padding: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style>
</head>
<body><textarea></textarea>
</body>
</html>





<style type="text/css">
textarea {
    float: left;
    width: 70px;
    height: 50px;
    max-width: 50px;
    border: 1px solid #aaa;
    padding: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style>
</head>
<body><textarea></textarea>
</body>
</html>





                overflow:hidden;
                height:3em;
                padding:1px;
                vertical-align:top;
                background:lime;
                width:36px;
            }
            .bb * {
                box-sizing: border-box;
            }
            .cb * {
                box-sizing: content-box;
            }
            td {
              max-width:14px;
            }
            .bc {
              border-collapse:collapse;
            }
            .it {





                overflow:auto;
                height:3em;
                padding:1px;
                vertical-align:top;
                background:lime;
                width:36px;
            }
            .bb * {
                box-sizing: border-box;
            }
            .cb * {
                box-sizing: content-box;
            }
            td {
              max-width:14px;
            }
            .bc {
              border-collapse:collapse;
            }
            .it {





      .table {
        display: table;
        width: 100px;
        table-layout: fixed;
        margin-bottom: 2px;
      }

      .table > * {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: table-cell;
        height: 30px;
      }

      .withBorder  { border: 2px solid black; }

      .thin { width: 25px; }





      .table {
        display: table;
        width: 100px;
        table-layout: fixed;
        margin-bottom: 2px;
      }

      .table > * {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: table-cell;
        height: 30px;
      }

      .withPadding { padding: 10px; }
      .withBorder  { border: 2px solid black; }






<!DOCTYPE html>
<style>
  p, span { margin: 0; padding: 0; line-height: 150%; }
  #wrapper { width: 10em; }
  span {
    display: inline-block;
    width: 3em;
    text-align: end;
    box-sizing: border-box;
  }
  .def span { -moz-padding-end: 0.5em; }
  .fix span { -moz-padding-end: 1em; }
</style>
<div id="wrapper">
  <p class="def">
    <span>1.</span>foo<br>
    <span>2.</span>bar





      }

      button.multilinebutton {
        font: 20px sans-serif;
        color: black;
        padding: 0;
        height: 50px;
        width: 20px;
        box-sizing: content-box;
      }

      .lime   { background: lime;   }
      .orange { background: orange; }
      .pink   { background: pink;   }
      .aqua   { background: aqua;   }
      .violet { background: violet; }
      .tan    { background: tan;    }





  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
  <meta charset="utf-8">
  <style>
    .container {
      display: flex;
      width: 110px;
      height: 30px;
      border: 5px solid black;
      box-sizing: border-box;
    }
    .itemA {
      flex: 1 28px;
      background: purple;
      border: 1px solid indigo;
    }
    .itemB {
      flex: 1 48px;





  <meta charset="utf-8">
  <style>
    .container {
      display: flex;
      flex-direction: column;
      width: 30px;
      height: 110px;
      border: 5px solid black;
      box-sizing: border-box;
    }
    .itemA {
      flex: 1 28px;
      background: purple;
      border: 1px solid indigo;
    }
    .itemB {
      flex: 1 48px;





      display: flex;
      width: 100px;
      height: 30px;
      border: 1px solid black;
      float: left;
      margin: 2px;
    }
    .container > * {
      box-sizing: border-box;
    }
    .itemA {
      width: 30px;
      background: purple;
      border: 4px solid indigo;
    }
    .itemB {
      width: 50px;





      display: flex;
      width: 100px;
      height: 30px;
      border: 1px solid black;
      float: left;
      margin: 2px;
    }
    .container > * {
      box-sizing: border-box;
    }
    .itemA {
      flex-basis: 30px;
      background: purple;
      border: 4px solid indigo;
    }
    .itemB {
      flex-basis: 50px;





      flex-direction: column;
      width: 30px;
      height: 100px;
      border: 1px solid black;
      float: left;
      margin: 2px;
    }
    .container > * {
      box-sizing: border-box;
    }
    .itemA {
      height: 30px;
      background: purple;
      border: 4px solid indigo;
    }
    .itemB {
      height: 50px;





      flex-direction: column;
      width: 30px;
      height: 100px;
      border: 1px solid black;
      float: left;
      margin: 2px;
    }
    .container > * {
      box-sizing: border-box;
    }
    .itemA {
      flex-basis: 30px;
      background: purple;
      border: 4px solid indigo;
    }
    .itemB {
      flex-basis: 50px;

(-)a/layout/reftests/forms/button/max-height-ref.html (-1 lines)

Line	Link Here

Lines 1-12	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<style>

<style>

  button {

  button {

    height: 50px;

    height: 50px;

    padding: 23px;

    padding: 23px;

    border: 1px solid black;

    border: 1px solid black;

    box-sizing: border-box;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    overflow: hidden;

    overflow: hidden;

</style>

</style>

<button>Some text</button>

<button>Some text</button>

(-)a/layout/reftests/forms/button/max-height.html (-1 lines)

Line	Link Here

Lines 1-12	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<style>

<style>

  button {

  button {

    max-height: 50px;

    max-height: 50px;

    padding: 23px;

    padding: 23px;

    border: 1px solid black;

    border: 1px solid black;

    box-sizing: border-box;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    overflow: hidden;

    overflow: hidden;

</style>

</style>

<button>Some text</button>

<button>Some text</button>

(-)a/layout/reftests/forms/input/color/reference-style.css (-1 / +1 lines)

Line	Link Here

Lines 1-15	Link Here

div.input-color-swatch {

div.input-color-swatch {

  /* This should match the styling for ::-moz-color-swatch in forms.css. */

  /* This should match the styling for ::-moz-color-swatch in forms.css. */

  width: 100%;

  width: 100%;

  height: 100%;

  height: 100%;

  min-width: 3px;

  min-width: 3px;

  min-height: 3px;

  min-height: 3px;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  border: 1px solid grey;

  border: 1px solid grey;

  display: block;

  display: block;

  background-color:#000000; /* default color for input type color */

  background-color:#000000; /* default color for input type color */

button.input-color {

button.input-color {

  width: 64px;

  width: 64px;

  height: 23px;

  height: 23px;

(-)a/layout/reftests/forms/meter/max-height-ref.html (-1 lines)

Line	Link Here

Lines 1-12	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<style>

<style>

  meter {

  meter {

    height: 50px;

    height: 50px;

    padding: 23px;

    padding: 23px;

    border: 1px solid black;

    border: 1px solid black;

    box-sizing: border-box;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    overflow: hidden;

    overflow: hidden;

</style>

</style>

<meter>Some text</meter>

<meter>Some text</meter>

(-)a/layout/reftests/forms/meter/max-height.html (-1 lines)

Line	Link Here

Lines 1-12	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<style>

<style>

  meter {

  meter {

    max-height: 50px;

    max-height: 50px;

    padding: 23px;

    padding: 23px;

    border: 1px solid black;

    border: 1px solid black;

    box-sizing: border-box;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    overflow: hidden;

    overflow: hidden;

</style>

</style>

<meter>Some text</meter>

<meter>Some text</meter>

(-)a/layout/reftests/forms/progress/max-height-ref.html (-1 lines)

Line	Link Here

Lines 1-12	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<style>

<style>

  progress {

  progress {

    height: 50px;

    height: 50px;

    padding: 23px;

    padding: 23px;

    border: 1px solid black;

    border: 1px solid black;

    box-sizing: border-box;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    overflow: hidden;

    overflow: hidden;

</style>

</style>

<progress>Some text</progress>

<progress>Some text</progress>

(-)a/layout/reftests/forms/progress/max-height.html (-1 lines)

Line	Link Here

Lines 1-12	Link Here

<!DOCTYPE html>

<!DOCTYPE html>

<style>

<style>

  progress {

  progress {

    max-height: 50px;

    max-height: 50px;

    padding: 23px;

    padding: 23px;

    border: 1px solid black;

    border: 1px solid black;

    box-sizing: border-box;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    overflow: hidden;

    overflow: hidden;

</style>

</style>

<progress>Some text</progress>

<progress>Some text</progress>





  -moz-appearance: progresschunk;
  height: 100%;
  /*
   * We can't apply the following style to the reference because it will have
   * underisable effectes:
   * width: 100%;
   */

  box-sizing: border-box;

  /* Default style in case of there is -moz-appearance: none; */
  background-color: #0064b4;
}

progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
  -moz-appearance: none;
}





{
    vertical-align:top;
    empty-cells:show;
    border-collapse:collapse;
}

td
{
    box-sizing: border-box;
    border: solid 1px black;
}
</style>
<table>
	<tr>
		<td>Test wrapping</td>
	</tr>
</table>





		width: 100%;
		height: 100%;
        -moz-backface-visibility: hidden;
        background: red;
	}
	.face.back {
		display: block;
		-moz-transform: rotateY(180deg);
		box-sizing: border-box;
		padding: 10px;
		color: white;
		text-align: center;
		background: green;
	}
	</style>
	
	<div id="container" class="hover">





		width: 100%;
		height: 100%;
        -moz-backface-visibility: hidden;
        background: red;
	}
	.face.back {
		display: block;
		-moz-transform: rotateY(180deg);
		box-sizing: border-box;
		padding: 10px;
		color: white;
		text-align: center;
		background: green;
	}
	</style>
	
	<div id="container" class="hover">





<!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 - Border-Box with specified width</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: border-box should make the element's (percentage) width be the distance from the left border edge to the right border 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: border-box;
      width: 50%;
      z-index: 1;
      float: left;
      border: 5px solid black;
    }

    #one {
      background-color: green;





<!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 - Border-Box with specified width</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: border-box should make the element's (percentage) width be the distance from the left border edge to the right border 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: border-box;
      width: 50%;
      z-index: 1;
      float: left;
      border: 5px solid black;
      padding: 0px 10px;
    }

    #one {





<!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 - Border-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: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border 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: border-box;
      width: 50%;
      height: 100%;
      z-index: 1;
      float: left;
      border: 5px solid black;
      padding: 25px 10px;
    }






<!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 - Border-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: border-box should make the element's (length) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border 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: border-box;
      min-width: 250px;
      max-width: 350px;
      min-height: 70px;
      max-height: 90px;
      z-index: 1;
      float: left;
      border: 5px solid black;
    }





<!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 - Content-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: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
  <style type="text/css"><![CDATA[
    .container {
      width: 300px;
      height: 110px;
      border: 2px solid black;
      position: absolute;
      left: 25px;
      top: 25px;
      background-color: red;
    }

    .box-sized {
      box-sizing: content-box;
      width: 50%;
      height: 100%;
      z-index: 1;
      float: left;
    }

    #one {
      background-color: green;





<!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 - Content-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: content-box should make the element's (calc) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
  <style type="text/css"><![CDATA[
    .container {
      width: 300px;
      height: 100px;
      border: 2px solid black;
      position: absolute;
      left: 25px;
      top: 25px;
      background-color: red;
    }

    .box-sized {
      box-sizing: content-box;
      width: calc(50% - 10px);
      height: calc(100% - 10px);
      z-index: 1;
      float: left;
      padding: 5px 5px;
    }

    #one {





<!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 - Content-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: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
  <style type="text/css"><![CDATA[
    .container {
      min-width: 500px;
      max-width: 700px;
      height: 90px;
      border: 2px solid black;
      position: absolute;
      left: 25px;
      top: 25px;
      background-color: red;
    }

    .box-sized {
      box-sizing: content-box;
      width: 50%;
      height: 100%;
      z-index: 1;
      float: left;
    }

    #one {
      background-color: green;





<!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;





<!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 {





<!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;
    }





        display: inline-block;
        background-color: white;
        padding: 0px 0px;
        margin: 0px 0px;
      }

      .with-padding {
        padding: 5px 5px;
        box-sizing: padding-box;
      }

      #img1 {
        min-width:   70px;
        max-width:  115px;
        min-height:  55px;
        max-height: 130px;
      }





        background-color: white;
        padding: 0px 0px;
        margin: 0px 0px;
      }

      .with-borderpadding {
        padding: 5px 5px;
        border: 5px solid blue;
        box-sizing: border-box;
      }

      #img1 {
        min-width:   80px;
        max-width:  125px;
        min-height:  65px;
        max-height: 140px;
      }





      p {
        display: inline-block;
        background-color: white;
        padding: 0px 0px;
        margin: 0px 0px;
      }

      .content-box {
        box-sizing: content-box;
      }

      #img1 {
        min-width:   60px;
        max-width:  125px;
        min-height:  45px;
        max-height: 120px;
      }





   * they need some UA !important rule to test.  If this changes, use a
   * different one there.
   */
  line-height: normal !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  text-align: start; 
  cursor: default;
  box-sizing: border-box;
  -moz-user-select: none;
  -moz-appearance: menulist;
  border-width: 2px;
  border-style: inset;
  text-indent: 0;
  overflow: -moz-hidden-unscrollable;
  text-shadow: none;
  /* No text-decoration reaching inside, by default */

  position: static !important;
  background-image: url("arrow.gif") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  -moz-appearance: menulist-button;

  /* Make sure to size correctly if the combobox has a non-auto height. */
  height: 100% ! important;
  box-sizing: border-box ! important;

  /*
    Make sure to align properly with the display frame.  Note that we
    want the baseline of the combobox to match the baseline of the
    display frame, so the dropmarker is what gets the vertical-align.
  */
  vertical-align: top !important;
}

  -moz-padding-start: 4px;
  -moz-padding-end: 0;
  color: inherit;
  white-space: nowrap;
  text-align: inherit;
  -moz-user-select: none;
  /* Make sure to size correctly if the combobox has a non-auto height. */
  height: 100% ! important;
  box-sizing: border-box ! important;
}

option {
  display: block;
  float: none !important;
  position: static !important;
  min-height: 1em;
  line-height: normal !important;

/* colored part of the color selector button */
input[type="color"]:-moz-system-metric(color-picker-available)::-moz-color-swatch {
  width: 100%;
  height: 100%;
  min-width: 3px;
  min-height: 3px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border: 1px solid grey;
  display: block;
}

/* Try to make RTL <input type='file'> look nicer. */
/* TODO: use text-align: match-parent when bug 645642 is fixed. */
input[type="file"]:-moz-dir(rtl) > xul|label {
  -moz-padding-start: 0px;


/* NOTE: The width, height, border-width, and padding here must all
   add up the way nsFormControlFrame::GetIntrinsic(Width|Height)
   expects them to, or they will not come out with total width equal
   to total height on sites that set their 'width' or 'height' to 'auto'.
   (Should we maybe set !important on width and height, then?)  */
input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  cursor: default;
  padding: 0 !important;
  -moz-binding: none;
  /* same colors as |input| rule, but |!important| this time. */
  background-color: -moz-Field ! important;
  color: -moz-FieldText ! important;

  -moz-appearance: button;
  /* The sum of border-top, border-bottom, padding-top, padding-bottom
     must be the same here, for text inputs, and for <select>.  For
     buttons, make sure to include the -moz-focus-inner border/padding. */
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  background-color: ButtonFace;
  cursor: default;
  box-sizing: border-box;
  -moz-user-select: none;
  -moz-binding: none;
}

/* Text-related properties for buttons: these ones are not shared with
   input[type="color"] */
button,
input[type="reset"],

}

::-moz-progress-bar {
  /* Prevent styling that would change the type of frame we construct. */
  display: inline-block ! important;
  float: none ! important;
  position: static ! important;
  overflow: visible ! important;
  box-sizing: border-box ! important;

  -moz-appearance: progresschunk;
  height: 100%;
  width: 100%;

  /* Default style in case of there is -moz-appearance: none; */
  background-color: #0064b4; /* blue */
}






table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  margin-top: 0;
  margin-bottom: 0;
  /* XXXldb do we want this if we're border-collapse:collapse ? */
  box-sizing: border-box;
  text-indent: 0;
}

table[align="left"] {
  float: left;
}

table[align="right"] {

 */
hr {
  display: block;
  height: 2px;
  border: 1px inset;
  margin: 0.5em auto 0.5em auto;
  color: gray;
  -moz-float-edge: margin-box;
  box-sizing: border-box;
}

hr[size="1"] {
  border-style: solid none none none;
}

img:-moz-broken::before, input:-moz-broken::before,
img:-moz-user-disabled::before, input:-moz-user-disabled::before,

  /* we want to be an absolute and fixed container */
  -moz-transform: translate(0) !important;
}

video > .caption-box {
  position: relative;
  overflow: hidden;
  padding: 1.5%;
  box-sizing: border-box;
}

/* emulation of non-standard HTML <marquee> tag */
marquee {
  width: -moz-available;
  display: inline-block;
  vertical-align: text-bottom;
  text-align: start;

(-)a/layout/style/quirk.css (-1 / +1 lines)

Line	Link Here

Lines 214-228 img[align=right] {	Link Here

214

/*

214

/*

215

 * Quirk: Use border-box box sizing for text inputs, password inputs, and

215

 * Quirk: Use border-box box sizing for text inputs, password inputs, and

216

 * textareas.  (b=184478 on why we use content-box sizing in standards mode)

216

 * textareas.  (b=184478 on why we use content-box sizing in standards mode)

217

*/

217

*/

218

219

/* Note that all other <input>s already use border-box

219

/* Note that all other <input>s already use border-box

220

   sizing, so we're ok with this selector */

220

   sizing, so we're ok with this selector */

221

input:not([type=image]), textarea {

221

input:not([type=image]), textarea {

222

  -moz-box-sizing: border-box;

222

  box-sizing: border-box;

223

224

225

/* Quirk: give form margin for compat (b=41806) */

225

/* Quirk: give form margin for compat (b=41806) */

226

form{

226

form{

227

 margin-bottom: 1em;

227

 margin-bottom: 1em;

228





/* magic -- some of these rules are important to keep pages from overriding
            them
*/

/* Tables */

*|*::-moz-table {
  display: table !important;
  box-sizing: border-box; /* XXX do we really want this? */
}

*|*::-moz-inline-table {
  display: inline-table !important;
  box-sizing: border-box; /* XXX do we really want this? */
}

*|*::-moz-table-outer {
  display: inherit !important; /* table or inline-table */
  margin: inherit ! important;
  padding: 0 ! important;
  border: none ! important;
  float: inherit;

  background: black;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
}

/* If there is a full-screen element that is not the root then
   we should hide the viewport scrollbar. We exclude the chrome
   document to prevent reframing of contained plugins. */
:not(xul|*):root:-moz-full-screen-ancestor {
  overflow: hidden !important;
}





      src="image4x3.png" style="width: 40px; height: 30px;"/><html:img
      src="image4x3.png" style="width: 80px; height: 20px;"/><html:img
      src="image4x3.png" style="width: 10px; height: 70px;"/><html:img
      src="image4x3.png" style="width: 80px; height: 60px;"/><html:img
      src="image4x3.png" style="width: 80px; height: 60px;"/><html:img
      src="image4x3.png" style="width: 20px; height: 15px;"/><html:img
      src="image4x3.png" style="width: 20px; height: 15px;"/><html:img
      src="image4x3.png" style="width: 40px; height: 30px; border: 8px solid green;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 80px; height: 64px; border: 8px solid yellow;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 72px; height: 58px; border: 8px solid green;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 24px; height: 22px; border: 8px solid yellow;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 24px; height: 22px; border: 8px solid green;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 74px; height: 53px; border: solid yellow; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 4px; border-left-width: 8px;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 18px; height: 11px; border: solid green; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 4px; border-left-width: 8px;"/>
</html:div>

<html:div><html:img
      src="image4x3.png" style="width: 40px; height: 30px;"/><html:img
      src="image4x3.png" style="width: 80px; height: 20px;"/><html:img
      src="image4x3.png" style="width: 10px; height: 70px;"/><html:img
      src="image4x3.png" style="width: 80px; height: 60px;"/><html:img
      src="image4x3.png" style="height: 80px; height: 60px;"/><html:img
      src="image4x3.png" style="width: 20px; height: 15px;"/><html:img
      src="image4x3.png" style="width: 20px; height: 15px;"/><html:img
      src="image4x3.png" style="width: 60px; height: 25px;"/><html:img
      src="image4x3.png" style="width: 20px; height: 75px;"/><html:img
      src="image4x3.png" style="width: 80px; height: 64px; padding: 8px; box-sizing: border-box;"/><html:img
      src="image4x3.png" style="width: 72px; height: 58px; padding: 8px; box-sizing: border-box;"/><html:img
      src="image4x3.png" style="width: 24px; height: 22px; padding: 8px; box-sizing: border-box;"/><html:img
      src="image4x3.png" style="width: 24px; height: 22px; padding: 8px; box-sizing: border-box;"/><html:img
      src="image4x3.png" style="width: 67px; height: 60px; padding: 4px 2px 8px 1px; box-sizing: border-box;"/><html:img
      src="image4x3.png" style="width: 11px; height: 18px; padding: 4px 2px 8px 1px; box-sizing: border-box;"/>
</html:div>

<html:div><html:img
      src="image4x3.png" style="width: 20px; height: 15px;"/>
</html:div>

<html:div><html:img
      src="image4x3.png" style="width: 20px; height: 15px;"/>

      src="image4x3.png" style="width: 20px; height: 15px;"/>
</html:div>

<html:div><html:img
      src="image4x3.png" style="width 30px; height: 22.5px;"/>
</html:div>

<html:div><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 24px; height: 22px; border: 8px solid green;"/>
</html:div>

<html:div><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 24px; height: 22px; border: 8px solid green;"/>
</html:div>

<html:div><html:img
      src="image4x3.png" style="width: 40px; height: 30px;"/><html:img
      src="image4x3.png" style="width: 40px; height: 30px;"/><html:img
      src="image4x3.png" style="width: 40px; height: 30px;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 60px; height: 49px; border: 8px solid green;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 112px; height: 88px; border: 8px solid yellow;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 96px; height: 76px; border: 8px solid green;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 112px; height: 88px; border: 8px solid yellow;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 106px; height: 77px; border: solid yellow; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 4px; border-left-width: 8px;"/>
</html:div>

<html:div><html:img
      src="image4x3.png" style="width: 60px; height: 45px;"/><html:img
      src="image4x3.png" style="width: 120px; height: 90px;"/><html:img
      src="image4x3.png" style="width 60px; height: 45px;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 60px; height: 49px; padding: 8px;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 112px; height: 88px; padding: 8px;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 96px; height: 76px; padding: 8px;"/><html:img
      src="image4x3.png" style="box-sizing: border-box; width: 112px; height: 88px; padding: 8px;"/>
</html:div>

<html:div><html:div
      style="width: 20px; height: 15px;"/><html:div
      style="width: 80px; height: 60px;"/><html:div
      style="width: 40px; height: 30px;"/><html:div
      style="width: 10px; height: 8px;"/><html:div
      style="width: 10px; height: 8px;"/>
</html:div>
    
<html:div><html:div style="width: 20px; height: 15px;"/></html:div>

<html:div><html:div style="width: 20px; height: 15px;"/></html:div>

<html:div><html:div style="box-sizing: border-box; width: 24px; height: 22px; border: 8px solid green;"/></html:div>

<html:div><html:div style="box-sizing: border-box; width: 24px; height: 22px; border: 8px solid green;"/></html:div>

</window>





-->
<head>
  <title>Test for Bug 563416</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=563416">Mozilla Bug 563416</a>
<p id="display"><iframe id="test" src='data:text/html,<textarea style="box-sizing:content-box; -moz-appearance:none; height: 0px; padding: 0px;" cols="20" rows="10">hsldkjvmshlkkajskdlfksdjflskdjflskdjflskdjflskdjfddddddddd</textarea>'></iframe></p>
<div id="content" style="display: none">
  
</div>
<pre id="test">
<script type="application/javascript">

/** Test for Bug 563416 **/






  display: none;
}

setting {
  padding: 1em .67em;
  border-top: 2px solid;
  -moz-border-top-colors: #bac2ac #ffffff;
  -moz-box-align: center;
  box-sizing: border-box;
  width: 100%;
}

setting > vbox {
  -moz-box-flex: 1;
}

.preferences-title {





#filter-input:-moz-placeholder {
    color: rgba(255,255,255,0.5);
}

.toolbar input {
    display: inline-block;
    height: 100%;
    min-width: 3em;
    box-sizing: border-box;
    opacity: 0.75;
}

#new-pref-toggle-button {
    background-position: center center;
    background-image: url("chrome://browser/skin/images/reader-plus-icon-xhdpi.png");
    background-size: 48px 48px;
    height: 48px;

    list-style-position: inside;
    border: 1px solid #808080;
    background-color: #ffffff;
    min-height: 100%;
    width: 100%;
    padding-top: 0;
    margin: 0;
    padding-left: 0;
    box-sizing: border-box;
    box-shadow: 0 0 5px #000000;
    overflow-x: hidden;
}

#new-pref-container {
    width: 100%;
    margin: 0;
    background-color: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 0 5px #000000;
    overflow-x: hidden;
    max-width: 40em;
    max-height: 100%;
    position: fixed;
    top: 3em;
    left: auto;
    display: none;

}

.pref-item.selected {
    background-color: rgba(0,0,255,0.05);
}

.pref-button {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 1em;
    border-left: 1px solid rgba(0,0,0,0.1);
    opacity: 0;
    transition-property: opacity;
    transition-duration: 500ms;
}







/*
  Force border-box so that % widths fit the parent
  container without overlap because of margin/padding.

  More Info : http://www.quirksmode.org/css/box.html
*/
ul.sections > li > div {
  box-sizing: border-box;
  -ms-box-sizing: border-box;     /* ie */
  -webkit-box-sizing: border-box; /* webkit */
  -khtml-box-sizing: border-box;  /* konqueror */
  box-sizing: border-box;         /* css3 */
}


/*---------------------- Jump Page -----------------------------*/
#jump_to, #jump_page {
  margin: 0;
  background: white;
  -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;





input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome.
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    box-sizing: content-box; /* 2 */
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,


/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}






/*
  Force border-box so that % widths fit the parent
  container without overlap because of margin/padding.

  More Info : http://www.quirksmode.org/css/box.html
*/
ul.sections > li > div {
  box-sizing: border-box;
  -ms-box-sizing: border-box;     /* ie */
  -webkit-box-sizing: border-box; /* webkit */
  -khtml-box-sizing: border-box;  /* konqueror */
  box-sizing: border-box;         /* css3 */
}


/*---------------------- Jump Page -----------------------------*/
#jump_to, #jump_page {
  margin: 0;
  background: white;
  -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;





input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome.
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    box-sizing: content-box; /* 2 */
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,


/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}






@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
@namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */

html|*.textbox-input {
  -moz-appearance: none !important;
  text-align: inherit;
  text-shadow: inherit;
  box-sizing: border-box;
  -moz-box-flex: 1;
}

html|*.textbox-textarea {
  -moz-appearance: none !important;
  text-shadow: inherit;
  box-sizing: border-box;
  -moz-box-flex: 1;
}

/*
html|*.textbox-input::-moz-placeholder,
html|*.textbox-textarea::-moz-placeholder {
  text-align: left;
  direction: ltr;





@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
@namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
@namespace xbl url("http://www.mozilla.org/xbl"); /* namespace for XBL elements */

* {
  -moz-user-focus: ignore;
  -moz-user-select: none;
  display: -moz-box;
  box-sizing: border-box;
}

:root {
  text-rendering: optimizeLegibility;
  -moz-binding: url("chrome://global/content/bindings/general.xml#root-element");
}

:root:-moz-locale-dir(rtl) {





}

#detail-screenshot[loading] {
  background-image: url("chrome://global/skin/icons/loading_16.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 1px threedshadow solid;
  border-radius: 5px;
  box-sizing: border-box;
}

#detail-screenshot[loading="error"] {
  background-image: url("chrome://global/skin/media/error.png");
}

#detail-desc-container {
  margin-bottom: 2em;






.select-cell {
  -moz-box-align: center;
  -moz-box-pack: start;
}

#select-header .select-cell {
  -moz-appearance: treeheadercell;
  box-sizing: border-box;
}

.select-keep {
  -moz-box-pack: center;
}

.select-keep .checkbox-label-box {
  display: none;


#select-grid separator {
  display: none;
}

.addon-name,
.addon-action-message,
.addon-action-update {
  box-sizing: border-box;
  margin: 0;
  padding-top: 1px;
  padding-bottom: 2px;
  -moz-padding-start: 6px;
  -moz-padding-end: 5px;
}

.addon:not([active]) .addon-name,





#select-grid checkbox {
  margin-top: 0;
  margin-bottom: 0;
}

.select-cell {
  -moz-box-align: center;
  -moz-box-pack: start;
  box-sizing: border-box;
}

#select-header {
  background-color: Window !important;
}

#select-header .select-cell {
  -moz-appearance: treeheadercell;


#select-grid separator {
  display: none;
}

.addon-name,
.addon-action-message,
.addon-action-update {
  box-sizing: border-box;
  margin: 0;
  padding: 2px 6px;
}

.addon:not([active]) .addon-name,
.addon:not([active]) .addon-action-message,
.addon:not([active]) .addon-action-update {
  color: GrayText;





  background-color: rgb(72,72,72);
  color: white;
  -moz-user-select: none;
  position: relative;
}

.hoverBox {
  display: table-cell;
  box-sizing: border-box;
  padding: 5px;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
:-moz-handler-vulnerable-updatable .hoverBox:active,
:-moz-handler-vulnerable-no-update .hoverBox:active,
:-moz-handler-clicktoplay .hoverBox:active {





}

.select-cell {
  -moz-box-align: center;
  -moz-box-pack: start;
}

#select-header .select-cell {
  box-sizing: border-box;
}

#select-header .select-keep,
#select-header .select-icon,
#select-header .select-name,
#select-header .select-action {
  background-image: linear-gradient(#D6E5F5 0%, Window 100%);
  background-size: 1px 100%;


.select-keep .checkbox-label-box {
  display: none;
}

.addon-name,
.addon-action-message,
.addon-action-update {
  box-sizing: border-box;
  margin: 0;
  padding-top: 1px;
  padding-bottom: 2px;
  -moz-padding-start: 6px;
  -moz-padding-end: 5px;
}

#select-grid separator {





      /**
       * The purpose of this test is to not show the native style.
       * -moz-appearance: progresschunk;
       */

      height: 100%;
      width: 100%;

      box-sizing: border-box;

      /* Default style in case of there is -moz-appearance: none; */
      background-color: #0064b4;
    }

    div.progress-element { padding: 5px; }
    body > div:nth-child(1)  { -moz-appearance: none; }
    body > div:nth-child(2) > .progress-bar { -moz-appearance: none; }

Return to bug 243412