diff --git a/layout/style/test/mochitest.ini b/layout/style/test/mochitest.ini
index f852e43c2ba2..b98476822880 100644
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -243,6 +243,7 @@ skip-if = buildapp == 'b2g' || toolkit == 'android' #TIMED_OUT # b2g(bug 870262,
 skip-if = buildapp == 'b2g' || toolkit == 'android' #TIMED_OUT # b2g(bug 870262, :visited support) b2g-debug(bug 870262, :visited support) b2g-desktop(bug 870262, :visited support)
 [test_bug525952.html]
 [test_load_events_on_stylesheets.html]
+[test_logical_properties.html]
 [test_page_parser.html]
 [test_bug732153.html]
 [test_bug732209.html]
diff --git a/layout/style/test/test_logical_properties.html b/layout/style/test/test_logical_properties.html
new file mode 100644
index 000000000000..4e194ae3ab73
--- /dev/null
+++ b/layout/style/test/test_logical_properties.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for handling of logical and physical properties</title>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+
+<style id="sheet"></style>
+<div id="test" class="test"></div>
+
+<script>
+var gSheet = document.getElementById("sheet");
+var gTest  = document.getElementById("test");
+
+// list of groups of physical and logical properties, such as
+// { left: "margin-left", right: "margin-right",
+//   inlineStart: "margin-inline-start", inlineEnd: "margin-inline-end",
+//   type: "length" }
+// where the type is a key from the gValues object
+var gPropertyGroups;
+
+// values to use while testing
+var gValues = {
+  "length":       ["1px", "2px", "3px"],
+  "color":        ["rgb(1, 1, 1)", "rgb(2, 2, 2)", "rgb(3, 3, 3)"],
+  "border-style": ["solid", "dashed", "dotted"],
+};
+
+function init() {
+  gPropertyGroups = [];
+
+  for (var p in gCSSProperties) {
+    var type = gCSSProperties[p].type;
+
+    if (type == CSS_TYPE_SHORTHAND_AND_LONGHAND && /-inline-end/.test(p)) {
+      var valueType;
+      if (/margin|padding|width/.test(p)) {
+        valueType = "length";
+      } else if (/color/.test(p)) {
+        valueType = "color";
+      } else if (/border.*style/.test(p)) {
+        valueType = "border-style";
+      } else {
+        throw `unexpected property ${p}`;
+      }
+      gPropertyGroups.push({
+        left:        p.replace("-inline-end", "-left"),
+        right:       p.replace("-inline-end", "-right"),
+        inlineStart: p.replace("-inline-end", "-inline-start"),
+        inlineEnd:   p,
+        type:        valueType
+      });
+    }
+  }
+}
+
+function test_computed_values(aTestName, aRules, aExpectedValues) {
+  gSheet.textContent = aRules;
+  var cs = getComputedStyle(gTest);
+  aExpectedValues.forEach(function(aPair) {
+    is(cs.getPropertyValue(aPair[0]), aPair[1], `${aTestName} ${aPair[0]}`);
+  });
+  gSheet.textContent = "";
+}
+
+function make_declaration(aObject) {
+  var decl = "";
+  if (aObject) {
+    for (var p in aObject) {
+      decl += `${p}: ${aObject[p]}; `;
+    }
+  }
+  return decl;
+}
+
+function start() {
+  // load property_database.js once the pref change has gone into effect
+  var script = document.createElement("script");
+  script.src = "property_database.js";
+  script.onload = function() {
+    init();
+    run_tests();
+  };
+  document.body.appendChild(script);
+}
+
+function run_tests() {
+  gPropertyGroups.forEach(function(aGroup) {
+    var values = gValues[aGroup.type];
+    var decl;
+
+    // Test that logical properties are converted to their physical equivalent
+    // correctly when present on a single declaration, with no overwriting of
+    // previous properties.
+
+    decl = `${aGroup.inlineStart}: ${values[0]}; ` +
+           `${aGroup.inlineEnd}: ${values[1]}; ` +
+           make_declaration(gCSSProperties[aGroup.left].prerequisites) +
+           make_declaration(gCSSProperties[aGroup.right].prerequisites);
+
+    test_computed_values("ltr inline single declaration",
+                         `.test { direction: ltr; ${decl} }`,
+                         [[aGroup.left,  values[0]],
+                          [aGroup.right, values[1]]]);
+
+    test_computed_values("rtl inline single declaration",
+                         `.test { direction: rtl; ${decl} }`,
+                         [[aGroup.left,  values[1]],
+                          [aGroup.right, values[0]]]);
+
+    // Test that logical and physical properties are cascaded together, honoring
+    // their relative order on a single declaration.
+
+    decl = `${aGroup.left}: ${values[0]}; ` +
+           `${aGroup.right}: ${values[1]}; ` +
+           `${aGroup.inlineStart}: ${values[2]}; ` +
+           make_declaration(gCSSProperties[aGroup.left].prerequisites) +
+           make_declaration(gCSSProperties[aGroup.right].prerequisites);
+
+    test_computed_values("ltr inline-start single declaration, logical last",
+                         `.test { direction: ltr; ${decl} }`,
+                         [[aGroup.left,  values[2]],
+                          [aGroup.right, values[1]]]);
+
+    test_computed_values("rtl inline-start single declaration, logical last",
+                         `.test { direction: rtl; ${decl} }`,
+                         [[aGroup.left,  values[0]],
+                          [aGroup.right, values[2]]]);
+
+    decl = `${aGroup.left}: ${values[0]}; ` +
+           `${aGroup.right}: ${values[1]}; ` +
+           `${aGroup.inlineEnd}: ${values[2]}; ` +
+           make_declaration(gCSSProperties[aGroup.left].prerequisites) +
+           make_declaration(gCSSProperties[aGroup.right].prerequisites);
+
+    test_computed_values("ltr inline-end single declaration, logical last",
+                         `.test { direction: ltr; ${decl} }`,
+                         [[aGroup.left,  values[0]],
+                          [aGroup.right, values[2]]]);
+
+    test_computed_values("rtl inline-end single declaration, logical last",
+                         `.test { direction: rtl; ${decl} }`,
+                         [[aGroup.left,  values[2]],
+                          [aGroup.right, values[1]]]);
+
+    decl = `${aGroup.inlineStart}: ${values[0]}; ` +
+           `${aGroup.inlineEnd}: ${values[1]}; ` +
+           `${aGroup.left}: ${values[2]}; ` +
+           make_declaration(gCSSProperties[aGroup.left].prerequisites) +
+           make_declaration(gCSSProperties[aGroup.right].prerequisites);
+
+    test_computed_values("ltr inline left single declaration, physical last",
+                         `.test { direction: ltr; ${decl} }`,
+                         [[aGroup.left,  values[2]],
+                          [aGroup.right, values[1]]]);
+
+    test_computed_values("rtl inline left single declaration, physical last",
+                         `.test { direction: rtl; ${decl} }`,
+                         [[aGroup.left,  values[2]],
+                          [aGroup.right, values[0]]]);
+
+    decl = `${aGroup.inlineStart}: ${values[0]}; ` +
+           `${aGroup.inlineEnd}: ${values[1]}; ` +
+           `${aGroup.right}: ${values[2]}; ` +
+           make_declaration(gCSSProperties[aGroup.left].prerequisites) +
+           make_declaration(gCSSProperties[aGroup.right].prerequisites);
+
+    test_computed_values("ltr inline right single declaration, physical last",
+                         `.test { direction: ltr; ${decl} }`,
+                         [[aGroup.left,  values[0]],
+                          [aGroup.right, values[2]]]);
+
+    test_computed_values("rtl inline right single declaration, physical last",
+                         `.test { direction: rtl; ${decl} }`,
+                         [[aGroup.left,  values[1]],
+                          [aGroup.right, values[2]]]);
+
+    // Test that logical and physical properties are cascaded properly when on
+    // different declarations.
+
+    var hiDecl;  // higher specificity
+    var loDecl;  // lower specifity
+
+    hiDecl = `${aGroup.inlineStart}: ${values[0]}; `;
+    loDecl = `${aGroup.left}: ${values[1]}; ` +
+             `${aGroup.right}: ${values[2]}; ` +
+             make_declaration(gCSSProperties[aGroup.left].prerequisites) +
+             make_declaration(gCSSProperties[aGroup.right].prerequisites);
+
+    test_computed_values("ltr inline-start two declarations",
+                         `#test { ${hiDecl} } ` +
+                         `.test { direction: ltr; ${loDecl} }`,
+                         [[aGroup.left,  values[0]],
+                          [aGroup.right, values[2]]]);
+
+    test_computed_values("rtl inline-start two declarations",
+                         `#test { ${hiDecl} } ` +
+                         `.test { direction: rtl; ${loDecl} }`,
+                         [[aGroup.left,  values[1]],
+                          [aGroup.right, values[0]]]);
+
+    hiDecl = `${aGroup.inlineEnd}: ${values[0]}; `;
+
+    test_computed_values("ltr inline-end two declarations",
+                         `#test { ${hiDecl} } ` +
+                         `.test { direction: ltr; ${loDecl} }`,
+                         [[aGroup.left,  values[1]],
+                          [aGroup.right, values[0]]]);
+
+    test_computed_values("rtl inline-end two declarations",
+                         `#test { ${hiDecl} } ` +
+                         `.test { direction: rtl; ${loDecl} }`,
+                         [[aGroup.left,  values[0]],
+                          [aGroup.right, values[2]]]);
+
+    hiDecl = `${aGroup.left}: ${values[0]}; `;
+    loDecl = `${aGroup.inlineStart}: ${values[1]}; ` +
+             `${aGroup.inlineEnd}: ${values[2]}; ` +
+             make_declaration(gCSSProperties[aGroup.left].prerequisites) +
+             make_declaration(gCSSProperties[aGroup.right].prerequisites);
+
+    test_computed_values("ltr inline left two declarations",
+                         `#test { ${hiDecl} } ` +
+                         `.test { direction: ltr; ${loDecl} }`,
+                         [[aGroup.left,  values[0]],
+                          [aGroup.right, values[2]]]);
+
+    test_computed_values("rtl inline left two declarations",
+                         `#test { ${hiDecl} } ` +
+                         `.test { direction: rtl; ${loDecl} }`,
+                         [[aGroup.left,  values[0]],
+                          [aGroup.right, values[1]]]);
+
+    hiDecl = `${aGroup.right}: ${values[0]}; `;
+
+    test_computed_values("ltr inline right two declarations",
+                         `#test { ${hiDecl} } ` +
+                         `.test { direction: ltr; ${loDecl} }`,
+                         [[aGroup.left,  values[1]],
+                          [aGroup.right, values[0]]]);
+
+    test_computed_values("rtl inline right two declarations",
+                         `#test { ${hiDecl} } ` +
+                         `.test { direction: rtl; ${loDecl} }`,
+                         [[aGroup.left,  values[2]],
+                          [aGroup.right, values[0]]]);
+
+    // Test that the computed value of direction is used, not the value on
+    // the declaration.
+
+    loDecl = `${aGroup.inlineStart}: ${values[0]}; ` +
+             `${aGroup.inlineEnd}: ${values[1]}; ` +
+             make_declaration(gCSSProperties[aGroup.left].prerequisites) +
+             make_declaration(gCSSProperties[aGroup.right].prerequisites);
+
+    test_computed_values("ltr on different declaration",
+                         `#test { direction: ltr; } ` +
+                         `.test { direction: rtl; ${loDecl} }`,
+                         [[aGroup.left,  values[0]],
+                          [aGroup.right, values[1]]]);
+
+    test_computed_values("rtl on different declaration",
+                         `#test { direction: rtl; } ` +
+                         `.test { direction: ltr; ${loDecl} }`,
+                         [[aGroup.left,  values[1]],
+                          [aGroup.right, values[0]]]);
+  });
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+SpecialPowers.pushPrefEnv({ "set": [["layout.css.vertical-text.enabled", true]] }, start);
+</script>
