Add automatic rendering tests

These tests render a HTML page in Dillo and save a screenshot which is
compared with another one rendered by a reference HTML file which
doesn't make use of the feature under test.

Running these tests require some additional dependencies to run a Xorg
server and capture screenshots of the browser, so they are only enabled
when configured with the --enable-html-tests option.

Additionally, running Dillo and opening local files requires a working
file dpi plugin. So, when running the HTML tests it is required that a
working dpid server can be launched by Dillo. To do so, Dillo can be
first installed to a prefix directory, the dpidrc file copied to
~/.dillo/ and then the DILLOBIN variable set to the path of the dillo
binary under test.

35 files changed, 243 insertions, 0 deletions

diff --git a/test/html/Makefile.am b/test/html/Makefile.am
new file mode 100644
index 00000000..467d812e
--- /dev/null
+++ b/test/html/Makefile.am
@@ -0,0 +1,18 @@
+AM_TESTS_ENVIRONMENT = env \
+	TOP_BUILDDIR='$(top_builddir)' \
+	TOP_SRCDIR='$(top_srcdir)' \
+	BUILDDIR='$(builddir)'
+
+LOG_COMPILER = $(srcdir)/driver.sh
+
+TESTS = \
+	render/float-img-justify.html \
+	render/img-aspect-ratio.html \
+	render/table-thead-tfoot.html \
+	render/white-space.html \
+	render/b-div.html
+
+# To be fixed
+XFAIL_TESTS = \
+	render/float-img-justify.html \
+	render/img-aspect-ratio.html
diff --git a/test/html/driver.sh b/test/html/driver.sh
new file mode 100755
index 00000000..3ab37e41
--- /dev/null
+++ b/test/html/driver.sh
@@ -0,0 +1,95 @@
+#!/bin/bash
+#
+# File: driver.sh
+#
+# Copyright (C) 2023 Rodrigo Arias Mallo <rodarima@gmail.com>
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+
+set -e
+set -x
+
+DILLOBIN=${DILLOBIN:-$TOP_BUILDDIR/src/dillo}
+
+if [ ! -e $DILLOBIN ]; then
+  echo missing dillo binary, set DILLOBIN with the path to dillo
+  exit 1
+fi
+
+function render_page() {
+  htmlfile="$1"
+  outpic="$2"
+
+  "$DILLOBIN" -f "$htmlfile" &
+  dillopid=$!
+
+  # TODO: We need a better system to determine when the page loaded
+  sleep 1
+
+  # Capture only Dillo window
+  winid=$(xwininfo -all -root | awk '/Dillo:/ {print $1}')
+  if [ -z "$winid" ]; then
+    echo "cannot find Dillo window" >&2
+    exit 1
+  fi
+  xwd -id "$winid" -silent | convert xwd:- png:${outpic}
+
+  kill "$dillopid"
+}
+
+function test_file() {
+  html_file="$1"
+
+  if [ ! -e "$html_file" ]; then
+    echo "missing test file: $html_file"
+    exit 1
+  fi
+
+  ref_file="${html_file%.html}.ref.html"
+  if [ ! -e "$ref_file" ]; then
+    echo "missing reference file: $ref_file"
+    exit 1
+  fi
+
+  test_name=$(basename "$html_file")
+
+  wdir=$(mktemp -d "${test_name}_XXX")
+
+  # Use a FIFO to read the display number
+  mkfifo $wdir/display.fifo
+  exec 6<> $wdir/display.fifo
+  Xvfb -screen 5 1024x768x24 -displayfd 6 &
+  xorgpid=$!
+
+  # Always kill Xvfb on exit
+  trap "kill $xorgpid" EXIT
+
+  read dispnum < $wdir/display.fifo
+  export DISPLAY=":$dispnum"
+
+  render_page "$html_file" "$wdir/html.png"
+  render_page "$ref_file" "$wdir/ref.png"
+
+  # AE = Absolute Error count of the number of different pixels
+  diffcount=$(compare -metric AE $wdir/html.png $wdir/ref.png $wdir/diff.png 2>&1)
+
+  # The test passes only if both images are identical
+  if [ "$diffcount" = "0" ]; then
+    echo "OK"
+    ret=0
+  else
+    echo "FAIL"
+    ret=1
+  fi
+
+  exec 6>&-
+  rm $wdir/display.fifo
+
+  return $ret
+}
+
+test_file "$1"
+exit $?
diff --git a/test/html/Anna_Karenina_1.html b/test/html/manual/Anna_Karenina_1.html
index 6deb470d..6deb470d 100644
--- a/test/html/Anna_Karenina_1.html
+++ b/test/html/manual/Anna_Karenina_1.html
diff --git a/test/html/KHM1-shy.html b/test/html/manual/KHM1-shy.html
index b3924409..b3924409 100644
--- a/test/html/KHM1-shy.html
+++ b/test/html/manual/KHM1-shy.html
diff --git a/test/html/KHM1.html b/test/html/manual/KHM1.html
index c1665f00..c1665f00 100644
--- a/test/html/KHM1.html
+++ b/test/html/manual/KHM1.html
diff --git a/test/html/KHM1b.html b/test/html/manual/KHM1b.html
index adefc1ef..adefc1ef 100644
--- a/test/html/KHM1b.html
+++ b/test/html/manual/KHM1b.html
diff --git a/test/html/KHM1c.html b/test/html/manual/KHM1c.html
index 3f3271fc..3f3271fc 100644
--- a/test/html/KHM1c.html
+++ b/test/html/manual/KHM1c.html
diff --git a/test/html/anchors.html b/test/html/manual/anchors.html
index c04fdddc..c04fdddc 100644
--- a/test/html/anchors.html
+++ b/test/html/manual/anchors.html
diff --git a/test/html/doxygen.html b/test/html/manual/doxygen.html
index 24d7326e..24d7326e 100644
--- a/test/html/doxygen.html
+++ b/test/html/manual/doxygen.html
diff --git a/test/html/floats-and-absolute.html b/test/html/manual/floats-and-absolute.html
index 658ab16b..658ab16b 100644
--- a/test/html/floats-and-absolute.html
+++ b/test/html/manual/floats-and-absolute.html
diff --git a/test/html/floats-and-margins.html b/test/html/manual/floats-and-margins.html
index ac64b9e1..ac64b9e1 100644
--- a/test/html/floats-and-margins.html
+++ b/test/html/manual/floats-and-margins.html
diff --git a/test/html/floats-table.html b/test/html/manual/floats-table.html
index 77d77563..77d77563 100644
--- a/test/html/floats-table.html
+++ b/test/html/manual/floats-table.html
diff --git a/test/html/floats-worm.html b/test/html/manual/floats-worm.html
index 9e050933..9e050933 100644
--- a/test/html/floats-worm.html
+++ b/test/html/manual/floats-worm.html
diff --git a/test/html/floats1.html b/test/html/manual/floats1.html
index eae30c4a..eae30c4a 100644
--- a/test/html/floats1.html
+++ b/test/html/manual/floats1.html
diff --git a/test/html/floats2.html b/test/html/manual/floats2.html
index b7978706..b7978706 100644
--- a/test/html/floats2.html
+++ b/test/html/manual/floats2.html
diff --git a/test/html/floats3.html b/test/html/manual/floats3.html
index 4d57e453..4d57e453 100644
--- a/test/html/floats3.html
+++ b/test/html/manual/floats3.html
diff --git a/test/html/floats4.html b/test/html/manual/floats4.html
index 965ed68d..965ed68d 100644
--- a/test/html/floats4.html
+++ b/test/html/manual/floats4.html
diff --git a/test/html/floats5.html b/test/html/manual/floats5.html
index c8c6564a..c8c6564a 100644
--- a/test/html/floats5.html
+++ b/test/html/manual/floats5.html
diff --git a/test/html/hyphenate-nbsp.html b/test/html/manual/hyphenate-nbsp.html
index 1bfd9a25..1bfd9a25 100644
--- a/test/html/hyphenate-nbsp.html
+++ b/test/html/manual/hyphenate-nbsp.html
diff --git a/test/html/hyphens-etc.html b/test/html/manual/hyphens-etc.html
index cbc55b79..cbc55b79 100644
--- a/test/html/hyphens-etc.html
+++ b/test/html/manual/hyphens-etc.html
diff --git a/test/html/lang.html b/test/html/manual/lang.html
index c5a6f562..c5a6f562 100644
--- a/test/html/lang.html
+++ b/test/html/manual/lang.html
diff --git a/test/html/table-1.html b/test/html/manual/table-1.html
index 58635d2c..58635d2c 100644
--- a/test/html/table-1.html
+++ b/test/html/manual/table-1.html
diff --git a/test/html/table-h1.html b/test/html/manual/table-h1.html
index fb82c3ec..fb82c3ec 100644
--- a/test/html/table-h1.html
+++ b/test/html/manual/table-h1.html
diff --git a/test/html/table-narrow.html b/test/html/manual/table-narrow.html
index ad28417d..ad28417d 100644
--- a/test/html/table-narrow.html
+++ b/test/html/manual/table-narrow.html
diff --git a/test/html/render/b-div.html b/test/html/render/b-div.html
new file mode 100644
index 00000000..1fb3d7fb
--- /dev/null
+++ b/test/html/render/b-div.html
@@ -0,0 +1 @@
+<b>Hello World</b><div>Hello world</div>
diff --git a/test/html/render/b-div.ref.html b/test/html/render/b-div.ref.html
new file mode 100644
index 00000000..c6f49668
--- /dev/null
+++ b/test/html/render/b-div.ref.html
@@ -0,0 +1 @@
+<b>Hello World</b><br/>Hello world
diff --git a/test/html/render/float-img-justify.html b/test/html/render/float-img-justify.html
new file mode 100644
index 00000000..2995b0fa
--- /dev/null
+++ b/test/html/render/float-img-justify.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test floating image in paragraph with br</title>
+    <style>
+      body {width: 400px}
+      img {width: 40%; float:right}
+      p {text-align: justify;}
+    </style>
+  </head>
+  <body>
+    <i>The text below should be readable:</i>
+    <p>
+      <img src="pic.png" />
+      This is a rather long text to increase the width.
+      <br>
+    </p>
+  </body>
+</html>
diff --git a/test/html/render/float-img-justify.ref.html b/test/html/render/float-img-justify.ref.html
new file mode 100644
index 00000000..26595b4c
--- /dev/null
+++ b/test/html/render/float-img-justify.ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test floating image in paragraph with br</title>
+    <style>
+      body {width: 400px}
+      img {width: 40%; float:right}
+      p {text-align: justify;}
+    </style>
+  </head>
+  <body>
+    <i>The text below should be readable:</i>
+    <p>
+      <img src="pic.png" />
+      This is a rather long text to increase the width.
+    </p>
+  </body>
+</html>
diff --git a/test/html/render/img-aspect-ratio.html b/test/html/render/img-aspect-ratio.html
new file mode 100644
index 00000000..e8b2ab0f
--- /dev/null
+++ b/test/html/render/img-aspect-ratio.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test image aspect ratio</title>
+    <style>
+      body {margin: 20px}
+    </style>
+  </head>
+  <body>
+    <img src="pic.png" style="height:100px" />
+    <img src="pic.png" style="max-height:100px" />
+    <img src="pic.png" style="width:100px" />
+    <img src="pic.png" style="max-width:100px" />
+    <a href="#"><img src="pic.png" style="max-width:100px" /></a>
+  </body>
+</html>
diff --git a/test/html/render/img-aspect-ratio.ref.html b/test/html/render/img-aspect-ratio.ref.html
new file mode 100644
index 00000000..96c1ea1f
--- /dev/null
+++ b/test/html/render/img-aspect-ratio.ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test image aspect ratio</title>
+    <style>
+      body {margin: 20px}
+    </style>
+  </head>
+  <body>
+    <img src="pic.png" style="height:100px; width:100px" />
+    <img src="pic.png" style="height:100px; width:100px" />
+    <img src="pic.png" style="height:100px; width:100px" />
+    <img src="pic.png" style="height:100px; width:100px" />
+    <a href="#"><img src="pic.png" style="height:100px; width:100px" /></a>
+  </body>
+</html>
diff --git a/test/html/render/pic.png b/test/html/render/pic.png
new file mode 100644
index 00000000..82f6cad8
--- /dev/null
+++ b/test/html/render/pic.png
diff --git a/test/html/table-thead-tfoot.html b/test/html/render/table-thead-tfoot.html
index 66be2710..66be2710 100644
--- a/test/html/table-thead-tfoot.html
+++ b/test/html/render/table-thead-tfoot.html
diff --git a/test/html/render/table-thead-tfoot.ref.html b/test/html/render/table-thead-tfoot.ref.html
new file mode 100644
index 00000000..031ade7f
--- /dev/null
+++ b/test/html/render/table-thead-tfoot.ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test thead, tbody and tfoot</title>
+    <style>
+      .head {color: green; font-weight: bold; align: center; }
+      .body {color: blue;}
+      .foot {color: red;}
+
+      table, th, td {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <table>
+      <tr class="head">
+        <th>Month</th>
+        <th>Savings</th>
+      </tr>
+      <tr class="body">
+        <td>January</td>
+        <td>$100</td>
+      </tr>
+      <tr class="body">
+        <td>February</td>
+        <td>$80</td>
+      </tr>
+      <tr class="foot">
+        <td>Sum</td>
+        <td>$180</td>
+      </tr>
+    </table> 
+  </body>
+</html>
diff --git a/test/html/white-space.html b/test/html/render/white-space.html
index abd61c41..abd61c41 100644
--- a/test/html/white-space.html
+++ b/test/html/render/white-space.html
diff --git a/test/html/render/white-space.ref.html b/test/html/render/white-space.ref.html
new file mode 100644
index 00000000..c0584283
--- /dev/null
+++ b/test/html/render/white-space.ref.html
@@ -0,0 +1,24 @@
+<h1>nowrap</h1>
+<div style="white-space: pre">
+hallo dillo hallo dillo hallo dillo hallo dillo hallo dillo hallo dillo hallo dillo hallo dillo
+</div>
+
+<h1>pre</h1>
+
+<div style="white-space: pre">
+hallo   dillo hallo   dillo hallo   dillo hallo   dillo
+hallo   dillo hallo   dillo hallo   dillo hallo   dillo
+</div>
+
+<h1>pre-wrap</h1>
+<div style="white-space: pre">
+hallo   dillo hallo   dillo hallo   dillo hallo   dillo
+hallo   dillo hallo   dillo hallo   dillo hallo   dillo
+</div>
+
+<h1>pre-line</h1>
+<div style="white-space: pre">
+
+hallo dillo hallo dillo hallo dillo hallo dillo
+hallo dillo hallo dillo hallo dillo hallo dillo
+</div>