diff --git a/layout/reftests/writing-mode/reftest.list b/layout/reftests/writing-mode/reftest.list
index 12476b5b24e..d4719ae9b60 100644
--- a/layout/reftests/writing-mode/reftest.list
+++ b/layout/reftests/writing-mode/reftest.list
@@ -61,6 +61,15 @@ fuzzy(116,64) HTTP(..) == 1115916-1-vertical-metrics.html 1115916-1-vertical-met
 == ua-style-sheet-border-6.html ua-style-sheet-border-6-ref.html
 == ua-style-sheet-size-1.html ua-style-sheet-size-1-ref.html
 == ua-style-sheet-size-2.html ua-style-sheet-size-2-ref.html
+
+== ua-style-sheet-fieldset-1.html ua-style-sheet-fieldset-1-ref.html
+skip-if(Android||B2G) == ua-style-sheet-textarea-1.html ua-style-sheet-textarea-1a-ref.html
+skip-if(!(Android||B2G)) == ua-style-sheet-textarea-1.html ua-style-sheet-textarea-1b-ref.html
+== ua-style-sheet-checkbox-radio-1.html ua-style-sheet-checkbox-radio-1-ref.html
+skip-if(Android||B2G) == ua-style-sheet-button-1.html ua-style-sheet-button-1a-ref.html
+skip-if(!(Android||B2G)) == ua-style-sheet-button-1.html ua-style-sheet-button-1b-ref.html
+== ua-style-sheet-input-color-1.html ua-style-sheet-input-color-1-ref.html
+fails == ua-style-sheet-input-number-1.html ua-style-sheet-input-number-1-ref.html # bug 1123299
 HTTP(..) == 1127488-align-default-horizontal-tb-ltr.html 1127488-align-top-left-ref.html
 HTTP(..) == 1127488-align-start-horizontal-tb-ltr.html 1127488-align-top-left-ref.html
 HTTP(..) == 1127488-align-end-horizontal-tb-ltr.html 1127488-align-top-right-ref.html
diff --git a/layout/reftests/writing-mode/ua-style-sheet-button-1.html b/layout/reftests/writing-mode/ua-style-sheet-button-1.html
new file mode 100644
index 00000000000..f1ee2792afd
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-button-1.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of button in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+.a { -moz-appearance: none; }
+</style>
+<div class=ltr>
+  <button>one</button><br>
+  <button class=a>two</button><br>
+  <button disabled>three</button><br>
+  <button class=a disabled>four</button><br>
+  <input type="button" value="five"><br>
+  <input type="button" value="six" class=a><br>
+  <input type="button" value="seven" disabled><br>
+  <input type="button" value="eight" class=a disabled><br>
+</div>
+
+<div class=rtl dir=rtl>
+  <button>one</button><br>
+  <button class=a>two</button><br>
+  <button disabled>three</button><br>
+  <button class=a disabled>four</button><br>
+  <input type="button" value="five"><br>
+  <input type="button" value="six" class=a><br>
+  <input type="button" value="seven" disabled><br>
+  <input type="button" value="eight" class=a disabled><br>
+</div>
+
+<div class=v-rl>
+  <button>one</button><br>
+  <button class=a>two</button><br>
+  <button disabled>three</button><br>
+  <button class=a disabled>four</button><br>
+  <input type="button" value="five"><br>
+  <input type="button" value="six" class=a><br>
+  <input type="button" value="seven" disabled><br>
+  <input type="button" value="eight" class=a disabled><br>
+</div>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
new file mode 100644
index 00000000000..1c3bc739067
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of button in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+.a { -moz-appearance: none; }
+
+.ltr button,
+.rtl button,
+.ltr input[type="button"],
+.rtl input[type="button"] {
+  padding: 0px 6px;
+}
+
+.v-rl button,
+.v-rl input[type="button"] {
+  padding: 6px 0px;
+}
+</style>
+<div class=ltr>
+  <button>one</button><br>
+  <button class=a>two</button><br>
+  <button disabled>three</button><br>
+  <button class=a disabled>four</button><br>
+  <input type="button" value="five"><br>
+  <input type="button" value="six" class=a><br>
+  <input type="button" value="seven" disabled><br>
+  <input type="button" value="eight" class=a disabled><br>
+</div>
+
+<div class=rtl dir=rtl>
+  <button>one</button><br>
+  <button class=a>two</button><br>
+  <button disabled>three</button><br>
+  <button class=a disabled>four</button><br>
+  <input type="button" value="five"><br>
+  <input type="button" value="six" class=a><br>
+  <input type="button" value="seven" disabled><br>
+  <input type="button" value="eight" class=a disabled><br>
+</div>
+
+<div class=v-rl>
+  <button>one</button><br>
+  <button class=a>two</button><br>
+  <button disabled>three</button><br>
+  <button class=a disabled>four</button><br>
+  <input type="button" value="five"><br>
+  <input type="button" value="six" class=a><br>
+  <input type="button" value="seven" disabled><br>
+  <input type="button" value="eight" class=a disabled><br>
+</div>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1-ref.html
new file mode 100644
index 00000000000..033b312f0b3
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of checkbox and radio button in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+
+input[type="radio"],
+input[type="checkbox"] {
+  width: 13px;
+  height: 13px;
+}
+
+.ltr input[type="radio"] {
+  margin: 3px 3px 0px 5px;
+}
+.rtl input[type="radio"] {
+  margin: 3px 5px 0px 3px;
+}
+.v-rl input[type="radio"] {
+  margin: 5px 3px 3px 0px;
+}
+
+.ltr input[type="checkbox"] {
+  margin: 3px 3px 3px 4px;
+}
+.rtl input[type="checkbox"] {
+  margin: 3px 4px 3px 3px;
+}
+.v-rl input[type="checkbox"] {
+  margin: 4px 3px 3px 3px;
+}
+
+</style>
+<div class=ltr>
+  <input type=radio checked>radio 1</input><br>
+  <input type=radio>radio 2</input><br>
+  <input type=checkbox checked>checkbox 1</input><br>
+  <input type=checkbox>checkbox 2</input><br>
+</div>
+
+<div class=rtl dir=rtl>
+  <input type=radio checked>radio 1</input><br>
+  <input type=radio>radio 2</input><br>
+  <input type=checkbox checked>checkbox 1</input><br>
+  <input type=checkbox>checkbox 2</input><br>
+</div>
+
+<div class=v-rl>
+  <input type=radio checked>radio 1</input><br>
+  <input type=radio>radio 2</input><br>
+  <input type=checkbox checked>checkbox 1</input><br>
+  <input type=checkbox>checkbox 2</input><br>
+</div>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1.html b/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1.html
new file mode 100644
index 00000000000..7cf1129e2a4
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of checkbox and radio button in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+</style>
+<div class=ltr>
+  <input type=radio checked>radio 1</input><br>
+  <input type=radio>radio 2</input><br>
+  <input type=checkbox checked>checkbox 1</input><br>
+  <input type=checkbox>checkbox 2</input><br>
+</div>
+
+<div class=rtl dir=rtl>
+  <input type=radio checked>radio 1</input><br>
+  <input type=radio>radio 2</input><br>
+  <input type=checkbox checked>checkbox 1</input><br>
+  <input type=checkbox>checkbox 2</input><br>
+</div>
+
+<div class=v-rl>
+  <input type=radio checked>radio 1</input><br>
+  <input type=radio>radio 2</input><br>
+  <input type=checkbox checked>checkbox 1</input><br>
+  <input type=checkbox>checkbox 2</input><br>
+</div>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-fieldset-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-fieldset-1-ref.html
new file mode 100644
index 00000000000..dc3857082df
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-fieldset-1-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of fieldset in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+
+fieldset { height: 100px; width: 100px; }
+
+.ltr .a, .rtl .a { height: 40%; background: #eee; }
+.ltr .b, .rtl .b { height: 60%; background: #ddd; }
+.v-rl .a { width: 40%; background: #eee; }
+.v-rl .b { width: 60%; background: #ddd; }
+
+.ltr fieldset, .rtl fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
+.v-rl fieldset { margin: 2px 0; padding: 0.625em 0.35em 0.625em 0.75em; }
+
+.ltr legend, .rtl legend { padding: 0 2px; }
+.v-rl legend { padding: 2px 0; }
+</style>
+<div class=ltr>
+  <fieldset>
+    <legend>Legend</legend>
+    <div class=a></div>
+    <div class=b></div>
+  </fieldset>
+</div>
+
+<div class=rtl dir=rtl>
+  <fieldset>
+    <legend>Legend</legend>
+    <div class=a></div>
+    <div class=b></div>
+  </fieldset>
+</div>
+
+<div class=v-rl>
+  <fieldset>
+    <legend>Legend</legend>
+    <div class=a></div>
+    <div class=b></div>
+  </fieldset>
+</div>
+
diff --git a/layout/reftests/writing-mode/ua-style-sheet-fieldset-1.html b/layout/reftests/writing-mode/ua-style-sheet-fieldset-1.html
new file mode 100644
index 00000000000..3cc77041d7b
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-fieldset-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of fieldset in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+
+fieldset { height: 100px; width: 100px; }
+
+.a { block-size: 40%; background: #eee; }
+.b { block-size: 60%; background: #ddd; }
+</style>
+<div class=ltr>
+  <fieldset>
+    <legend>Legend</legend>
+    <div class=a></div>
+    <div class=b></div>
+  </fieldset>
+</div>
+
+<div class=rtl dir=rtl>
+  <fieldset>
+    <legend>Legend</legend>
+    <div class=a></div>
+    <div class=b></div>
+  </fieldset>
+</div>
+
+<div class=v-rl>
+  <fieldset>
+    <legend>Legend</legend>
+    <div class=a></div>
+    <div class=b></div>
+  </fieldset>
+</div>
+
diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
new file mode 100644
index 00000000000..ddd3c7ec430
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of input type=color in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+.a { -moz-appearance: none; }
+
+.ltr input[type="color"]:-moz-system-metric(color-picker-available),
+.rtl input[type="color"]:-moz-system-metric(color-picker-available) {
+  width: 64px;
+  height: 23px;
+  padding: 0px 6px;
+}
+
+.v-rl input[type="color"]:-moz-system-metric(color-picker-available) {
+  height: 64px;
+  width: 23px;
+  padding: 6px 0px;
+}
+</style>
+<div class=ltr>
+  <input type=color><br>
+  <input type=color class=a><br>
+</div>
+
+<div class=rtl dir=rtl>
+  <input type=color><br>
+  <input type=color class=a><br>
+</div>
+
+<div class=v-rl>
+  <input type=color><br>
+  <input type=color class=a><br>
+</div>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html b/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html
new file mode 100644
index 00000000000..4fef0094f16
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of input type=color in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+.a { -moz-appearance: none; }
+</style>
+<div class=ltr>
+  <input type=color><br>
+  <input type=color class=a><br>
+</div>
+
+<div class=rtl dir=rtl>
+  <input type=color><br>
+  <input type=color class=a><br>
+</div>
+
+<div class=v-rl>
+  <input type=color><br>
+  <input type=color class=a><br>
+</div>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-number-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-input-number-1-ref.html
new file mode 100644
index 00000000000..23bed81a300
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-number-1-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of input type=number in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+div { padding: 10px; }
+.a { -moz-appearance:textfield; }
+.b { -moz-appearance:none; }
+
+.ltr input[type="number"],
+.rtl input[type="number"] {
+  width: 20ch;
+}
+
+.v-rl input[type="number"] {
+  height: 20ch;
+}
+
+</style>
+<div class=ltr>
+  <input type=number value=123><br><br>
+  <input type=number value=456 class=a><br><br>
+  <input type=number value=7890 class=b>
+</div>
+
+<div class=rtl dir=rtl>
+  <input type=number value=123><br><br>
+  <input type=number value=456 class=a><br><br>
+  <input type=number value=7890 class=b>
+</div>
+
+<!-- this will fail until bug 1123299 is fixed -->
+<div class=v-rl>
+  <input type=number value=123><br><br>
+  <input type=number value=456 class=a><br><br>
+  <input type=number value=7890 class=b>
+</div>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-number-1.html b/layout/reftests/writing-mode/ua-style-sheet-input-number-1.html
new file mode 100644
index 00000000000..b7d2408fc02
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-number-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of input type=number in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+div { padding: 10px; }
+.a { -moz-appearance:textfield; }
+.b { -moz-appearance:none; }
+</style>
+<div class=ltr>
+  <input type=number value=123><br><br>
+  <input type=number value=456 class=a><br><br>
+  <input type=number value=7890 class=b>
+</div>
+
+<div class=rtl dir=rtl>
+  <input type=number value=123><br><br>
+  <input type=number value=456 class=a><br><br>
+  <input type=number value=7890 class=b>
+</div>
+
+<!-- this will fail until bug 1123299 is fixed -->
+<div class=v-rl>
+  <input type=number value=123><br><br>
+  <input type=number value=456 class=a><br><br>
+  <input type=number value=7890 class=b>
+</div>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-textarea-1.html b/layout/reftests/writing-mode/ua-style-sheet-textarea-1.html
new file mode 100644
index 00000000000..c55c998d7cf
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-textarea-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of textarea in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+</style>
+<div class=ltr>
+  <textarea>hello</textarea>
+</div>
+
+<div class=rtl dir=rtl>
+  <textarea>hello</textarea>
+</div>
+
+<div class=v-rl>
+  <textarea>hello</textarea>
+</div>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-textarea-1a-ref.html b/layout/reftests/writing-mode/ua-style-sheet-textarea-1a-ref.html
new file mode 100644
index 00000000000..0fc2b83eb4d
--- /dev/null
+++ b/layout/reftests/writing-mode/ua-style-sheet-textarea-1a-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for logical properties of textarea in the UA stylesheet</title>
+<style>
+.v-rl { writing-mode: vertical-rl; }
+.ltr, .rtl, .v-rl { border: 1px solid blue; }
+
+.ltr textarea, .rtl textarea {
+  margin: 1px 0;
+  padding: 0 1px;
+}
+.v-rl textarea {
+  margin: 0 1px;
+  padding: 1px 0;
+}
+</style>
+<div class=ltr>
+  <textarea>hello</textarea>
+</div>
+
+<div class=rtl dir=rtl>
+  <textarea>hello</textarea>
+</div>
+
+<div class=v-rl>
+  <textarea>hello</textarea>
+</div>
