[css-text] Rework some tests to avoid anti aliasing issues

As described in https://bugzilla.mozilla.org/show_bug.cgi?id=1498698#c1
The tests introduced in web-platform-tests#11373
fail due to anti aliasing issues that let some red show through at the edges
even when things are correctly aligned and the red should be hidden.

Rework these tests to avoid the problem.

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>

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>

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>