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.

39 files changed, 323 insertions, 0 deletions

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index bff98d11..8511ad45 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -136,3 +136,38 @@ jobs:
           make
           make check
           ldd src/dillo
+  ubuntu-latest-html-tests:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+      with:
+        fetch-depth: 1
+    - name: Install dependencies
+      run: sudo apt install -y libfltk1.3-dev libssl-dev xvfb x11-apps x11-utils imagemagick
+
+    - name: autogen
+      run: ./autogen.sh
+    - name: Make install dir
+      run: mkdir install
+    - name: configure
+      run: ./configure --prefix=$(readlink -f install) --enable-html-tests
+    - name: make
+      run: make
+    - name: make install
+      run: make install
+    - name: Copy config to .dillo
+      run: |
+        mkdir -p ~/.dillo/
+        cp install/etc/dillo/* ~/.dillo/
+    - name: make check
+      run: |
+        export DILLOBIN=$(readlink -f install/bin/dillo)
+        make check || (cat test/html/test-suite.log; false)
+#   - name: Remove pipes
+#     run: find test/html -type p -delete || true
+#   - name: Archive production artifacts
+#     uses: actions/upload-artifact@v3
+#     with:
+#       name: upload-html-test-results
+#       path: |
+#         build/test/html
diff --git a/ChangeLog b/ChangeLog
index e81622f5..7ec09003 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -49,6 +49,7 @@ dillo-3.1 [not released yet]
  - Add support for OpenSSL 1.1, OpenSSL 3, mbedTLS 2 and mbedTLS 3
  - Replace configure flag --enable-ssl to --enable-tls
  - Enable TLS support by default for https.
+ - Add automatic rendering tests (only enabled with --enable-html-tests).
    Patches: Rodrigo Arias Mallo <rodarima@gmail.com>
 
 -----------------------------------------------------------------------------
diff --git a/configure.ac b/configure.ac
index 6dfdf9a0..95e7a23e 100644
--- a/configure.ac
+++ b/configure.ac
@@ -107,6 +107,12 @@ AC_ARG_WITH([ca-certs-dir],
   [AS_HELP_STRING([--with-ca-certs-dir=DIR], [Specify where to find a directory containing trusted CA certificates for TLS])],
   CA_CERTS_DIR=$withval)
 
+
+AC_ARG_ENABLE([html-tests],
+  [AS_HELP_STRING([--enable-html-tests], [Enable HTML tests (requires xvfb, xwd and imagemagick)])],
+  [enable_html_tests=$enableval],
+  [enable_html_tests=no])
+
 if test "x$enable_ssl" = "xno"; then
   AC_MSG_ERROR([The flag --disable-ssl is deprecated, use --disable-tls])
 fi
@@ -550,6 +556,37 @@ pthread_ok=yes, pthread_ok=no)
 esac
 fi
 
+dnl ----------
+dnl HTML tests
+dnl ----------
+dnl
+html_tests_ok=no
+if test "x$enable_html_tests" = "xyes" ; then
+  html_tests_ok=yes
+  AC_CHECK_PROG(xvfb_ok, Xvfb, yes, no)
+  AC_CHECK_PROG(xwd_ok, xwd, yes, no)
+  AC_CHECK_PROG(xwininfo_ok, xwininfo, yes, no)
+  AC_CHECK_PROG(convert_ok, convert, yes, no)
+
+  if test "x$xvfb_ok" != "xyes"; then
+    html_tests_ok=no
+  fi
+  if test "x$xwd_ok" != "xyes"; then
+    html_tests_ok=no
+  fi
+  if test "x$xwininfo_ok" != "xyes"; then
+    html_tests_ok=no
+  fi
+  if test "x$convert_ok" != "xyes"; then
+    html_tests_ok=no
+  fi
+  if test "x$html_tests_ok" != "xyes"; then
+    AC_MSG_ERROR([Cannot find all tools to enable HTML tests])
+  fi
+fi
+
+AM_CONDITIONAL([ENABLE_HTML_TESTS],  [test "x$html_tests_ok" = "xyes"])
+
 dnl --------------------
 dnl Command line options
 dnl --------------------
@@ -654,6 +691,7 @@ AC_CONFIG_FILES([
     test/Makefile
     test/unit/Makefile
     test/dw/Makefile
+    test/html/Makefile
 ])
 
 AC_OUTPUT
@@ -675,3 +713,5 @@ _AS_ECHO([  JPEG enabled   : ${jpeg_ok}])
 _AS_ECHO([  PNG enabled    : ${png_ok}])
 _AS_ECHO([  GIF enabled    : ${enable_gif}])
 _AS_ECHO([])
+_AS_ECHO([  HTML tests     : ${html_tests_ok}])
+_AS_ECHO([])
diff --git a/test/Makefile.am b/test/Makefile.am
index 43e92f71..8906d8fc 100644
--- a/test/Makefile.am
+++ b/test/Makefile.am
@@ -1 +1,5 @@
 SUBDIRS = unit dw
+
+if ENABLE_HTML_TESTS
+SUBDIRS += html
+endif
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>