[css-text-3] Rework text-indent tests

These tests used to have anti aliasing artefacts. A previous commit
(cf14912) solved that, at the expense of making the tests
impractical to review manually, and no longer self descriptive.

This change fixes that, while keeping the tests robust to anti aliasing
artefacts.

css/css-text/text-indent/reference/text-indent-percentage-002-ref.html

@@ -7,8 +7,14 @@
 body { background: white; }
 div {
   padding-left: 50px;
-  font-family: Ahem;
+}
+span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: green;
 }
 </style>
 
-<div>X</div>
+<p>Test passes if there is a green square below and no red.
+<div><span></span></div>

css/css-text/text-indent/text-indent-percentage-002.html

@@ -9,17 +9,32 @@
 <meta name="assert" content="Percentages in text-indent refer to width of the element's content box">
 <style>
 body { background: white; }
+section { position: absolute; }
 section, div {
   border-right: 10px solid white;
   margin-right: 10px;
   padding-right: 10px;
-  font-family: Ahem;
 }
 div {
   box-sizing: border-box;
   width: 120px;
 }
+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;
+}
 .test div { text-indent: 50%; }
+.ref div { text-indent: 50px; }
 </style>
 
-<section class=test><div>X</div></section>
+<p>Test passes if there is a green square below and no red.
+<section class=ref><div><span></span></div></section>
+<section class=test><div><span></span></div></section>

css/css-text/text-indent/text-indent-percentage-003.html

@@ -9,17 +9,32 @@
 <meta name="assert" content="Percentages in text-indent refer to width of the element's content box">
 <style>
 body { background: white; }
+section { position: absolute; }
 section, div {
   border-right: 10px solid white;
   margin-right: 10px;
   padding-right: 10px;
-  font-family: Ahem;
 }
 div {
   box-sizing: border-box;
   width: 120px;
 }
+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;
+}
 .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; }
 </style>
 
-<section class=test><div>X</div></section>
+<p>Test passes if there is a green square below and no red.
+<section class=ref><div><span></span></div></section>
+<section class=test><div><span></span></div></section>

css/css-text/text-indent/text-indent-percentage-004.html

@@ -9,6 +9,7 @@
 <meta name="assert" content="Percentages in text-indent refer to width of the element's content box, when used in a calc expression">
 <style>
 body { background: white; }
+section { position: absolute; }
 section, div {
   border-right: 10px solid white;
   margin-right: 10px;
@@ -19,7 +20,22 @@
   box-sizing: border-box;
   width: 120px;
 }
+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;
+}
 .test div { text-indent: calc(25px + 25%); }
+.ref div { text-indent: 50px; }
 </style>
 
-<section class=test><div>X</div></section>
+<p>Test passes if there is a green square below and no red.
+<section class=ref><div><span></span></div></section>
+<section class=test><div><span></span></div></section>