diff --git a/layout/reftests/web-animations/child-in-animating-element-display-none-ref.html b/layout/reftests/web-animations/child-in-animating-element-display-none-ref.html
index 159ceeda4bc4..9a5a1dec9672 100644
--- a/layout/reftests/web-animations/child-in-animating-element-display-none-ref.html
+++ b/layout/reftests/web-animations/child-in-animating-element-display-none-ref.html
@@ -6,11 +6,13 @@ div {
   height: 100px;
   background-color: blue;
 }
-span {
+#child {
   background-color: green;
+  width: 50px;
+  height: 50px;
 }
 </style>
 <div>
-  <span>child</span>
+  <div id="child"></div>
 </div>
 </html>
diff --git a/layout/reftests/web-animations/child-in-animating-element-display-none.html b/layout/reftests/web-animations/child-in-animating-element-display-none.html
index eab4c8044390..57ad9f1ad207 100644
--- a/layout/reftests/web-animations/child-in-animating-element-display-none.html
+++ b/layout/reftests/web-animations/child-in-animating-element-display-none.html
@@ -9,12 +9,14 @@ Child element in animating element that display property is changed from none
   width: 100px;
   height: 100px;
 }
-span {
+#child {
   background-color: green;
+  width: 50px;
+  height: 50px;
 }
 </style>
 <div id="test">
-  <span>child</span>
+  <div id="child"></div>
 </div>
 <script>
   var anim = test.animate({ backgroundColor: [ 'blue', 'blue' ] },