diff --git a/layout/reftests/css-calc/reftest.list b/layout/reftests/css-calc/reftest.list
index 86fc61801e..5e04db1b38 100644
--- a/layout/reftests/css-calc/reftest.list
+++ b/layout/reftests/css-calc/reftest.list
@@ -1,2 +1,3 @@
 == background-image-gradient-1.html background-image-gradient-1-ref.html
 == line-height-1.html line-height-1-ref.html
+== stroke-dashoffset-1.html stroke-dashoffset-1-ref.html
diff --git a/layout/reftests/css-calc/stroke-dashoffset-1-ref.html b/layout/reftests/css-calc/stroke-dashoffset-1-ref.html
new file mode 100644
index 0000000000..037bb9263b
--- /dev/null
+++ b/layout/reftests/css-calc/stroke-dashoffset-1-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<style>
+path {
+  stroke-width: 2px;
+  stroke-dasharray: 10;
+}
+path#path1 {
+ stroke-dashoffset: 15%;
+}
+path#path2 {
+ stroke-dashoffset: 10px;
+}
+path#path3 {
+ stroke-dashoffset: 26px;
+}
+path#path4 {
+ stroke-dashoffset: 6px;
+}
+path#path5 {
+ stroke-dashoffset: 12px;
+}
+path#path6 {
+ stroke-dashoffset: 27px;
+}
+path#path7 {
+ stroke-dashoffset: 27px;
+}
+path#path8 {
+ stroke-dashoffset: 27px;
+}
+path#path9 {
+ stroke-dashoffset: 27px;
+}
+path#path10 {
+ stroke-dashoffset: 27px;
+}
+path#path11 {
+ stroke-dashoffset: 17.25px;
+}
+path#path12 {
+ stroke-dashoffset: 16.5px;
+}
+path#path13 {
+ stroke-dashoffset: 6.5;
+}
+</style>
+<svg height="300" width="300">
+  <g fill="none" stroke="black">
+    <path id="path1" d="M5 20 l250 0" />
+    <path id="path2" d="M5 40 l250 0" />
+    <path id="path3" d="M5 60 l250 0" />
+    <path id="path4" d="M5 80 l250 0" />
+    <path id="path5" d="M5 100 l250 0" />
+    <path id="path6" d="M5 120 l250 0" />
+    <path id="path7" d="M5 140 l250 0" />
+    <path id="path8" d="M5 160 l250 0" />
+    <path id="patn9" d="M5 180 l250 0" />
+    <path id="patn10" d="M5 200 l250 0" />
+    <path id="path11" d="M5 220 l250 0" />
+    <path id="path12" d="M5 240 l250 0" />
+    <path id="path13" d="M5 260 l250 0" />
+  </g>
+</svg>
diff --git a/layout/reftests/css-calc/stroke-dashoffset-1.html b/layout/reftests/css-calc/stroke-dashoffset-1.html
new file mode 100644
index 0000000000..4cee290041
--- /dev/null
+++ b/layout/reftests/css-calc/stroke-dashoffset-1.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<style>
+path {
+  stroke-width: 2px;
+  stroke-dasharray: 10;
+}
+path#path1 {
+ stroke-dashoffset: calc(15%);
+}
+path#path2 {
+ stroke-dashoffset: calc(10px);
+}
+path#path3 {
+ stroke-dashoffset: calc(20px + 2%);
+}
+path#path4 {
+ stroke-dashoffset: calc(3px * 2);
+}
+path#path5 {
+ stroke-dashoffset: calc(5% - 3px);
+}
+path#path6 {
+ stroke-dashoffset: calc(5% - 3px + 5%);
+}
+path#path7 {
+ stroke-dashoffset: calc(5% - 3px + 2.5% * 2);
+}
+path#path8 {
+ stroke-dashoffset: calc(5% - 3px + 2.5%*2);
+}
+path#path9 {
+ stroke-dashoffset: calc(5% - 3px + 2 * 2.5%);
+}
+path#path10 {
+ stroke-dashoffset: calc(5% - 3px + 2*2.5%);
+}
+path#path11 {
+ stroke-dashoffset: calc(5% - 3px/2 + 2.5% / 2);
+}
+path#path12 {
+ stroke-dashoffset: calc(3% + 2.5%);
+}
+path#path13 {
+ stroke-dashoffset: calc(3 * 2 + 3 / 6);
+}
+</style>
+<svg height="300" width="300">
+  <g fill="none" stroke="black">
+    <path id="path1" d="M5 20 l250 0" />
+    <path id="path2" d="M5 40 l250 0" />
+    <path id="path3" d="M5 60 l250 0" />
+    <path id="path4" d="M5 80 l250 0" />
+    <path id="path5" d="M5 100 l250 0" />
+    <path id="path6" d="M5 120 l250 0" />
+    <path id="path7" d="M5 140 l250 0" />
+    <path id="path8" d="M5 160 l250 0" />
+    <path id="patn9" d="M5 180 l250 0" />
+    <path id="patn10" d="M5 200 l250 0" />
+    <path id="path11" d="M5 220 l250 0" />
+    <path id="path12" d="M5 240 l250 0" />
+    <path id="path13" d="M5 260 l250 0" />
+  </g>
+</svg>
