diff --git a/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html b/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html
index 5b3bc918d15f173..2e63f3e218b926c 100644
--- a/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html
+++ b/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html
@@ -5,7 +5,13 @@
 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
 <style>
 div { padding-left: 50px; }
+span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: green;
+}
 </style>
 
-<p>Test passes if there is a single black X below and no red.
-<div>X</div>
+<p>Test passes if there is a green square below and no red.
+<section><div><span></span></div></section>
diff --git a/css/css-text/text-indent/text-indent-percentage-002.html b/css/css-text/text-indent/text-indent-percentage-002.html
index 65969260c5ee846..ec8492407976e69 100644
--- a/css/css-text/text-indent/text-indent-percentage-002.html
+++ b/css/css-text/text-indent/text-indent-percentage-002.html
@@ -18,10 +18,22 @@
   box-sizing: border-box;
   width: 120px;
 }
-.test div { text-indent: 50%; color: red; }
+.test div { text-indent: 50%; }
 .ref div { text-indent: 50px; }
+span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: green;
+}
+.ref span {
+  background: red;
+  /* the next two lines are to avoid antialiasing artifacts causing a tiny about of red to be visible*/
+  box-sizing: border-box;
+  border: 1px solid white;
+}
 </style>
 
-<p>Test passes if there is a single black X below and no red.
-<section class=test><div>X</div></section>
-<section class=ref><div>X</div></section>
+<p>Test passes if there is a green square below and no red.
+<section class=test><div><span></span></div></section>
+<section class=ref><div><span></span></div></section>
diff --git a/css/css-text/text-indent/text-indent-percentage-003.html b/css/css-text/text-indent/text-indent-percentage-003.html
index f81390da873dc27..95f38da34febda2 100644
--- a/css/css-text/text-indent/text-indent-percentage-003.html
+++ b/css/css-text/text-indent/text-indent-percentage-003.html
@@ -18,10 +18,22 @@
   box-sizing: border-box;
   width: 120px;
 }
-.test div { text-indent: 50%; color: red; overflow: hidden; } /* overflow:hidden should not make any difference, but it does in some browsers */
+.test div { text-indent: 50%; overflow: hidden; } /* overflow:hidden should not make any difference, but it does in some browsers */
 .ref div { text-indent: 50px; }
+span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: green;
+}
+.ref span {
+  background: red;
+  /* the next two lines are to avoid antialiasing artifacts causing a tiny about of red to be visible*/
+  box-sizing: border-box;
+  border: 1px solid white;
+}
 </style>
 
-<p>Test passes if there is a single black X below and no red.
-<section class=test><div>X</div></section>
-<section class=ref><div>X</div></section>
+<p>Test passes if there is a green square below and no red.
+<section class=test><div><span></span></div></section>
+<section class=ref><div><span></span></div></section>