Fix text-align

Inline elements are now aligned based on the text-align value of
their containing element instead of their own text-align value.
Block level elements are no longer affected by the text-align
property.

Fixes: https://github.com/dillo-browser/dillo/issues/410

4 files changed, 26 insertions, 11 deletions

diff --git a/dw/textblock_linebreaking.cc b/dw/textblock_linebreaking.cc
index 1a95cb70..06486c12 100644
--- a/dw/textblock_linebreaking.cc
+++ b/dw/textblock_linebreaking.cc
@@ -1804,7 +1804,23 @@ void Textblock::alignLine (int lineIndex)
          int lineBreakWidth =
             this->lineBreakWidth - (line->leftOffset + line->rightOffset);
 
-         switch (firstWord->style->textAlign) {
+         core::style::TextAlignType alignStyle = core::style::TEXT_ALIGN_LEFT;
+
+         /**
+          * Only inline elements should be affected by the text-align property.
+          * While alignStyle will still apply to other elements, the default
+          * value of TEXT_ALIGN_LEFT will have no effect on the alignment.
+          */
+         if (firstWord->style->display == core::style::DISPLAY_INLINE ||
+             firstWord->style->display == core::style::DISPLAY_INLINE_BLOCK) {
+            /**
+             * Elements that *are* affected by text-align are aligned based on
+             * the text-align value of their containing element.
+             */
+            alignStyle = getStyle()->textAlign;
+         }
+
+         switch (alignStyle) {
          case core::style::TEXT_ALIGN_LEFT:
             DBG_OBJ_MSG ("construct.line", 1,
                          "first word has 'text-align: left'");
diff --git a/test/html/Makefile.am b/test/html/Makefile.am
index e9f9ef4c..29fb39f3 100644
--- a/test/html/Makefile.am
+++ b/test/html/Makefile.am
@@ -59,5 +59,4 @@ XFAIL_TESTS = \
 	render/min-width-html.html \
 	render/multiple-floats.html \
 	render/span-padding.html \
-	render/table-td-width-percent.html \
-	render/text-align-center.html
+	render/table-td-width-percent.html
diff --git a/test/html/render/text-align-center.html b/test/html/render/text-align-center.html
index 99440dbf..0254a730 100644
--- a/test/html/render/text-align-center.html
+++ b/test/html/render/text-align-center.html
@@ -58,18 +58,18 @@
     <div class="center">simple centered text</div>
 
     <div class="outer1">
-      <div class="inner1">nested div with inner center</div>
+      <div class="inner1">nested div with internal center</div>
     </div>
 
     <div class="outer2">
-      <div class="inner2">nested div with outer center</div>
+      <div class="inner2">nested div with external center</div>
     </div>
 
     <div class="outer3">
-      <span class="inner3">nested span with inner center</span>
+      <span class="inner3">nested span with internal center</span>
     </div>
 
     <div class="outer4">
-      <span class="inner4">nested span with outer center</span>
+      <span class="inner4">nested span with external center</span>
     </div>
 </html>
diff --git a/test/html/render/text-align-center.ref.html b/test/html/render/text-align-center.ref.html
index b13e004e..863b967f 100644
--- a/test/html/render/text-align-center.ref.html
+++ b/test/html/render/text-align-center.ref.html
@@ -59,19 +59,19 @@
     </table>
 
     <table class="outer1">
-      <tr><td class="inner1">nested div with inner center</td><td></td></tr>
+      <tr><td class="inner1">nested div with internal center</td><td></td></tr>
     </table>
 
     <table class="outer1">
-      <tr><td class="inner1">nested div with outer center</td><td></td></tr>
+      <tr><td class="inner1">nested div with external center</td><td></td></tr>
     </table>
 
     <table class="outer3">
-      <tr><td class="inner3">nested span with inner center</td><td></td></tr>
+      <tr><td class="inner3">nested span with internal center</td><td></td></tr>
     </table>
 
     <table class="outer4">
-      <tr><td></td><td class="inner4">nested span with outer center</td><td></td></tr>
+      <tr><td></td><td class="inner4">nested span with external center</td><td></td></tr>
     </table>
   </body>
 </html>