Bug 713643: Back out Bug 497995 from Beta since it's not ready for prime time. a=akeybl
authorKyle Huey <khuey@kylehuey.com>
Tue, 24 Apr 2012 13:10:22 -0700
changeset 92128 365f578a5bfbd67e3a90797699e905fceba3d9a8
parent 92127 11faed19f136de54625825a8e32417359c9200ec
child 92129 e60ca2e387a8f7c37aba6f6de53e13411e97b88c
push id784
push userkhuey@mozilla.com
push dateTue, 24 Apr 2012 20:10:29 +0000
treeherdermozilla-beta@365f578a5bfb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersakeybl
bugs713643, 497995
milestone13.0
Bug 713643: Back out Bug 497995 from Beta since it's not ready for prime time. a=akeybl
browser/app/profile/extensions/testpilot@labs.mozilla.com/content/browser.css
browser/base/content/pageinfo/pageInfo.js
browser/themes/gnomestripe/browser.css
browser/themes/pinstripe/browser.css
browser/themes/winstripe/browser.css
dom/interfaces/css/nsIDOMCSS2Properties.idl
layout/base/nsCSSRendering.cpp
layout/base/nsDisplayList.cpp
layout/base/nsImageLoader.cpp
layout/base/nsImageLoader.h
layout/base/nsPresContext.cpp
layout/base/nsStyleConsts.h
layout/base/tests/Makefile.in
layout/base/tests/test_bug445810.html
layout/generic/nsFrame.cpp
layout/reftests/border-image/470250-1.html
layout/reftests/border-image/470250-2.html
layout/reftests/border-image/border-image-nofill-1-ref.html
layout/reftests/border-image/border-image-nofill-1.html
layout/reftests/border-image/border-image-outset-1-ref.html
layout/reftests/border-image/border-image-outset-1a.html
layout/reftests/border-image/border-image-outset-1b.html
layout/reftests/border-image/border-image-outset-1c.html
layout/reftests/border-image/border-image-outset-move-1-ref.html
layout/reftests/border-image/border-image-outset-move-1.html
layout/reftests/border-image/border-image-outset-resize-1-ref.html
layout/reftests/border-image/border-image-outset-resize-1.html
layout/reftests/border-image/border-image-style-none-auto-ref.html
layout/reftests/border-image/border-image-style-none-auto.html
layout/reftests/border-image/border-image-style-none-length-ref.html
layout/reftests/border-image/border-image-style-none-length.html
layout/reftests/border-image/border-image-style-none-ref.html
layout/reftests/border-image/border-image-style-none.html
layout/reftests/border-image/border-image-width-1-ref.html
layout/reftests/border-image/border-image-width-1a.html
layout/reftests/border-image/border-image-width-1b.html
layout/reftests/border-image/border-image-width-1c.html
layout/reftests/border-image/center-scaling-1.html
layout/reftests/border-image/center-scaling-2.html
layout/reftests/border-image/center-scaling-3.html
layout/reftests/border-image/center-scaling-4b.html
layout/reftests/border-image/center-scaling-4l.html
layout/reftests/border-image/center-scaling-4lr.html
layout/reftests/border-image/center-scaling-4r.html
layout/reftests/border-image/center-scaling-4t.html
layout/reftests/border-image/center-scaling-4tb.html
layout/reftests/border-image/different-h-v-1.html
layout/reftests/border-image/different-h-v-2.html
layout/reftests/border-image/multicolor-image-1.html
layout/reftests/border-image/multicolor-image-2.html
layout/reftests/border-image/multicolor-image-3-ref.html
layout/reftests/border-image/multicolor-image-3.html
layout/reftests/border-image/multicolor-image-4.html
layout/reftests/border-image/multicolor-image-5.html
layout/reftests/border-image/reftest.list
layout/reftests/border-image/repeat-image-1.html
layout/reftests/border-image/solid-image-1.html
layout/reftests/border-image/solid-image-1a.html
layout/reftests/border-image/solid-image-2.html
layout/reftests/border-image/solid-image-2a.html
layout/reftests/bugs/468473-1.xul
layout/reftests/pixel-rounding/border-image-width-0.html
layout/reftests/pixel-rounding/border-image-width-10.html
layout/reftests/pixel-rounding/border-image-width-4.html
layout/reftests/pixel-rounding/border-image-width-9.html
layout/reftests/svg/as-image/border-image-simple-1.html
layout/reftests/svg/as-image/border-image-simple-2.html
layout/style/Declaration.cpp
layout/style/nsCSSParser.cpp
layout/style/nsCSSPropList.h
layout/style/nsCSSProps.cpp
layout/style/nsCSSProps.h
layout/style/nsCSSValue.cpp
layout/style/nsCSSValue.h
layout/style/nsComputedDOMStyle.cpp
layout/style/nsComputedDOMStyle.h
layout/style/nsRuleNode.cpp
layout/style/nsStyleStruct.cpp
layout/style/nsStyleStruct.h
layout/style/nsStyleStructInlines.h
layout/style/test/property_database.js
layout/style/test/test_shorthand_property_getters.html
toolkit/themes/pinstripe/global/preferences.css
--- a/browser/app/profile/extensions/testpilot@labs.mozilla.com/content/browser.css
+++ b/browser/app/profile/extensions/testpilot@labs.mozilla.com/content/browser.css
@@ -30,30 +30,26 @@
   -moz-window-shadow: none;
   background-color: transparent;
   margin-top: -6px;
   margin-right: -3px;
   width: 480px;
 }
 
 .tail-up {
- border-width: 26px 56px 22px 18px;
- border-style: solid;
- -moz-border-image: url(chrome://testpilot-os/skin/notification-tail-up.png) 26 56 22 18 fill round stretch;
+ -moz-border-image: url(chrome://testpilot-os/skin/notification-tail-up.png) 26 56 22 18 / 26px 56px 22px 18px round stretch;
 }
 
 /* tail-down uses the old styling; it doesn't look as good as the new styling,
    but the new styling doesn't work on 3.6.
    TODO: If someone is using 3.7.* or 4.* but is NOT on the beta channel and
    installed Test Pilot from AMO, they should get the new styling, similar
    to .tail-up! */
 .tail-down {
- border-width: 26px 50px 22px 18px;
- border-style: solid;
- -moz-border-image: url(chrome://testpilot/skin/notification-tail-down.png) 26 50 22 18 fill repeat;
+ -moz-border-image: url(chrome://testpilot/skin/notification-tail-down.png) 26 50 22 18 / 26px 50px 22px 18px repeat;
  color: white;
 }
 
 .pilot-notification-popup-container {
   -moz-appearance: none;
   margin-right: -42px;
   padding: 0px 5px 5px 5px;
   font-size: 14px;
--- a/browser/base/content/pageinfo/pageInfo.js
+++ b/browser/base/content/pageinfo/pageInfo.js
@@ -686,17 +686,17 @@ function grabAll(elem)
       else if (val.cssValueType == CSSValue.CSS_VALUE_LIST) {
         // recursively resolve multiple nested CSS value lists
         for (var i = 0; i < val.length; i++)
           addImgFunc(label, val.item(i));
       }
     };
 
     addImgFunc(gStrings.mediaBGImg, computedStyle.getPropertyCSSValue("background-image"));
-    addImgFunc(gStrings.mediaBorderImg, computedStyle.getPropertyCSSValue("-moz-border-image-source"));
+    addImgFunc(gStrings.mediaBorderImg, computedStyle.getPropertyCSSValue("-moz-border-image"));
     // TODO: support unprefixed "border-image" once bug 713643 is fixed.
     addImgFunc(gStrings.mediaListImg, computedStyle.getPropertyCSSValue("list-style-image"));
     addImgFunc(gStrings.mediaCursor, computedStyle.getPropertyCSSValue("cursor"));
   }
 
   // one swi^H^H^Hif-else to rule them all
   if (elem instanceof HTMLImageElement)
     addImage(elem.src, gStrings.mediaImg,
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -1236,19 +1236,17 @@ toolbar[iconsize="small"] #feed-button {
 
 /* Notification icon box */
 #notification-popup-box {
   position: relative;
   background-color: #fff;
   background-clip: padding-box;
   padding-left: 4px;
   border-radius: 2.5px 0 0 2.5px;
-  border-width: 0 8px 0 0;
-  border-style: solid;
-  -moz-border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill;
+  -moz-border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
   -moz-margin-end: -8px;
   margin-top: -1px;
   margin-bottom: -1px;
 }
 
 #notification-popup-box:not([hidden]) + #identity-box {
   -moz-padding-start: 10px;
   border-radius: 0;
@@ -1501,19 +1499,17 @@ richlistitem[type~="action"][actiontype=
   background: -moz-linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,45%,.2) 2px, hsla(0,0%,32%,.2) 80%);
   background-origin: border-box;
   background-position: 1px 2px;
   background-size: 100% -moz-calc(100% - 2px);
   background-repeat: no-repeat;
   color: inherit;
   margin: 0;
   padding: 0;
-  border-width: 4px 5px 3px 6px;
-  border-style: solid;
-  -moz-border-image: url(tabbrowser/tab.png) 4 5 3 6 fill repeat stretch;
+  -moz-border-image: url(tabbrowser/tab.png) 4 5 3 6 / 4px 5px 3px 6px repeat stretch;
   border-radius: 10px 8px 0 0;
   min-height: 25px; /* reserve space for the sometimes hidden close button */
 }
 
 .tabbrowser-tab:hover,
 .tabs-newtab-button:hover {
   background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.2) 4px, hsla(0,0%,75%,.2) 80%);
 }
@@ -1675,26 +1671,22 @@ richlistitem[type~="action"][actiontype=
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
   box-shadow: 0 0 5px 5px Highlight inset;
   -moz-transition: none;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(ltr),
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(rtl) {
-  border-width: 0 2px 0 0;
-  border-style: solid;
-  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
+  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 2px 0 0;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr),
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) {
-  border-width: 0 0 0 2px;
-  border-style: solid;
-  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
+  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 0 0 2px;
 }
 
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   margin-top: -2px;
   margin-bottom: -2px;
 }
@@ -2119,17 +2111,16 @@ html|*#highlighter-nodeinfobar-pseudo-cl
 #inspector-breadcrumbs > .scrollbutton-up,
 #inspector-breadcrumbs > .scrollbutton-down {
   -moz-appearance: none;
 }
 
 .inspector-breadcrumbs-button {
   -moz-appearance: none;
   background-color: transparent;
-  border-style: solid;
   border-width: 1px 13px 2px 13px;
   color: hsl(210,30%,85%);
   max-width: 85px;
   /* The content of the button can be larger than the button */
   overflow: hidden;
   min-height: 25px;
 
   margin: 0 -11px 0 0;
@@ -2159,127 +2150,127 @@ html|*#highlighter-nodeinfobar-pseudo-cl
 
 /* Highlighter toolbar - breadcrumbs - LTR */
 
 .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
   margin-left: 0;
 }
 
 .inspector-breadcrumbs-button {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
 .inspector-breadcrumbs-button:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked][siblings-menu-open],
 .inspector-breadcrumbs-button[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 /* Highlighter toolbar - breadcrumbs - RTL */
 
 .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
   margin-right: 0;
 }
 
 .inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 /* Highlighter toolbar - HTML Tree */
 
 #inspector-tree-splitter {
   -moz-appearance: none;
   border-top: 1px solid black;
   border-bottom-width: 0;
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -1845,40 +1845,40 @@ toolbarbutton.chevron > .toolbarbutton-m
 .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start:-moz-lwtheme-darktext:not([selected="true"]),
 .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle:-moz-lwtheme-darktext:not([selected="true"]),
 .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end:-moz-lwtheme-darktext:not([selected="true"]) {
   background-image: -moz-linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 50%);
 }
 
 @TABSONTOP_TAB_STACK@ > .tab-content,
 @TABSONTOP_NEWTAB_BUTTON@ > .toolbarbutton-icon {
-  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-normal-active.png) 0 11 fill repeat stretch;
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-normal-active.png) 0 11 repeat stretch;
 }
 
 @TABSONTOP_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
 @TABSONTOP_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
-  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-hover-active.png) 0 11 fill repeat stretch;
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-hover-active.png) 0 11 repeat stretch;
 }
 
 @TABSONTOP_TAB_STACK@ > .tab-content[selected="true"] {
-  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-selected-active.png) 0 11 fill repeat stretch;
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-selected-active.png) 0 11 repeat stretch;
 }
 
 @TABSONBOTTOM_TAB_STACK@ > .tab-content,
 @TABSONBOTTOM_NEWTAB_BUTTON@ > .toolbarbutton-icon {
-  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-normal-active.png) 0 11 fill repeat stretch;
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-normal-active.png) 0 11 repeat stretch;
 }
 
 @TABSONBOTTOM_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
 @TABSONBOTTOM_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
-  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-hover-active.png) 0 11 fill repeat stretch;
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-hover-active.png) 0 11 repeat stretch;
 }
 
 @TABSONBOTTOM_TAB_STACK@ > .tab-content[selected="true"] {
-  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-selected-active.png) 0 11 fill repeat stretch;
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-selected-active.png) 0 11 repeat stretch;
 }
 
 /* preloading hack */
 #TabsToolbar::after {
   content: '';
   display: block;
   background-image:
     url(chrome://browser/skin/tabbrowser/tab-top-normal-active.png),
@@ -2079,26 +2079,22 @@ toolbarbutton.chevron > .toolbarbutton-m
 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled] > .toolbarbutton-icon,
 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] > .toolbarbutton-icon {
   -moz-image-region: rect(0, 13px, 20px, 0) !important;
   opacity: .5;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(ltr),
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(rtl) {
-  border-width: 0 2px 0 0;
-  border-style: solid;
-  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
+  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 2px 0 0;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr),
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) {
-  border-width: 0 0 0 2px;
-  border-style: solid;
-  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
+  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 0 0 2px;
 }
 
 /**
  * Tabstrip & add-on bar toolbar buttons
  */
 
 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1,
 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
@@ -2303,19 +2299,17 @@ toolbarbutton.chevron > .toolbarbutton-m
 }
 
 #notification-popup-box {
   position: relative;
   background-color: #fff;
   background-clip: padding-box;
   padding-left: 3px;
   border-radius: 2px 0 0 2px;
-  border-width: 0 8px 0 0;
-  border-style: solid;
-  -moz-border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill;
+  -moz-border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
   -moz-margin-end: -8px;
 }
 
 @conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box {
   padding-left: 7px;
 }
 
 #notification-popup-box:-moz-locale-dir(rtl),
@@ -2858,17 +2852,16 @@ html|*#highlighter-nodeinfobar-pseudo-cl
      inspector-breadcrumbs-buttons, to match toolbar-buttons style.
      This negative margin compensate the extra row of pixels created
      by the shadow.*/
   margin-bottom: -1px;
 }
 
 .inspector-breadcrumbs-button {
   -moz-appearance: none;
-  border-style: solid;
   border-width: 1px 13px 2px 13px;
   color: hsl(210,30%,85%);
   max-width: 85px;
   /* The content of the button can be larger than the button */
   overflow: hidden;
   min-height: 25px;
 
   margin: 0 -11px 0 0;
@@ -2898,127 +2891,127 @@ html|*#highlighter-nodeinfobar-pseudo-cl
 
 /* Highlighter toolbar - breadcrumbs - LTR */
 
 .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
   margin-left: 0;
 }
 
 .inspector-breadcrumbs-button {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
 .inspector-breadcrumbs-button:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked][siblings-menu-open],
 .inspector-breadcrumbs-button[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 /* Highlighter toolbar - breadcrumbs - RTL */
 
 .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
   margin-right: 0;
 }
 
 .inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 stretch;
 }
 
 /* Highlighter toolbar - HTML Tree */
 
 #inspector-tree-splitter {
   -moz-appearance: none;
   border-top: 1px solid black;
   border-bottom-width: 0;
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -1828,19 +1828,17 @@ richlistitem[type~="action"][actiontype=
   background: @toolbarShadowOnTab@, @bgTabTexture@,
               -moz-linear-gradient(-moz-dialog, -moz-dialog);
   background-origin: border-box;
   background-position: 1px 2px;
   background-size: -moz-calc(100% - 2px) -moz-calc(100% - 2px);
   background-repeat: no-repeat;
   margin: 0;
   padding: 2px 0 4px;
-  border-width: 4px 3px 0;
-  border-style: solid;
-  -moz-border-image: url(tabbrowser/tab.png) 4 3 0 fill repeat stretch;
+  -moz-border-image: url(tabbrowser/tab.png) 4 3 0 / 4px 3px 0 repeat stretch;
   border-radius: 0;
 }
 
 .tabbrowser-tab:hover,
 .tabs-newtab-button:hover {
   background-image: @toolbarShadowOnTab@, @bgTabTextureHover@,
                     -moz-linear-gradient(-moz-dialog, -moz-dialog);
 }
@@ -2025,19 +2023,17 @@ richlistitem[type~="action"][actiontype=
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
   background-color: Highlight;
   -moz-transition: none;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
-  border-width: 0 2px 0 0;
-  border-style: solid;
-  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
+  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 2px 0 0;
 }
 
 .tabs-newtab-button > .toolbarbutton-icon {
   margin-top: -1px;
   margin-bottom: -1px;
 }
 
 .tabs-newtab-button,
@@ -2329,19 +2325,17 @@ toolbarbutton.bookmark-item[dragover="tr
 
 /* Notification icon box */
 #notification-popup-box {
   position: relative;
   background-color: #fff;
   background-clip: padding-box;
   padding-left: 3px;
   border-radius: 2.5px 0 0 2.5px;
-  border-width: 0 8px 0 0;
-  border-style: solid;
-  -moz-border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill;
+  -moz-border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
   -moz-margin-end: -8px;
 }
 
 @conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box {
   padding-left: 5px;
 }
 
 #notification-popup-box:-moz-locale-dir(rtl),
@@ -2813,17 +2807,16 @@ html|*#highlighter-nodeinfobar-pseudo-cl
 #inspector-breadcrumbs > .scrollbutton-up,
 #inspector-breadcrumbs > .scrollbutton-down {
   -moz-appearance: none;
 }
 
 .inspector-breadcrumbs-button {
   -moz-appearance: none;
   background-color: transparent;
-  border-style: solid;
   border-width: 2px 13px;
   outline: none;
   color: hsl(210,30%,85%);
   max-width: 85px;
   /* The content of the button can be larger than the button */
   overflow: hidden;
   min-height: 25px;
   margin: 0 -11px 0 0;
@@ -2853,127 +2846,127 @@ html|*#highlighter-nodeinfobar-pseudo-cl
 
 /* Highlighter toolbar - breadcrumbs - LTR */
 
 .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
   margin-left: 0;
 }
 
 .inspector-breadcrumbs-button {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
 .inspector-breadcrumbs-button:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked][siblings-menu-open],
 .inspector-breadcrumbs-button[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 stretch;
 }
 
 /* Highlighter toolbar - breadcrumbs - RTL */
 
 .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
   margin-right: 0;
 }
 
 .inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 stretch;
 }
 
 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 stretch;
 }
 
 /* Highlighter toolbar - HTML Tree */
 
 #inspector-tree-splitter {
   -moz-appearance: none;
   border-top: 1px solid black;
   border-bottom-width: 0;
--- a/dom/interfaces/css/nsIDOMCSS2Properties.idl
+++ b/dom/interfaces/css/nsIDOMCSS2Properties.idl
@@ -46,17 +46,17 @@
  * The nsIDOMCSS2Properties interface is a datatype for additional
  * reflection of data already provided in nsIDOMCSSStyleDeclaration in
  * the Document Object Model.
  *
  * For more information on this interface please see
  * http://www.w3.org/TR/DOM-Level-2-Style
  */
 
-[builtinclass, scriptable, uuid(fc30df1b-9b5a-42f6-965b-cbcc67ac3c4c)]
+[builtinclass, scriptable, uuid(76732e62-da09-4aef-850a-78b9f6d5c8cf)]
 interface nsIDOMCSS2Properties : nsISupports
 {
            attribute DOMString        background;
                                         // raises(DOMException) on setting
 
            attribute DOMString        backgroundAttachment;
                                         // raises(DOMException) on setting
 
@@ -750,24 +750,9 @@ interface nsIDOMCSS2Properties : nsISupp
            attribute DOMString        MozAnimationPlayState;
                                         // raises(DOMException) on setting
 
            attribute DOMString        MozAnimation;
                                         // raises(DOMException) on setting
 
            attribute DOMString        MozTextSizeAdjust;
                                         // raises(DOMException) on setting
-
-           attribute DOMString        MozBorderImageSource;
-                                        // raises(DOMException) on setting
-
-           attribute DOMString        MozBorderImageSlice;
-                                        // raises(DOMException) on setting
-
-           attribute DOMString        MozBorderImageWidth;
-                                        // raises(DOMException) on setting
-
-           attribute DOMString        MozBorderImageOutset;
-                                        // raises(DOMException) on setting
-
-           attribute DOMString        MozBorderImageRepeat;
-                                        // raises(DOMException) on setting
 };
--- a/layout/base/nsCSSRendering.cpp
+++ b/layout/base/nsCSSRendering.cpp
@@ -2708,17 +2708,17 @@ nsCSSRendering::GetBackgroundLayerRect(n
   BackgroundLayerState state =
       PrepareBackgroundLayer(aPresContext, aForFrame, 0, aBorderArea,
                              aBorderArea, aBackground, aLayer);
   return state.mFillArea;
 }
 
 static void
 DrawBorderImage(nsPresContext*       aPresContext,
-                nsRenderingContext&  aRenderingContext,
+                nsRenderingContext& aRenderingContext,
                 nsIFrame*            aForFrame,
                 const nsRect&        aBorderArea,
                 const nsStyleBorder& aStyleBorder,
                 const nsRect&        aDirtyRect)
 {
   NS_PRECONDITION(aStyleBorder.IsBorderImageLoaded(),
                   "drawing border image that isn't successfully loaded");
 
@@ -2730,256 +2730,202 @@ DrawBorderImage(nsPresContext*       aPr
   // knows about the association of the style data with the frame.
   // XXX We shouldn't really... since if anybody is passing in a
   // different style, they'll potentially have the wrong size for the
   // border too.
   aPresContext->SetupBorderImageLoaders(aForFrame, &aStyleBorder);
 
   imgIRequest *req = aStyleBorder.GetBorderImage();
 
-  // Get the actual image.
+  // Get the actual image, and determine where the split points are.
+  // Note that mBorderImageSplit is in image pixels, not necessarily
+  // CSS pixels.
 
   nsCOMPtr<imgIContainer> imgContainer;
   req->GetImage(getter_AddRefs(imgContainer));
   NS_ASSERTION(imgContainer, "no image to draw");
 
   nsIntSize imageSize;
   if (NS_FAILED(imgContainer->GetWidth(&imageSize.width))) {
     imageSize.width =
       nsPresContext::AppUnitsToIntCSSPixels(aBorderArea.width);
   }
   if (NS_FAILED(imgContainer->GetHeight(&imageSize.height))) {
     imageSize.height =
       nsPresContext::AppUnitsToIntCSSPixels(aBorderArea.height);
   }
 
-  // Determine the border image area, which by default corresponds to the
-  // border box but can be modified by 'border-image-outset'.
-  nsRect borderImgArea(aBorderArea);
-  borderImgArea.Inflate(aStyleBorder.GetImageOutset());
-
-  // Compute the used values of 'border-image-slice' and 'border-image-width';
-  // we do them together because the latter can depend on the former.
-  nsIntMargin slice;
-  nsMargin border;
+  // Convert percentages and clamp values to the image size.
+  nsIntMargin split;
   NS_FOR_CSS_SIDES(s) {
-    nsStyleCoord coord = aStyleBorder.mBorderImageSlice.Get(s);
-    PRInt32 imgDimension = NS_SIDE_IS_VERTICAL(s)
-                           ? imageSize.width : imageSize.height;
-    nscoord borderDimension = NS_SIDE_IS_VERTICAL(s)
-                           ? borderImgArea.width : borderImgArea.height;
+    nsStyleCoord coord = aStyleBorder.mBorderImageSplit.Get(s);
+    PRInt32 imgDimension = ((s == NS_SIDE_TOP || s == NS_SIDE_BOTTOM)
+                            ? imageSize.height
+                            : imageSize.width);
     double value;
     switch (coord.GetUnit()) {
       case eStyleUnit_Percent:
         value = coord.GetPercentValue() * imgDimension;
         break;
       case eStyleUnit_Factor:
         value = coord.GetFactorValue();
         break;
       default:
-        NS_NOTREACHED("unexpected CSS unit for image slice");
+        NS_ASSERTION(coord.GetUnit() == eStyleUnit_Null,
+                     "unexpected CSS unit for image split");
         value = 0;
         break;
     }
     if (value < 0)
       value = 0;
     if (value > imgDimension)
       value = imgDimension;
-    slice.Side(s) = NS_lround(value);
-
-    nsMargin borderWidths(aStyleBorder.GetActualBorder());
-    coord = aStyleBorder.mBorderImageWidth.Get(s);
-    switch (coord.GetUnit()) {
-      case eStyleUnit_Coord: // absolute dimension
-        value = coord.GetCoordValue();
-        break;
-      case eStyleUnit_Percent:
-        value = coord.GetPercentValue() * borderDimension;
-        break;
-      case eStyleUnit_Factor:
-        value = coord.GetFactorValue() * borderWidths.Side(s);
-        break;
-      case eStyleUnit_Auto:  // same as the slice value, in CSS pixels
-        value = nsPresContext::CSSPixelsToAppUnits(slice.Side(s));
-        break;
-      default:
-        NS_NOTREACHED("unexpected CSS unit for border image area division");
-        value = 0;
-        break;
-    }
-    border.Side(s) = NS_lround(value);
+    split.Side(s) = NS_lround(value);
   }
 
-  // "If two opposite border-image-width offsets are large enough that they
-  // overlap, their used values are proportionately reduced until they no
-  // longer overlap."
-  double scaleX = border.left + border.right > borderImgArea.width
-                  ? borderImgArea.width / double(border.left + border.right)
-                  : 1.0;
-  double scaleY = border.top + border.bottom > borderImgArea.height
-                  ? borderImgArea.height / double(border.top + border.bottom)
-                  : 1.0;
-  double scale = NS_MIN(scaleX, scaleY);
-  if (scale < 1.0) {
-    border.left *= scale;
-    border.right *= scale;
-    border.top *= scale;
-    border.bottom *= scale;
-    NS_ASSERTION(border.left + border.right <= borderImgArea.width &&
-                 border.top + border.bottom <= borderImgArea.height,
-                 "rounding error in width reduction???");
-  }
-
-  // These helper tables recharacterize the 'slice' and 'width' margins
+  nsMargin border(aStyleBorder.GetActualBorder());
+
+  // These helper tables recharacterize the 'split' and 'border' margins
   // in a more convenient form: they are the x/y/width/height coords
   // required for various bands of the border, and they have been transformed
-  // to be relative to the innerRect (for 'slice') or the page (for 'border').
+  // to be relative to the image (for 'split') or the page (for 'border').
   enum {
     LEFT, MIDDLE, RIGHT,
     TOP = LEFT, BOTTOM = RIGHT
   };
   const nscoord borderX[3] = {
-    borderImgArea.x + 0,
-    borderImgArea.x + border.left,
-    borderImgArea.x + borderImgArea.width - border.right,
+    aBorderArea.x + 0,
+    aBorderArea.x + border.left,
+    aBorderArea.x + aBorderArea.width - border.right,
   };
   const nscoord borderY[3] = {
-    borderImgArea.y + 0,
-    borderImgArea.y + border.top,
-    borderImgArea.y + borderImgArea.height - border.bottom,
+    aBorderArea.y + 0,
+    aBorderArea.y + border.top,
+    aBorderArea.y + aBorderArea.height - border.bottom,
   };
   const nscoord borderWidth[3] = {
     border.left,
-    borderImgArea.width - border.left - border.right,
+    aBorderArea.width - border.left - border.right,
     border.right,
   };
   const nscoord borderHeight[3] = {
     border.top,
-    borderImgArea.height - border.top - border.bottom,
+    aBorderArea.height - border.top - border.bottom,
     border.bottom,
   };
-  const PRInt32 sliceX[3] = {
+
+  const PRInt32 splitX[3] = {
     0,
-    slice.left,
-    imageSize.width - slice.right,
-  };
-  const PRInt32 sliceY[3] = {
-    0,
-    slice.top,
-    imageSize.height - slice.bottom,
+    split.left,
+    imageSize.width - split.right,
   };
-  const PRInt32 sliceWidth[3] = {
-    slice.left,
-    PR_MAX(imageSize.width - slice.left - slice.right, 0),
-    slice.right,
+  const PRInt32 splitY[3] = {
+    0,
+    split.top,
+    imageSize.height - split.bottom,
   };
-  const PRInt32 sliceHeight[3] = {
-    slice.top,
-    PR_MAX(imageSize.height - slice.top - slice.bottom, 0),
-    slice.bottom,
+  const PRInt32 splitWidth[3] = {
+    split.left,
+    imageSize.width - split.left - split.right,
+    split.right,
+  };
+  const PRInt32 splitHeight[3] = {
+    split.top,
+    imageSize.height - split.top - split.bottom,
+    split.bottom,
   };
 
   // In all the 'factor' calculations below, 'border' measurements are
-  // in app units but 'slice' measurements are in image/CSS pixels, so
+  // in app units but 'split' measurements are in image/CSS pixels, so
   // the factor corresponding to no additional scaling is
   // CSSPixelsToAppUnits(1), not simply 1.
   for (int i = LEFT; i <= RIGHT; i++) {
     for (int j = TOP; j <= BOTTOM; j++) {
       nsRect destArea(borderX[i], borderY[j], borderWidth[i], borderHeight[j]);
-      nsIntRect subArea(sliceX[i], sliceY[j], sliceWidth[i], sliceHeight[j]);
+      nsIntRect subArea(splitX[i], splitY[j], splitWidth[i], splitHeight[j]);
 
       PRUint8 fillStyleH, fillStyleV;
       nsSize unitSize;
 
       if (i == MIDDLE && j == MIDDLE) {
-        // Discard the middle portion unless set to fill.
-        if (NS_STYLE_BORDER_IMAGE_SLICE_NOFILL ==
-            aStyleBorder.mBorderImageFill) {
-          continue;
-        }
-
-        NS_ASSERTION(NS_STYLE_BORDER_IMAGE_SLICE_FILL ==
-                     aStyleBorder.mBorderImageFill,
-                     "Unexpected border image fill");
-
         // css-background:
         //     The middle image's width is scaled by the same factor as the
         //     top image unless that factor is zero or infinity, in which
         //     case the scaling factor of the bottom is substituted, and
         //     failing that, the width is not scaled. The height of the
         //     middle image is scaled by the same factor as the left image
         //     unless that factor is zero or infinity, in which case the
         //     scaling factor of the right image is substituted, and failing
         //     that, the height is not scaled.
         gfxFloat hFactor, vFactor;
 
-        if (0 < border.left && 0 < slice.left)
-          vFactor = gfxFloat(border.left)/slice.left;
-        else if (0 < border.right && 0 < slice.right)
-          vFactor = gfxFloat(border.right)/slice.right;
+        if (0 < border.left && 0 < split.left)
+          vFactor = gfxFloat(border.left)/split.left;
+        else if (0 < border.right && 0 < split.right)
+          vFactor = gfxFloat(border.right)/split.right;
         else
           vFactor = nsPresContext::CSSPixelsToAppUnits(1);
 
-        if (0 < border.top && 0 < slice.top)
-          hFactor = gfxFloat(border.top)/slice.top;
-        else if (0 < border.bottom && 0 < slice.bottom)
-          hFactor = gfxFloat(border.bottom)/slice.bottom;
+        if (0 < border.top && 0 < split.top)
+          hFactor = gfxFloat(border.top)/split.top;
+        else if (0 < border.bottom && 0 < split.bottom)
+          hFactor = gfxFloat(border.bottom)/split.bottom;
         else
           hFactor = nsPresContext::CSSPixelsToAppUnits(1);
 
-        unitSize.width = sliceWidth[i]*hFactor;
-        unitSize.height = sliceHeight[j]*vFactor;
-        fillStyleH = aStyleBorder.mBorderImageRepeatH;
-        fillStyleV = aStyleBorder.mBorderImageRepeatV;
+        unitSize.width = splitWidth[i]*hFactor;
+        unitSize.height = splitHeight[j]*vFactor;
+        fillStyleH = aStyleBorder.mBorderImageHFill;
+        fillStyleV = aStyleBorder.mBorderImageVFill;
 
       } else if (i == MIDDLE) { // top, bottom
         // Sides are always stretched to the thickness of their border,
         // and stretched proportionately on the other axis.
         gfxFloat factor;
-        if (0 < borderHeight[j] && 0 < sliceHeight[j])
-          factor = gfxFloat(borderHeight[j])/sliceHeight[j];
+        if (0 < borderHeight[j] && 0 < splitHeight[j])
+          factor = gfxFloat(borderHeight[j])/splitHeight[j];
         else
           factor = nsPresContext::CSSPixelsToAppUnits(1);
 
-        unitSize.width = sliceWidth[i]*factor;
+        unitSize.width = splitWidth[i]*factor;
         unitSize.height = borderHeight[j];
-        fillStyleH = aStyleBorder.mBorderImageRepeatH;
-        fillStyleV = NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH;
+        fillStyleH = aStyleBorder.mBorderImageHFill;
+        fillStyleV = NS_STYLE_BORDER_IMAGE_STRETCH;
 
       } else if (j == MIDDLE) { // left, right
         gfxFloat factor;
-        if (0 < borderWidth[i] && 0 < sliceWidth[i])
-          factor = gfxFloat(borderWidth[i])/sliceWidth[i];
+        if (0 < borderWidth[i] && 0 < splitWidth[i])
+          factor = gfxFloat(borderWidth[i])/splitWidth[i];
         else
           factor = nsPresContext::CSSPixelsToAppUnits(1);
 
         unitSize.width = borderWidth[i];
-        unitSize.height = sliceHeight[j]*factor;
-        fillStyleH = NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH;
-        fillStyleV = aStyleBorder.mBorderImageRepeatV;
+        unitSize.height = splitHeight[j]*factor;
+        fillStyleH = NS_STYLE_BORDER_IMAGE_STRETCH;
+        fillStyleV = aStyleBorder.mBorderImageVFill;
 
       } else {
         // Corners are always stretched to fit the corner.
         unitSize.width = borderWidth[i];
         unitSize.height = borderHeight[j];
-        fillStyleH = NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH;
-        fillStyleV = NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH;
+        fillStyleH = NS_STYLE_BORDER_IMAGE_STRETCH;
+        fillStyleV = NS_STYLE_BORDER_IMAGE_STRETCH;
       }
 
       DrawBorderImageComponent(aRenderingContext, aForFrame,
                                imgContainer, aDirtyRect,
                                destArea, subArea,
                                fillStyleH, fillStyleV,
                                unitSize, aStyleBorder, i * (RIGHT + 1) + j);
     }
   }
 }
 
 static void
-DrawBorderImageComponent(nsRenderingContext&  aRenderingContext,
+DrawBorderImageComponent(nsRenderingContext& aRenderingContext,
                          nsIFrame*            aForFrame,
                          imgIContainer*       aImage,
                          const nsRect&        aDirtyRect,
                          const nsRect&        aFill,
                          const nsIntRect&     aSrc,
                          PRUint8              aHFill,
                          PRUint8              aVFill,
                          const nsSize&        aUnitSize,
@@ -3005,58 +2951,62 @@ DrawBorderImageComponent(nsRenderingCont
       aStyleBorder.SetSubImage(aIndex, subImage);
   }
 
   gfxPattern::GraphicsFilter graphicsFilter =
     nsLayoutUtils::GetGraphicsFilterForFrame(aForFrame);
 
   // If we have no tiling in either direction, we can skip the intermediate
   // scaling step.
-  if ((aHFill == NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH &&
-       aVFill == NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH) ||
+  if ((aHFill == NS_STYLE_BORDER_IMAGE_STRETCH &&
+       aVFill == NS_STYLE_BORDER_IMAGE_STRETCH) ||
       (aUnitSize.width == aFill.width &&
        aUnitSize.height == aFill.height)) {
     nsLayoutUtils::DrawSingleImage(&aRenderingContext, subImage,
                                    graphicsFilter,
                                    aFill, aDirtyRect, imgIContainer::FLAG_NONE);
     return;
   }
 
   // Compute the scale and position of the master copy of the image.
   nsRect tile;
   switch (aHFill) {
-  case NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH:
+  case NS_STYLE_BORDER_IMAGE_STRETCH:
     tile.x = aFill.x;
     tile.width = aFill.width;
     break;
-  case NS_STYLE_BORDER_IMAGE_REPEAT_REPEAT:
+  case NS_STYLE_BORDER_IMAGE_REPEAT:
     tile.x = aFill.x + aFill.width/2 - aUnitSize.width/2;
     tile.width = aUnitSize.width;
     break;
-  case NS_STYLE_BORDER_IMAGE_REPEAT_ROUND:
+
+  case NS_STYLE_BORDER_IMAGE_ROUND:
     tile.x = aFill.x;
     tile.width = aFill.width / ceil(gfxFloat(aFill.width)/aUnitSize.width);
     break;
+
   default:
     NS_NOTREACHED("unrecognized border-image fill style");
   }
 
   switch (aVFill) {
-  case NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH:
+  case NS_STYLE_BORDER_IMAGE_STRETCH:
     tile.y = aFill.y;
     tile.height = aFill.height;
     break;
-  case NS_STYLE_BORDER_IMAGE_REPEAT_REPEAT:
+  case NS_STYLE_BORDER_IMAGE_REPEAT:
     tile.y = aFill.y + aFill.height/2 - aUnitSize.height/2;
     tile.height = aUnitSize.height;
     break;
-  case NS_STYLE_BORDER_IMAGE_REPEAT_ROUND:
+
+  case NS_STYLE_BORDER_IMAGE_ROUND:
     tile.y = aFill.y;
     tile.height = aFill.height/ceil(gfxFloat(aFill.height)/aUnitSize.height);
     break;
+
   default:
     NS_NOTREACHED("unrecognized border-image fill style");
   }
 
   nsLayoutUtils::DrawImage(&aRenderingContext, subImage, graphicsFilter,
                            tile, aFill, tile.TopLeft(), aDirtyRect,
                            imgIContainer::FLAG_NONE);
 }
--- a/layout/base/nsDisplayList.cpp
+++ b/layout/base/nsDisplayList.cpp
@@ -1447,19 +1447,18 @@ nsDisplayBorder::Paint(nsDisplayListBuil
                               nsRect(offset, mFrame->GetSize()),
                               mFrame->GetStyleContext(),
                               mFrame->GetSkipSides());
 }
 
 nsRect
 nsDisplayBorder::GetBounds(nsDisplayListBuilder* aBuilder)
 {
-  nsRect borderBounds(ToReferenceFrame(), mFrame->GetSize());
-  borderBounds.Inflate(mFrame->GetStyleBorder()->GetImageOutset());
-  return SnapBounds(mSnappingEnabled, mFrame->PresContext(), borderBounds);
+  return SnapBounds(mSnappingEnabled, mFrame->PresContext(),
+                    nsRect(ToReferenceFrame(), mFrame->GetSize()));
 }
 
 // Given a region, compute a conservative approximation to it as a list
 // of rectangles that aren't vertically adjacent (i.e., vertically
 // adjacent or overlapping rectangles are combined).
 // Right now this is only approximate, some vertically overlapping rectangles
 // aren't guaranteed to be combined.
 static void
--- a/layout/base/nsImageLoader.cpp
+++ b/layout/base/nsImageLoader.cpp
@@ -174,16 +174,19 @@ NS_IMETHODIMP nsImageLoader::OnStopFrame
     return NS_ERROR_FAILURE;
 
   if (!mRequest) {
     // We're in the middle of a paint anyway
     return NS_OK;
   }
 
   // Take requested actions
+  if (mActions & ACTION_REFLOW_ON_DECODE) {
+    DoReflow();
+  }
   if (mActions & ACTION_REDRAW_ON_DECODE) {
     DoRedraw(nsnull);
   }
   return NS_OK;
 }
 
 NS_IMETHODIMP nsImageLoader::OnImageIsAnimated(imgIRequest *aRequest)
 {
@@ -201,16 +204,19 @@ NS_IMETHODIMP nsImageLoader::OnStopReque
     return NS_ERROR_FAILURE;
 
   if (!mRequest) {
     // We're in the middle of a paint anyway
     return NS_OK;
   }
 
   // Take requested actions
+  if (mActions & ACTION_REFLOW_ON_LOAD) {
+    DoReflow();
+  }
   if (mActions & ACTION_REDRAW_ON_LOAD) {
     DoRedraw(nsnull);
   }
   return NS_OK;
 }
 
 NS_IMETHODIMP nsImageLoader::FrameChanged(imgIRequest *aRequest,
                                           imgIContainer *aContainer,
@@ -231,16 +237,23 @@ NS_IMETHODIMP nsImageLoader::FrameChange
     aDirtyRect->ToAppUnits(nsPresContext::AppUnitsPerCSSPixel());
 
   DoRedraw(&r);
 
   return NS_OK;
 }
 
 void
+nsImageLoader::DoReflow()
+{
+  nsIPresShell *shell = mFrame->PresContext()->GetPresShell();
+  shell->FrameNeedsReflow(mFrame, nsIPresShell::eStyleChange, NS_FRAME_IS_DIRTY);
+}
+
+void
 nsImageLoader::DoRedraw(const nsRect* aDamageRect)
 {
   // NOTE: It is not sufficient to invalidate only the size of the image:
   //       the image may be tiled! 
   //       The best option is to call into the frame, however lacking this
   //       we have to at least invalidate the frame's bounds, hence
   //       as long as we have a frame we'll use its size.
   //
--- a/layout/base/nsImageLoader.h
+++ b/layout/base/nsImageLoader.h
@@ -64,18 +64,20 @@ private:
 public:
   /*
    * Flags to specify actions that can be taken for the image at various
    * times. Reflows always occur before redraws. "Decode" refers to one
    * frame being available, whereas "load" refers to all the data being loaded
    * from the network.
    */
   enum {
-    ACTION_REDRAW_ON_DECODE = 0x01,
-    ACTION_REDRAW_ON_LOAD   = 0x02,
+    ACTION_REFLOW_ON_DECODE = 0x01,
+    ACTION_REDRAW_ON_DECODE = 0x02,
+    ACTION_REFLOW_ON_LOAD   = 0x04,
+    ACTION_REDRAW_ON_LOAD   = 0x08
   };
   static already_AddRefed<nsImageLoader>
     Create(nsIFrame *aFrame, imgIRequest *aRequest,
            PRUint32 aActions, nsImageLoader *aNextLoader);
 
   NS_DECL_ISUPPORTS
 
   // imgIDecoderObserver (override nsStubImageDecoderObserver)
@@ -96,16 +98,17 @@ public:
 
   void Destroy();
 
   imgIRequest *GetRequest() { return mRequest; }
   nsImageLoader *GetNextLoader() { return mNextLoader; }
 
 private:
   nsresult Load(imgIRequest *aImage);
+  void DoReflow();
   /* if aDamageRect is nsnull, the whole frame is redrawn. */
   void DoRedraw(const nsRect* aDamageRect);
 
   nsIFrame *mFrame;
   nsCOMPtr<imgIRequest> mRequest;
   PRUint32 mActions;
   nsRefPtr<nsImageLoader> mNextLoader;
 
--- a/layout/base/nsPresContext.cpp
+++ b/layout/base/nsPresContext.cpp
@@ -1456,16 +1456,18 @@ nsPresContext::SetupBorderImageLoaders(n
   // non-null to null).
   imgIRequest *borderImage = aStyleBorder->GetBorderImage();
   if (!borderImage) {
     SetImageLoaders(aFrame, BORDER_IMAGE, nsnull);
     return;
   }
 
   PRUint32 actions = nsImageLoader::ACTION_REDRAW_ON_LOAD;
+  if (aStyleBorder->ImageBorderDiffers())
+    actions |= nsImageLoader::ACTION_REFLOW_ON_LOAD;
   nsRefPtr<nsImageLoader> loader =
     nsImageLoader::Create(aFrame, borderImage, actions, nsnull);
   SetImageLoaders(aFrame, BORDER_IMAGE, loader);
 }
 
 void
 nsPresContext::StopImagesFor(nsIFrame* aTargetFrame)
 {
--- a/layout/base/nsStyleConsts.h
+++ b/layout/base/nsStyleConsts.h
@@ -322,22 +322,19 @@ static inline mozilla::css::Side operato
 #define NS_STYLE_BORDER_STYLE_SOLID             5
 #define NS_STYLE_BORDER_STYLE_DOUBLE            6
 #define NS_STYLE_BORDER_STYLE_INSET             7
 #define NS_STYLE_BORDER_STYLE_OUTSET            8
 #define NS_STYLE_BORDER_STYLE_HIDDEN            9
 #define NS_STYLE_BORDER_STYLE_AUTO              10 // for outline-style only
 
 // See nsStyleBorder mBorderImage
-#define NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH    0
-#define NS_STYLE_BORDER_IMAGE_REPEAT_REPEAT     1
-#define NS_STYLE_BORDER_IMAGE_REPEAT_ROUND      2
-
-#define NS_STYLE_BORDER_IMAGE_SLICE_NOFILL      0
-#define NS_STYLE_BORDER_IMAGE_SLICE_FILL        1
+#define NS_STYLE_BORDER_IMAGE_STRETCH           0
+#define NS_STYLE_BORDER_IMAGE_REPEAT            1
+#define NS_STYLE_BORDER_IMAGE_ROUND             2
 
 // See nsStyleDisplay
 #define NS_STYLE_CLEAR_NONE                     0
 #define NS_STYLE_CLEAR_LEFT                     1
 #define NS_STYLE_CLEAR_RIGHT                    2
 #define NS_STYLE_CLEAR_LEFT_AND_RIGHT           3
 #define NS_STYLE_CLEAR_LINE                     4
 #define NS_STYLE_CLEAR_BLOCK                    5
--- a/layout/base/tests/Makefile.in
+++ b/layout/base/tests/Makefile.in
@@ -84,16 +84,17 @@ DEFINES += -D_IMPL_NS_LAYOUT
 		test_bug386575.xhtml \
 		test_bug388019.html \
 		test_bug394057.html \
 		test_bug399284.html \
 		test_bug399951.html \
 		test_bug404209.xhtml \
 		test_bug416896.html \
 		test_bug423523.html \
+		test_bug445810.html \
 		test_bug449781.html \
 		test_bug450930.xhtml \
 		test_bug458898.html \
 		test_bug465448.xul \
 		test_bug469170.html \
 		test_bug471126.html \
 		test_bug435293-scale.html \
 		test_bug435293-interaction.html \
new file mode 100644
--- /dev/null
+++ b/layout/base/tests/test_bug445810.html
@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=445810
+-->
+<head>
+  <title>Test for Bug 445810</title>
+  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="/tests/image/test/mochitest/imgutils.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=445810">Mozilla Bug 445810</a>
+<div><p id="display"></p></div>
+<div style="display: none;"><img id="currimg"></div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 445810 **/
+
+// Once the border image is loaded, it isn't necessarily decoded. We need to
+// force a decode, but only have a good way of doing that for image elements,
+// not border images. However, we can take advantage of the image cache (which
+// shares images of the same url) and assign the same url to both.
+var currImageElem = document.getElementById("currimg");
+
+function new_image_url()
+{
+  var width = 10;
+  var height = 10;
+
+  var canvas = document.createElement("canvas");
+  canvas.setAttribute("width", width);
+  canvas.setAttribute("height", height);
+  var cx = canvas.getContext("2d");
+  function random_color() {
+    function random_component() {
+      return Math.floor(Math.random() * 256);
+    }
+    return "rgb(" + random_component() + "," +
+                    random_component() + "," +
+                    random_component() + ")";
+  }
+  for (var x = 0; x < width; ++x) {
+    for (var y = 0; y < height; ++y) {
+      cx.fillStyle = random_color();
+      cx.fillRect(x, y, 1, 1);
+    }
+  }
+  return canvas.toDataURL();
+}
+
+SimpleTest.waitForExplicitFinish();
+
+var p = document.getElementById("display");
+var div = p.parentNode;
+var divcs = getComputedStyle(div, "");
+
+div.style.width = "-moz-min-content";
+p.style.width = "5px";
+p.style.height = "5px";
+is(divcs.width, "5px", "correct width without a border");
+is(divcs.height, "5px", "correct height without a border");
+p.style.border = "3px solid";
+is(divcs.width, "11px", // 3 (border-left) + 5 (width) + 3 (border-right)
+   "correct width without a border image");
+is(divcs.height, "11px", // 3 (border-top) + 5 (height) + 3 (border-bottom)
+   "correct height without a border image");
+
+currImageElem.src = new_image_url();
+p.style.MozBorderImage = "url( " + currImageElem.src + ") 2 2 2 2 / 7px 2px";
+is(divcs.width, "11px", "border image not loaded yet");
+is(divcs.height, "11px", "border image not loaded yet");
+currImageElem.onload = function() { setTimeout(step2, 0); }
+
+function step2() {
+  // We got here through onload
+  ok(isImageLoaded("currimg"), "image loaded");
+
+  // Force a decode
+  forceDecode("currimg");
+  ok(isFrameDecoded("currimg"), "frame decoded");
+
+  is(divcs.width, "9px", "border image loading caused reflow");
+  is(divcs.height, "19px", "border image loading caused reflow");
+
+  p.style.borderStyle = "none";
+  is(divcs.width, "9px", "border image still shows with border-style:none");
+  is(divcs.height, "19px", "border image still shows with border-style:none");
+
+  p.style.MozBorderImage = "";
+  is(divcs.width, "5px", "correct width without a border");
+  is(divcs.height, "5px", "correct height without a border");
+
+  currImageElem.src = new_image_url();
+  p.style.MozBorderImage = "url( " + currImageElem.src + ") 2 2 2 2 / 7px 2px";
+  is(divcs.width, "5px", "border image not loaded yet");
+  is(divcs.height, "5px", "border image not loaded yet");
+  currImageElem.onload = function() { setTimeout(step3, 0); }
+}
+
+function step3() {
+  // We got here through onload
+  ok(isImageLoaded("currimg"), "image loaded");
+
+  // Force a decode
+  forceDecode("currimg");
+  ok(isFrameDecoded("currimg"), "frame decoded");
+
+  is(divcs.width, "9px", "border image loading caused reflow");
+  is(divcs.height, "19px", "border image loading caused reflow");
+
+  currImageElem.src = new_image_url();
+  p.style.MozBorderImage = "url( " + currImageElem.src + ") 2 2 2 2";
+  is(divcs.width, "5px", "border image not loaded yet");
+  is(divcs.height, "5px", "border image not loaded yet");
+  currImageElem.onload = function() { setTimeout(step4, 0); }
+}
+
+function step4() {
+  // We got here through onload
+  ok(isImageLoaded("currimg"), "image loaded");
+
+  // Force a decode
+  forceDecode("currimg");
+  ok(isFrameDecoded("currimg"), "frame decoded");
+
+  is(divcs.width, "11px", "border image loading caused reflow");
+  is(divcs.height, "11px", "border image loading caused reflow");
+
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
+
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -4827,40 +4827,17 @@ ComputeOutlineAndEffectsRect(nsIFrame* a
       // something smaller than the visual overflow rect (perhaps the
       // scrollable overflow rect is correct).  When we change that, we
       // need to keep this code (and the storing of properties just
       // above) in sync with GetOutlineInnerRect in nsCSSRendering.cpp.
       r.Inflate(inflateBy, inflateBy);
       *aAnyOutlineOrEffects = true;
     }
   }
-
-  // border-image-outset.
-  // We need to include border-image-outset because it can cause the
-  // border image to be drawn beyond the border box.
-
-  // (1) It's important we not check whether there's a border-image
-  //     since the style hint for a change in border image doesn't cause
-  //     reflow, and that's probably more important than optimizing the
-  //     overflow areas for the silly case of border-image-outset without
-  //     border-image
-  // (2) It's important that we not check whether the border-image
-  //     is actually loaded, since that would require us to reflow when
-  //     the image loads.
-  const nsStyleBorder* styleBorder = aFrame->GetStyleBorder();
-  nsMargin outsetMargin = styleBorder->GetImageOutset();
-
-  if (outsetMargin != nsMargin(0, 0, 0, 0)) {
-    nsRect outsetRect(nsPoint(0, 0), aNewSize);
-    outsetRect.Inflate(outsetMargin);
-    r.UnionRect(r, outsetRect);
-
-    *aAnyOutlineOrEffects = true;
-  }
-
+  
   // Note that we don't remove the outlineInnerRect if a frame loses outline
   // style. That would require an extra property lookup for every frame,
   // or a new frame state bit to track whether a property had been stored,
   // or something like that. It's not worth doing that here. At most it's
   // only one heap-allocated rect per frame and it will be cleaned up when
   // the frame dies.
 
   if (nsSVGIntegrationUtils::UsingEffectsForFrame(aFrame)) {
--- a/layout/reftests/border-image/470250-1.html
+++ b/layout/reftests/border-image/470250-1.html
@@ -1,15 +1,13 @@
 <!doctype html>
 <html><head>
 <title>border-image, only middle part, testcase</title>
 <style>
 div {
   width: 48px;
   height: 48px;
-  border-width: 0;
-  border-style: solid;
-  -moz-border-image: url(3x3green-1DD813.png) 0 fill;
+  -moz-border-image: url(3x3green-1DD813.png) 0 / 0;
 }
 </style>
 </head><body>
 <div></div>
 </body></html>
--- a/layout/reftests/border-image/470250-2.html
+++ b/layout/reftests/border-image/470250-2.html
@@ -1,17 +1,15 @@
 <!doctype html>
 <html><head>
 <title>border-image, only middle part, table cell, testcase</title>
 <style>
 table {
   width: 48px;
   height: 48px;
   border-collapse: separate;
-  border-width: 0;
-  border-style: solid;
-  -moz-border-image: url(3x3green-1DD813.png) 0 fill;
+  -moz-border-image: url(3x3green-1DD813.png) 0 / 0;
 }
 </style>
 </head><body>
 <table>
 </table>
 </body></html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-nofill-1-ref.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image-slice without fill reference</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">
-
-  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
-  td { padding: 0; }
-
-  </style>
-</head>
-<body>
-<table>
-  <col style="width: 7px">
-  <col style="width: 100px">
-  <col style="width: 7px">
-
-  <tr style="height: 7px">
-    <td style="background: #87f0b4"></td>
-    <td style="background: #4a298e"></td>
-    <td style="background: #c98bb7"></td>
-  </tr>
-  <tr style="height: 5px">
-    <td style="background: #90a213"></td>
-    <td></td>
-    <td style="background: #90c157"></td>
-  </tr>
-  <tr style="height: 7px">
-    <td style="background: #9d57c1"></td>
-    <td style="background: #3a8e20"></td>
-    <td style="background: #0e6f6c"></td>
-  </tr>
-</table>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-nofill-1.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>test of -moz-border-image-slice without fill</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">
-
-  div {
-    border-width: 7px;
-    border-style: solid;
-    -moz-border-image: url('3x3multicolor.png') 1 1 1 1;
-  }
-
-  </style>
-</head>
-<body>
-<div style="width: 100px; height: 5px"></div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-outset-1-ref.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image-outset: 1em reference</title>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta http-equiv="Content-Style-Type" content="text/css">
-</head>
-<body>
-<div style="border: solid #1DD813 1em; margin: 1em;">
-<div style="padding: 1em;">
-border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
-</div>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-outset-1a.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-outset-width: 1em</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">
-  div {
-    margin: 2em;
-    border-width: 1em;
-    border-style: solid;
-    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / / 1em;
-  }
-  </style>
-</head>
-<body>
-<div>
-border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-outset-1b.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-outset-width: 1em</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">
-  div {
-    margin: 2em;
-    border-width: 1em;
-    border-style: solid;
-    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-    -moz-border-image-outset: 1em;
-  }
-  </style>
-</head>
-<body>
-<div>
-border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-outset-1c.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-outset-width: 1em</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">
-  div {
-    margin: 2em;
-    border-width: 1em;
-    border-style: solid;
-    -moz-border-image: 1 1 1 1 / / 1em url('3x3green-1DD813.png');
-  }
-  </style>
-</head>
-<body>
-<div>
-border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-outset-move-1-ref.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image-outset move reference</title>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta http-equiv="Content-Style-Type" content="text/css">
-</head>
-<body>
-<div style="width: 100px; border: solid #1DD813 10px; margin: 10px;">
-<div style="padding: 10px;">
-Hello World!
-</div>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-outset-move-1.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html class="reftest-wait" lang="en-US">
-<head>
-  <title>-moz-border-outset move</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">
-  div {
-    margin: 20px;
-    border-width: 10px;
-    border-style: solid;
-    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-    -moz-border-image-outset: 10px;
-  }
-  </style>
-</head>
-<body>
-<div id="container" style="width: 80px; margin-left: 60px;">
-Hello World!
-</div>
-<script type="text/javascript">
-// The purpose of this test is to move the border and ensure that the
-// overflow area caused by border-image-outset is redrawn.
-setTimeout(function() {
-    document.getElementById("container").style.marginLeft = "20px";
-    document.documentElement.className = "";
-  }, 100);
-</script>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-outset-resize-1-ref.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image-outset resize reference</title>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta http-equiv="Content-Style-Type" content="text/css">
-</head>
-<body>
-<div style="width: 100px; border: solid #1DD813 10px; margin: 10px;">
-<div style="padding: 10px;">
-Hello World!
-</div>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-outset-resize-1.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html class="reftest-wait" lang="en-US">
-<head>
-  <title>-moz-border-outset resize</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">
-  div {
-    margin: 20px;
-    border-width: 10px;
-    border-style: solid;
-    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-    -moz-border-image-outset: 10px;
-  }
-  </style>
-</head>
-<body>
-<div id="container" style="width: 180px;">
-Hello World!
-</div>
-<script type="text/javascript">
-// The purpose of this test is to resize the border and ensure that the
-// overflow area caused by border-image-outset is redrawn.
-setTimeout(function() {
-    document.getElementById("container").style.width = "80px";
-    document.documentElement.className = "";
-  }, 100);
-</script>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-style-none-auto-ref.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image-width: auto with border-bottom: none reference</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">
-
-  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
-  td { padding: 0; }
-
-  </style>
-</head>
-<body>
-<table>
-  <col style="width: 1px">
-  <col style="width: 112px"> <!-- 100px + 7px + 7px - 1px - 1px -->
-  <col style="width: 1px">
-
-  <tr style="height: 1px">
-    <td style="background: #87f0b4"></td>
-    <td style="background: #4a298e"></td>
-    <td style="background: #c98bb7"></td>
-  </tr>
-  <tr style="height: 10px"> <!-- 5px + 7px - 1px - 1px -->
-    <td style="background: #90a213"></td>
-    <td></td>
-    <td style="background: #90c157"></td>
-  </tr>
-  <tr style="height: 1px">
-    <td style="background: #9d57c1"></td>
-    <td style="background: #3a8e20"></td>
-    <td style="background: #0e6f6c"></td>
-  </tr>
-</table>
-</body>
-</html>
-<!DOCTYPE html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-style-none-auto.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>test of -moz-border-image-width: auto with border-bottom: none</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">
-
-  div {
-    border-width: 7px;
-    border-style: solid;
-    border-bottom: none;
-    -moz-border-image: url('3x3multicolor.png') 1 1 1 1 / auto;
-  }
-
-  </style>
-</head>
-<body>
-<div style="width: 100px; height: 5px"></div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-style-none-length-ref.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image-width: length with border-bottom: none reference</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">
-
-  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
-  td { padding: 0; }
-
-  </style>
-</head>
-<body>
-<table>
-  <col style="width: 7px">
-  <col style="width: 92px"> <!-- 100px + 3px + 3px - 7px - 7px -->
-  <col style="width: 7px">
-
-  <tr style="height: 7px">
-    <td style="background: #87f0b4"></td>
-    <td style="background: #4a298e"></td>
-    <td style="background: #c98bb7"></td>
-  </tr>
-  <tr style="height: 9px"> <!-- 20px + 3px - 7px - 7px -->
-    <td style="background: #90a213"></td>
-    <td></td>
-    <td style="background: #90c157"></td>
-  </tr>
-  <tr style="height: 7px">
-    <td style="background: #9d57c1"></td>
-    <td style="background: #3a8e20"></td>
-    <td style="background: #0e6f6c"></td>
-  </tr>
-</table>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-style-none-length.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>test of -moz-border-image-width: length with border-bottom: none</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">
-
-  div {
-    border-width: 3px;
-    border-style: solid;
-    border-bottom: none;
-    -moz-border-image: url('3x3multicolor.png') 1 1 1 1 / 7px;
-  }
-
-  </style>
-</head>
-<body>
-<div style="width: 100px; height: 20px"></div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-style-none-ref.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image with border-bottom: none reference</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">
-
-  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
-  td { padding: 0; }
-
-  </style>
-</head>
-<body>
-<table>
-  <col style="width: 7px">
-  <col style="width: 100px">
-  <col style="width: 7px">
-
-  <tr style="height: 7px">
-    <td style="background: #87f0b4"></td>
-    <td style="background: #4a298e"></td>
-    <td style="background: #c98bb7"></td>
-  </tr>
-  <tr style="height: 5px">
-    <td style="background: #90a213"></td>
-    <td></td>
-    <td style="background: #90c157"></td>
-  </tr>
-</table>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-style-none.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>test of -moz-border-image with border-bottom: none</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">
-
-  div {
-    border-width: 7px;
-    border-style: solid;
-    border-bottom: none;
-    -moz-border-image: url('3x3multicolor.png') 1 1 1 1 / 1;
-  }
-
-  </style>
-</head>
-<body>
-<div style="width: 100px; height: 5px"></div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-width-1-ref.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image-width: 1em reference</title>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta http-equiv="Content-Style-Type" content="text/css">
-</head>
-<body>
-<div style="border: solid #1DD813 2em">
-<div style="margin: -1em;">
-border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
-</div>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-width-1a.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image-width: 2em</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">
-  div {
-    border-width: 1em;
-    border-style: solid;
-    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 2em;
-  }
-  </style>
-</head>
-<body>
-<div>
-border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-width-1b.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image-width: 2</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">
-  div {
-    border-width: 1em;
-    border-style: solid;
-    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 2;
-  }
-  </style>
-</head>
-<body>
-<div>
-border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/border-image/border-image-width-1c.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>-moz-border-image-width: 2</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">
-  div {
-    border-width: 1em;
-    border-style: solid;
-    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-    -moz-border-image-width: 2;
-  }
-  </style>
-</head>
-<body>
-<div>
-border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
-</div>
-</body>
-</html>
--- a/layout/reftests/border-image/center-scaling-1.html
+++ b/layout/reftests/border-image/center-scaling-1.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <style>
 div {
   border-width: 27px;
-  border-style: solid;
-  -moz-border-image: url("reticule.png") 27 fill round;
+  -moz-border-image: url("reticule.png") 27 round;
   width: 216px;
   height: 108px;
 }
 </style>
 <div></div>
--- a/layout/reftests/border-image/center-scaling-2.html
+++ b/layout/reftests/border-image/center-scaling-2.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <style>
 div {
   border-width: 27px 54px;
-  border-style: solid;
-  -moz-border-image: url("reticule.png") 27 fill round;
+  -moz-border-image: url("reticule.png") 27 round;
   width: 216px;
   height: 108px;
 }
 </style>
 <div></div>
--- a/layout/reftests/border-image/center-scaling-3.html
+++ b/layout/reftests/border-image/center-scaling-3.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <style>
 div {
   border-width: 54px 27px;
-  border-style: solid;
-  -moz-border-image: url("reticule.png") 27 fill round;
+  -moz-border-image: url("reticule.png") 27 round;
   width: 216px;
   height: 108px;
 }
 </style>
 <div></div>
--- a/layout/reftests/border-image/center-scaling-4b.html
+++ b/layout/reftests/border-image/center-scaling-4b.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <style>
 div {
   border-width: 27px 27px 0 27px;
-  border-style: solid;
-  -moz-border-image: url("reticule.png") 27 fill round;
+  -moz-border-image: url("reticule.png") 27 round;
   width: 216px;
   height: 108px;
 }
 </style>
 <div></div>
--- a/layout/reftests/border-image/center-scaling-4l.html
+++ b/layout/reftests/border-image/center-scaling-4l.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <style>
 div {
   border-width: 27px 27px 27px 0;
-  border-style: solid;
-  -moz-border-image: url("reticule.png") 27 fill round;
+  -moz-border-image: url("reticule.png") 27 round;
   width: 216px;
   height: 108px;
 }
 </style>
 <div></div>
--- a/layout/reftests/border-image/center-scaling-4lr.html
+++ b/layout/reftests/border-image/center-scaling-4lr.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <style>
 div {
   border-width: 27px 0 27px 0;
-  border-style: solid;
-  -moz-border-image: url("reticule.png") 27 fill round;
+  -moz-border-image: url("reticule.png") 27 round;
   width: 216px;
   height: 108px;
 }
 </style>
 <div></div>
--- a/layout/reftests/border-image/center-scaling-4r.html
+++ b/layout/reftests/border-image/center-scaling-4r.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <style>
 div {
   border-width: 27px 0 27px 27px;
-  border-style: solid;
-  -moz-border-image: url("reticule.png") 27 fill round;
+  -moz-border-image: url("reticule.png") 27 round;
   width: 216px;
   height: 108px;
 }
 </style>
 <div></div>
--- a/layout/reftests/border-image/center-scaling-4t.html
+++ b/layout/reftests/border-image/center-scaling-4t.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <style>
 div {
   border-width: 0 27px 27px 27px;
-  border-style: solid;
-  -moz-border-image: url("reticule.png") 27 fill round;
+  -moz-border-image: url("reticule.png") 27 round;
   width: 216px;
   height: 108px;
 }
 </style>
 <div></div>
--- a/layout/reftests/border-image/center-scaling-4tb.html
+++ b/layout/reftests/border-image/center-scaling-4tb.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <style>
 div {
   border-width: 0 27px 0 27px;
-  border-style: solid;
-  -moz-border-image: url("reticule.png") 27 fill round;
+  -moz-border-image: url("reticule.png") 27 round;
   width: 216px;
   height: 108px;
 }
 </style>
 <div></div>
--- a/layout/reftests/border-image/different-h-v-1.html
+++ b/layout/reftests/border-image/different-h-v-1.html
@@ -1,15 +1,14 @@
 <!doctype html>
 <html><head>
 <style>
 div { 
   margin: 27px;
   border-width: 1em;
-  border-style: solid;
   -moz-border-image: url("diamonds.png") 27 stretch round;
   width: 270px;
   height: 135px;
 }
 </style>
 <body>
 <div></div>
 </body></html>
--- a/layout/reftests/border-image/different-h-v-2.html
+++ b/layout/reftests/border-image/different-h-v-2.html
@@ -1,15 +1,14 @@
 <!doctype html>
 <html><head>
 <style>
 div { 
   margin: 27px;
   border-width: 1em;
-  border-style: solid;
   -moz-border-image: url("diamonds.png") 27 round stretch;
   width: 270px;
   height: 135px;
 }
 </style>
 <body>
 <div></div>
 </body></html>
--- a/layout/reftests/border-image/multicolor-image-1.html
+++ b/layout/reftests/border-image/multicolor-image-1.html
@@ -2,23 +2,21 @@
 <html lang="en-US">
 <head>
   <title>test of -moz-border-image</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">
 
   div {
-    border-width: 7px;
-    border-style: solid;
     background: red; /* fail if this shows through */
     background-image: url('3x3multicolor.png'); /* fail if this shows through */
-    -moz-border-image: url('3x3multicolor.png') 1 1 1 1 fill;
-    -khtml-border-image: url('3x3multicolor.png') 1 1 1 1 fill;
-    border-image: url('3x3multicolor.png') 1 1 1 1 fill;
+    -moz-border-image: url('3x3multicolor.png') 1 1 1 1 / 7px;
+    -khtml-border-image: url('3x3multicolor.png') 1 1 1 1 / 7px;
+    border-image: url('3x3multicolor.png') 1 1 1 1 / 7px;
   }
 
   </style>
 </head>
 <body>
 <div style="width: 100px; height: 5px"></div>
 </body>
 </html>
--- a/layout/reftests/border-image/multicolor-image-2.html
+++ b/layout/reftests/border-image/multicolor-image-2.html
@@ -8,81 +8,81 @@
 
   div {
     background: red; /* fail if this shows through */
     background-image: url('3x3multicolor.png'); /* fail if this shows through */
     margin-bottom: 2px;
   }
 
   div.one {
-    -moz-border-image: url(10x5multicolor.png) 2 2 1 3 fill;
-    -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill;
-    border-image: url(10x5multicolor.png) 2 2 1 3 fill;
+    -moz-border-image: url(10x5multicolor.png) 2 2 1 3;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 1 3;
+    border-image: url(10x5multicolor.png) 2 2 1 3;
     border-width: 4px 6px 8px 11px;
-    border-style: solid;
     width: 9px;
     height: 1px;
   }
 
   div.two {
-    -moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
-    -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
-    border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
+    -moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30%;
+    -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30%;
+    border-image: url(10x5multicolor.png) 40% 20% 20% 30%;
     border-width: 3px 1px 0px 4px;
-    border-style: solid;
     width: 2px;
     height: 17px;
   }
 
   div.three {
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30%;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30%;
+    border-image: url(10x5multicolor.png) 40% 2 1 30%;
     border-width: 10px 2px 5px 3px;
-    border-style: solid;
     width: 17px;
     height: 8px;
   }
 
   div.four {
-    -moz-border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
-    -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
-    border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
+    -moz-border-image: url(10x5multicolor.png) 2 2 20% 30%;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30%;
+    border-image: url(10x5multicolor.png) 2 2 20% 30%;
     border-width: 5px 7px 1px 0;
-    border-style: solid;
     width: 8px;
     height: 5px;
   }
 
   div.five {
-    border-width: 4px 8px 10px 2px;
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-    border-style: solid;
+    border-width: 5px 6px 7px 8px; /* ignored */
+    border-width: 5px 6px 7px 8px ! important; /* ignored */
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px;
+    border-width: 5px 6px 7px 8px; /* ignored */
+    border-width: 5px 6px 7px 8px ! important; /* ignored */
     width: 0;
     height: 8px;
   }
+  div.five {
+    border-width: 5px 6px 7px 8px; /* ignored */
+    border-width: 5px 6px 7px 8px ! important; /* ignored */
+  }
 
   div.six {
-    border-width: 4px 0 10px 2px;
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-    border-style: solid;
+    border-width: 5px 6px 7px 8px; /* ignored */
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px;
     width: 17px;
     height: 0;
   }
 
   div.seven {
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30%;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30%;
+    border-image: url(10x5multicolor.png) 40% 2 1 30%;
     border-width: 1px 3px 0 0;
-    border-style: solid;
     width: 17px;
     height: 0;
   }
 
   </style>
 </head>
 <body>
 <div class="one"></div>
--- a/layout/reftests/border-image/multicolor-image-3-ref.html
+++ b/layout/reftests/border-image/multicolor-image-3-ref.html
@@ -8,51 +8,43 @@
 
   div {
     background: red; /* fail if this shows through */
     background-image: url('3x3multicolor.png'); /* fail if this shows through */
     margin-bottom: 2px;
   }
 
   div.one {
-    border-width: 4px 6px 8px 6px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 2 2 2 2;
-    -khtml-border-image: url(10x5multicolor.png) 2 2 2 2;
-    border-image: url(10x5multicolor.png) 2 2 2 2;
+    -moz-border-image: url(10x5multicolor.png) 2 2 2 2 / 4px 6px 8px 6px;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 2 2 / 4px 6px 8px 6px;
+    border-image: url(10x5multicolor.png) 2 2 2 2 / 4px 6px 8px 6px;
     width: 5px;
     height: 2px;
   }
 
   div.two {
-    border-width: 4px 4px 4px 4px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 2 1 2 1;
-    -khtml-border-image: url(10x5multicolor.png) 2 1 2 1;
-    border-image: url(10x5multicolor.png) 2 1 2 1;
+    -moz-border-image: url(10x5multicolor.png) 2 1 2 1/ 4px 4px 4px 4px;
+    -khtml-border-image: url(10x5multicolor.png) 2 1 2 1/ 4px 4px 4px 4px;
+    border-image: url(10x5multicolor.png) 2 1 2 1/ 4px 4px 4px 4px;
     width: 5px;
     height: 2px;
   }
 
   div.three {
-    border-width: 4px 2px 4px 2px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 2 3 1 3;
-    -khtml-border-image: url(10x5multicolor.png) 2 3 1 3;
-    border-image: url(10x5multicolor.png) 2 3 1 3;
+    -moz-border-image: url(10x5multicolor.png) 2 3 1 3 / 4px 2px 4px 2px;
+    -khtml-border-image: url(10x5multicolor.png) 2 3 1 3 / 4px 2px 4px 2px;
+    border-image: url(10x5multicolor.png) 2 3 1 3 / 4px 2px 4px 2px;
     width: 5px;
     height: 2px;
   }
 
   div.four {
-    border-width: 4px 3px 4px 3px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 2 3 1 1;
-    -khtml-border-image: url(10x5multicolor.png) 2 3 1 1;
-    border-image: url(10x5multicolor.png) 2 3 1 1;
+    -moz-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px 4px 3px;
+    -khtml-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px 4px 3px;
+    border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px 4px 3px;
     width: 5px;
     height: 2px;
   }
 
   </style>
 </head>
 <body>
 <div class="one"></div>
--- a/layout/reftests/border-image/multicolor-image-3.html
+++ b/layout/reftests/border-image/multicolor-image-3.html
@@ -8,51 +8,44 @@
 
   div {
     background: red; /* fail if this shows through */
     background-image: url('3x3multicolor.png'); /* fail if this shows through */
     margin-bottom: 2px;
   }
 
   div.one {
-    border-width: 4px 6px 8px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 2;
-    -khtml-border-image: url(10x5multicolor.png) 2;
-    border-image: url(10x5multicolor.png) 2;
+    -moz-border-image: url(10x5multicolor.png) 2 / 4px 6px 8px;
+    -khtml-border-image: url(10x5multicolor.png) 2 / 4px 6px 8px;
+    border-image: url(10x5multicolor.png) 2 / 4px 6px 8px;
     width: 5px;
     height: 2px;
   }
 
   div.two {
-    border-width: 4px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 2 1;
-    -khtml-border-image: url(10x5multicolor.png) 2 1;
-    border-image: url(10x5multicolor.png) 2 1;
+    -moz-border-image: url(10x5multicolor.png) 2 1 / 4px;
+    -khtml-border-image: url(10x5multicolor.png) 2 1 / 4px;
+    border-image: url(10x5multicolor.png) 2 1 / 4px;
     width: 5px;
     height: 2px;
   }
 
   div.three {
     -moz-border-image: url(10x5multicolor.png) 2 3 1;
     -khtml-border-image: url(10x5multicolor.png) 2 3 1;
     border-image: url(10x5multicolor.png) 2 3 1;
     border-width: 4px 2px;
-    border-style: solid;
     width: 5px;
     height: 2px;
   }
 
   div.four {
-    border-width: 4px 3px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 2 3 1 1;
-    -khtml-border-image: url(10x5multicolor.png) 2 3 1 1;
-    border-image: url(10x5multicolor.png) 2 3 1 1;
+    -moz-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px;
+    -khtml-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px;
+    border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px;
     width: 5px;
     height: 2px;
   }
 
   </style>
 </head>
 <body>
 <div class="one"></div>
--- a/layout/reftests/border-image/multicolor-image-4.html
+++ b/layout/reftests/border-image/multicolor-image-4.html
@@ -25,81 +25,81 @@
 
   div {
     background: red; /* fail if this shows through */
     background-image: url('3x3multicolor.png'); /* fail if this shows through */
     margin-bottom: 2px;
   }
 
   div.one {
-    -moz-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
-    -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
-    border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
+    -moz-border-image: url(10x5multicolor.png) 2 2 1 3 stretch;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 stretch;
+    border-image: url(10x5multicolor.png) 2 2 1 3 stretch;
     border-width: 4px 6px 8px 11px;
-    border-style: solid;
     width: 9px;
     height: 1px;
   }
 
   div.two {
-    -moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
-    -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
-    border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
+    -moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat;
+    border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat;
     border-width: 3px 1px 0px 4px;
-    border-style: solid;
     width: 2px;
     height: 17px;
   }
 
   div.three {
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% round;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% round;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% round;
     border-width: 10px 2px 5px 3px;
-    border-style: solid;
     width: 17px;
     height: 8px;
   }
 
   div.four {
-    -moz-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
-    -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
-    border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
+    -moz-border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round;
+    border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round;
     border-width: 5px 7px 1px 0;
-    border-style: solid;
     width: 8px;
     height: 5px;
   }
 
   div.five {
-    border-width: 4px 8px 10px 2px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
+    border-width: 5px 6px 7px 8px; /* ignored */
+    border-width: 5px 6px 7px 8px ! important; /* ignored */
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch;
+    border-width: 5px 6px 7px 8px; /* ignored */
+    border-width: 5px 6px 7px 8px ! important; /* ignored */
     width: 0;
     height: 8px;
   }
+  div.five {
+    border-width: 5px 6px 7px 8px; /* ignored */
+    border-width: 5px 6px 7px 8px ! important; /* ignored */
+  }
 
   div.six {
-    border-width: 4px 0 10px 2px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
+    border-width: 5px 6px 7px 8px; /* ignored */
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat;
     width: 17px;
     height: 0;
   }
 
   div.seven {
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
     border-width: 1px 3px 0 0;
-    border-style: solid;
     width: 17px;
     height: 0;
   }
 
   </style>
 </head>
 <body>
 <div class="one"></div>
--- a/layout/reftests/border-image/multicolor-image-5.html
+++ b/layout/reftests/border-image/multicolor-image-5.html
@@ -26,81 +26,81 @@
 
   div {
     background: red; /* fail if this shows through */
     background-image: url('3x3multicolor.png'); /* fail if this shows through */
     margin-bottom: 2px;
   }
 
   div.one {
-    -moz-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
-    -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
-    border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
+    -moz-border-image: url(10x5multicolor.png) 2 2 1 3 stretch;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 stretch;
+    border-image: url(10x5multicolor.png) 2 2 1 3 stretch;
     border-width: 4px 6px 8px 11px;
-    border-style: solid;
     width: 9px;
     height: 1px;
   }
 
   div.two {
-    -moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
-    -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
-    border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
+    -moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat;
+    border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat;
     border-width: 3px 1px 0px 4px;
-    border-style: solid;
     width: 2px;
     height: 17px;
   }
 
   div.three {
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% round;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% round;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% round;
     border-width: 10px 2px 5px 3px;
-    border-style: solid;
     width: 17px;
     height: 8px;
   }
 
   div.four {
-    -moz-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
-    -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
-    border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
+    -moz-border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round;
+    border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round;
     border-width: 5px 7px 1px 0;
-    border-style: solid;
     width: 8px;
     height: 5px;
   }
 
   div.five {
-    border-width: 4px 8px 10px 2px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
+    border-width: 5px 6px 7px 8px; /* ignored */
+    border-width: 5px 6px 7px 8px ! important; /* ignored */
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch;
+    border-width: 5px 6px 7px 8px; /* ignored */
+    border-width: 5px 6px 7px 8px ! important; /* ignored */
     width: 0;
     height: 8px;
   }
+  div.five {
+    border-width: 5px 6px 7px 8px; /* ignored */
+    border-width: 5px 6px 7px 8px ! important; /* ignored */
+  }
 
   div.six {
-    border-width: 4px 0 10px 2px;
-    border-style: solid;
-    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
-    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
-    border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
+    border-width: 5px 6px 7px 8px; /* ignored */
+    -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat;
     width: 17px;
     height: 0;
   }
 
   div.seven {
     -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
     -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
     border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
     border-width: 1px 3px 0 0;
-    border-style: solid;
     width: 17px;
     height: 0;
   }
 
   </style>
 </head>
 <body>
 <div class="one"></div>
--- a/layout/reftests/border-image/reftest.list
+++ b/layout/reftests/border-image/reftest.list
@@ -1,10 +1,9 @@
 == solid-image-1.html solid-image-1-ref.html
-== solid-image-1a.html solid-image-1-ref.html
 == solid-image-2.html solid-image-2-ref.html
 == solid-image-2a.html solid-image-2-ref.html
 == multicolor-image-1.html multicolor-image-1-ref.html
 == multicolor-image-2.html multicolor-image-2-ref.html
 == multicolor-image-3.html multicolor-image-3-ref.html
 == multicolor-image-4.html multicolor-image-4-ref.html
 == multicolor-image-5.html multicolor-image-5-ref.html
 == transparent-image-1.html transparent-image-1-ref.html
@@ -20,20 +19,8 @@
 == center-scaling-4t.html center-scaling-4t-ref.html
 == center-scaling-4r.html center-scaling-4r-ref.html
 == center-scaling-4b.html center-scaling-4b-ref.html
 == center-scaling-4l.html center-scaling-4l-ref.html
 == center-scaling-4tb.html center-scaling-4tb-ref.html
 == center-scaling-4lr.html center-scaling-4lr-ref.html
 == side-scaling-1h.html side-scaling-1h-ref.html
 == side-scaling-1v.html side-scaling-1v-ref.html
-== border-image-width-1a.html border-image-width-1-ref.html
-== border-image-width-1b.html border-image-width-1-ref.html
-== border-image-width-1c.html border-image-width-1-ref.html
-== border-image-outset-1a.html border-image-outset-1-ref.html
-== border-image-outset-1b.html border-image-outset-1-ref.html
-== border-image-outset-1c.html border-image-outset-1-ref.html
-== border-image-nofill-1.html border-image-nofill-1-ref.html
-== border-image-outset-resize-1.html border-image-outset-resize-1-ref.html
-== border-image-outset-move-1.html border-image-outset-move-1-ref.html
-== border-image-style-none.html border-image-style-none-ref.html
-== border-image-style-none-length.html border-image-style-none-length-ref.html
-== border-image-style-none-auto.html border-image-style-none-auto-ref.html
--- a/layout/reftests/border-image/repeat-image-1.html
+++ b/layout/reftests/border-image/repeat-image-1.html
@@ -4,31 +4,27 @@
   <title>test of -moz-border-image</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">
 
   div.p1 {
     background: red; /* fail if this shows through */
     background-image: url('3x3multicolor.png'); /* fail if this shows through */
-    border-width: 1px 3px;
-    border-style: solid;
-    -moz-border-image: url('4x4multicolor.png') 1 1 1 1 repeat;
-    -khtml-border-image: url('4x4multicolor.png') 1 1 1 1 repeat;
-    border-image: url('4x4multicolor.png') 1 1 1 1 repeat;
+    -moz-border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px repeat;
+    -khtml-border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px repeat;
+    border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px repeat;
   }
 
   div.p2 {
     background: red; /* fail if this shows through */
     background-image: url('3x3multicolor.png'); /* fail if this shows through */
-    border-width: 1px 3px;
-    border-style: solid;
-    -moz-border-image: url('4x4multicolor.png') 1 1 1 1;
-    -khtml-border-image: url('4x4multicolor.png') 1 1 1 1;
-    border-image: url('4x4multicolor.png') 1 1 1 1;
+    -moz-border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px;
+    -khtml-border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px;
+    border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px;
   }
 
   </style>
 </head>
 <body>
 <div class="p1" style="width: 4px; height: 2px"></div>
 <!--<div class="p2" style="width: 4px; height: 2px"></div> -->
 </body>
--- a/layout/reftests/border-image/solid-image-1.html
+++ b/layout/reftests/border-image/solid-image-1.html
@@ -1,20 +1,18 @@
 <!DOCTYPE html>
 <html lang="en-US">
 <head>
   <title>test of -moz-border-image</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">
   div {
-    border-width: 1em;
-    border-style: solid;
-    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-    -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-    border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 1em;
+    -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 1em;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1 / 1em;
   }
   </style>
 </head>
 <body>
 <div>border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div>
 </body>
 </html>
deleted file mode 100644
--- a/layout/reftests/border-image/solid-image-1a.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <title>test of -moz-border-image</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">
-  div {
-    border-width: 1em;
-    border-style: solid;
-    -moz-border-image-source: url('3x3green-1DD813.png');
-    -moz-border-image-slice: 1 1 1 1;
-  }
-  </style>
-</head>
-<body>
-<div>border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div>
-</body>
-</html>
--- a/layout/reftests/border-image/solid-image-2.html
+++ b/layout/reftests/border-image/solid-image-2.html
@@ -2,21 +2,19 @@
 <html lang="en-US">
 <head>
   <title>test of -moz-border-image</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">
 
   div {
-    border-width: 10px;
-    border-style: solid;
-    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-    -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-    border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px;
+    -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px;
     margin: 1px;
   }
 
   </style>
 </head>
 <body>
 <div style="width: 50px; height: 5px"></div>
 <div style="width: 51px; height: 5px"></div>
--- a/layout/reftests/border-image/solid-image-2a.html
+++ b/layout/reftests/border-image/solid-image-2a.html
@@ -2,21 +2,19 @@
 <html lang="en-US">
 <head>
   <title>test of -moz-border-image</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">
 
   div {
-    border-width: 10px;
-    border-style: solid;
-    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat;
-    -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat;
-    border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat;
+    -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px repeat;
+    -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px repeat;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px repeat;
     margin: 1px;
   }
 
   </style>
 </head>
 <body>
 <div style="width: 50px; height: 5px"></div>
 <div style="width: 51px; height: 5px"></div>
--- a/layout/reftests/bugs/468473-1.xul
+++ b/layout/reftests/bugs/468473-1.xul
@@ -1,10 +1,10 @@
 <?xml version="1.0"?>
 <window title="Missing repaint when using -moz-border-image on a XUL button"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
 <hbox>
-<button label="Button" style="min-width: 0; -moz-appearance: none; border-width: 0; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px; border-style: solid; -moz-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAMAAADnhAzLAAAAsVBMVEUAAAAAAAAAAAD///////8QEBAAAAAHBwcQEBD///8GBgYAAAAAAAAAAAAAAAAODg4AAAA2NjYAAAAAAAAGBgYREREAAAAQEBAAAAA4ODiJiYkSEhIAAADExMQAAAAICAhra2stLS0ODg4JCQklJSX///8HBwcGBgb///////98fHz///////+hoaE4ODj////////e3t6np6dxcXFUVFROTk7///////////////////+i+RpeAAAAO3RSTlNKAEwHAlBRbU8Ff2heWVdcZyFPTX1MZE5VIGpIVFdOXFhVWFdaQWp4El1tIGp6YBhhjYNxbWwnVXeDhIrUVQ0AAACvSURBVHheXdDXDoJAEIXhMztL73ZRFBXE3vv7P5hrognrfzdfMjcHRJIT22q5bsuyE5ZEIIe7lecHYRj4XtVlhyA5inuNplA1G704Yglud0yBb8LstBn9uYla5ryPwRBawwFmI51GM4yFTmKMKfQUTKCnIP9/zJEVOhUZytSoi5GWWCxXNTNWywVovdnufrLbbtYEov3heDpfrtfL+XQ87OlDJG/3x/P1ej7uN6nON0ZMDbf0SRXfAAAAAElFTkSuQmCC) 0 8 fill;"/>
+<button label="Button" style="min-width: 0; -moz-appearance: none; border-width: 0; padding: 0; margin: 0; visibility:hidden; -moz-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAMAAADnhAzLAAAAsVBMVEUAAAAAAAAAAAD///////8QEBAAAAAHBwcQEBD///8GBgYAAAAAAAAAAAAAAAAODg4AAAA2NjYAAAAAAAAGBgYREREAAAAQEBAAAAA4ODiJiYkSEhIAAADExMQAAAAICAhra2stLS0ODg4JCQklJSX///8HBwcGBgb///////98fHz///////+hoaE4ODj////////e3t6np6dxcXFUVFROTk7///////////////////+i+RpeAAAAO3RSTlNKAEwHAlBRbU8Ff2heWVdcZyFPTX1MZE5VIGpIVFdOXFhVWFdaQWp4El1tIGp6YBhhjYNxbWwnVXeDhIrUVQ0AAACvSURBVHheXdDXDoJAEIXhMztL73ZRFBXE3vv7P5hrognrfzdfMjcHRJIT22q5bsuyE5ZEIIe7lecHYRj4XtVlhyA5inuNplA1G704Yglud0yBb8LstBn9uYla5ryPwRBawwFmI51GM4yFTmKMKfQUTKCnIP9/zJEVOhUZytSoi5GWWCxXNTNWywVovdnufrLbbtYEov3heDpfrtfL+XQ87OlDJG/3x/P1ej7uN6nON0ZMDbf0SRXfAAAAAElFTkSuQmCC) 0 8 / 0 8px;"/>
 <box flex="1" style="background: green" />
 </hbox>
 
 </window>
--- a/layout/reftests/pixel-rounding/border-image-width-0.html
+++ b/layout/reftests/pixel-rounding/border-image-width-0.html
@@ -1,39 +1,59 @@
 <!DOCTYPE HTML>
 <html>
 <head>
 <title>Pixel rounding testcase</title>
 <style type="text/css">
 
 html, body { margin: 0; border: none; padding: 0; }
-div { position: absolute; height: 10px; width: 10px; border-style: solid; }
+div { position: absolute; height: 10px; width: 10px; }
 
 </style>
 </head>
 <body>
 
+<div style="top: 10px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px;"></div>
 <div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div>
 
+<div style="top: 30px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round;"></div>
+<div style="top: 30px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round round;"></div>
+<div style="top: 30px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round round;"></div>
+<div style="top: 30px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round;"></div>
+<div style="top: 30px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round;"></div>
 <div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2px 2px 2px 2px;"></div>
 
+<div style="top: 50px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat;"></div>
+<div style="top: 50px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat repeat;"></div>
+<div style="top: 50px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat repeat;"></div>
+<div style="top: 50px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat;"></div>
+<div style="top: 50px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat;"></div>
 <div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2px 2px 2px 2px;"></div>
 
+<div style="top: 70px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat round;"></div>
+<div style="top: 70px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px stretch repeat;"></div>
+<div style="top: 70px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round repeat;"></div>
+<div style="top: 70px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat stretch;"></div>
+<div style="top: 70px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round stretch;"></div>
 <div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 70px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2px;"></div>
 <div style="top: 70px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2px;"></div>
 
 </body>
 </html>
--- a/layout/reftests/pixel-rounding/border-image-width-10.html
+++ b/layout/reftests/pixel-rounding/border-image-width-10.html
@@ -1,39 +1,59 @@
 <!DOCTYPE HTML>
 <html>
 <head>
 <title>Pixel rounding testcase</title>
 <style type="text/css">
 
 html, body { margin: 0; border: none; padding: 0; }
-div { position: absolute; height: 10px; width: 10px; border-style:solid; }
+div { position: absolute; height: 10px; width: 10px; }
 
 </style>
 </head>
 <body>
 
+<div style="top: 10px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 3px 2px 2px;"></div>
+<div style="top: 10px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 3px 2px;"></div>
+<div style="top: 10px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 3px;"></div>
+<div style="top: 10px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 3px 3px 3px;"></div>
 <div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 3px 2px 2px 2px;"></div>
 <div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 3px 2px 2px;"></div>
 <div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 3px 2px;"></div>
 <div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 3px;"></div>
 <div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 3px 3px 3px 3px;"></div>
 
+<div style="top: 30px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 2px 2px 2px round;"></div>
+<div style="top: 30px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 3px 2px 2px round round;"></div>
+<div style="top: 30px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 3px 2px round round;"></div>
+<div style="top: 30px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 3px round;"></div>
+<div style="top: 30px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 3px 3px 3px round;"></div>
 <div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 3px 2px 2px 2px;"></div>
 <div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 3px 2px 2px;"></div>
 <div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 3px 2px;"></div>
 <div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 3px;"></div>
 <div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 3px 3px 3px 3px;"></div>
 
+<div style="top: 50px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 2px 2px 2px repeat;"></div>
+<div style="top: 50px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 3px 2px 2px repeat repeat;"></div>
+<div style="top: 50px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 3px 2px repeat repeat;"></div>
+<div style="top: 50px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 3px repeat;"></div>
+<div style="top: 50px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 3px 3px 3px repeat;"></div>
 <div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 3px 2px 2px 2px;"></div>
 <div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 3px 2px 2px;"></div>
 <div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 3px 2px;"></div>
 <div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 3px;"></div>
 <div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 3px 3px 3px 3px;"></div>
 
+<div style="top: 70px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 2px 2px 2px repeat round;"></div>
+<div style="top: 70px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 3px 2px 2px stretch repeat;"></div>
+<div style="top: 70px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 3px 2px round repeat;"></div>
+<div style="top: 70px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 3px repeat stretch;"></div>
+<div style="top: 70px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 3px 3px 3px round stretch;"></div>
 <div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 3px 2px 2px 2px;"></div>
 <div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 3px 2px 2px;"></div>
 <div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 3px 2px;"></div>
 <div style="top: 70px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 3px;"></div>
 <div style="top: 70px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 3px 3px 3px 3px;"></div>
 
 </body>
 </html>
--- a/layout/reftests/pixel-rounding/border-image-width-4.html
+++ b/layout/reftests/pixel-rounding/border-image-width-4.html
@@ -1,39 +1,59 @@
 <!DOCTYPE HTML>
 <html>
 <head>
 <title>Pixel rounding testcase</title>
 <style type="text/css">
 
 html, body { margin: 0; border: none; padding: 0; }
-div { position: absolute; height: 10px; width: 10px; border-style: solid; }
+div { position: absolute; height: 10px; width: 10px; }
 
 </style>
 </head>
 <body>
 
+<div style="top: 10px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.4px 2px 2px;"></div>
+<div style="top: 10px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.4px 2px;"></div>
+<div style="top: 10px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.4px;"></div>
+<div style="top: 10px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2.4px 2.4px 2.4px;"></div>
 <div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2px 2px 2px;"></div>
 <div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.4px 2px 2px;"></div>
 <div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.4px 2px;"></div>
 <div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.4px;"></div>
 <div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
 
+<div style="top: 30px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2px 2px 2px round;"></div>
+<div style="top: 30px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.4px 2px 2px round round;"></div>
+<div style="top: 30px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.4px 2px round round;"></div>
+<div style="top: 30px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.4px round;"></div>
+<div style="top: 30px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2.4px 2.4px 2.4px round;"></div>
 <div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2px 2px 2px;"></div>
 <div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.4px 2px 2px;"></div>
 <div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.4px 2px;"></div>
 <div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.4px;"></div>
 <div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
 
+<div style="top: 50px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2px 2px 2px repeat;"></div>
+<div style="top: 50px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.4px 2px 2px repeat repeat;"></div>
+<div style="top: 50px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.4px 2px repeat repeat;"></div>
+<div style="top: 50px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.4px repeat;"></div>
+<div style="top: 50px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2.4px 2.4px 2.4px repeat;"></div>
 <div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2px 2px 2px;"></div>
 <div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.4px 2px 2px;"></div>
 <div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.4px 2px;"></div>
 <div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.4px;"></div>
 <div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
 
+<div style="top: 70px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2px 2px 2px repeat round;"></div>
+<div style="top: 70px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.4px 2px 2px stretch repeat;"></div>
+<div style="top: 70px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.4px 2px round repeat;"></div>
+<div style="top: 70px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.4px repeat stretch;"></div>
+<div style="top: 70px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2.4px 2.4px 2.4px round stretch;"></div>
 <div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.4px 2px 2px 2px;"></div>
 <div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.4px 2px 2px;"></div>
 <div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.4px 2px;"></div>
 <div style="top: 70px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2.4px;"></div>
 <div style="top: 70px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
 
 </body>
 </html>
--- a/layout/reftests/pixel-rounding/border-image-width-9.html
+++ b/layout/reftests/pixel-rounding/border-image-width-9.html
@@ -1,39 +1,59 @@
 <!DOCTYPE HTML>
 <html>
 <head>
 <title>Pixel rounding testcase</title>
 <style type="text/css">
 
 html, body { margin: 0; border: none; padding: 0; }
-div { position: absolute; height: 10px; width: 10px; border-style: solid;}
+div { position: absolute; height: 10px; width: 10px; }
 
 </style>
 </head>
 <body>
 
+<div style="top: 10px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.9px 2px 2px;"></div>
+<div style="top: 10px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.9px 2px;"></div>
+<div style="top: 10px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.9px;"></div>
+<div style="top: 10px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2.9px 2.9px 2.9px;"></div>
 <div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.9px 2px 2px 2px;"></div>
 <div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.9px 2px 2px;"></div>
 <div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.9px 2px;"></div>
 <div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.9px;"></div>
 <div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
 
+<div style="top: 30px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2px 2px 2px round;"></div>
+<div style="top: 30px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.9px 2px 2px round round;"></div>
+<div style="top: 30px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.9px 2px round round;"></div>
+<div style="top: 30px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.9px round;"></div>
+<div style="top: 30px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2.9px 2.9px 2.9px round;"></div>
 <div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.9px 2px 2px 2px;"></div>
 <div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.9px 2px 2px;"></div>
 <div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.9px 2px;"></div>
 <div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.9px;"></div>
 <div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
 
+<div style="top: 50px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2px 2px 2px repeat;"></div>
+<div style="top: 50px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.9px 2px 2px repeat repeat;"></div>
+<div style="top: 50px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.9px 2px repeat repeat;"></div>
+<div style="top: 50px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.9px repeat;"></div>
+<div style="top: 50px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2.9px 2.9px 2.9px repeat;"></div>
 <div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.9px 2px 2px 2px;"></div>
 <div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.9px 2px 2px;"></div>
 <div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.9px 2px;"></div>
 <div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.9px;"></div>
 <div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
 
+<div style="top: 70px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2px 2px 2px repeat round;"></div>
+<div style="top: 70px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.9px 2px 2px stretch repeat;"></div>
+<div style="top: 70px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.9px 2px round repeat;"></div>
+<div style="top: 70px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.9px repeat stretch;"></div>
+<div style="top: 70px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2.9px 2.9px 2.9px round stretch;"></div>
 <div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.9px 2px 2px 2px;"></div>
 <div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.9px 2px 2px;"></div>
 <div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.9px 2px;"></div>
 <div style="top: 70px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2.9px;"></div>
 <div style="top: 70px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
 
 </body>
 </html>
--- a/layout/reftests/svg/as-image/border-image-simple-1.html
+++ b/layout/reftests/svg/as-image/border-image-simple-1.html
@@ -1,6 +1,7 @@
 <html>
 <body>
-  <div style="height: 100px; width: 100px;
-              -moz-border-image: url('lime100x100.png') 0 fill;"/>
+  <div style="margin-left: -3px; margin-top: -3px;
+              height: 100px; width: 100px;
+              -moz-border-image: url('lime100x100.svg') 0;"/>
 </body>
 </html>
--- a/layout/reftests/svg/as-image/border-image-simple-2.html
+++ b/layout/reftests/svg/as-image/border-image-simple-2.html
@@ -1,6 +1,7 @@
 <html>
 <body>
-  <div style="height: 100px; width: 100px;
-              -moz-border-image: url('lime100x100-noSVGDimensions.svg') 0 fill;"/>
+  <div style="margin-left: -3px; margin-top: -3px;
+              height: 100px; width: 100px;
+              -moz-border-image: url('lime100x100-noSVGDimensions.svg') 0;"/>
 </body>
 </html>
--- a/layout/style/Declaration.cpp
+++ b/layout/style/Declaration.cpp
@@ -295,27 +295,16 @@ Declaration::GetValue(nsCSSProperty aPro
             vals[i]->AppendToString(subprops[i], aValue);
           }
           if (i < 3)
             aValue.Append(PRUnichar(' '));
         }
       }
       break;
     }
-    case eCSSProperty_border_image:
-      AppendValueToString(eCSSProperty_border_image_source, aValue);
-      aValue.Append(PRUnichar(' '));
-      AppendValueToString(eCSSProperty_border_image_slice, aValue);
-      aValue.Append(NS_LITERAL_STRING(" / "));
-      AppendValueToString(eCSSProperty_border_image_width, aValue);
-      aValue.Append(NS_LITERAL_STRING(" / "));
-      AppendValueToString(eCSSProperty_border_image_outset, aValue);
-      aValue.Append(PRUnichar(' '));
-      AppendValueToString(eCSSProperty_border_image_repeat, aValue);
-      break;
     case eCSSProperty_border: {
       const nsCSSProperty* subproptables[3] = {
         nsCSSProps::SubpropertyEntryFor(eCSSProperty_border_color),
         nsCSSProps::SubpropertyEntryFor(eCSSProperty_border_style),
         nsCSSProps::SubpropertyEntryFor(eCSSProperty_border_width)
       };
       bool match = true;
       for (const nsCSSProperty** subprops = subproptables,
--- a/layout/style/nsCSSParser.cpp
+++ b/layout/style/nsCSSParser.cpp
@@ -1,10 +1,9 @@
 /* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ts=2 et sw=2 tw=78: */
 /* ***** BEGIN LICENSE BLOCK *****
  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  *
  * The contents of this file are subject to the Mozilla Public License Version
  * 1.1 (the "License"); you may not use this file except in compliance with
  * the License. You may obtain a copy of the License at
  * http://www.mozilla.org/MPL/
  *
@@ -124,17 +123,16 @@ using namespace mozilla;
 #define VARIANT_ZERO_ANGLE    0x02000000  // unitless zero for angles
 #define VARIANT_CALC          0x04000000  // eCSSUnit_Calc
 #define VARIANT_ELEMENT       0x08000000  // eCSSUnit_Element
 #define VARIANT_POSITIVE_LENGTH 0x10000000 // Only lengths greater than 0.0
 
 // Common combinations of variants
 #define VARIANT_AL   (VARIANT_AUTO | VARIANT_LENGTH)
 #define VARIANT_LP   (VARIANT_LENGTH | VARIANT_PERCENT)
-#define VARIANT_LN   (VARIANT_LENGTH | VARIANT_NUMBER)
 #define VARIANT_AH   (VARIANT_AUTO | VARIANT_INHERIT)
 #define VARIANT_AHLP (VARIANT_AH | VARIANT_LP)
 #define VARIANT_AHI  (VARIANT_AH | VARIANT_INTEGER)
 #define VARIANT_AHK  (VARIANT_AH | VARIANT_KEYWORD)
 #define VARIANT_AHKLP (VARIANT_AHLP | VARIANT_KEYWORD)
 #define VARIANT_AHL  (VARIANT_AH | VARIANT_LENGTH)
 #define VARIANT_AHKL (VARIANT_AHK | VARIANT_LENGTH)
 #define VARIANT_HK   (VARIANT_INHERIT | VARIANT_KEYWORD)
@@ -151,18 +149,16 @@ using namespace mozilla;
 #define VARIANT_HTP  (VARIANT_INHERIT | VARIANT_TIME | VARIANT_PERCENT)
 #define VARIANT_HMK  (VARIANT_HK | VARIANT_NORMAL)
 #define VARIANT_HC   (VARIANT_INHERIT | VARIANT_COLOR)
 #define VARIANT_HCK  (VARIANT_HK | VARIANT_COLOR)
 #define VARIANT_HUK  (VARIANT_HK | VARIANT_URL)
 #define VARIANT_HUO  (VARIANT_INHERIT | VARIANT_URL | VARIANT_NONE)
 #define VARIANT_AHUO (VARIANT_AUTO | VARIANT_HUO)
 #define VARIANT_HPN  (VARIANT_INHERIT | VARIANT_PERCENT | VARIANT_NUMBER)
-#define VARIANT_PN   (VARIANT_PERCENT | VARIANT_NUMBER)
-#define VARIANT_ALPN (VARIANT_AL | VARIANT_PN)
 #define VARIANT_HN   (VARIANT_INHERIT | VARIANT_NUMBER)
 #define VARIANT_HON  (VARIANT_HN | VARIANT_NONE)
 #define VARIANT_HOS  (VARIANT_INHERIT | VARIANT_NONE | VARIANT_STRING)
 #define VARIANT_LPN  (VARIANT_LP | VARIANT_NUMBER)
 #define VARIANT_UK   (VARIANT_URL | VARIANT_KEYWORD)
 #define VARIANT_UO   (VARIANT_URL | VARIANT_NONE)
 #define VARIANT_ANGLE_OR_ZERO (VARIANT_ANGLE | VARIANT_ZERO_ANGLE)
 #define VARIANT_LPCALC (VARIANT_LENGTH | VARIANT_CALC | VARIANT_PERCENT)
@@ -485,25 +481,16 @@ protected:
   bool ParseBoxPositionValues(nsCSSValuePair& aOut, bool aAcceptsInherit,
                               bool aAllowExplicitCenter = true); // deprecated
   bool ParseBackgroundPositionValues(nsCSSValue& aOut, bool aAcceptsInherit);
 
   bool ParseBackgroundSize();
   bool ParseBackgroundSizeValues(nsCSSValuePair& aOut);
   bool ParseBorderColor();
   bool ParseBorderColors(nsCSSProperty aProperty);
-  void SetBorderImageInitialValues();
-  bool ParseBorderImageRepeat(bool aAcceptsInherit);
-  // If ParseBorderImageSlice returns false, aConsumedTokens indicates
-  // whether or not any tokens were consumed (in other words, was the property
-  // in error or just not present).  If ParseBorderImageSlice returns true
-  // aConsumedTokens is always true.
-  bool ParseBorderImageSlice(bool aAcceptsInherit, bool* aConsumedTokens);
-  bool ParseBorderImageWidth(bool aAcceptsInherit);
-  bool ParseBorderImageOutset(bool aAcceptsInherit);
   bool ParseBorderImage();
   bool ParseBorderSpacing();
   bool ParseBorderSide(const nsCSSProperty aPropIDs[],
                          bool aSetAllSides);
   bool ParseDirectionalBorderSide(const nsCSSProperty aPropIDs[],
                                     PRInt32 aSourceType);
   bool ParseBorderStyle();
   bool ParseBorderWidth();
@@ -567,18 +554,16 @@ protected:
 
   bool ParsePaint(nsCSSProperty aPropID);
   bool ParseDasharray();
   bool ParseMarker();
 
   // Reused utility parsing routines
   void AppendValue(nsCSSProperty aPropID, const nsCSSValue& aValue);
   bool ParseBoxProperties(const nsCSSProperty aPropIDs[]);
-  bool ParseGroupedBoxProperty(PRInt32 aVariantMask,
-                               nsCSSValue& aValue);
   bool ParseDirectionalBoxProperty(nsCSSProperty aProperty,
                                      PRInt32 aSourceType);
   bool ParseBoxCornerRadius(const nsCSSProperty aPropID);
   bool ParseBoxCornerRadii(const nsCSSProperty aPropIDs[]);
   PRInt32 ParseChoice(nsCSSValue aValues[],
                       const nsCSSProperty aPropIDs[], PRInt32 aNumIDs);
   bool ParseColor(nsCSSValue& aValue);
   bool ParseColorComponent(PRUint8& aComponent,
@@ -5234,50 +5219,16 @@ CSSParserImpl::ParseBoxProperties(const 
   }
 
   NS_FOR_CSS_SIDES (index) {
     AppendValue(aPropIDs[index], result.*(nsCSSRect::sides[index]));
   }
   return true;
 }
 
-// Similar to ParseBoxProperties, except there is only one property
-// with the result as its value, not four. Requires values be nonnegative.
-bool
-CSSParserImpl::ParseGroupedBoxProperty(PRInt32 aVariantMask,
-                                       /** outparam */ nsCSSValue& aValue)
-{
-  nsCSSRect& result = aValue.SetRectValue();
-
-  PRInt32 count = 0;
-  NS_FOR_CSS_SIDES (index) {
-    if (!ParseNonNegativeVariant(result.*(nsCSSRect::sides[index]),
-                                 aVariantMask, nsnull)) {
-      break;
-    }
-    count++;
-  }
-
-  if (count == 0) {
-    return false;
-  }
-
-  // Provide missing values by replicating some of the values found
-  switch (count) {
-    case 1: // Make right == top
-      result.mRight = result.mTop;
-    case 2: // Make bottom == top
-      result.mBottom = result.mTop;
-    case 3: // Make left == right
-      result.mLeft = result.mRight;
-  }
-
-  return true;
-}
-
 bool
 CSSParserImpl::ParseDirectionalBoxProperty(nsCSSProperty aProperty,
                                            PRInt32 aSourceType)
 {
   const nsCSSProperty* subprops = nsCSSProps::SubpropertyEntryFor(aProperty);
   NS_ASSERTION(subprops[3] == eCSSProperty_UNKNOWN,
                "not box property with physical vs. logical cascading");
   nsCSSValue value;
@@ -5493,24 +5444,16 @@ CSSParserImpl::ParsePropertyByFunction(n
                                       NS_BOXPROP_SOURCE_LOGICAL);
   case eCSSProperty_border_top:
     return ParseBorderSide(kBorderTopIDs, false);
   case eCSSProperty_border_bottom_colors:
   case eCSSProperty_border_left_colors:
   case eCSSProperty_border_right_colors:
   case eCSSProperty_border_top_colors:
     return ParseBorderColors(aPropID);
-  case eCSSProperty_border_image_slice:
-    return ParseBorderImageSlice(true, nsnull);
-  case eCSSProperty_border_image_width:
-    return ParseBorderImageWidth(true);
-  case eCSSProperty_border_image_outset:
-    return ParseBorderImageOutset(true);
-  case eCSSProperty_border_image_repeat:
-    return ParseBorderImageRepeat(true);
   case eCSSProperty_border_image:
     return ParseBorderImage();
   case eCSSProperty_border_width:
     return ParseBorderWidth();
   case eCSSProperty_border_end_color:
     return ParseDirectionalBoxProperty(eCSSProperty_border_end_color,
                                        NS_BOXPROP_SOURCE_LOGICAL);
   case eCSSProperty_border_left_color:
@@ -6571,260 +6514,93 @@ CSSParserImpl::ParseBorderColor()
     eCSSProperty_UNKNOWN
   };
 
   // do this now, in case 4 values weren't specified
   InitBoxPropsAsPhysical(kBorderColorSources);
   return ParseBoxProperties(kBorderColorIDs);
 }
 
-void
-CSSParserImpl::SetBorderImageInitialValues()
-{
-  // border-image-source: none
-  nsCSSValue source;
-  source.SetNoneValue();
-  AppendValue(eCSSProperty_border_image_source, source);
-
-  // border-image-slice: 100%
-  nsCSSValue sliceBoxValue;
-  nsCSSRect& sliceBox = sliceBoxValue.SetRectValue();
-  sliceBox.SetAllSidesTo(nsCSSValue(1.0f, eCSSUnit_Percent));
-  nsCSSValue slice;
-  nsCSSValueList* sliceList = slice.SetListValue();
-  sliceList->mValue = sliceBoxValue;
-  AppendValue(eCSSProperty_border_image_slice, slice);
-
-  // border-image-width: 1
-  nsCSSValue width;
-  nsCSSRect& widthBox = width.SetRectValue();
-  widthBox.SetAllSidesTo(nsCSSValue(1.0f, eCSSUnit_Number));
-  AppendValue(eCSSProperty_border_image_width, width);
-
-  // border-image-outset: 0
-  nsCSSValue outset;
-  nsCSSRect& outsetBox = outset.SetRectValue();
-  outsetBox.SetAllSidesTo(nsCSSValue(0.0f, eCSSUnit_Number));
-  AppendValue(eCSSProperty_border_image_outset, outset);
-
-  // border-image-repeat: repeat
-  nsCSSValue repeat;
-  nsCSSValuePair repeatPair;
-  repeatPair.SetBothValuesTo(nsCSSValue(NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH,
-                                        eCSSUnit_Enumerated));
-  repeat.SetPairValue(&repeatPair);
-  AppendValue(eCSSProperty_border_image_repeat, repeat);
-}
-
-bool
-CSSParserImpl::ParseBorderImageSlice(bool aAcceptsInherit,
-                                     bool* aConsumedTokens)
-{
-  // border-image-slice: initial | [<number>|<percentage>]{1,4} && fill?
-  nsCSSValue value;
-
-  if (aConsumedTokens) {
-    *aConsumedTokens = true;
-  }
-
-  if (aAcceptsInherit && ParseVariant(value, VARIANT_INHERIT, nsnull)) {
-    // Keyword "inherit" can not be mixed, so we are done.
-    AppendValue(eCSSProperty_border_image_slice, value);
-    return true;
-  }
-
-  // Try parsing "fill" value.
-  nsCSSValue imageSliceFillValue;
-  bool hasFill = ParseEnum(imageSliceFillValue,
-                           nsCSSProps::kBorderImageSliceKTable);
-
-  // Parse the box dimensions.
-  nsCSSValue imageSliceBoxValue;
-  if (!ParseGroupedBoxProperty(VARIANT_PN, imageSliceBoxValue)) {
-    if (!hasFill && aConsumedTokens) {
-      *aConsumedTokens = false;
-    }
-
-    return false;
-  }
-
-  // Try parsing "fill" keyword again if the first time failed because keyword
-  // and slice dimensions can be in any order.
-  if (!hasFill) {
-    hasFill = ParseEnum(imageSliceFillValue,
-                        nsCSSProps::kBorderImageSliceKTable);
-  }
-
-  nsCSSValueList* borderImageSlice = value.SetListValue();
-  // Put the box value into the list.
-  borderImageSlice->mValue = imageSliceBoxValue;
-
-  if (hasFill) {
-    // Put the "fill" value into the list.
-    borderImageSlice->mNext = new nsCSSValueList;
-    borderImageSlice->mNext->mValue = imageSliceFillValue;
-  }
-
-  AppendValue(eCSSProperty_border_image_slice, value);
-  return true;
-}
-
-bool
-CSSParserImpl::ParseBorderImageWidth(bool aAcceptsInherit)
-{
-  // border-image-width: initial | [<length>|<number>|<percentage>|auto]{1,4}
-  nsCSSValue value;
-
-  if (aAcceptsInherit && ParseVariant(value, VARIANT_INHERIT, nsnull)) {
-    // Keyword "inherit" can no be mixed, so we are done.
-    AppendValue(eCSSProperty_border_image_width, value);
-    return true;
-  }
-
-  // Parse the box dimensions.
-  if (!ParseGroupedBoxProperty(VARIANT_ALPN, value)) {
-    return false;
-  }
-
-  AppendValue(eCSSProperty_border_image_width, value);
-  return true;
-}
-
-bool
-CSSParserImpl::ParseBorderImageOutset(bool aAcceptsInherit)
-{
-  // border-image-outset: initial | [<length>|<number>]{1,4}
-  nsCSSValue value;
-
-  if (aAcceptsInherit && ParseVariant(value, VARIANT_INHERIT, nsnull)) {
-    // Keyword "inherit" can not be mixed, so we are done.
-    AppendValue(eCSSProperty_border_image_outset, value);
-    return true;
-  }
-
-  // Parse the box dimensions.
-  if (!ParseGroupedBoxProperty(VARIANT_LN, value)) {
-    return false;
-  }
-
-  AppendValue(eCSSProperty_border_image_outset, value);
-  return true;
-}
-
-bool
-CSSParserImpl::ParseBorderImageRepeat(bool aAcceptsInherit)
-{
-  nsCSSValue value;
-  if (aAcceptsInherit && ParseVariant(value, VARIANT_INHERIT, nsnull)) {
-    // Keyword "inherit" can not be mixed, so we are done.
-    AppendValue(eCSSProperty_border_image_repeat, value);
-    return true;
-  }
-
-  nsCSSValuePair result;
-  if (!ParseEnum(result.mXValue, nsCSSProps::kBorderImageRepeatKTable)) {
-    return false;
-  }
-
-  // optional second keyword, defaults to first
-  if (!ParseEnum(result.mYValue, nsCSSProps::kBorderImageRepeatKTable)) {
-    result.mYValue = result.mXValue;
-  }
-
-  value.SetPairValue(&result);
-  AppendValue(eCSSProperty_border_image_repeat, value);
-  return true;
-}
-
 bool
 CSSParserImpl::ParseBorderImage()
 {
-  nsAutoParseCompoundProperty compound(this);
-
-  // border-image: inherit |
-  // <border-image-source> ||
-  // <border-image-slice>
-  //   [ / <border-image-width>?
-  //     [ / <border-image-outset>]?]? ||
-  // <border-image-repeat>
-
-  nsCSSValue value;
-  if (ParseVariant(value, VARIANT_INHERIT, nsnull)) {
-    AppendValue(eCSSProperty_border_image_source, value);
-    AppendValue(eCSSProperty_border_image_slice, value);
-    AppendValue(eCSSProperty_border_image_width, value);
-    AppendValue(eCSSProperty_border_image_outset, value);
-    AppendValue(eCSSProperty_border_image_repeat, value);
-    // Keyword "inherit" can't be mixed, so we are done.
+  nsCSSValue val;
+  if (ParseVariant(val, VARIANT_INHERIT | VARIANT_NONE, nsnull)) {
+    AppendValue(eCSSProperty_border_image, val);
     return true;
   }
 
-  // No empty property.
-  if (CheckEndProperty()) {
-    return false;
-  }
-
-  // Shorthand properties are required to set everything they can.
-  SetBorderImageInitialValues();
-
-  bool foundSource = false;
-  bool foundSliceWidthOutset = false;
-  bool foundRepeat = false;
-
-  // This loop is used to handle the parsing of border-image properties which
-  // can appear in any order.
-  nsCSSValue imageSourceValue;
-  while (!CheckEndProperty()) {
-    // <border-image-source>
-    if (!foundSource && ParseVariant(imageSourceValue, VARIANT_UO, nsnull)) {
-      AppendValue(eCSSProperty_border_image_source, imageSourceValue);
-      foundSource = true;
-      continue;
-    }
-
-    // <border-image-slice>
-    // ParseBorderImageSlice is weird.  It may consume tokens and then return
-    // false, because it parses a property with two required components that
-    // can appear in either order.  Since the tokens that were consumed cannot
-    // parse as anything else we care about, this isn't a problem.
-    if (!foundSliceWidthOutset) {
-      bool sliceConsumedTokens = false;
-      if (ParseBorderImageSlice(false, &sliceConsumedTokens)) {
-        foundSliceWidthOutset = true;
-
-        // [ / <border-image-width>?
-        if (ExpectSymbol('/', true)) {
-          ParseBorderImageWidth(false);
-
-          // [ / <border-image-outset>
-          if (ExpectSymbol('/', true)) {
-            if (!ParseBorderImageOutset(false)) {
-              return false;
-            }
-          }
-        }
-
-        continue;
-      } else {
-        // If we consumed some tokens for <border-image-slice> but did not
-        // successfully parse it, we have an error.
-        if (sliceConsumedTokens) {
-          return false;
-        }
-      }
-    }
-
-    // <border-image-repeat>
-    if (!foundRepeat && ParseBorderImageRepeat(false)) {
-      foundRepeat = true;
-      continue;
-    }
-
-    return false;
-  }
+  // <uri> [<number> | <percentage>]{1,4}
+  //       [ / <border-width>{1,4} ]? [stretch | repeat | round]{0,2}
+  nsRefPtr<nsCSSValue::Array> arr = nsCSSValue::Array::Create(11);
+
+  nsCSSValue& url = arr->Item(0);
+  nsCSSValue& splitTop = arr->Item(1);
+  nsCSSValue& splitRight = arr->Item(2);
+  nsCSSValue& splitBottom = arr->Item(3);
+  nsCSSValue& splitLeft = arr->Item(4);
+  nsCSSValue& borderWidthTop = arr->Item(5);
+  nsCSSValue& borderWidthRight = arr->Item(6);
+  nsCSSValue& borderWidthBottom = arr->Item(7);
+  nsCSSValue& borderWidthLeft = arr->Item(8);
+  nsCSSValue& horizontalKeyword = arr->Item(9);
+  nsCSSValue& verticalKeyword = arr->Item(10);
+
+  // <uri>
+  if (!ParseVariant(url, VARIANT_URL, nsnull)) {
+    return false;
+  }
+
+  // [<number> | <percentage>]{1,4}
+  if (!ParseNonNegativeVariant(splitTop,
+                               VARIANT_NUMBER | VARIANT_PERCENT, nsnull)) {
+    return false;
+  }
+  if (!ParseNonNegativeVariant(splitRight,
+                               VARIANT_NUMBER | VARIANT_PERCENT, nsnull)) {
+    splitRight = splitTop;
+  }
+  if (!ParseNonNegativeVariant(splitBottom,
+                               VARIANT_NUMBER | VARIANT_PERCENT, nsnull)) {
+    splitBottom = splitTop;
+  }
+  if (!ParseNonNegativeVariant(splitLeft,
+                               VARIANT_NUMBER | VARIANT_PERCENT, nsnull)) {
+    splitLeft = splitRight;
+  }
+
+  // [ / <border-width>{1,4} ]?
+  if (ExpectSymbol('/', true)) {
+    // if have '/', at least one value is required
+    if (!ParseNonNegativeVariant(borderWidthTop, VARIANT_LENGTH, nsnull)) {
+      return false;
+    }
+    if (!ParseNonNegativeVariant(borderWidthRight, VARIANT_LENGTH, nsnull)) {
+      borderWidthRight = borderWidthTop;
+    }
+    if (!ParseNonNegativeVariant(borderWidthBottom, VARIANT_LENGTH, nsnull)) {
+      borderWidthBottom = borderWidthTop;
+    }
+    if (!ParseNonNegativeVariant(borderWidthLeft, VARIANT_LENGTH, nsnull)) {
+      borderWidthLeft = borderWidthRight;
+    }
+  }
+
+  // [stretch | repeat | round]{0,2}
+  // missing keywords are handled in nsRuleNode::ComputeBorderData()
+  if (ParseEnum(horizontalKeyword, nsCSSProps::kBorderImageKTable)) {
+    (void)ParseEnum(verticalKeyword, nsCSSProps::kBorderImageKTable);
+  }
+
+  if (!ExpectEndProperty()) {
+    return false;
+  }
+
+  val.SetArrayValue(arr, eCSSUnit_Array);
+  AppendValue(eCSSProperty_border_image, val);
 
   return true;
 }
 
 bool
 CSSParserImpl::ParseBorderSpacing()
 {
   nsCSSValue xValue, yValue;
@@ -6907,34 +6683,24 @@ CSSParserImpl::ParseBorderSide(const nsC
       eCSSProperty_border_bottom_colors,
       eCSSProperty_border_left_colors
     };
 
     // Set the other properties that the border shorthand sets to their
     // initial values.
     nsCSSValue extraValue;
     switch (values[0].GetUnit()) {
-    case eCSSUnit_Inherit:
-    case eCSSUnit_Initial:
-      extraValue = values[0];
-      // Set value of border-image properties to initial/inherit
-      AppendValue(eCSSProperty_border_image_source, extraValue);
-      AppendValue(eCSSProperty_border_image_slice, extraValue);
-      AppendValue(eCSSProperty_border_image_width, extraValue);
-      AppendValue(eCSSProperty_border_image_outset, extraValue);
-      AppendValue(eCSSProperty_border_image_repeat, extraValue);
-      break;
-    default:
-      extraValue.SetNoneValue();
-      SetBorderImageInitialValues();
-      break;
+      case eCSSUnit_Inherit:    extraValue.SetInheritValue();    break;
+      case eCSSUnit_Initial:    extraValue.SetInitialValue();    break;
+      default:                  extraValue.SetNoneValue();       break;
     }
     NS_FOR_CSS_SIDES(side) {
       AppendValue(kBorderColorsProps[side], extraValue);
     }
+    AppendValue(eCSSProperty_border_image, extraValue);
   }
   else {
     // Just set our one side
     for (PRInt32 index = 0; index < numProps; index++) {
       AppendValue(aPropIDs[index], values[index]);
     }
   }
   return true;
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -694,70 +694,26 @@ CSS_PROP_BORDER(
     CSS_PROPERTY_PARSE_INACCESSIBLE |
         CSS_PROPERTY_VALUE_NONNEGATIVE |
         CSS_PROPERTY_APPLIES_TO_FIRST_LETTER,
     VARIANT_HKL | VARIANT_CALC,
     kBorderWidthKTable,
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_None)
 #endif
-CSS_PROP_SHORTHAND(
+CSS_PROP_BORDER(
     -moz-border-image,
     border_image,
     CSS_PROP_DOMPROP_PREFIXED(BorderImage),
-    CSS_PROPERTY_PARSE_FUNCTION)
-CSS_PROP_BORDER(
-    -moz-border-image-source,
-    border_image_source,
-    CSS_PROP_DOMPROP_PREFIXED(BorderImageSource),
-    CSS_PROPERTY_PARSE_VALUE |
+    CSS_PROPERTY_PARSE_FUNCTION |
         CSS_PROPERTY_APPLIES_TO_FIRST_LETTER |
-        CSS_PROPERTY_START_IMAGE_LOADS,
-    VARIANT_HUO,
-    nsnull,
-    CSS_PROP_NO_OFFSET,
-    eStyleAnimType_None)
-CSS_PROP_BORDER(
-    -moz-border-image-slice,
-    border_image_slice,
-    CSS_PROP_DOMPROP_PREFIXED(BorderImageSlice),
-    CSS_PROPERTY_PARSE_FUNCTION |
-        CSS_PROPERTY_APPLIES_TO_FIRST_LETTER,
+        CSS_PROPERTY_START_IMAGE_LOADS |
+        CSS_PROPERTY_IMAGE_IS_IN_ARRAY_0,
     0,
-    kBorderImageSliceKTable,
-    CSS_PROP_NO_OFFSET,
-    eStyleAnimType_None)
-CSS_PROP_BORDER(
-    -moz-border-image-width,
-    border_image_width,
-    CSS_PROP_DOMPROP_PREFIXED(BorderImageWidth),
-    CSS_PROPERTY_PARSE_FUNCTION |
-        CSS_PROPERTY_APPLIES_TO_FIRST_LETTER,
-    0,
-    nsnull,
-    CSS_PROP_NO_OFFSET,
-    eStyleAnimType_None)
-CSS_PROP_BORDER(
-    -moz-border-image-outset,
-    border_image_outset,
-    CSS_PROP_DOMPROP_PREFIXED(BorderImageOutset),
-    CSS_PROPERTY_PARSE_FUNCTION |
-        CSS_PROPERTY_APPLIES_TO_FIRST_LETTER,
-    0,
-    nsnull,
-    CSS_PROP_NO_OFFSET,
-    eStyleAnimType_None)
-CSS_PROP_BORDER(
-    -moz-border-image-repeat,
-    border_image_repeat,
-    CSS_PROP_DOMPROP_PREFIXED(BorderImageRepeat),
-    CSS_PROPERTY_PARSE_FUNCTION |
-        CSS_PROPERTY_APPLIES_TO_FIRST_LETTER,
-    0,
-    kBorderImageRepeatKTable,
+    kBorderImageKTable,
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_None)
 CSS_PROP_SHORTHAND(
     border-left,
     border_left,
     BorderLeft,
     CSS_PROPERTY_PARSE_FUNCTION)
 CSS_PROP_SHORTHAND(
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -683,25 +683,20 @@ const PRInt32 nsCSSProps::kBorderCollaps
   eCSSKeyword_UNKNOWN,-1
 };
 
 const PRInt32 nsCSSProps::kBorderColorKTable[] = {
   eCSSKeyword__moz_use_text_color, NS_STYLE_COLOR_MOZ_USE_TEXT_COLOR,
   eCSSKeyword_UNKNOWN,-1
 };
 
-const PRInt32 nsCSSProps::kBorderImageRepeatKTable[] = {
-  eCSSKeyword_stretch, NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH,
-  eCSSKeyword_repeat, NS_STYLE_BORDER_IMAGE_REPEAT_REPEAT,
-  eCSSKeyword_round, NS_STYLE_BORDER_IMAGE_REPEAT_ROUND,
-  eCSSKeyword_UNKNOWN,-1
-};
-
-const PRInt32 nsCSSProps::kBorderImageSliceKTable[] = {
-  eCSSKeyword_fill, NS_STYLE_BORDER_IMAGE_SLICE_FILL,
+const PRInt32 nsCSSProps::kBorderImageKTable[] = {
+  eCSSKeyword_stretch, NS_STYLE_BORDER_IMAGE_STRETCH,
+  eCSSKeyword_repeat, NS_STYLE_BORDER_IMAGE_REPEAT,
+  eCSSKeyword_round, NS_STYLE_BORDER_IMAGE_ROUND,
   eCSSKeyword_UNKNOWN,-1
 };
 
 const PRInt32 nsCSSProps::kBorderStyleKTable[] = {
   eCSSKeyword_none,   NS_STYLE_BORDER_STYLE_NONE,
   eCSSKeyword_hidden, NS_STYLE_BORDER_STYLE_HIDDEN,
   eCSSKeyword_dotted, NS_STYLE_BORDER_STYLE_DOTTED,
   eCSSKeyword_dashed, NS_STYLE_BORDER_STYLE_DASHED,
@@ -1718,21 +1713,17 @@ static const nsCSSProperty gBorderSubpro
   eCSSProperty_border_bottom_color,
   eCSSProperty_border_left_color_value,
   eCSSProperty_border_left_color_ltr_source,
   eCSSProperty_border_left_color_rtl_source,
   eCSSProperty_border_top_colors,
   eCSSProperty_border_right_colors,
   eCSSProperty_border_bottom_colors,
   eCSSProperty_border_left_colors,
-  eCSSProperty_border_image_source,
-  eCSSProperty_border_image_slice,
-  eCSSProperty_border_image_width,
-  eCSSProperty_border_image_outset,
-  eCSSProperty_border_image_repeat,
+  eCSSProperty_border_image,
   eCSSProperty_UNKNOWN
 };
 
 static const nsCSSProperty gBorderBottomSubpropTable[] = {
   // nsCSSDeclaration.cpp outputs the subproperties in this order.
   // It also depends on the color being third.
   eCSSProperty_border_bottom_width,
   eCSSProperty_border_bottom_style,
@@ -2111,25 +2102,16 @@ static const nsCSSProperty gTextDecorati
 static const nsCSSProperty gTransitionSubpropTable[] = {
   eCSSProperty_transition_property,
   eCSSProperty_transition_duration,
   eCSSProperty_transition_timing_function,
   eCSSProperty_transition_delay,
   eCSSProperty_UNKNOWN
 };
 
-static const nsCSSProperty gBorderImageSubpropTable[] = {
-  eCSSProperty_border_image_source,
-  eCSSProperty_border_image_slice,
-  eCSSProperty_border_image_width,
-  eCSSProperty_border_image_outset,
-  eCSSProperty_border_image_repeat,
-  eCSSProperty_UNKNOWN
-};
-
 static const nsCSSProperty gMarkerSubpropTable[] = {
   eCSSProperty_marker_start,
   eCSSProperty_marker_mid,
   eCSSProperty_marker_end,
   eCSSProperty_UNKNOWN
 };
 
 const nsCSSProperty *const
--- a/layout/style/nsCSSProps.h
+++ b/layout/style/nsCSSProps.h
@@ -340,18 +340,17 @@ public:
   static const PRInt32 kBackgroundInlinePolicyKTable[];
   static const PRInt32 kBackgroundOriginKTable[];
   static const PRInt32 kBackgroundPositionKTable[];
   static const PRInt32 kBackgroundRepeatKTable[];
   static const PRInt32 kBackgroundRepeatPartKTable[];
   static const PRInt32 kBackgroundSizeKTable[];
   static const PRInt32 kBorderCollapseKTable[];
   static const PRInt32 kBorderColorKTable[];
-  static const PRInt32 kBorderImageRepeatKTable[];
-  static const PRInt32 kBorderImageSliceKTable[];
+  static const PRInt32 kBorderImageKTable[];
   static const PRInt32 kBorderStyleKTable[];
   static const PRInt32 kBorderWidthKTable[];
   static const PRInt32 kBoxAlignKTable[];
   static const PRInt32 kBoxDirectionKTable[];
   static const PRInt32 kBoxOrientKTable[];
   static const PRInt32 kBoxPackKTable[];
   static const PRInt32 kDominantBaselineKTable[];
   static const PRInt32 kFillRuleKTable[];
--- a/layout/style/nsCSSValue.cpp
+++ b/layout/style/nsCSSValue.cpp
@@ -1,10 +1,9 @@
 /* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ts=2 et sw=2 tw=80: */
 /* ***** BEGIN LICENSE BLOCK *****
  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  *
  * The contents of this file are subject to the Mozilla Public License Version
  * 1.1 (the "License"); you may not use this file except in compliance with
  * the License. You may obtain a copy of the License at
  * http://www.mozilla.org/MPL/
  *
@@ -748,16 +747,24 @@ nsCSSValue::AppendToString(nsCSSProperty
       case eCSSUnit_Cubic_Bezier: aResult.AppendLiteral("cubic-bezier("); break;
       case eCSSUnit_Steps: aResult.AppendLiteral("steps("); break;
       default: break;
     }
 
     nsCSSValue::Array *array = GetArrayValue();
     bool mark = false;
     for (size_t i = 0, i_end = array->Count(); i < i_end; ++i) {
+      if (aProperty == eCSSProperty_border_image && i >= 5) {
+        if (array->Item(i).GetUnit() == eCSSUnit_Null) {
+          continue;
+        }
+        if (i == 5) {
+          aResult.AppendLiteral(" /");
+        }
+      }
       if (mark && array->Item(i).GetUnit() != eCSSUnit_Null) {
         if (unit == eCSSUnit_Array &&
             eCSSProperty_transition_timing_function != aProperty)
           aResult.AppendLiteral(" ");
         else
           aResult.AppendLiteral(", ");
       }
       if (unit == eCSSUnit_Steps && i == 1) {
@@ -1360,41 +1367,27 @@ nsCSSRect::~nsCSSRect()
 void
 nsCSSRect::AppendToString(nsCSSProperty aProperty, nsAString& aResult) const
 {
   NS_ABORT_IF_FALSE(mTop.GetUnit() != eCSSUnit_Null &&
                     mTop.GetUnit() != eCSSUnit_Inherit &&
                     mTop.GetUnit() != eCSSUnit_Initial,
                     "parser should have used a bare value");
 
-  if (eCSSProperty_border_image_slice == aProperty ||
-      eCSSProperty_border_image_width == aProperty ||
-      eCSSProperty_border_image_outset == aProperty) {
-    NS_NAMED_LITERAL_STRING(space, " ");
+  NS_NAMED_LITERAL_STRING(comma, ", ");
 
-    mTop.AppendToString(aProperty, aResult);
-    aResult.Append(space);
-    mRight.AppendToString(aProperty, aResult);
-    aResult.Append(space);
-    mBottom.AppendToString(aProperty, aResult);
-    aResult.Append(space);
-    mLeft.AppendToString(aProperty, aResult);
-  } else {
-    NS_NAMED_LITERAL_STRING(comma, ", ");
-
-    aResult.AppendLiteral("rect(");
-    mTop.AppendToString(aProperty, aResult);
-    aResult.Append(comma);
-    mRight.AppendToString(aProperty, aResult);
-    aResult.Append(comma);
-    mBottom.AppendToString(aProperty, aResult);
-    aResult.Append(comma);
-    mLeft.AppendToString(aProperty, aResult);
-    aResult.Append(PRUnichar(')'));
-  }
+  aResult.AppendLiteral("rect(");
+  mTop.AppendToString(aProperty, aResult);
+  aResult.Append(comma);
+  mRight.AppendToString(aProperty, aResult);
+  aResult.Append(comma);
+  mBottom.AppendToString(aProperty, aResult);
+  aResult.Append(comma);
+  mLeft.AppendToString(aProperty, aResult);
+  aResult.Append(PRUnichar(')'));
 }
 
 void nsCSSRect::SetAllSidesTo(const nsCSSValue& aValue)
 {
   mTop = aValue;
   mRight = aValue;
   mBottom = aValue;
   mLeft = aValue;
--- a/layout/style/nsCSSValue.h
+++ b/layout/style/nsCSSValue.h
@@ -771,24 +771,24 @@ struct nsCSSRect_heap : public nsCSSRect
   size_t SizeOfIncludingThis(nsMallocSizeOfFun aMallocSizeOf) const;
 };
 
 // This has to be here so that the relationship between nsCSSRect
 // and nsCSSRect_heap is visible.
 inline nsCSSRect&
 nsCSSValue::GetRectValue()
 {
-  NS_ABORT_IF_FALSE(mUnit == eCSSUnit_Rect, "not a rect value");
+  NS_ABORT_IF_FALSE(mUnit == eCSSUnit_Rect, "not a pair value");
   return *mValue.mRect;
 }
 
 inline const nsCSSRect&
 nsCSSValue::GetRectValue() const
 {
-  NS_ABORT_IF_FALSE(mUnit == eCSSUnit_Rect, "not a rect value");
+  NS_ABORT_IF_FALSE(mUnit == eCSSUnit_Rect, "not a pair value");
   return *mValue.mRect;
 }
 
 struct nsCSSValuePair {
   nsCSSValuePair()
   {
     MOZ_COUNT_CTOR(nsCSSValuePair);
   }
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -1,10 +1,9 @@
 /* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim:set tw=78 expandtab softtabstop=2 ts=2 sw=2: */
 /* ***** BEGIN LICENSE BLOCK *****
  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  *
  * The contents of this file are subject to the Mozilla Public License Version
  * 1.1 (the "License"); you may not use this file except in compliance with
  * the License. You may obtain a copy of the License at
  * http://www.mozilla.org/MPL/
  *
@@ -2896,111 +2895,71 @@ nsComputedDOMStyle::DoGetBoxSizing()
 {
   nsROCSSPrimitiveValue *val = GetROCSSPrimitiveValue();
   val->SetIdent(
     nsCSSProps::ValueToKeywordEnum(GetStylePosition()->mBoxSizing,
                                    nsCSSProps::kBoxSizingKTable));
   return val;
 }
 
-/* Border image properties */
-
-nsIDOMCSSValue*
-nsComputedDOMStyle::DoGetBorderImageSource()
-{
-  const nsStyleBorder* border = GetStyleBorder();
-
-  imgIRequest* imgSrc = border->GetBorderImage();
-  nsROCSSPrimitiveValue* val = GetROCSSPrimitiveValue();
-  if (imgSrc) {
-    nsCOMPtr<nsIURI> uri;
-    imgSrc->GetURI(getter_AddRefs(uri));
-    val->SetURI(uri);
-  } else {
-    val->SetIdent(eCSSKeyword_none);
-  }
-
-  return val;
-}
-
-nsIDOMCSSValue*
-nsComputedDOMStyle::DoGetBorderImageSlice()
-{
-  nsDOMCSSValueList* valueList = GetROCSSValueList(false);
-
-  const nsStyleBorder* border = GetStyleBorder();
-  // Four slice numbers.
-  NS_FOR_CSS_SIDES (side) {
-    nsROCSSPrimitiveValue* val = GetROCSSPrimitiveValue();
-    valueList->AppendCSSValue(val);
-    SetValueToCoord(val, border->mBorderImageSlice.Get(side), nsnull, nsnull);
-  }
-
-  // Fill keyword.
-  if (NS_STYLE_BORDER_IMAGE_SLICE_FILL == border->mBorderImageFill) {
-    nsROCSSPrimitiveValue* val = GetROCSSPrimitiveValue();
-    valueList->AppendCSSValue(val);
-    val->SetIdent(eCSSKeyword_fill);
-  }
-
-  return valueList;
-}
-
-nsIDOMCSSValue*
-nsComputedDOMStyle::DoGetBorderImageWidth()
+nsIDOMCSSValue*
+nsComputedDOMStyle::DoGetBorderImage()
 {
   const nsStyleBorder* border = GetStyleBorder();
-  nsDOMCSSValueList* valueList = GetROCSSValueList(false);
-  NS_FOR_CSS_SIDES (side) {
-    nsROCSSPrimitiveValue* val = GetROCSSPrimitiveValue();
-    valueList->AppendCSSValue(val);
-    SetValueToCoord(val, border->mBorderImageWidth.Get(side),
-                    nsnull, nsnull);
+
+  // none
+  if (!border->GetBorderImage()) {
+    nsROCSSPrimitiveValue *valNone = GetROCSSPrimitiveValue();
+    valNone->SetIdent(eCSSKeyword_none);
+    return valNone;
   }
 
-  return valueList;
-}
-
-nsIDOMCSSValue*
-nsComputedDOMStyle::DoGetBorderImageOutset()
-{
   nsDOMCSSValueList *valueList = GetROCSSValueList(false);
 
-  const nsStyleBorder* border = GetStyleBorder();
-  // four slice numbers
-  NS_FOR_CSS_SIDES (side) {
-    nsROCSSPrimitiveValue* val = GetROCSSPrimitiveValue();
-    valueList->AppendCSSValue(val);
-    SetValueToCoord(val, border->mBorderImageOutset.Get(side),
-                    nsnull, nsnull);
+  // uri
+  nsROCSSPrimitiveValue *valURI = GetROCSSPrimitiveValue();
+  valueList->AppendCSSValue(valURI);
+  nsCOMPtr<nsIURI> uri;
+  border->GetBorderImage()->GetURI(getter_AddRefs(uri));
+  valURI->SetURI(uri);
+
+  // four split numbers
+  NS_FOR_CSS_SIDES(side) {
+    nsROCSSPrimitiveValue *valSplit = GetROCSSPrimitiveValue();
+    valueList->AppendCSSValue(valSplit);
+    SetValueToCoord(valSplit, border->mBorderImageSplit.Get(side), true);
   }
 
-  return valueList;
-}
-
-nsIDOMCSSValue*
-nsComputedDOMStyle::DoGetBorderImageRepeat()
-{
-  nsDOMCSSValueList* valueList = GetROCSSValueList(false);
-
-  const nsStyleBorder* border = GetStyleBorder();
-
-  // horizontal repeat
-  nsROCSSPrimitiveValue* valX = GetROCSSPrimitiveValue();
-  valueList->AppendCSSValue(valX);
-  valX->SetIdent(
-    nsCSSProps::ValueToKeywordEnum(border->mBorderImageRepeatH,
-                                   nsCSSProps::kBorderImageRepeatKTable));
-
-  // vertical repeat
-  nsROCSSPrimitiveValue* valY = GetROCSSPrimitiveValue();
-  valueList->AppendCSSValue(valY);
-  valY->SetIdent(
-    nsCSSProps::ValueToKeywordEnum(border->mBorderImageRepeatV,
-                                   nsCSSProps::kBorderImageRepeatKTable));
+  // copy of border-width
+  if (border->mHaveBorderImageWidth) {
+    nsROCSSPrimitiveValue *slash = GetROCSSPrimitiveValue();
+    valueList->AppendCSSValue(slash);
+    slash->SetString(NS_LITERAL_STRING("/"));
+    NS_FOR_CSS_SIDES(side) {
+      nsROCSSPrimitiveValue *borderWidth = GetROCSSPrimitiveValue();
+      valueList->AppendCSSValue(borderWidth);
+      nscoord width = GetStyleBorder()->mBorderImageWidth.Side(side);
+      borderWidth->SetAppUnits(width);
+    }
+  }
+
+  // first keyword
+  nsROCSSPrimitiveValue *keyword = GetROCSSPrimitiveValue();
+  valueList->AppendCSSValue(keyword);
+  keyword->SetIdent(
+    nsCSSProps::ValueToKeywordEnum(GetStyleBorder()->mBorderImageHFill,
+                                   nsCSSProps::kBorderImageKTable));
+
+  // second keyword
+  nsROCSSPrimitiveValue *keyword2 = GetROCSSPrimitiveValue();
+  valueList->AppendCSSValue(keyword2);
+  keyword2->SetIdent(
+    nsCSSProps::ValueToKeywordEnum(GetStyleBorder()->mBorderImageVFill,
+                                   nsCSSProps::kBorderImageKTable));
+
   return valueList;
 }
 
 nsIDOMCSSValue*
 nsComputedDOMStyle::DoGetFloatEdge()
 {
   nsROCSSPrimitiveValue *val = GetROCSSPrimitiveValue();
   val->SetIdent(
@@ -4668,22 +4627,17 @@ nsComputedDOMStyle::GetQueryableProperty
     COMPUTED_STYLE_MAP_ENTRY(animation_name,                AnimationName),
     COMPUTED_STYLE_MAP_ENTRY(animation_play_state,          AnimationPlayState),
     COMPUTED_STYLE_MAP_ENTRY(animation_timing_function,     AnimationTimingFunction),
     COMPUTED_STYLE_MAP_ENTRY(appearance,                    Appearance),
     COMPUTED_STYLE_MAP_ENTRY(backface_visibility,           MozBackfaceVisibility),
     COMPUTED_STYLE_MAP_ENTRY(_moz_background_inline_policy, BackgroundInlinePolicy),
     COMPUTED_STYLE_MAP_ENTRY(binding,                       Binding),
     COMPUTED_STYLE_MAP_ENTRY(border_bottom_colors,          BorderBottomColors),
-    //// COMPUTED_STYLE_MAP_ENTRY(border_image,             BorderImage),
-    COMPUTED_STYLE_MAP_ENTRY(border_image_outset,           BorderImageOutset),
-    COMPUTED_STYLE_MAP_ENTRY(border_image_repeat,           BorderImageRepeat),
-    COMPUTED_STYLE_MAP_ENTRY(border_image_slice,            BorderImageSlice),
-    COMPUTED_STYLE_MAP_ENTRY(border_image_source,           BorderImageSource),
-    COMPUTED_STYLE_MAP_ENTRY(border_image_width,            BorderImageWidth),
+    COMPUTED_STYLE_MAP_ENTRY(border_image,                  BorderImage),
     COMPUTED_STYLE_MAP_ENTRY(border_left_colors,            BorderLeftColors),
     COMPUTED_STYLE_MAP_ENTRY(border_right_colors,           BorderRightColors),
     COMPUTED_STYLE_MAP_ENTRY(border_top_colors,             BorderTopColors),
     COMPUTED_STYLE_MAP_ENTRY(box_align,                     BoxAlign),
     COMPUTED_STYLE_MAP_ENTRY(box_direction,                 BoxDirection),
     COMPUTED_STYLE_MAP_ENTRY(box_flex,                      BoxFlex),
     COMPUTED_STYLE_MAP_ENTRY(box_ordinal_group,             BoxOrdinalGroup),
     COMPUTED_STYLE_MAP_ENTRY(box_orient,                    BoxOrient),
--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@@ -255,23 +255,17 @@ private:
   nsIDOMCSSValue* DoGetBorderLeftColors();
   nsIDOMCSSValue* DoGetBorderRightColors();
   nsIDOMCSSValue* DoGetBorderTopColors();
   nsIDOMCSSValue* DoGetBorderBottomLeftRadius();
   nsIDOMCSSValue* DoGetBorderBottomRightRadius();
   nsIDOMCSSValue* DoGetBorderTopLeftRadius();
   nsIDOMCSSValue* DoGetBorderTopRightRadius();
   nsIDOMCSSValue* DoGetFloatEdge();
-
-  /* Border Image */
-  nsIDOMCSSValue* DoGetBorderImageSource();
-  nsIDOMCSSValue* DoGetBorderImageSlice();
-  nsIDOMCSSValue* DoGetBorderImageWidth();
-  nsIDOMCSSValue* DoGetBorderImageOutset();
-  nsIDOMCSSValue* DoGetBorderImageRepeat();
+  nsIDOMCSSValue* DoGetBorderImage();
 
   /* Box Shadow */
   nsIDOMCSSValue* DoGetBoxShadow();
 
   /* Window Shadow */
   nsIDOMCSSValue* DoGetWindowShadow();
 
   /* Margin Properties */
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -1,10 +1,9 @@
 /* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ts=2 et sw=2 tw=78: */
 /* ***** BEGIN LICENSE BLOCK *****
  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  *
  * The contents of this file are subject to the Mozilla Public License Version
  * 1.1 (the "License"); you may not use this file except in compliance with
  * the License. You may obtain a copy of the License at
  * http://www.mozilla.org/MPL/
  *
@@ -567,23 +566,20 @@ GetFloatFromBoxPosition(PRInt32 aEnumVal
 #define SETCOORD_INTEGER                0x40   // I
 #define SETCOORD_ENUMERATED             0x80   // E
 #define SETCOORD_NONE                   0x100  // O
 #define SETCOORD_INITIAL_ZERO           0x200
 #define SETCOORD_INITIAL_AUTO           0x400
 #define SETCOORD_INITIAL_NONE           0x800
 #define SETCOORD_INITIAL_NORMAL         0x1000
 #define SETCOORD_INITIAL_HALF           0x2000
-#define SETCOORD_INITIAL_HUNDRED_PCT    0x00004000
-#define SETCOORD_INITIAL_FACTOR_ONE     0x00008000
-#define SETCOORD_INITIAL_FACTOR_ZERO    0x00010000
-#define SETCOORD_CALC_LENGTH_ONLY       0x00020000
-#define SETCOORD_CALC_CLAMP_NONNEGATIVE 0x00040000 // modifier for CALC_LENGTH_ONLY
-#define SETCOORD_STORE_CALC             0x00080000
-#define SETCOORD_BOX_POSITION           0x00100000 // exclusive with _ENUMERATED
+#define SETCOORD_CALC_LENGTH_ONLY       0x4000
+#define SETCOORD_CALC_CLAMP_NONNEGATIVE 0x8000 // modifier for CALC_LENGTH_ONLY
+#define SETCOORD_STORE_CALC             0x00010000
+#define SETCOORD_BOX_POSITION           0x00020000 // exclusive with _ENUMERATED
 
 #define SETCOORD_LP     (SETCOORD_LENGTH | SETCOORD_PERCENT)
 #define SETCOORD_LH     (SETCOORD_LENGTH | SETCOORD_INHERIT)
 #define SETCOORD_AH     (SETCOORD_AUTO | SETCOORD_INHERIT)
 #define SETCOORD_LAH    (SETCOORD_AUTO | SETCOORD_LENGTH | SETCOORD_INHERIT)
 #define SETCOORD_LPH    (SETCOORD_LP | SETCOORD_INHERIT)
 #define SETCOORD_LPAH   (SETCOORD_LP | SETCOORD_AH)
 #define SETCOORD_LPEH   (SETCOORD_LP | SETCOORD_ENUMERATED | SETCOORD_INHERIT)
@@ -598,17 +594,17 @@ GetFloatFromBoxPosition(PRInt32 aEnumVal
 
 // changes aCoord iff it returns true
 static bool SetCoord(const nsCSSValue& aValue, nsStyleCoord& aCoord,
                        const nsStyleCoord& aParentCoord,
                        PRInt32 aMask, nsStyleContext* aStyleContext,
                        nsPresContext* aPresContext,
                        bool& aCanStoreInRuleTree)
 {
-  bool result = true;
+  bool    result = true;
   if (aValue.GetUnit() == eCSSUnit_Null) {
     result = false;
   }
   else if ((((aMask & SETCOORD_LENGTH) != 0) &&
             aValue.IsLengthUnit()) ||
            (((aMask & SETCOORD_CALC_LENGTH_ONLY) != 0) &&
             aValue.IsCalcUnit())) {
     nscoord len = CalcLength(aValue, aStyleContext, aPresContext,
@@ -652,50 +648,41 @@ static bool SetCoord(const nsCSSValue& a
   else if (((aMask & SETCOORD_NONE) != 0) &&
            (aValue.GetUnit() == eCSSUnit_None)) {
     aCoord.SetNoneValue();
   }
   else if (((aMask & SETCOORD_FACTOR) != 0) &&
            (aValue.GetUnit() == eCSSUnit_Number)) {
     aCoord.SetFactorValue(aValue.GetFloatValue());
   }
+  else if (((aMask & SETCOORD_INITIAL_AUTO) != 0) &&
+           (aValue.GetUnit() == eCSSUnit_Initial)) {
+    aCoord.SetAutoValue();
+  }
+  else if (((aMask & SETCOORD_INITIAL_ZERO) != 0) &&
+           (aValue.GetUnit() == eCSSUnit_Initial)) {
+    aCoord.SetCoordValue(0);
+  }
+  else if (((aMask & SETCOORD_INITIAL_NONE) != 0) &&
+           (aValue.GetUnit() == eCSSUnit_Initial)) {
+    aCoord.SetNoneValue();
+  }
+  else if (((aMask & SETCOORD_INITIAL_NORMAL) != 0) &&
+           (aValue.GetUnit() == eCSSUnit_Initial)) {
+    aCoord.SetNormalValue();
+  }
+  else if (((aMask & SETCOORD_INITIAL_HALF) != 0) &&
+           (aValue.GetUnit() == eCSSUnit_Initial)) {
+    aCoord.SetPercentValue(0.5f);
+  }
   else if (((aMask & SETCOORD_STORE_CALC) != 0) &&
            (aValue.IsCalcUnit())) {
     SpecifiedCalcToComputedCalc(aValue, aCoord, aStyleContext,
                                 aCanStoreInRuleTree);
   }
-  else if (aValue.GetUnit() == eCSSUnit_Initial) {
-    if ((aMask & SETCOORD_INITIAL_AUTO) != 0) {
-      aCoord.SetAutoValue();
-    }
-    else if ((aMask & SETCOORD_INITIAL_ZERO) != 0) {
-      aCoord.SetCoordValue(0);
-    }
-    else if ((aMask & SETCOORD_INITIAL_FACTOR_ZERO) != 0) {
-      aCoord.SetFactorValue(0.0f);
-    }
-    else if ((aMask & SETCOORD_INITIAL_NONE) != 0) {
-      aCoord.SetNoneValue();
-    }
-    else if ((aMask & SETCOORD_INITIAL_NORMAL) != 0) {
-      aCoord.SetNormalValue();
-    }
-    else if ((aMask & SETCOORD_INITIAL_HALF) != 0) {
-      aCoord.SetPercentValue(0.5f);
-    }
-    else if ((aMask & SETCOORD_INITIAL_HUNDRED_PCT) != 0) {
-      aCoord.SetPercentValue(1.0f);
-    }
-    else if ((aMask & SETCOORD_INITIAL_FACTOR_ONE) != 0) {
-      aCoord.SetFactorValue(1.0f);
-    }
-    else {
-      result = false;  // didn't set anything
-    }
-  }
   else {
     result = false;  // didn't set anything
   }
   return result;
 }
 
 // This inline function offers a shortcut for SetCoord() by refusing to accept
 // SETCOORD_LENGTH and SETCOORD_INHERIT masks.
@@ -5360,90 +5347,16 @@ nsRuleNode::ComputeMarginData(void* aSta
       margin->mMargin.Set(side, coord);
     }
   }
 
   margin->RecalcData();
   COMPUTE_END_RESET(Margin, margin)
 }
 
-static void
-SetBorderImageRect(const nsCSSValue& aValue,
-                   /** outparam */ nsCSSRect& aRect)
-{
-  switch (aValue.GetUnit()) {
-  case eCSSUnit_Null:
-    aRect.Reset();
-    break;
-  case eCSSUnit_Rect:
-    aRect = aValue.GetRectValue();
-    break;
-  case eCSSUnit_Inherit:
-  case eCSSUnit_Initial:
-    aRect.SetAllSidesTo(aValue);
-    break;
-  default:
-    NS_ASSERTION(false, "Unexpected border image value for rect.");
-  }
-}
-
-static void
-SetBorderImagePair(const nsCSSValue& aValue,
-                   /** outparam */ nsCSSValuePair& aPair)
-{
-  switch (aValue.GetUnit()) {
-  case eCSSUnit_Null:
-    aPair.Reset();
-    break;
-  case eCSSUnit_Pair:
-    aPair = aValue.GetPairValue();
-    break;
-  case eCSSUnit_Inherit:
-  case eCSSUnit_Initial:
-    aPair.SetBothValuesTo(aValue);
-    break;
-  default:
-    NS_ASSERTION(false, "Unexpected border image value for pair.");
-  }
-}
-
-static void
-SetBorderImageSlice(const nsCSSValue& aValue,
-                    /** outparam */ nsCSSValue& aSlice,
-                    /** outparam */ nsCSSValue& aFill)
-{
-  const nsCSSValueList* valueList;
-  switch (aValue.GetUnit()) {
-  case eCSSUnit_Null:
-    aSlice.Reset();
-    aFill.Reset();
-    break;
-  case eCSSUnit_List:
-    // Get slice dimensions.
-    valueList = aValue.GetListValue();
-    aSlice = valueList->mValue;
-
-    // Get "fill" keyword.
-    valueList = valueList->mNext;
-    if (valueList) {
-      aFill = valueList->mValue;
-    } else {
-      aFill.SetInitialValue();
-    }
-    break;
-  case eCSSUnit_Inherit:
-  case eCSSUnit_Initial:
-    aSlice = aValue;
-    aFill = aValue;
-    break;
-  default:
-    NS_ASSERTION(false, "Unexpected border image value for pair.");
-  }
-}
-
 const void*
 nsRuleNode::ComputeBorderData(void* aStartStruct,
                               const nsRuleData* aRuleData,
                               nsStyleContext* aContext,
                               nsRuleNode* aHighestNode,
                               const RuleDetail aRuleDetail,
                               const bool aCanStoreInRuleTree)
 {
@@ -5719,98 +5632,91 @@ nsRuleNode::ComputeBorderData(void* aSta
   }
 
   // float-edge: enum, inherit, initial
   SetDiscrete(*aRuleData->ValueForFloatEdge(),
               border->mFloatEdge, canStoreInRuleTree,
               SETDSC_ENUMERATED, parentBorder->mFloatEdge,
               NS_STYLE_FLOAT_EDGE_CONTENT, 0, 0, 0, 0);
 
-  // border-image-source
-  const nsCSSValue* borderImageSource = aRuleData->ValueForBorderImageSource();
-  if (borderImageSource->GetUnit() == eCSSUnit_Image) {
-    NS_SET_IMAGE_REQUEST(border->SetBorderImage, aContext,
-                         borderImageSource->GetImageValue());
-  } else if (borderImageSource->GetUnit() == eCSSUnit_Inherit) {
-    canStoreInRuleTree = false;
-    NS_SET_IMAGE_REQUEST(border->SetBorderImage, aContext,
-                         parentBorder->GetBorderImage());
-  } else if (borderImageSource->GetUnit() == eCSSUnit_Initial ||
-             borderImageSource->GetUnit() == eCSSUnit_None) {
+  // border-image
+  const nsCSSValue* borderImageValue = aRuleData->ValueForBorderImage();
+  if (eCSSUnit_Array == borderImageValue->GetUnit()) {
+    nsCSSValue::Array *arr = borderImageValue->GetArrayValue();
+
+    // the image
+    if (eCSSUnit_Image == arr->Item(0).GetUnit()) {
+      NS_SET_IMAGE_REQUEST(border->SetBorderImage,
+                           aContext,
+                           arr->Item(0).GetImageValue())
+    }
+
+    // the numbers saying where to split the image
+    NS_FOR_CSS_SIDES(side) {
+      if (SetAbsCoord(arr->Item(1 + side), coord,
+                      SETCOORD_FACTOR | SETCOORD_PERCENT)) {
+        border->mBorderImageSplit.Set(side, coord);
+      }
+    }
+
+    // possible replacement for border-width
+    // if have one - have all four (see CSSParserImpl::ParseBorderImage())
+    if (eCSSUnit_Null != arr->Item(5).GetUnit()) {
+      NS_FOR_CSS_SIDES(side) {
+        // an uninitialized parentCoord is ok because I'm not passing SETCOORD_INHERIT
+        if (!SetCoord(arr->Item(5 + side), coord, nsStyleCoord(),
+                      SETCOORD_LENGTH, aContext, mPresContext,
+                      canStoreInRuleTree)) {
+          NS_NOTREACHED("SetCoord for border-width replacement from border-image failed");
+        }
+        if (coord.GetUnit() == eStyleUnit_Coord) {
+          border->SetBorderImageWidthOverride(side, coord.GetCoordValue());
+        } else {
+          NS_WARNING("a border-width replacement from border-image "
+                     "has a unit that's not eStyleUnit_Coord");
+          border->SetBorderImageWidthOverride(side, 0);
+        }
+      }
+      border->mHaveBorderImageWidth = true;
+    } else {
+      border->mHaveBorderImageWidth = false;
+    }
+
+    // stretch/round/repeat keywords
+    if (eCSSUnit_Null == arr->Item(9).GetUnit()) {
+      // default, both horizontal and vertical are stretch
+      border->mBorderImageHFill = NS_STYLE_BORDER_IMAGE_STRETCH;
+      border->mBorderImageVFill = NS_STYLE_BORDER_IMAGE_STRETCH;
+    } else {
+      // have horizontal value
+      border->mBorderImageHFill = arr->Item(9).GetIntValue();
+      if (eCSSUnit_Null == arr->Item(10).GetUnit()) {
+        // vertical same as horizontal
+        border->mBorderImageVFill = border->mBorderImageHFill;
+      } else {
+        // have vertical value
+        border->mBorderImageVFill = arr->Item(10).GetIntValue();
+      }
+    }
+  } else if (eCSSUnit_None == borderImageValue->GetUnit() ||
+             eCSSUnit_Initial == borderImageValue->GetUnit()) {
+    border->mHaveBorderImageWidth = false;
     border->SetBorderImage(nsnull);
-  }
-
-  nsCSSValue borderImageSliceValue;
-  nsCSSValue borderImageSliceFill;
-  SetBorderImageSlice(*aRuleData->ValueForBorderImageSlice(),
-                      borderImageSliceValue, borderImageSliceFill);
-
-  // border-image-slice: fill
-  SetDiscrete(borderImageSliceFill,
-              border->mBorderImageFill,
-              canStoreInRuleTree, SETDSC_ENUMERATED,
-              parentBorder->mBorderImageFill,
-              NS_STYLE_BORDER_IMAGE_SLICE_NOFILL, 0, 0, 0, 0);
-
-  nsCSSRect borderImageSlice;
-  SetBorderImageRect(borderImageSliceValue, borderImageSlice);
-
-  nsCSSRect borderImageWidth;
-  SetBorderImageRect(*aRuleData->ValueForBorderImageWidth(),
-                     borderImageWidth);
-
-  nsCSSRect borderImageOutset;
-  SetBorderImageRect(*aRuleData->ValueForBorderImageOutset(),
-                     borderImageOutset);
-
-  NS_FOR_CSS_SIDES (side) {
-    // border-image-slice
-    if (SetCoord(borderImageSlice.*(nsCSSRect::sides[side]), coord,
-                 parentBorder->mBorderImageSlice.Get(side),
-                 SETCOORD_FACTOR | SETCOORD_PERCENT |
-                 SETCOORD_INHERIT | SETCOORD_INITIAL_HUNDRED_PCT,
-                 aContext, mPresContext, canStoreInRuleTree)) {
-      border->mBorderImageSlice.Set(side, coord);
-    }
-
-    // border-image-width
-    // 'auto' here means "same as slice"
-    if (SetCoord(borderImageWidth.*(nsCSSRect::sides[side]), coord,
-                 parentBorder->mBorderImageWidth.Get(side),
-                 SETCOORD_LPAH | SETCOORD_FACTOR | SETCOORD_INITIAL_FACTOR_ONE,
-                 aContext, mPresContext, canStoreInRuleTree)) {
-      border->mBorderImageWidth.Set(side, coord);
-    }
-
-    // border-image-outset
-    if (SetCoord(borderImageOutset.*(nsCSSRect::sides[side]), coord,
-                 parentBorder->mBorderImageOutset.Get(side),
-                 SETCOORD_LENGTH | SETCOORD_FACTOR |
-                 SETCOORD_INHERIT | SETCOORD_INITIAL_FACTOR_ZERO,
-                 aContext, mPresContext, canStoreInRuleTree)) {
-      border->mBorderImageOutset.Set(side, coord);
-    }
-  }
-
-  // border-image-repeat
-  nsCSSValuePair borderImageRepeat;
-  SetBorderImagePair(*aRuleData->ValueForBorderImageRepeat(),
-                     borderImageRepeat);
-
-  SetDiscrete(borderImageRepeat.mXValue,
-              border->mBorderImageRepeatH,
-              canStoreInRuleTree, SETDSC_ENUMERATED,
-              parentBorder->mBorderImageRepeatH,
-              NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH, 0, 0, 0, 0);
-
-  SetDiscrete(borderImageRepeat.mYValue,
-              border->mBorderImageRepeatV,
-              canStoreInRuleTree, SETDSC_ENUMERATED,
-              parentBorder->mBorderImageRepeatV,
-              NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH, 0, 0, 0, 0);
+  } else if (eCSSUnit_Inherit == borderImageValue->GetUnit()) {
+    canStoreInRuleTree = false;
+    NS_FOR_CSS_SIDES(side) {
+      border->SetBorderImageWidthOverride(side, parentBorder->mBorderImageWidth.Side(side));
+    }
+    border->mBorderImageSplit = parentBorder->mBorderImageSplit;
+    border->mBorderImageHFill = parentBorder->mBorderImageHFill;
+    border->mBorderImageVFill = parentBorder->mBorderImageVFill;
+    border->mHaveBorderImageWidth = parentBorder->mHaveBorderImageWidth;
+    NS_SET_IMAGE_REQUEST(border->SetBorderImage, aContext,
+                         parentBorder->GetBorderImage())
+  }
 
   if (border->HasBorderImage())
     border->TrackImage(aContext->PresContext());
 
   COMPUTE_END_RESET(Border, border)
 }
 
 const void*
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -394,45 +394,39 @@ nsChangeHint nsStylePadding::CalcDiffere
 nsChangeHint nsStylePadding::MaxDifference()
 {
   return NS_SubtractHint(NS_STYLE_HINT_REFLOW,
                          nsChangeHint_ClearDescendantIntrinsics);
 }
 #endif
 
 nsStyleBorder::nsStyleBorder(nsPresContext* aPresContext)
-  : mBorderColors(nsnull),
-    mBoxShadow(nsnull),
+  : mHaveBorderImageWidth(false)
 #ifdef DEBUG
-    mImageTracked(false),
+  , mImageTracked(false)
 #endif
-    mBorderImageSource(nsnull),
-    mBorderImageFill(NS_STYLE_BORDER_IMAGE_SLICE_NOFILL),
-    mBorderImageRepeatH(NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH),
-    mBorderImageRepeatV(NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH),
-    mFloatEdge(NS_STYLE_FLOAT_EDGE_CONTENT),
-    mComputedBorder(0, 0, 0, 0)
+  , mComputedBorder(0, 0, 0, 0)
+  , mBorderImage(nsnull)
 {
   MOZ_COUNT_CTOR(nsStyleBorder);
-
-  NS_FOR_CSS_HALF_CORNERS (corner) {
-    mBorderRadius.Set(corner, nsStyleCoord(0, nsStyleCoord::CoordConstructor));
-  }
-
   nscoord medium =
     (aPresContext->GetBorderWidthTable())[NS_STYLE_BORDER_WIDTH_MEDIUM];
   NS_FOR_CSS_SIDES(side) {
-    mBorderImageSlice.Set(side, nsStyleCoord(1.0f, eStyleUnit_Percent));
-    mBorderImageWidth.Set(side, nsStyleCoord(1.0f, eStyleUnit_Factor));
-    mBorderImageOutset.Set(side, nsStyleCoord(0.0f, eStyleUnit_Factor));
-
     mBorder.Side(side) = medium;
     mBorderStyle[side] = NS_STYLE_BORDER_STYLE_NONE | BORDER_COLOR_FOREGROUND;
     mBorderColor[side] = NS_RGB(0, 0, 0);
   }
+  NS_FOR_CSS_HALF_CORNERS(corner) {
+    mBorderRadius.Set(corner, nsStyleCoord(0, nsStyleCoord::CoordConstructor));
+  }
+
+  mBorderColors = nsnull;
+  mBoxShadow = nsnull;
+
+  mFloatEdge = NS_STYLE_FLOAT_EDGE_CONTENT;
 
   mTwipsPerPixel = aPresContext->DevPixelsToAppUnits(1);
 }
 
 nsBorderColors::~nsBorderColors()
 {
   NS_CSS_DELETE_LIST_MEMBER(nsBorderColors, this, mNext);
 }
@@ -444,118 +438,90 @@ nsBorderColors::Clone(bool aDeep) const
   if (NS_UNLIKELY(!result))
     return result;
   if (aDeep)
     NS_CSS_CLONE_LIST_MEMBER(nsBorderColors, this, mNext, result, (false));
   return result;
 }
 
 nsStyleBorder::nsStyleBorder(const nsStyleBorder& aSrc)
-  : mBorderColors(nsnull),
+  : mBorderRadius(aSrc.mBorderRadius),
+    mBorderImageSplit(aSrc.mBorderImageSplit),
+    mFloatEdge(aSrc.mFloatEdge),
+    mBorderImageHFill(aSrc.mBorderImageHFill),
+    mBorderImageVFill(aSrc.mBorderImageVFill),
+    mBorderColors(nsnull),
     mBoxShadow(aSrc.mBoxShadow),
-#ifdef DEBUG
-    mImageTracked(false),
-#endif
-    mBorderImageSource(aSrc.mBorderImageSource),
-    mBorderRadius(aSrc.mBorderRadius),
-    mBorderImageSlice(aSrc.mBorderImageSlice),
-    mBorderImageFill(aSrc.mBorderImageFill),
+    mHaveBorderImageWidth(aSrc.mHaveBorderImageWidth),
     mBorderImageWidth(aSrc.mBorderImageWidth),
-    mBorderImageOutset(aSrc.mBorderImageOutset),
-    mBorderImageRepeatH(aSrc.mBorderImageRepeatH),
-    mBorderImageRepeatV(aSrc.mBorderImageRepeatV),
-    mFloatEdge(aSrc.mFloatEdge),
     mComputedBorder(aSrc.mComputedBorder),
     mBorder(aSrc.mBorder),
+    mBorderImage(aSrc.mBorderImage),
     mTwipsPerPixel(aSrc.mTwipsPerPixel)
 {
   MOZ_COUNT_CTOR(nsStyleBorder);
   if (aSrc.mBorderColors) {
     EnsureBorderColors();
     for (PRInt32 i = 0; i < 4; i++)
       if (aSrc.mBorderColors[i])
         mBorderColors[i] = aSrc.mBorderColors[i]->Clone();
       else
         mBorderColors[i] = nsnull;
   }
 
   NS_FOR_CSS_SIDES(side) {
     mBorderStyle[side] = aSrc.mBorderStyle[side];
     mBorderColor[side] = aSrc.mBorderColor[side];
   }
+  NS_FOR_CSS_HALF_CORNERS(corner) {
+    mBorderRadius.Set(corner, aSrc.mBorderRadius.Get(corner));
+  }
 }
 
 nsStyleBorder::~nsStyleBorder()
 {
   NS_ABORT_IF_FALSE(!mImageTracked,
                     "nsStyleBorder being destroyed while still tracking image!");
   MOZ_COUNT_DTOR(nsStyleBorder);
   if (mBorderColors) {
     for (PRInt32 i = 0; i < 4; i++)
       delete mBorderColors[i];
     delete [] mBorderColors;
   }
 }
 
-void*
+void* 
 nsStyleBorder::operator new(size_t sz, nsPresContext* aContext) CPP_THROW_NEW {
   void* result = aContext->AllocateFromShell(sz);
   if (result)
     memset(result, 0, sz);
   return result;
 }
-
-nsMargin
-nsStyleBorder::GetImageOutset() const
-{
-  // We don't check whether there is a border-image (which is OK since
-  // the initial values yields 0 outset) so that we don't have to
-  // reflow to update overflow areas when an image loads.
-  nsMargin outset;
-  NS_FOR_CSS_SIDES(s) {
-    nsStyleCoord coord = mBorderImageOutset.Get(s);
-    nscoord value;
-    switch (coord.GetUnit()) {
-      case eStyleUnit_Coord:
-        value = coord.GetCoordValue();
-        break;
-      case eStyleUnit_Factor:
-        value = coord.GetFactorValue() * mComputedBorder.Side(s);
-        break;
-      default:
-        NS_NOTREACHED("unexpected CSS unit for image outset");
-        value = 0;
-        break;
-    }
-    outset.Side(s) = value;
-  }
-  return outset;
-}
-
-void
+  
+void 
 nsStyleBorder::Destroy(nsPresContext* aContext) {
-  if (mBorderImageSource)
+  if (mBorderImage)
     UntrackImage(aContext);
   this->~nsStyleBorder();
   aContext->FreeToShell(sizeof(nsStyleBorder), this);
 }
 
+
 nsChangeHint nsStyleBorder::CalcDifference(const nsStyleBorder& aOther) const
 {
   nsChangeHint shadowDifference =
     CalcShadowDifference(mBoxShadow, aOther.mBoxShadow);
 
   // Note that differences in mBorder don't affect rendering (which should only
   // use mComputedBorder), so don't need to be tested for here.
   // XXXbz we should be able to return a more specific change hint for
   // at least GetActualBorder() differences...
   if (mTwipsPerPixel != aOther.mTwipsPerPixel ||
-      GetActualBorder() != aOther.GetActualBorder() ||
+      GetActualBorder() != aOther.GetActualBorder() || 
       mFloatEdge != aOther.mFloatEdge ||
-      mBorderImageOutset != aOther.mBorderImageOutset ||
       (shadowDifference & nsChangeHint_ReflowFrame))
     return NS_STYLE_HINT_REFLOW;
 
   // Note that mBorderStyle stores not only the border style but also
   // color-related flags.  Given that we've already done an mComputedBorder
   // comparison, border-style differences can only lead to a VISUAL hint.  So
   // it's OK to just compare the values directly -- if either the actual
   // style or the color flags differ we want to repaint.
@@ -565,24 +531,23 @@ nsChangeHint nsStyleBorder::CalcDifferen
       return NS_STYLE_HINT_VISUAL;
   }
 
   if (mBorderRadius != aOther.mBorderRadius ||
       !mBorderColors != !aOther.mBorderColors)
     return NS_STYLE_HINT_VISUAL;
 
   if (IsBorderImageLoaded() || aOther.IsBorderImageLoaded()) {
-    if (mBorderImageSource  != aOther.mBorderImageSource  ||
-        mBorderImageRepeatH != aOther.mBorderImageRepeatH ||
-        mBorderImageRepeatV != aOther.mBorderImageRepeatV ||
-        mBorderImageSlice   != aOther.mBorderImageSlice   ||
-        mBorderImageFill    != aOther.mBorderImageFill    ||
-        mBorderImageWidth   != aOther.mBorderImageWidth   ||
-        mBorderImageOutset  != aOther.mBorderImageOutset)
+    if (mBorderImage != aOther.mBorderImage ||
+        mBorderImageHFill != aOther.mBorderImageHFill ||
+        mBorderImageVFill != aOther.mBorderImageVFill ||
+        mBorderImageSplit != aOther.mBorderImageSplit)
       return NS_STYLE_HINT_VISUAL;
+    // The call to GetActualBorder above already considered
+    // mBorderImageWidth and mHaveBorderImageWidth.
   }
 
   // Note that at this point if mBorderColors is non-null so is
   // aOther.mBorderColors
   if (mBorderColors) {
     NS_FOR_CSS_SIDES(ix) {
       if (!nsBorderColors::Equal(mBorderColors[ix],
                                  aOther.mBorderColors[ix]))
@@ -596,45 +561,64 @@ nsChangeHint nsStyleBorder::CalcDifferen
 #ifdef DEBUG
 /* static */
 nsChangeHint nsStyleBorder::MaxDifference()
 {
   return NS_STYLE_HINT_REFLOW;
 }
 #endif
 
+bool
+nsStyleBorder::ImageBorderDiffers() const
+{
+  return mComputedBorder !=
+           (mHaveBorderImageWidth ? mBorderImageWidth : mBorder);
+}
+
+const nsMargin&
+nsStyleBorder::GetActualBorder() const
+{
+  if (IsBorderImageLoaded())
+    if (mHaveBorderImageWidth)
+      return mBorderImageWidth;
+    else
+      return mBorder;
+  else
+    return mComputedBorder;
+}
+
 void
 nsStyleBorder::TrackImage(nsPresContext* aContext)
 {
   // Sanity
   NS_ABORT_IF_FALSE(!mImageTracked, "Already tracking image!");
-  NS_ABORT_IF_FALSE(mBorderImageSource, "Can't track null image!");
+  NS_ABORT_IF_FALSE(mBorderImage, "Can't track null image!");
 
   // Register the image with the document
   nsIDocument* doc = aContext->Document();
   if (doc)
-    doc->AddImage(mBorderImageSource);
+    doc->AddImage(mBorderImage);
 
   // Mark state
 #ifdef DEBUG
   mImageTracked = true;
 #endif
 }
 
 void
 nsStyleBorder::UntrackImage(nsPresContext* aContext)
 {
   // Sanity
   NS_ABORT_IF_FALSE(mImageTracked, "Image not tracked!");
-  NS_ABORT_IF_FALSE(mBorderImageSource, "Can't track null image!");
+  NS_ABORT_IF_FALSE(mBorderImage, "Can't track null image!");
 
   // Unregister the image with the document
   nsIDocument* doc = aContext->Document();
   if (doc)
-    doc->RemoveImage(mBorderImageSource);
+    doc->RemoveImage(mBorderImage);
 
   // Mark state
 #ifdef DEBUG
   mImageTracked = false;
 #endif
 }
 
 nsStyleOutline::nsStyleOutline(nsPresContext* aPresContext)
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -759,16 +759,27 @@ struct nsStyleBorder {
   void* operator new(size_t sz, nsPresContext* aContext) CPP_THROW_NEW;
   void Destroy(nsPresContext* aContext);
 
   nsChangeHint CalcDifference(const nsStyleBorder& aOther) const;
 #ifdef DEBUG
   static nsChangeHint MaxDifference();
 #endif
   static bool ForceCompare() { return false; }
+  bool ImageBorderDiffers() const;
+
+  nsStyleCorners mBorderRadius;    // [reset] coord, percent, calc
+  nsStyleSides  mBorderImageSplit; // [reset] integer, percent
+  PRUint8       mFloatEdge;       // [reset] see nsStyleConsts.h
+  PRUint8       mBorderImageHFill; // [reset]
+  PRUint8       mBorderImageVFill; // [reset]
+  nsBorderColors** mBorderColors; // [reset] multiple levels of color for a border.
+  nsRefPtr<nsCSSShadowArray> mBoxShadow; // [reset] NULL for 'none'
+  bool          mHaveBorderImageWidth; // [reset]
+  nsMargin      mBorderImageWidth; // [reset]
 
   void EnsureBorderColors() {
     if (!mBorderColors) {
       mBorderColors = new nsBorderColors*[4];
       if (mBorderColors)
         for (PRInt32 i = 0; i < 4; i++)
           mBorderColors[i] = nsnull;
     }
@@ -796,22 +807,29 @@ struct nsStyleBorder {
   {
     nscoord roundedWidth =
       NS_ROUND_BORDER_TO_PIXELS(aBorderWidth, mTwipsPerPixel);
     mBorder.Side(aSide) = roundedWidth;
     if (HasVisibleStyle(aSide))
       mComputedBorder.Side(aSide) = roundedWidth;
   }
 
-  // Returns the computed border.
-  inline const nsMargin& GetActualBorder() const
+  void SetBorderImageWidthOverride(mozilla::css::Side aSide, nscoord aBorderWidth)
   {
-    return mComputedBorder;
+    mBorderImageWidth.Side(aSide) =
+      NS_ROUND_BORDER_TO_PIXELS(aBorderWidth, mTwipsPerPixel);
   }
 
+  // Get the actual border, in twips.  (If there is no border-image
+  // loaded, this is the same as GetComputedBorder.  If there is a
+  // border-image loaded, it uses the border-image width overrides if
+  // present, and otherwise mBorder, which is GetComputedBorder without
+  // considering border-style: none.)
+  const nsMargin& GetActualBorder() const;
+
   // Get the computed border (plus rounding).  This does consider the
   // effects of 'border-style: none', but does not consider
   // 'border-image'.
   const nsMargin& GetComputedBorder() const
   {
     return mComputedBorder;
   }
 
@@ -862,23 +880,21 @@ struct nsStyleBorder {
     mBorderColor[aSide] = aColor;
     mBorderStyle[aSide] &= ~BORDER_COLOR_SPECIAL;
   }
 
   // These are defined in nsStyleStructInlines.h
   inline void SetBorderImage(imgIRequest* aImage);
   inline imgIRequest* GetBorderImage() const;
 
-  bool HasBorderImage() {return !!mBorderImageSource;}
+  bool HasBorderImage() {return !!mBorderImage;}
 
   void TrackImage(nsPresContext* aContext);
   void UntrackImage(nsPresContext* aContext);
 
-  nsMargin GetImageOutset() const;
-
   // These methods are used for the caller to caches the sub images created during
   // a border-image paint operation
   inline void SetSubImage(PRUint8 aIndex, imgIContainer* aSubImage) const;
   inline imgIContainer* GetSubImage(PRUint8 aIndex) const;
 
   void GetCompositeColors(PRInt32 aIndex, nsBorderColors** aColors) const
   {
     if (!mBorderColors)
@@ -904,65 +920,49 @@ struct nsStyleBorder {
 
   void SetBorderToForeground(mozilla::css::Side aSide)
   {
     NS_ASSERTION(aSide <= NS_SIDE_LEFT, "bad side");
     mBorderStyle[aSide] &= ~BORDER_COLOR_SPECIAL;
     mBorderStyle[aSide] |= BORDER_COLOR_FOREGROUND;
   }
 
-public:
-  nsBorderColors** mBorderColors;        // [reset] composite (stripe) colors
-  nsRefPtr<nsCSSShadowArray> mBoxShadow; // [reset] NULL for 'none'
-
 #ifdef DEBUG
   bool mImageTracked;
 #endif
 
 protected:
-  nsCOMPtr<imgIRequest> mBorderImageSource; // [reset]
-
-public:
-  nsStyleCorners mBorderRadius;       // [reset] coord, percent
-  nsStyleSides   mBorderImageSlice;   // [reset] factor, percent
-  PRUint8        mBorderImageFill;    // [reset]
-  nsStyleSides   mBorderImageWidth;   // [reset] length, factor, percent, auto
-  nsStyleSides   mBorderImageOutset;  // [reset] length, factor
-
-  PRUint8        mBorderImageRepeatH; // [reset] see nsStyleConsts.h
-  PRUint8        mBorderImageRepeatV; // [reset]
-  PRUint8        mFloatEdge;          // [reset]
-  // 8 bits free here
-
-protected:
-  // mComputedBorder holds the CSS2.1 computed border-width values.
-  // In particular, these widths take into account the border-style
-  // for the relevant side, and the values are rounded to the nearest
-  // device pixel (which is not part of the definition of computed
-  // values). The presence or absence of a border-image does not
-  // affect border-width values.
+  // mComputedBorder holds the CSS2.1 computed border-width values.  In
+  // particular, these widths take into account the border-style for the
+  // relevant side and the values are rounded to the nearest device
+  // pixel.  They are also rounded (which is not part of the definition
+  // of computed values).  However, they do *not* take into account the
+  // presence of border-image.  See GetActualBorder above for how to
+  // really get the actual border.
   nsMargin      mComputedBorder;
 
-  // mBorder holds the nscoord values for the border widths as they
-  // would be if all the border-style values were visible (not hidden
-  // or none).  This member exists so that when we create structs
-  // using the copy constructor during style resolution the new
-  // structs will know what the specified values of the border were in
-  // case they have more specific rules setting the border style.
-  //
-  // Note that this isn't quite the CSS specified value, since this
-  // has had the enumerated border widths converted to lengths, and
-  // all lengths converted to twips.  But it's not quite the computed
-  // value either. The values are rounded to the nearest device pixel.
+  // mBorder holds the nscoord values for the border widths as they would be if
+  // all the border-style values were visible (not hidden or none).  This
+  // member exists so that when we create structs using the copy
+  // constructor during style resolution the new structs will know what the
+  // specified values of the border were in case they have more specific rules
+  // setting the border style.  Note that this isn't quite the CSS specified
+  // value, since this has had the enumerated border widths converted to
+  // lengths, and all lengths converted to twips.  But it's not quite the
+  // computed value either. The values are rounded to the nearest device pixel
+  // We also use these values when we have a loaded border-image that
+  // does not have width overrides.
   nsMargin      mBorder;
 
   PRUint8       mBorderStyle[4];  // [reset] See nsStyleConsts.h
-  nscolor       mBorderColor[4];  // [reset] the colors to use for a simple
-                                  // border.  not used for -moz-border-colors
+  nscolor       mBorderColor[4];  // [reset] the colors to use for a simple border.  not used
+                                  // if -moz-border-colors is specified
 private:
+  nsCOMPtr<imgIRequest> mBorderImage; // [reset]
+
   // Cache used by callers for border-image painting
   nsCOMArray<imgIContainer> mSubImages;
 
   nscoord       mTwipsPerPixel;
 
   nsStyleBorder& operator=(const nsStyleBorder& aOther) MOZ_DELETE;
 };
 
--- a/layout/style/nsStyleStructInlines.h
+++ b/layout/style/nsStyleStructInlines.h
@@ -46,33 +46,33 @@
 
 #include "nsStyleStruct.h"
 #include "imgIRequest.h"
 #include "imgIContainer.h"
 
 inline void
 nsStyleBorder::SetBorderImage(imgIRequest* aImage)
 {
-  mBorderImageSource = aImage;
+  mBorderImage = aImage;
   mSubImages.Clear();
 }
 
 inline imgIRequest*
 nsStyleBorder::GetBorderImage() const
 {
-  NS_ABORT_IF_FALSE(!mBorderImageSource || mImageTracked,
+  NS_ABORT_IF_FALSE(!mBorderImage || mImageTracked,
                     "Should be tracking any images we're going to use!");
-  return mBorderImageSource;
+  return mBorderImage;
 }
 
 inline bool nsStyleBorder::IsBorderImageLoaded() const
 {
   PRUint32 status;
-  return mBorderImageSource &&
-         NS_SUCCEEDED(mBorderImageSource->GetImageStatus(&status)) &&
+  return mBorderImage &&
+         NS_SUCCEEDED(mBorderImage->GetImageStatus(&status)) &&
          (status & imgIRequest::STATUS_LOAD_COMPLETE) &&
          !(status & imgIRequest::STATUS_ERROR);
 }
 
 inline void
 nsStyleBorder::SetSubImage(PRUint8 aIndex, imgIContainer* aSubImage) const
 {
   const_cast<nsStyleBorder*>(this)->mSubImages.ReplaceObjectAt(aSubImage, aIndex);
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -228,83 +228,29 @@ var gCSSProperties = {
 			"-moz-calc(25px*3)",
 			"-moz-calc(3*25px + 5em)",
 		],
 		invalid_values: [ "5%" ]
 	},
 	"-moz-border-image": {
 		domProp: "MozBorderImage",
 		inherited: false,
-		type: CSS_TYPE_TRUE_SHORTHAND,
-		subproperties: [ "-moz-border-image-source", "-moz-border-image-slice", "-moz-border-image-width", "-moz-border-image-outset", "-moz-border-image-repeat" ],
+		type: CSS_TYPE_LONGHAND,
 		initial_values: [ "none" ],
 		other_values: [ "url('border.png') 27 27 27 27",
 						"url('border.png') 27",
-						"stretch url('border.png')",
-						"url('border.png') 27 fill",
 						"url('border.png') 27 27 27 27 repeat",
-						"repeat url('border.png') 27 27 27 27",
-						"url('border.png') repeat 27 27 27 27",
-						"url('border.png') fill 27 27 27 27 repeat",
 						"url('border.png') 27 27 27 27 / 1em",
-						"27 27 27 27 / 1em url('border.png') ",
-						"url('border.png') 27 27 27 27 / 10 10 10 / 10 10 repeat",
-						"repeat 27 27 27 27 / 10 10 10 / 10 10 url('border.png')",
-						"url('border.png') 27 27 27 27 / / 10 10 1em",
-						"fill 27 27 27 27 / / 10 10 1em url('border.png')",
-						"url('border.png') 27 27 27 27 /",
 						"url('border.png') 27 27 27 27 / 1em 1em 1em 1em repeat",
 						"url('border.png') 27 27 27 27 / 1em 1em 1em 1em stretch round" ],
-		invalid_values: [ "url('border.png') 27 27 27 27 27",
+		invalid_values: [ "url('border.png')",
+						  "url('border.png') 27 27 27 27 27",
 						  "url('border.png') 27 27 27 27 / 1em 1em 1em 1em 1em",
-						  "url('border.png') fill",
-						  "url('border.png') fill repeat",
-						  "fill repeat",
-						  "url('border.png') fill / 1em",
-						  "url('border.png') / repeat" ]
-	},
-	"-moz-border-image-source": {
-		domProp: "MozBorderImageSource",
-		inherited: false,
-		type: CSS_TYPE_LONGHAND,
-		initial_values: [ "none" ],
-		other_values: [ "url('border.png')" ],
-		invalid_values: [ "url('border.png') url('border.png')" ]
-	},
-	"-moz-border-image-slice": {
-		domProp: "MozBorderImageSlice",
-		inherited: false,
-		type: CSS_TYPE_LONGHAND,
-		initial_values: [ "100%", "100% 100% 100% 100%" ],
-		other_values: [ "0%", "10", "10 100% 0 2", "0 0 0 0", "fill 10 10", "10 10 fill" ],
-		invalid_values: [ "-10%", "-10", "10 10 10 10 10", "10 10 10 10 -10", "10px", "-10px", "fill", "fill fill 10px", "10px fill fill" ]
-	},
-	"-moz-border-image-width": {
-		domProp: "MozBorderImageWidth",
-		inherited: false,
-		type: CSS_TYPE_LONGHAND,
-		initial_values: [ "1", "1 1 1 1" ],
-		other_values: [ "0", "0%", "0px", "auto auto auto auto", "10 10% auto 15px", "10px 10px 10px 10px", "10", "10 10", "10 10 10" ],
-		invalid_values: [ "-10", "-10px", "-10%", "10 10 10 10 10", "10 10 10 10 auto", "auto auto auto auto auto" ]
-	},
-	"-moz-border-image-outset": {
-		domProp: "MozBorderImageOutset",
-		inherited: false,
-		type: CSS_TYPE_LONGHAND,
-		initial_values: [ "0", "0 0 0 0" ],
-		other_values: [ "10px", "10", "10 10", "10 10 10", "10 10 10 10", "10px 10 10 10px" ],
-		invalid_values: [ "-10", "-10px", "-10%", "10%", "10 10 10 10 10" ]
-	},
-	"-moz-border-image-repeat": {
-		domProp: "MozBorderImageRepeat",
-		inherited: false,
-		type: CSS_TYPE_LONGHAND,
-		initial_values: [ "stretch", "stretch stretch" ],
-		other_values: [ "round", "repeat", "stretch round", "repeat round", "stretch repeat", "round round", "repeat repeat" ],
-		invalid_values: [ "none", "stretch stretch stretch", "0", "10", "0%", "0px" ]
+						  "url('border.png') / repeat",
+						  "url('border.png') 27 27 27 27 /" ]
 	},
 	"-moz-border-left-colors": {
 		domProp: "MozBorderLeftColors",
 		inherited: false,
 		type: CSS_TYPE_LONGHAND,
 		initial_values: [ "none" ],
 		other_values: [ "red green", "red #fc3", "#ff00cc", "currentColor", "blue currentColor orange currentColor" ],
 		invalid_values: [ "red none", "red inherit", "red, green", "none red", "inherit red" ]
@@ -1642,17 +1588,17 @@ var gCSSProperties = {
 			"-moz-calc(-20%) -moz-calc(-50%)"
 		],
 		invalid_values: [ "contain contain", "cover cover", "cover auto", "auto cover", "contain cover", "cover contain", "-5px 3px", "3px -5px", "auto -5px", "-5px auto" ]
 	},
 	"border": {
 		domProp: "border",
 		inherited: false,
 		type: CSS_TYPE_TRUE_SHORTHAND,
-		subproperties: [ "border-bottom-color", "border-bottom-style", "border-bottom-width", "border-left-color", "border-left-style", "border-left-width", "border-right-color", "border-right-style", "border-right-width", "border-top-color", "border-top-style", "border-top-width", "-moz-border-top-colors", "-moz-border-right-colors", "-moz-border-bottom-colors", "-moz-border-left-colors", "-moz-border-image-source", "-moz-border-image-slice", "-moz-border-image-width", "-moz-border-image-outset", "-moz-border-image-repeat" ],
+		subproperties: [ "border-bottom-color", "border-bottom-style", "border-bottom-width", "border-left-color", "border-left-style", "border-left-width", "border-right-color", "border-right-style", "border-right-width", "border-top-color", "border-top-style", "border-top-width", "-moz-border-top-colors", "-moz-border-right-colors", "-moz-border-bottom-colors", "-moz-border-left-colors", "-moz-border-image" ],
 		initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor", "-moz-calc(4px - 1px) none" ],
 		other_values: [ "solid", "medium solid", "green solid", "10px solid", "thick solid", "-moz-calc(2px) solid blue" ],
 		invalid_values: [ "5%" ]
 	},
 	"border-bottom": {
 		domProp: "borderBottom",
 		inherited: false,
 		type: CSS_TYPE_TRUE_SHORTHAND,
--- a/layout/style/test/test_shorthand_property_getters.html
+++ b/layout/style/test/test_shorthand_property_getters.html
@@ -164,19 +164,19 @@ is(e.style.MozTransition, "", "should no
 e.setAttribute("style", "-moz-transition-property: color, width; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear, ease-out; -moz-transition-delay: 0s, 1s");
 is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
 e.setAttribute("style", "-moz-transition-property: color, width; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s, 0s");
 is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
 
 // Check that the 'border' shorthand resets 'border-image' and
 // '-moz-border-*-colors', but that other 'border-*' shorthands don't
 // (bug 482692).
-e.setAttribute("style", '-moz-border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green');
+e.setAttribute("style", '-moz-border-image: url("foo.png") 5 5 5 5; border-left: medium solid green');
 is(e.style.cssText,
-   '-moz-border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green;',
+   '-moz-border-image: url("foo.png") 5 5 5 5; border-left: medium solid green;',
    "border-left does NOT reset -moz-border-image");
 e.setAttribute("style", '-moz-border-image: url("foo.png") 5 5 5 5; border: medium solid green');
 is(e.style.cssText,
    'border: medium solid green;',
    "border DOES reset -moz-border-image");
 e.setAttribute("style", '-moz-border-left-colors: fuchsia blue; border-left: medium solid green');
 is(e.style.cssText,
    '-moz-border-left-colors: fuchsia blue; border-left: medium solid green;',
--- a/toolkit/themes/pinstripe/global/preferences.css
+++ b/toolkit/themes/pinstripe/global/preferences.css
@@ -80,18 +80,18 @@ radio[pane] > .paneButtonIcon {
   background-image: url("chrome://global/skin/filters.svg");
 }
 
 radio[pane]:active:hover > .paneButtonIcon {
   filter: url("chrome://global/skin/filters.svg#iconPressed");
 }
 
 radio[pane][selected="true"] {
-  -moz-border-image: url("chrome://global/skin/icons/panebutton-active.png") 0 2 fill repeat stretch;
+  -moz-border-image: url("chrome://global/skin/icons/panebutton-active.png") 0 2 repeat stretch;
 }
 
 radio[pane][selected="true"]:-moz-window-inactive {
-  -moz-border-image: url("chrome://global/skin/icons/panebutton-inactive.png") 0 2 fill repeat stretch;
+  -moz-border-image: url("chrome://global/skin/icons/panebutton-inactive.png") 0 2 repeat stretch;
 }
 
 .paneButtonLabel {
   margin: 0 !important;
 }