From fcb2cca8441ba50b7396dbfc58925789f24688d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Lucas=20Golini?= <spartanj@gmail.com>
Date: Sat, 2 May 2026 19:41:10 -0300
Subject: [PATCH] Fixes for position: sticky, absolute and fixed.

---
 bin/unit_tests/assets/html/ensoft/ensoft.css  | 621 ++++++++++++++++++
 bin/unit_tests/assets/html/ensoft/ensoft.html | 286 ++++++++
 bin/unit_tests/assets/html/ensoft/fx.png      | Bin 0 -> 6349 bytes
 bin/unit_tests/assets/html/ensoft/logo.png    | Bin 0 -> 5696 bytes
 bin/unit_tests/assets/html/ensoft/rss.png     | Bin 0 -> 1152 bytes
 include/eepp/ui/uihtmlwidget.hpp              |  22 +
 include/eepp/ui/uirichtext.hpp                |   1 +
 src/eepp/ui/uihtmlwidget.cpp                  | 245 +++++--
 src/eepp/ui/uirichtext.cpp                    |  30 +
 .../unit_tests/uihtml_position_tests.cpp      |  87 +++
 src/tests/unit_tests/uihtml_tests.cpp         |  68 ++
 11 files changed, 1302 insertions(+), 58 deletions(-)
 create mode 100644 bin/unit_tests/assets/html/ensoft/ensoft.css
 create mode 100644 bin/unit_tests/assets/html/ensoft/ensoft.html
 create mode 100644 bin/unit_tests/assets/html/ensoft/fx.png
 create mode 100644 bin/unit_tests/assets/html/ensoft/logo.png
 create mode 100644 bin/unit_tests/assets/html/ensoft/rss.png

diff --git a/bin/unit_tests/assets/html/ensoft/ensoft.css b/bin/unit_tests/assets/html/ensoft/ensoft.css
new file mode 100644
index 000000000..1db20d51f
--- /dev/null
+++ b/bin/unit_tests/assets/html/ensoft/ensoft.css
@@ -0,0 +1,621 @@
+@import url(https://fonts.googleapis.com/css?family=Lato);
+@import "../anim.css";
+a:active,
+a:focus {
+  outline: none;
+}
+.no_selection {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.blue_links a {
+  text-decoration: none;
+  color: #4183C4;
+}
+.blue_links a:hover {
+  text-decoration: underline;
+}
+body {
+  font-family: 'Lato', Helvetica, sans-serif;
+  font-size: 16px;
+  background-color: #ffffff;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+::-moz-selection {
+  background-color: #d00000;
+  color: #fff;
+}
+::selection {
+  background-color: #d00000;
+  color: #fff;
+}
+input,
+button,
+textarea {
+  font-family: inherit;
+}
+#bar.smallscreen {
+  position: absolute !important;
+  width: 200px !important;
+}
+#bar {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  width: 250px;
+  border-right: 1px solid #e0e0e0;
+}
+#bar #logo {
+  margin: 40px 0px 0px 50px;
+  height: 144px;
+  width: 100px;
+  background: url('logo.png') no-repeat center;
+}
+#bar #logo #logo-fx {
+  position: absolute;
+  top: -27px;
+  left: -14px;
+  height: 225px;
+  width: 225px;
+  background: url('fx.png') no-repeat center;
+  opacity: 0;
+  -ms-filter: "alpha(opacity=0)";
+  -khtml-opacity: 0;
+  -webkit-animation-name: contract;
+  -moz-animation-name: contract;
+  -webkit-animation-duration: 6s;
+  -moz-animation-duration: 6s;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+  -moz-animation-timing-function: linear;
+}
+#bar #links li {
+  margin: 40px 30px 0px 0px;
+  list-style-type: none;
+}
+#bar #links li a {
+  padding: 10px 20px 10px 20px;
+  text-decoration: none;
+  color: #808080;
+}
+#bar #links li a:hover {
+  color: red;
+}
+#bar #rss {
+  margin-top: 100px;
+  margin-left: 20px;
+}
+#bar #rss a {
+  background: url("rss.png") no-repeat 8px center;
+  padding: 5px 10px 5px 24px;
+  text-decoration: none;
+  font-size: 12px;
+  border-radius: 4px;
+  -khtml-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  behavior: url('https://ensoft.dev/assets/js/PIE.php');
+  background-color: #d0d0d0;
+  color: white;
+}
+#bar #rss a:hover {
+  background-color: red;
+}
+#content.smallscreen {
+  left: 200px !important;
+}
+#content {
+  position: absolute;
+  left: 250px;
+  right: 0;
+  top: 0;
+  padding: 0px;
+}
+#content >h1 {
+  margin: 50px 0 0 50px;
+  font-size: 35px;
+  font-family: 'Lato';
+  font-weight: 900;
+  padding: 0;
+}
+a img {
+  border: 0;
+}
+#ajax-target {
+  position: relative;
+}
+.loading_corner {
+  position: fixed;
+  bottom: 90px;
+  right: 0px;
+  width: 32px;
+  height: 32px;
+  background: url("loading.gif?v=3") no-repeat !important;
+}
+.kajax-loading .kajax-loading-image {
+  width: 32px;
+  height: 32px;
+  background: url("loading.gif?v=3") no-repeat center white;
+}
+#content > .kajax-loading {
+  position: fixed;
+  top: 10px;
+  left: 260px;
+}
+.stylish-form > .kajax-loading {
+  position: absolute;
+  bottom: 45px;
+  right: 190px;
+}
+.blend_input {
+  display: block;
+  overflow: hidden;
+  outline: none;
+  resize: none;
+  background: transparent;
+  border: none;
+}
+.admin-editor {
+  width: 800px;
+  margin-left: 100px;
+  position: relative;
+}
+.admin-editor .title {
+  color: #808080;
+  width: 800px;
+  font-size: 40px;
+  height: 40px;
+  display: block;
+  overflow: hidden;
+  outline: none;
+  resize: none;
+  background: transparent;
+  border: none;
+}
+.admin-editor .body {
+  color: #808080;
+  padding-left: 60px;
+  margin-left: -50px;
+  background: url('markdown.png') no-repeat top left !important;
+  margin-top: 40px;
+  display: block;
+  overflow: hidden;
+  outline: none;
+  resize: none;
+  background: transparent;
+  border: none;
+  width: 800px;
+  height: 600px;
+  margin-bottom: 200px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-size: inherit;
+}
+.square-link {
+  display: block;
+  float: left;
+  padding: 15px;
+  margin: 14px 5px 14px 0;
+  font-weight: bold;
+  text-decoration: none;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+}
+.square-button {
+  display: block;
+  float: left;
+  padding: 15px;
+  margin: 14px 5px 14px 0;
+  font-weight: bold;
+  text-decoration: none;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  background-color: black;
+  border-radius: 5px;
+  -khtml-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  behavior: url('https://ensoft.dev/assets/js/PIE.php');
+  font-size: 16px;
+  color: white !important;
+}
+.square-button:hover {
+  background-color: red;
+}
+#admin-bar {
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  height: 76px;
+  width: 100%;
+  background-color: #202020;
+  z-index: 2;
+}
+#admin-bar .container {
+  width: 800px;
+  margin: 0 auto;
+}
+#admin-bar .container .left {
+  float: left;
+}
+#admin-bar .container .right {
+  float: right;
+}
+#admin-bar .container span {
+  display: block;
+  float: left;
+  padding: 15px;
+  margin: 14px 5px 14px 0;
+  font-weight: bold;
+  text-decoration: none;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+}
+#admin-bar .container a,
+#admin-bar .container input[type=submit] {
+  display: block;
+  float: left;
+  padding: 15px;
+  margin: 14px 5px 14px 0;
+  font-weight: bold;
+  text-decoration: none;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  background-color: black;
+  border-radius: 5px;
+  -khtml-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  behavior: url('https://ensoft.dev/assets/js/PIE.php');
+  font-size: 16px;
+  color: white !important;
+}
+#admin-bar .container a:hover,
+#admin-bar .container input[type=submit]:hover {
+  background-color: red;
+}
+#admin-posts {
+  width: 900px;
+  margin: 0 auto;
+}
+#admin-posts h1 {
+  float: left;
+}
+#admin-posts .button {
+  float: right !important;
+  padding: 10px;
+  font-size: 12px;
+  margin-top: 26px;
+}
+#admin-posts ul {
+  padding: 0;
+  margin: 0;
+  clear: both;
+}
+#admin-posts li {
+  position: relative;
+  list-style-type: none;
+  padding: 18px 0 20px 0;
+  border-bottom: 1px solid #e0e0e0;
+}
+#admin-posts li a {
+  color: inherit;
+  font-weight: bold;
+  text-decoration: none;
+}
+#admin-posts li a:hover {
+  color: red;
+}
+#admin-posts li span {
+  float: right;
+  display: none;
+}
+#admin-posts li span a {
+  color: #a0a0a0;
+  margin-left: 10px;
+  font-size: 12px;
+}
+#admin-posts li em {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  font-size: 8px;
+  color: #a0a0a0;
+}
+#admin-posts .post_block {
+  float: left;
+  width: 400px;
+  padding: 20px;
+}
+#admin-posts #drafts {
+  float: left;
+  width: 400px;
+  padding: 20px;
+  border: 4px solid black;
+  border-top: none;
+}
+#admin-posts #published {
+  float: left;
+  width: 400px;
+  padding: 20px;
+  color: #a0a0a0;
+}
+#admin-posts #logout {
+  font-weight: bold;
+  float: right;
+  clear: both;
+  font-size: 14px;
+  margin: 5px 36px -50px 0;
+}
+#admin-posts #logout a {
+  text-decoration: none;
+  color: #4183C4;
+}
+#admin-posts #logout a:hover {
+  text-decoration: underline;
+}
+#admin-posts #logout a {
+  color: #505050 !important;
+}
+.big_title {
+  margin: 50px 0 0 50px;
+  font-size: 35px;
+  font-family: 'Lato';
+  font-weight: 900;
+  padding: 0;
+}
+.blog_post {
+  border-bottom: 1px solid #e0e0e0;
+}
+.blog_post .date {
+  border-bottom: 1px solid #e0e0e0;
+  padding: 25px 0 25px 50px;
+  font-size: 12px;
+  font-weight: bold;
+}
+.blog_post >h1 {
+  margin: 50px 0 0 50px;
+  font-size: 35px;
+  font-family: 'Lato';
+  font-weight: 900;
+  padding: 0;
+}
+.blog_post >h1 >a {
+  color: black;
+  text-decoration: none;
+}
+.blog_post >h1 >a:hover {
+  color: red;
+}
+.blog_post .markdown {
+  width: 500px;
+  margin: 30px 0 65px 50px;
+  color: #808080;
+}
+.blog_post .markdown h1,
+.blog_post .markdown h2,
+.blog_post .markdown h3,
+.blog_post .markdown h4,
+.blog_post .markdown h5 {
+  color: black;
+}
+.blog_post .markdown li {
+  line-height: 2.0em;
+}
+.blog_post .markdown a {
+  text-decoration: none;
+  color: #4183C4;
+}
+.blog_post .markdown a:hover {
+  text-decoration: underline;
+}
+.blog_post .markdown img {
+  border: 5px solid #f0f0f0;
+  padding: 10px;
+  border-radius: 10px;
+  -khtml-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  behavior: url('https://ensoft.dev/assets/js/PIE.php');
+}
+.blog_post .markdown blockquote {
+  border-left: 5px solid #505050;
+  padding-left: 16px;
+  margin: 0;
+}
+.blog_post .markdown .footnotes {
+  margin-top: 50px;
+  font-size: 14px;
+}
+.blog_post .markdown .footnotes hr {
+  color: #e0e0e0;
+  background-color: #e0e0e0;
+  border: none;
+  height: 1px;
+}
+.padded {
+  padding: 50px 0 0 50px;
+}
+.styled-box {
+  border: 5px solid black;
+  width: 440px;
+  margin: 50px 0 0 50px;
+  padding: 0px;
+}
+.stylish-form {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.stylish-form .mail_icon {
+  background: url('mail.png') no-repeat center right;
+}
+.stylish-form .robot_icon {
+  background: url('robot.png') no-repeat center right;
+}
+.stylish-form p {
+  color: #808080;
+  font-size: 18px;
+}
+.stylish-form li {
+  list-style-type: none;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 20px;
+  margin: 0;
+}
+.stylish-form input[type=password],
+.stylish-form input[type=text],
+.stylish-form textarea {
+  font-size: 22px;
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  outline: none;
+  resize: none;
+  background: transparent;
+  border: none;
+  padding-left: 10px;
+}
+.stylish-form input[type=password]:focus,
+.stylish-form input[type=text]:focus,
+.stylish-form textarea:focus {
+  border-left: 4px solid red;
+}
+.stylish-form input[type=submit] {
+  display: block;
+  float: left;
+  padding: 15px;
+  margin: 14px 5px 14px 0;
+  font-weight: bold;
+  text-decoration: none;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  background-color: black;
+  border-radius: 5px;
+  -khtml-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  behavior: url('https://ensoft.dev/assets/js/PIE.php');
+  font-size: 16px;
+  color: white !important;
+  float: none;
+}
+.stylish-form input[type=submit]:hover {
+  background-color: red;
+}
+#check-mail-target {
+  display: none;
+  text-align: right;
+  font-style: italic;
+  margin: 0;
+}
+#check-mail-target a {
+  text-decoration: none;
+  color: #4183C4;
+}
+#check-mail-target a:hover {
+  text-decoration: underline;
+}
+.placeholder {
+  color: #808080;
+}
+.form-error {
+  padding: 5px !important;
+  display: none;
+  background-color: #ffffb4;
+}
+.form-error p {
+  text-align: center;
+  display: none;
+}
+.form-error p:first-child {
+  display: block !important;
+}
+#save-success-msg {
+  position: fixed;
+  bottom: 0px;
+  right: 10px;
+  height: 96px;
+  width: 100px;
+  text-align: center;
+  display: none;
+  padding: 5px !important;
+  color: #FFFFFF;
+  font-weight: bold;
+  background-color: red;
+  border-radius: 5px;
+  -khtml-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  behavior: url('https://ensoft.dev/assets/js/PIE.php');
+}
+#minimap {
+  display: none;
+  opacity: 0.5;
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  width: 120px;
+  list-style-type: none;
+  padding: 0;
+  padding: 20px 0 20px 0;
+  margin: 0;
+  border-right: 1px solid #e0e0e0;
+}
+#minimap li .mark {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  width: 10px;
+  background-color: #c00000;
+  display: none;
+}
+#minimap li .selected {
+  background-color: #606060 !important;
+}
+#minimap li a {
+  position: relative;
+  margin-top: 5px;
+  background-color: #b0b0b0;
+  border-right: 0;
+  display: block;
+  padding: 5px;
+  padding-right: 10px;
+  text-align: center;
+  color: #a0a0a0;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  -moz-border-radius-topleft: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+#minimap li a:hover {
+  background-color: #808080;
+}
diff --git a/bin/unit_tests/assets/html/ensoft/ensoft.html b/bin/unit_tests/assets/html/ensoft/ensoft.html
new file mode 100644
index 000000000..8756af872
--- /dev/null
+++ b/bin/unit_tests/assets/html/ensoft/ensoft.html
@@ -0,0 +1,286 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"><head>
+	<title>ensoft</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<link rel="shortcut icon" href="https://ensoft.dev/assets/images/favicon.ico">
+	<link rel="icon" type="image/x-icon" href="https://ensoft.dev/assets/images/favicon.ico">
+	<link rel="icon" type="image/png" href="https://ensoft.dev/assets/images/favicon-32x32.png" sizes="32x32">
+	<link rel="icon" type="image/png" href="https://ensoft.dev/assets/images/favicon-48x48.png" sizes="48x48">
+	<link rel="icon" type="image/png" href="https://ensoft.dev/assets/images/favicon-64x64.png" sizes="64x64">
+	<link rel="alternate" type="application/rss+xml" title="ensoft RSS" href="https://ensoft.dev/rss">
+	<link rel="stylesheet" type="text/css" href="ensoft.css">
+</head>
+<body>
+	<div id="content">
+
+<div class="blog_post" id="pampa-energa-en-tecnpolis">
+
+		<h1>
+			<a name="pampa-energa-en-tecnpolis" href="https://ensoft.dev/blog/pampa-energa-en-tecnpolis">
+			Pampa Energía en Tecnópolis			</a>
+		</h1>
+	<div class="markdown"><p>Tuvimos el placer de desarrollar en conjunto con el equipo de <a target="_blank" href="http://www.redkatana.com/es/">Red Katana</a> uno de los juegos principales para el stand de <a target="_blank" href="http://www.pampaenergia.com/">Pampa Energía</a> en su stand de Tecnópolis.</p>
+
+<p>El slogan de este año es "Energía para Transformar" y justamente este
+ es el punto central de este juego, concientizar a los jugadores acerca
+de la importancia de ahorrar energía.</p>
+
+<p><img src="" alt=""></p>
+
+<p>El juego consiste de varias habitaciones de una casa, donde los
+jugadores deben encontrar de que manera los personajes están 
+desperdiciando la energía y ayudarlos a ahorrarla.</p>
+
+<p><img src="" alt=""></p>
+
+<p>Nuestra labor consistió en el desarrollo completo del juego, para ser utilizado en las pantallas táctiles de dicho stand.</p>
+
+<p>Stand de pampa energía en tecnópolis:</p>
+
+<p><img src="" alt=""></p>
+
+<p>Visitantes jugando:</p>
+
+<p><img src="" alt=""></p>
+</div>
+</div>
+
+
+<div class="blog_post" id="tia-maria-get-behind-the-mask">
+
+		<h1>
+			<a name="tia-maria-get-behind-the-mask" href="https://ensoft.dev/blog/tia-maria-get-behind-the-mask">
+			Tia Maria: Get Behind The Mask			</a>
+		</h1>
+	<div class="markdown"><p>Bajo encargo del estudio de diseño <a target="_blank" href="http://www.fpestudio.com/">Four Players Studio</a> desarrollamos para la renombrada marca <a target="_blank" href="http://www.tiamaria.com/">Tia Maria</a> una aplicación para celulares y tablets Android que se utilizaría para presentar la nueva campaña publicitaria de la marca:</p>
+
+<p><img src="" alt=""></p>
+
+<p>El software consiste en una serie de videos publicitarios por un lado
+ y por el otro la funcionalidad de escanear código QR, dentro de los 
+cuales reconoce los códigos ganadores e informa los premios a los 
+participantes.</p>
+
+<p><img src="" alt=""></p>
+</div>
+</div>
+
+
+<div class="blog_post" id="entropia-engine-">
+
+		<h1>
+			<a name="entropia-engine-" href="https://ensoft.dev/blog/entropia-engine-">
+			Entropia Engine++			</a>
+		</h1>
+	<div class="markdown"><h2>Características</h2>
+
+<p><a target="_blank" href="http://www.eepp.com.ar/">Entropia Engine++</a>,
+ es un motor para el desarrollo de videojuegos 2D multiplataforma,
+creado para facilitar la creación y distribución de los mismos, pensado 
+para un rendimiento óptimo en cualquier plataforma en la que sea 
+utilizado.</p>
+
+<h2>Portabilidad</h2>
+
+<p>El código del mismo puede ser compilado para una cantidad sustancial 
+de plataformas, de diferente naturaleza sin modificar el código. Por 
+ejemplo el mismo juego, puede ser compilado para Windows, Linux, Mac OS,
+ iOS (iPhone y iPad) y Android (Tablets y SmartPhones).</p>
+
+<h2>Diferencias</h2>
+
+<p>Se diferencia principalmente de otros motores de desarrollo de
+videojuegos 2D comerciales y código abierto es en la facilidad de 
+portabilidad del mismo gracias a su modularidad y extensibilidad, provee
+ integramente más módulos de los que ofrecen otras alternativas, entre 
+ellos el módulo de interfaz gráfica, que reduce los tiempos de 
+desarrollo en gran medida. Por otro lado, nuestra elección fue trabajar 
+con un lenguaje compilado y nativo para las plataformas, para poder
+aprovechar al máximo el hardware de cada una de estas, pudiendo tener 
+control total del manejo de la memoria, y teniendo un rendimiento óptimo
+ en todas las plataformas.</p>
+
+<h2>Desarrollo</h2>
+
+<p>El motor se encuentra en activo desarrollo y mantenido por uno de los
+ miembros del equipo, se planifica expandir el mismo de acuerdo a las
+necesidades que surjan para el desarrollo del videojuego ( entre ellas,
+completar el portado del mismo a las plataformas móbiles, módulo de 
+networking, módulo de scripting ).</p>
+
+<h2>Licencia</h2>
+
+<p>El motor es de código abierto, bajo la licencia MIT<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>, lo que permite utilizarlo libremente tanto para aplicaciones open source como para aplicaciones comerciales.</p>
+
+<h2>Imágenes</h2>
+
+<p>Demo de Interfaz Gráfica
+<a target="_blank" href="https://ensoft.dev/assets/blog/eepp-ui.png" title="Demo de Interfaz Gráfica"><img src="" alt="Demo de Interfaz Gráfica"></a></p>
+
+<p>Editor de Mapas
+<a target="_blank" href="https://ensoft.dev/assets/blog/eepp-mapeditor.png" title="Editor de Mapas"><img src="" alt="Editor de Mapas"></a></p>
+
+<p>Corriendo en HaikuOS<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>
+<a target="_blank" href="https://ensoft.dev/assets/blog/eepp-haikuos.png" title="Corriendo en HaikuOS"><img src="" alt="Corriendo en HaikuOS"></a>&nbsp;</p>
+
+<h2>Links</h2>
+
+<p><a target="_blank" href="http://code.google.com/p/eepp/">Repositório en Google Code</a></p>
+
+<p><a target="_blank" href="https://ensoft.dev/blog/especificaciones-de-entropia-engine-">Especificaciones Técnicas</a></p>
+
+<div class="footnotes">
+<hr>
+<ol>
+
+<li id="fn:1">
+<p><a target="_blank" href="http://es.wikipedia.org/wiki/MIT_License">Licencia MIT en Wikipedia</a>&nbsp;<a href="#fnref:1" rev="footnote">↩</a></p>
+</li>
+
+<li id="fn:2">
+<p><a target="_blank" href="http://haiku-os.org/">HaikuOS</a>&nbsp;<a href="#fnref:2" rev="footnote">↩</a></p>
+</li>
+
+</ol>
+</div>
+</div>
+</div>
+
+
+<div class="blog_post" id="red-domo">
+
+		<h1>
+			<a name="red-domo" href="https://ensoft.dev/blog/red-domo">
+			Red Domo			</a>
+		</h1>
+	<div class="markdown"><p>Tuvimos el placer de trabajar con la gente de <a target="_blank" href="http://deitres.com.ar/">Deitres</a>,
+ una empresa Marplatense de alcance nacional que utiliza tecnología 
+inalámbrica de vanguardia en sístemas de monitoreo de alarmas.</p>
+
+<p>El trabajo realizado consiste en un ambicioso proyecto que permite
+que su sistema de alarmas esté completamente integrado y pueda ser 
+accedido vía web, utilizando un navegador web estándar.</p>
+
+<p>Fué todo un desafío para nosotros debido a la infraestuctura que ya 
+tenía en funcionamiento la empresa y las características de seguridad 
+que requiere un sistema con estas características.</p>
+
+<p>Después de muchas reuniones, y de un planeamiento cuidadoso comenzamos a desarrollar lo que hoy es <a target="_blank" href="https://www.reddomo.com.ar/">DOMO</a>.</p>
+
+<p><img src="" alt="Domo"></p>
+
+<h2>Naturaleza del Proyecto</h2>
+
+<p>El proyecto fué dividido en tres partes<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>:</p>
+
+<h3>Receptora</h3>
+
+<p>La receptora es la encargarda de recibir todos los datos que llegan de los diferentes sistemas de alarmas.
+El desarrollo se llevó a cabo usando <em>C#</em> y partiendo de base de una librería interna proveída por el departamento técnico de Deitres.
+Fué planeada con tolerancia a fallos y problemas de conexión.
+Ésta luego de procesar los paquetes los envia por un canal seguro hacia el servidor.</p>
+
+<h3>Servidor</h3>
+
+<p>El servidor fué desarrollado integramente en <em>PHP</em>, utilizando un <em>Servidor Dedicado</em>.
+Su principal función es la de recibir los datos que envía la receptora, 
+clasificarlos de forma correspondiente y asociarlos a las cuentas de
+usuario y diferentes proveedoras de alarmas distribuidas por todo el
+país.</p>
+
+<h3>Página Web.</h3>
+
+<p>La página Web, a su vez está dividida en tres partes:</p>
+
+<ul>
+<li>Cuenta de Administrador.</li>
+<li>Cuentas para proveedores de servicios de alarmas.</li>
+<li>Cuentas para usuarios finales.</li>
+</ul>
+
+<p>Fué desarrollada<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup> utilizando <em>PHP</em> y <em>Javascript</em>, haciendo uso intensivo de el servicio de <em>Google Maps</em> para visualizar en tiempo real el estado de todos los equipos de alarmas conectados al sistema.</p>
+
+<p>Toda las transacciones entre el navegador y el servidor son realizadas a través de una conexión segura utilizando el protocolo <strong>SSL</strong>..</p>
+
+<h2>Funcionalidad</h2>
+
+<p>El sistema completo provee una integración total de los servicios ya 
+ofrecidos por la empresa, mostrando gráficos en tiempo real del 
+rendimiento de los equipos. Ubicando en un mapa todos los puntos donde
+se encuentran las alarmas y permitiendo administrar las cuentas de
+usuario y las alertas recibidas.</p>
+
+<p><img src="" alt="Domo"></p>
+
+<p>Además para el usuario final le permite acceder, cualquiera sea su 
+ubicación al estado de las diferentes alarmas que posee intaladas, 
+permitiendole ver el estado y los mensajes que ha enviado la alarma al
+sistema.</p>
+
+<p>Cabe destacar también que los usuarios que tienen contratado el servicio de <strong>domótica</strong>
+ pueden controlar los diferentes dispositivos conectados a las alarmas,
+por ejemplo, pueden abrir y cerrar puertas, encender luces controlar
+calderas, etc. Todo desde su navegador web.</p>
+
+<h2>Palabras Finales</h2>
+
+<p>La implementación principal del proyecto llevó alrededor de cuatro meses de trabajo con colaboración constante entre las partes.</p>
+
+<p>Hemos formado una sólida relación de negocios con dicha empresa y al 
+día de hoy continuamos trabajando en agregar funcionalidad al sistema, y
+ siempre dispuestos a innovar de forma conjunta.</p>
+
+<div class="footnotes">
+<hr>
+<ol>
+
+<li id="fn:1">
+<p>Debido a la discreción requerida en este tipo de proyectos, se mencionan superficialmente las características del mismo.&nbsp;<a href="#fnref:1" rev="footnote">↩</a></p>
+</li>
+
+<li id="fn:2">
+<p>El diseño gráfico de la misma fué contratado externamente por Deitres y es una realización de <a target="_blank" href="http://chic-creative.com/">Chic Creative</a>.&nbsp;<a href="#fnref:2" rev="footnote">↩</a></p>
+</li>
+
+</ol>
+</div>
+</div>
+</div>
+
+
+<div class="blog_post" id="todo-deportes">
+
+		<h1>
+			<a name="todo-deportes" href="https://ensoft.dev/blog/todo-deportes">
+			Todo Deportes			</a>
+		</h1>
+	<div class="markdown"><p>La web de <a target="_blank" href="http://www.tododeportesmdq.com.ar/nosotros">Todo Deportes</a> fué diseñada para una empresa que comercializa insumos para <strong>deportes extremos</strong>.</p>
+
+<p>Se mantuvo un estilo simple, en tonos amarillos y negros acorde al logo de la empresa.</p>
+
+<p>El sitio posee una galería interactiva en la parte superior de la 
+página, una navegación fluida y cuatro secciones: la página de inicio, 
+las marcas ofrecidas, el team sponsoreado y un formulario de contacto.</p>
+
+<p><img src="" alt="Todo Deportes"></p>
+</div>
+</div>
+
+</div>
+	<div id="bar"><a href="https://ensoft.dev/"><div id="logo"><div id="logo-fx"></div></div></a>
+
+
+<ul id="links">
+	<li><a class="ajax-link" href="https://ensoft.dev/portfolio">portfolio</a></li>
+	<li><a class="ajax-link" href="https://ensoft.dev/nosotros">nosotros</a></li>
+	<!--<li><a class="ajax-link" href="https://ensoft.dev/blog">blog</a></li>-->
+	<li><a class="ajax-link" href="https://ensoft.dev/contacto">contacto</a></li>
+
+</ul>
+
+<div id="rss"><a href="https://ensoft.dev/rss">RSS</a></div>
+
+
+</div>
+
+</body></html>
diff --git a/bin/unit_tests/assets/html/ensoft/fx.png b/bin/unit_tests/assets/html/ensoft/fx.png
new file mode 100644
index 0000000000000000000000000000000000000000..064b9295cb429ef78a0ba94cde928da5f88a7028
GIT binary patch
literal 6349
zcmaJ`cU%))vkpx{U#Zd)dWX<!kkG4?P^Cx-0V$zGnt+I*2ndK26&0ljM0%I1QQ%eS
zNDCkYrASAVDtPfN-*^AG@7>>T_ne)bXXZIGv%6={-nO(bWT54u1%W^e#zuP9XD#V$
zp9h~iJO0=rn>%YbvHA{J8;mzL+&u&Z((%H0pdiKp?r4-X%H1n6_#H|U1fqcWA|0>}
z=4R@im;f2~-#Ri80YPVI5J*!yBFNp-4~2zzpwPa7S^`^bT>=naFD(IkC389RAYGJ?
zuTfM8$|lMJ=^5qcspci14Toq(sGk`KKw;e>5dr>zq3RJ@0)N_7KkNS%%L+jLRKfab
z3H(LM!Q2v}iwQwNlw{<jJ>`_;Aj&Wqn1Z5;ii#9OUJfQFD<>}tlb436s4K{;%gI6h
z-UQCPg?M?ZTk9G8?d$AJOTY(<4N{kt4G#~O30IK8grH?%YHDh~ZOF?@pJ_;kMh0Tt
zBcuaE1^=<2hYIx!@eRWIVgez*ExLPPu3@zV&Y1o+gn*#`m<<g5J4|N*lZ|i>l7-30
z{T|Xkist73ziL3hf3!of)~NsT{XY$dA|r!Pveu|j%(W2Dv&4A|{&p3lt{Z}K$6`W|
z7>xfvQMB~IU@@USm>`I*jS|G(H_!_c9{Q)Yxw*P=U?|o-&=X~>rzLQPm+|%WQdd${
zR@PNil~d8vGl0SLVQLEca(cS*I=b@mFa?;N+CNx5jOVogR3P>rtk-|Buz$t=E`)%f
zGtYXc5Z^GAmq7?70P^R6)qVe!i;Dig+WQ;p^{-r14E_}>dqzg~cUu2fn*R}<)z0tk
ze~R|(<UeJP3OuXzkh7xp{Goda0<q~D>**jPi0hA;eC!RIdM|mNC%=h+WC~}BWOfUD
zx!Y}+XJlfM+C3tip(&7?Y?_)HU*TUamdkG1ZSCv(bwrpcVd$HeZuihO;XTU-lkTCo
z3jfKA4m!!)U~T}H5C=)taJ#YWah2uz;Ecxp);`@W;%VS%pIU*&a^Ir|k*lw7Q6sF7
zu~8|2H7m4O3}Ix2B!lvBad~X9>Rxv73#;sIl<q-eTAEggE)(pNIfs5xQAdWqHhjZO
ztFGGpapde5UTO1dc8Tl}Ro^u2V%F(N>*=wKc~%G5J&fGzgx0yb=?PD4x-{|J_~8u|
zm;4FkWnzV&q#`d=>c#xZt<`m(S>b~R*BcnB4>74#{XT7lg5vsMx^lGh^>>XE&eLC=
z4E1BH0|T!AnEO!Wg58Ms%X2yAFuw%eWrT&dDHnsrbs}D_kBZO=cykZHu);V;ntLLG
zL|2b+&2@@~LAF1P1DdClc0Rt9NtVVvm}}X)G|>Z|PrR7!%O6t|V-PH4#uK$MG4$fr
z?D@<2#juwO6>48v{LtUGSPcmdgubP`s*^X3pDE>bQrBDd7W0?`Pwol2>*E^RJge@o
z|6EREAGcx%_3TfjuvM}myLjHPSEa$cCCr3t?Jh3UW!ut0Pg_9Sng4^S)oo7p53uQ$
z;$NM!V`C_%qPA;m?63T7#58_vO@FZxcXs6(Q(h#Bj)>8gRj#^fq;!90`aY=HP{^oS
zT1054*zjhbn<OI&W=Mn|eb@i^#76rmcs}N&e#EIdtf2~k%ia<Hahle(#c-`5iA{{L
zrCZ=y3I$8*H>-rfD~yNSu11)bVRryK4n+G`?S8psT_u|F0ZW&VVI6z?ln%A9h^^(x
zt&($6+M4%<n+*mckP@o-PH6DmU+vO&jPr8o5oX8?GmRA)`*IfEY|#1iT8&#nZ1*hg
zw;!5GG_(~}0fb-+(@9>sGR8;;aciaRSn@y0LdvA)n-S^J7X@h%4)R(>&z3vm<|y2k
zTGFHTOA<rm0!M~}3viX0I@<iXSsZB-GzclBG%DH$nWayUJlp-%Tn*HOuIS}hC6iO*
zj;Kp&8>~3NFYI8W727c^po@L}onMLdjGZi$+r5Z_r<fr_qP_2ymcRXUx^d^)qjJ27
zAT*?Ncf?`W#KxgZWATw+{Qbx~>GyB<;2bdT-MIW-v?-#$7&(C4n>MS(DUy|5{0iGX
zp(Zm^RJVA_G@O?eh%zf6Mu$%wm#qT=La+OlC$c_`P_U1>Vbkkp8^t}cxzcP_Y`#|(
z+jEW<Hfg&oZ8!7*0zZGcijs{0ctsE&s2$-S|2l#yCap8~yM*W73)$}gVO{Z|$H8sR
zW~~8O>{p@`>>YiN<9D?q*OBtH+k{ao#06LWmwUaegiA>G=oRANgWbh^g;wn+HkXAe
z(|oPw4w8YyVegH3Pw{AJq}vt3qSl1nZNw&|iojlTyV!;^)GP+205!W*S><8^{dlpl
z8}sP3+rZTi04jb*#GiuO_}lyYRzDutA?`c#KE#U7?j}7LSblW3_v>atQn0h`$Kv|Y
zTdNwpxFNU6xiH(T4L{u{!9$$vezBSy^_q~XSKcFHHl|sUfmT2p%`>-U7xT$Tuv+c<
zwl;QcgaDon$n(m9Jr-~8^P_gJ4s*(qBfowWOG;BUw3pFJt|7^Od~Q6#b%5lDrm2vh
zI{w@*gJRX@>G##qa7iiwZ%enlo==FmZC3cTavwpDVaU1#_zG+6lV{U*>^%xJZ$_1W
z)CMA2Vq3PCDWNNrZw848r7UWPPQp;Lqp+x6PH(0^MPiZHMN7+GSObN4Qak!l>?N*i
z1*I#wjS1(Q=88J!6@CS|hE!FEljB+nUZJ6<>3-EUoA<2wBlKekc%2`wiHKyx<pOI(
z<Sb@6SMVxB@^-?;LbISJGDPZVfCb^)72U`3ilbs*-m(#N9=;PVn%w(kIA^{w4yZl2
z-y5nrx4T%#%YTWDR_~za!$P>t_Wdt4iT9~-{SWCc?^6iueCj@*nW84J$$ac(o_gdR
zItG2KF9jFHbiCuqlwV55L}?OVz?~eycR|OGXm%OVI^s+KNddl=d@TINQ@#!d)b9Ca
zEDwb6W}1KmqL(Xri%RR?Gu6ifsn6iO%mPi?M)rlwt4}8{QDmgs_*c>5+>&GHXe1WH
zYgzA@xGUnAHkgk$Q#+-;y^(_O?DSF0g*;Zd#8GHXe!la2E;?4#+8ccN8f(MV`02Z4
zAPAu}TI8TJGmhFIAraW8aKacO)??#jbg4$jGJeXndUs%f1(6Arw81OEIT{P)Lx-d_
zzC#lC>S)PLxz@67yzWf4DGIdk2ptP92o$Hob+H^T^4#mAC{NpcWBl23`|DgT8G?s%
zyK0AXokBxz;;H;Nw027;+TI$@E=Y;vzfM1u6e%a0^Tr2Upy3}~p&!#;1286cEN#}U
zrB$ymBP}3={ffMyG<-D&Gh&T<fyDU?OC^DRO>Iwc93=v5Vk_qk`nDo9m~G>R0r&y+
zXU~(>-Gun<;+<X9_<7w{kS!1+w&w}6V5cFtPc(5BsJ+*Z#9u6eM(>pE)CQ~`C&X>H
z?CdJc6q~XEdIw+3uFNr!Ll->OluL>f)od*tV^}(WIeh}0GNjvAKB?9>DA^7T1D%n>
z2a|U-p>Hq0ii+C1uBc=i<QRjsWS+TxpB1qtrn>k^al+RVKY!*1D<MZ$elht-Z7uyX
ziz3XH*)isto~ED4y^Ae_jpjYhnbX;2b!my)V|0mzuL!47(C>$dnoXG!`EVLdIpO%A
z(%_ZHpTABaX$*A_DukoffDCJ8H}HNiYw^`Wo10VH@xTNf6DK?)s@<5FB~dQYZD*q{
z)Fasv1L1-7bbJnU=(=>-TA0C@)RyaMuY5ar>=iX(HgVAD23d+kVb55euAE0AaJv*`
z2+I}D_0`3HIpaKO{azW8c-vGG_h#HOTclV*k;@4&Lb3#$5*?lGHO;53*oGS>tL8uP
zk|Q2<W7Il5vRLGi2?*<hI#h0#o5v?N_nX_oo?=ny&x<5PQZL=g;e|rdB!%h}8aQoX
z{mB9SL2?0L>9(ZO3n|uY492A+-Xb!%%PwnPVkTB1bDPL8>zhM$%E|R7k<nDPw*4s^
zrztlzA?<yZ+4u;fqX0g@DOW^h6p8FcP32A$oWr$9OomL%QxTK#EmH7Lg4)5TXdbZi
zvz2)6syrV-`~p-wIvQG;smO@yNW}Cs>fmMS4x(hC#bsPNf0WSRWghm^BAgj!cz3xg
zx2tsU29eNctxdKqt#3HVFZmt-PqR<{GqLW>kDiMDDLO&U{i7ntey^QFJ~yxi4OG8m
zVfS$-5XOQ?G3j1z)74FWk;vi8g0~oX_n^hTb03!&^hAG})$olR$!ErMx<yfE%r-ct
z>kT!c!p}ebkikLL<hS5Py?>3}fe=`F`Ktnd@v21XR<k42Ul_-lb5+7SF;no&Pku^c
zA`eaE9Hp(jbP}#cZHdEmV|BIF@UrE#?4#J3MuN8_E*Ncq8D&NGv*q3Fw*!CPeA1%J
zZHbek$4T?hh)ay!{DUX``3Z$3au%9xc{VA`QNUHM8{n6&GEk8u&H{quZ1GEw+Z-=e
zCdLWiYO#Z~B(1YqW9>&iT0$GFE9gVz<!0qkMkH@ZCx5uwAWyo}a~BOCM*Q=-gVV>E
zK-dU7(tM1Q8DT1H#uT74hMd*ES(D%N^s2-MP=iMTuy)4Jh%?=q-msv8p;_|;+1(cs
z*G#5A7A!QASyB*x=J~{x7>_SsI6BRe#RW6fzIK8d>f-G};2AG7Tl{dToq)`_2tiAv
z?ML*%djAkf3|f34Wr-)98Ib~<<D!wa*Jc>{D?5>HV0(rlcMVZ=S*wvKYGLz<L$>Jp
zV1Nl?TYa@OQY<}Qdt~O`DVhk#3zdMM-G!#(SQksr?!ZT|=z3QU$@=tcd=wna-`tlr
zAd~>)%;lD(O!$c47wQfU3jJ%Y6Ud>8eh1HQHJtB`mWvgd${y!%D&h@n`J|^|#m1md
zn%3Bj8<J;kq80TiTgAKiqc;YgQ$fAMrLGmX`AXso>kjs^-a5F{@Z7rbdV9(}u^6eZ
zJ4|YLP<t_=dwYtJM9{MBxBM9LmSjc*VkLJndeBBDwpK-ngYh}3zPb^H{w#`u^v2~W
z359}*hTg(UQyt?kh6gy|sTvZAK5)DM7xQ$7WUXT@LKQ`CygwX<)c4w1JbrHifb+VW
zg1SZ-KDU>~OI#PD<!_Q28Z`O&8PO5A+K4O8SLL#1<D`<_<z~s1-J~EDD+w)9GT1Iy
z4XJ0&*c-$nk~JirGZgeTWt@L_Pomu5ZCL-ChRMy~op^vtCH52?V4Q<AB(Enikn~L#
zzBcqTtj#Rw<w&z83<fG_)=9xQRz~BtJE?atqZP<^UO%RSYy0zr;)j;G8DFZ<F@c}I
zm!~DzOLvRFDQrBzwdS592Yu9vvVT4}t^KD@tZxEGZx15<gNX*m)>Qmdq@p)B9gP?W
zYaY`Jl#h!al*fNqEwax}aE9RE3bA}8{)3|fNF76+gQbC2^u>%&cG2ZKgV83THdHxd
zD$Ct=?aY*jm6*@V)HB@Z?7io-%CrPgYVzY)IdG|_$3n)e>?~r`hKda6JgD8NUGtc%
zW934uXnkI;)xs_MBdxwSO%7!2>>SPmh0e<le{d{6PDGL!yynXwBR!1BE<1azs{8-c
zM8v^b$#Uv@K62<DMR@}r6DPPGPM-W<=T73@`?BJ;Hss*S&?XiU`2;{+;!+D&1VzlM
zdeLJU9TYtzdZ1OP77v%vPXwmbDugvvr+?A4QsvZk0@EGLLuilbo;*6-FjLg%0sVmZ
z?4_=!@?2CTzi}4+K$Cc`;R@*6%$T9&{x9mK88Qf}a{zqrWp5F+mUZO}1Q+CgYTtua
zZrfAh*eQ<#5t=*0DyI%s>{myvMZi$A&s7%+rWT04t#oWgrDMHPPIp=Jgz6Fj^bY^G
zh`{VaD4Q75_i{(L5Ns<)OaKRj@f7StY=-hB>6C!4RHOMK4Aw=BSQ!Z`=JM$1bFkyc
zr6i<D<a}g?CICOSTPcv01aH0EYn?>r0&VpbcTDiG49y_hn7u$-2rjTC?A7O&9h>H1
zX|Z~d>G9i-JNPpAEDLfZbin2jOG*5}EOLuvkmx1BLCqk67X|g=Nu4@rT3b6ac~v&Y
zU!9O<pkTYcJid$p^j+#D2B^on3*RA>{oAjMW2W*8AcEm(G2FACA{_Pms(Uv7QFbG#
zbz#d{G<;;Ni~)qhM2j}Ps1)SwlVFk}#|=47SVU?j34*Iy2R<S4iufo1c(CnyFEaUP
zVM;T0^ZBFW4c<Y@3z)Vomr|yoA7WHM=XS^BCUctNvre&VI3UV~D?IvgLd=ys=jB~;
zYjQAui_l)j%^{^9I^_yDhd+MF)^2Iz3h`W3g5w+)CqI>P8GKxhErH+9e<EY#wh%?)
zV8O9C7|yJoY7UK!UCXO-q&oodhUu;U_{nU#8rr;j>hh5GW3{UMJZeW<{Yv%H?OE*b
zdy2_Q+4YXIIW!8IM!03q-2S-6^GJ5UNaHI$hYDyqNhK0hR-?KVPRglpLkI+L_tCE|
zg>mYtfWm3JbDicj;{KAcEOLHi&SE25<H#X+!Dxh*aZ8Xh*V=9ROE1pHy4vQ87>B#E
z9_O|a5f|<x%O)?gy_NX*@bpgiT**10={TP_VsE-?N~iymH=j1}mi|V&P>J5;(4isP
zObXR7Txm+-#_fM@`u0ikQDf^fc!R^oxyEwJy;qn0+k~{kc<5ShgeT6La>#1N)eO&d
z$I7gHerPr4DDiD;8p+%?GmKOJ>d0@j@@s<gkU6y5V=1<V!C&a~p6p$bG4v+u$$p^3
z-8+TSmZjDQP8y2#(e@lM<<TU+L}|tS>AQqHO<^^EV>|`!uBFfM8msz+$R1+`E4AQz
z{BcEGQBTb7AM4Amx|ybTPhPtTsK2O<<$9<5{)=4ju2%Ran$}JG$eD{p)_0xB1zDha
zxvA4fqL#Pz({4f5NI?0>eRAsLNkvT~v-sC4$?#l*DMu&Sj?`7UP}KUp=ULON#``a-
zI<|->*_|SwpB9D&xm_jHa~8aZouhCI-Tkq>Y7-ifD|lM>VwS8^C*aeF*o|Y!&>k-}
z{v%7SMQ`84<6*9Ex9j$YZJ78p9rka~Gce@r?CW@BY)C_&zAoH)BM7v%wr;Xii^eBC
zbgB5^UhS6bX;j0)w;W%UTZwsIS}Li*Y!Gj?XXF{Bz7gXQB*OD-pJ~~vH?m{Db-S_X
zug`6Yh|2+OrD-5LEuI)>hq4$8LSHrsfFgH)jjGKQICBd`Hzy8ptgvk4r-SB}Du~#+
zt0(r2L0GMgAwbD1fqt`EW0{yuXIuS|Qj@0wS64S%m5@fuuJrw96YWWptEv+<xXAhZ
z;k)UDaCVxT{&7i;{UrKVw`#UeA1sk_XtdVo-G!uRKL^HFcx%7{VmV_nR9@Z+De)R=
z^b;aOM;K>Kg!b5CDM{92JedHT`T2Y89BgUdXCIwsZ_j5aFupH|*GbCz7`I3Fbo${=
zMqI3#RIK3@W<u6gOHt-;_)JH;B;68f8G#4kS7f{?c|yLp2E@?18d{vh)tvlZdJ(`~
z;^Txhy5eXb*z&@b6}z16F4|YbN%#cNIwmaz$EXw7Nawt=^B<Re`-6j;P@0fJcxpeU
zli_t=p-S}CPJ2`Dvy{`Q81sRbEh2MwEEp&4woeTP_HSo5j4K43C-Bo+)EdqW3^P>g
zYt{x_ra5M}H5eAYsIqc3<7_$0!9Iw2=F)Zr`AdS#&Unfmsh(I$nF%~>s9-s#eXr*+
z)#!TG!Pktvslf)OyeVON!+Wdo%4UIAYPnL!XTlG3Nmqoka~^wszX;Y%vhSKOfN+1H
zwV})a*vX8L_paRJ_S4W1igvVr(zV;n6<D}E&o~<gu<M5_vZmsHHcMnX+|pw+K^xzw
z7G_XDv$aw^d<f*~(-BXf{@S#J)UtEh;#oJ=Z7S3T{PJzKRi7cil0}QX1}0_thJA1b
zHx1T-y|_5?hH2WVy2QNDBZ5Q81F-unWog&*06~4a-AeAbsk$Y<N)8hPQF>=|IEM}Q
rc)B&KK3M$sI^};G{K!!=hynysCUWO|+5h_c2ZOP`g<cinO8ox-_D6C7

literal 0
HcmV?d00001

diff --git a/bin/unit_tests/assets/html/ensoft/logo.png b/bin/unit_tests/assets/html/ensoft/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..68b688c7ef3b29ae1ee5bd87464a44cb1cceb0cc
GIT binary patch
literal 5696
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
TJ+?Z(|LGd)nPF<t&XNBG7>xX?

literal 0
HcmV?d00001

diff --git a/bin/unit_tests/assets/html/ensoft/rss.png b/bin/unit_tests/assets/html/ensoft/rss.png
new file mode 100644
index 0000000000000000000000000000000000000000..f195a1ce2b1bfdbd8142e79967ee7277d3d6825f
GIT binary patch
literal 1152
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWuD@%nF$y5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y
zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP
zs8ErclUHn2VXFi-*9yo63F|8<fR&VF+bTgE72zA8;GAESs$i;Tpqp%9W}skZsAp(w
zVs37(qhMrUXrOOkq;F`XYiMp|Y-D9%pa2C*K--E^(yW49+@N*=dA3R!B_#z``ugSN
z<$C4Ddih1^`i7R4mLM~XjC6r2bc-wVN)jt{^NN*WCb*;)Cl_TFlw{`TDS%8&Ov*1U
zu~h=P6yk;40=Thx#n4~^2AF<DVu8M)o&m^9FonLp_?717!c`ZS1f?R}i`C%bkjjEo
z{h-w1{L-RiV8o><gRCmBaxO|uEXgkl$<NP$g<?QPeo20DMt*^UbFisGcxGNoet9ui
zwXd(0XI^nhVqS8pr;Du;P`_SgW{Q=ei;0_sfvcf~ft!h;p{t>ji-ohRqpPWlrKzKV
zld}a(uS<S%X>Mv>2~2MaLaz}{y`Y4UTL84#CABECEH%ZgC_h&L>|v`+oNjRex(AnA
zAbL}9yTt&fUVWfr^g+>z6wNRpVA=sO;fWT=fhYUaJYZTc0w(G?QtO+58RDC#i(^Q|
zt&)qj-c5lL$38BeG$Fc~MM$ZsxY6l>`v>POJ9e<Gy>w}kLPvM=;@La2123GuqQa%S
z^@&16g2=K70?Yq1PcP6ed+_~0?fl}8bEZ%DzVH2<&lQK1-x-$t=VdD1Z)bPmfa0BH
z4}zUoum3PQXy~_%^_xJja--EUuD_3Rj0>8z=giK1VrZ~%5pT`x+&zzjCZBxZbY=d7
z3{eYLc4grl<)-A#d&LfYbI>&LU9sw4>(0F~7dn(yA8z-_SXL)9|JBsF?`k^JWfJ7|
zqXMqS-&(ah@!q-y*^~*#rK_s0>m*eK%;jS;_1XF&Ot?Hkp(}RJs((L)6BryhdiHWZ
S++PAJ6Fgo0T-G@yGywqYNRB%I

literal 0
HcmV?d00001

diff --git a/include/eepp/ui/uihtmlwidget.hpp b/include/eepp/ui/uihtmlwidget.hpp
index b2fcd64e3..1eb7d4381 100644
--- a/include/eepp/ui/uihtmlwidget.hpp
+++ b/include/eepp/ui/uihtmlwidget.hpp
@@ -31,21 +31,27 @@ class EE_API UIHTMLWidget : public UILayout {
 	virtual void onDisplayChange();
 
 	CSSDisplay getDisplay() const { return mDisplay; }
+
 	void setDisplay( CSSDisplay display );
 
 	CSSPosition getCSSPosition() const { return mPosition; }
+
 	void setCSSPosition( CSSPosition position );
 
 	CSSFloat getCSSFloat() const { return mFloat; }
+
 	void setCSSFloat( CSSFloat cssFloat );
 
 	CSSClear getCSSClear() const { return mClear; }
+
 	void setCSSClear( CSSClear cssClear );
 
 	const Rectf& getOffsets() const { return mOffsets; }
+
 	void setOffsets( const Rectf& offsets );
 
 	int getZIndex() const { return mZIndex; }
+
 	void setZIndex( int zIndex );
 
 	virtual std::vector<PropertyId> getPropertiesImplemented() const;
@@ -57,10 +63,18 @@ class EE_API UIHTMLWidget : public UILayout {
 
 	virtual void updateLayout();
 
+	virtual void onParentChange();
+
+	virtual void onPositionChange();
+
 	UIWidget* getContainingBlock();
 
 	void positionOutOfFlowChildren();
 
+	void updateOutOfFlowPosition();
+
+	void updateStickyPosition();
+
 	virtual RichText* getRichTextPtr() { return nullptr; }
 
 	virtual bool isMergeable() const { return false; }
@@ -84,6 +98,14 @@ class EE_API UIHTMLWidget : public UILayout {
 	int mZIndex{ 0 };
 	UILayouter* mLayouter{ nullptr };
 	UnorderedMap<std::string, StyleSheetProperty> mDataProperties;
+
+	Uint32 mScrollCb{ 0 };
+	Node* mScrollTarget{ nullptr };
+	Vector2f mStickyBasePos;
+	bool mIsUpdatingScroll{ false };
+
+	void updateScrollListeners();
+	void onScrollTargetPositionChange();
 };
 
 }} // namespace EE::UI
diff --git a/include/eepp/ui/uirichtext.hpp b/include/eepp/ui/uirichtext.hpp
index 304ac49fc..ee05ae535 100644
--- a/include/eepp/ui/uirichtext.hpp
+++ b/include/eepp/ui/uirichtext.hpp
@@ -178,6 +178,7 @@ class EE_API UIHTMLBody : public UIRichText {
 	virtual Uint32 getType() const override;
 	bool isType( const Uint32& type ) const override;
 	bool applyProperty( const StyleSheetProperty& attribute ) override;
+	virtual void updateLayout() override;
 
   protected:
 	bool mPropagatedBackground{ false };
diff --git a/src/eepp/ui/uihtmlwidget.cpp b/src/eepp/ui/uihtmlwidget.cpp
index dc1b3de39..bd1b8c547 100644
--- a/src/eepp/ui/uihtmlwidget.cpp
+++ b/src/eepp/ui/uihtmlwidget.cpp
@@ -2,6 +2,8 @@
 #include <eepp/ui/uihtmlwidget.hpp>
 #include <eepp/ui/uilayouter.hpp>
 #include <eepp/ui/uilayoutermanager.hpp>
+#include <eepp/ui/uiscrollablewidget.hpp>
+#include <eepp/ui/uiscrollview.hpp>
 
 namespace EE { namespace UI {
 
@@ -12,6 +14,8 @@ UIHTMLWidget* UIHTMLWidget::New() {
 UIHTMLWidget::UIHTMLWidget( const std::string& tag ) : UILayout( tag ) {}
 
 UIHTMLWidget::~UIHTMLWidget() {
+	if ( mScrollTarget && mScrollCb )
+		mScrollTarget->removeEventListener( mScrollCb );
 	eeSAFE_DELETE( mLayouter );
 }
 
@@ -65,6 +69,7 @@ void UIHTMLWidget::setCSSPosition( CSSPosition position ) {
 			if ( getLayoutWidthPolicy() == SizePolicy::MatchParent )
 				setLayoutWidthPolicy( SizePolicy::WrapContent );
 		}
+		updateScrollListeners();
 		onPositionChange();
 	}
 }
@@ -201,17 +206,22 @@ void UIHTMLWidget::updateLayout() {
 UIWidget* UIHTMLWidget::getContainingBlock() {
 	if ( mPosition == CSSPosition::Fixed ) {
 		Node* parent = getParent();
-		UIWidget* lastWidget = parent && parent->isWidget() ? parent->asType<UIWidget>() : nullptr;
+		UIWidget* cb = parent && parent->isWidget() ? parent->asType<UIWidget>() : nullptr;
 		while ( parent ) {
+			if ( parent->isType( UI_TYPE_SCROLLVIEW ) ) {
+				cb = parent->asType<UIWidget>();
+				break;
+			}
 			if ( parent->isWidget() )
-				lastWidget = parent->asType<UIWidget>();
+				cb = parent->asType<UIWidget>();
 			parent = parent->getParent();
 		}
-		return lastWidget;
+		return cb;
 	}
 
 	Node* parent = getParent();
 	UIWidget* lastWidget = nullptr;
+	UIWidget* htmlWidget = nullptr;
 	while ( parent ) {
 		if ( parent->isWidget() ) {
 			lastWidget = parent->asType<UIWidget>();
@@ -219,11 +229,14 @@ UIWidget* UIHTMLWidget::getContainingBlock() {
 				if ( lastWidget->asType<UIHTMLWidget>()->getCSSPosition() != CSSPosition::Static ) {
 					return lastWidget;
 				}
+				if ( lastWidget->isType( UI_TYPE_HTML_HTML ) ) {
+					htmlWidget = lastWidget;
+				}
 			}
 		}
 		parent = parent->getParent();
 	}
-	return lastWidget;
+	return htmlWidget ? htmlWidget : lastWidget;
 }
 
 void UIHTMLWidget::positionOutOfFlowChildren() {
@@ -233,66 +246,182 @@ void UIHTMLWidget::positionOutOfFlowChildren() {
 			UIHTMLWidget* htmlChild = static_cast<UIHTMLWidget*>( child );
 			CSSPosition pos = htmlChild->getCSSPosition();
 			if ( pos == CSSPosition::Absolute || pos == CSSPosition::Fixed ) {
-				UIWidget* cb = htmlChild->getContainingBlock();
-				if ( cb ) {
-					Rectf cbContentOffset = cb->getPixelsContentOffset();
-					Float cbContentWidth = cb->getPixelsSize().getWidth() - cbContentOffset.Left -
-										   cbContentOffset.Right;
-					Float cbContentHeight = cb->getPixelsSize().getHeight() - cbContentOffset.Top -
-											cbContentOffset.Bottom;
-
-					Rectf margin = htmlChild->getLayoutPixelsMargin();
-					Float childWidth = htmlChild->getPixelsSize().getWidth();
-					Float childHeight = htmlChild->getPixelsSize().getHeight();
-
-					Float top = 0;
-					Float left = 0;
-
-					bool useTop = htmlChild->mTopEq != "auto";
-					bool useBottom = htmlChild->mBottomEq != "auto";
-					bool useLeft = htmlChild->mLeftEq != "auto";
-					bool useRight = htmlChild->mRightEq != "auto";
-
-					if ( useLeft ) {
-						left = htmlChild->lengthFromValue(
-							htmlChild->mLeftEq, CSS::PropertyRelativeTarget::ContainingBlockWidth,
-							0 );
-					} else if ( useRight ) {
-						Float rightVal = htmlChild->lengthFromValue(
-							htmlChild->mRightEq, CSS::PropertyRelativeTarget::ContainingBlockWidth,
-							0 );
-						left = cbContentWidth - childWidth - margin.Left - margin.Right - rightVal;
-					}
-
-					if ( useTop ) {
-						top = htmlChild->lengthFromValue(
-							htmlChild->mTopEq, CSS::PropertyRelativeTarget::ContainingBlockHeight,
-							0 );
-					} else if ( useBottom ) {
-						Float bottomVal = htmlChild->lengthFromValue(
-							htmlChild->mBottomEq,
-							CSS::PropertyRelativeTarget::ContainingBlockHeight, 0 );
-						top =
-							cbContentHeight - childHeight - margin.Top - margin.Bottom - bottomVal;
-					}
-
-					top += margin.Top;
-					left += margin.Left;
-
-					Vector2f cbPos( cbContentOffset.Left, cbContentOffset.Top );
-					cbPos.x += left;
-					cbPos.y += top;
-
-					Vector2f worldPos = cb->convertToWorldSpace( cbPos );
-					Vector2f localPos = convertToNodeSpace( worldPos );
-					htmlChild->setPixelsPosition( localPos );
-				}
+				htmlChild->updateOutOfFlowPosition();
 			}
 		}
 		child = child->getNextNode();
 	}
 }
 
+void UIHTMLWidget::updateOutOfFlowPosition() {
+	UIWidget* cb = getContainingBlock();
+	if ( !cb )
+		return;
+
+	Rectf cbContentOffset = cb->getPixelsContentOffset();
+	Float cbContentWidth =
+		cb->getPixelsSize().getWidth() - cbContentOffset.Left - cbContentOffset.Right;
+	Float cbContentHeight =
+		cb->getPixelsSize().getHeight() - cbContentOffset.Top - cbContentOffset.Bottom;
+
+	Rectf margin = getLayoutPixelsMargin();
+	Float childWidth = getPixelsSize().getWidth();
+	Float childHeight = getPixelsSize().getHeight();
+
+	Float top = 0;
+	Float left = 0;
+
+	bool useTop = mTopEq != "auto";
+	bool useBottom = mBottomEq != "auto";
+	bool useLeft = mLeftEq != "auto";
+	bool useRight = mRightEq != "auto";
+
+	if ( useLeft ) {
+		left = lengthFromValue( mLeftEq, CSS::PropertyRelativeTarget::ContainingBlockWidth, 0 );
+	} else if ( useRight ) {
+		Float rightVal =
+			lengthFromValue( mRightEq, CSS::PropertyRelativeTarget::ContainingBlockWidth, 0 );
+		left = cbContentWidth - childWidth - margin.Left - margin.Right - rightVal;
+	}
+
+	if ( useTop ) {
+		top = lengthFromValue( mTopEq, CSS::PropertyRelativeTarget::ContainingBlockHeight, 0 );
+	} else if ( useBottom ) {
+		Float bottomVal =
+			lengthFromValue( mBottomEq, CSS::PropertyRelativeTarget::ContainingBlockHeight, 0 );
+		top = cbContentHeight - childHeight - margin.Top - margin.Bottom - bottomVal;
+	}
+
+	top += margin.Top;
+	left += margin.Left;
+
+	Vector2f cbPos( cbContentOffset.Left, cbContentOffset.Top );
+	cbPos.x += left;
+	cbPos.y += top;
+
+	Vector2f worldPos = cb->convertToWorldSpace( cbPos );
+	Vector2f localPos = getParent()->convertToNodeSpace( worldPos );
+	setPixelsPosition( localPos );
+}
+
+void UIHTMLWidget::updateStickyPosition() {
+	if ( !mScrollTarget )
+		return;
+
+	UIWidget* cb = getContainingBlock();
+	if ( !cb )
+		return;
+
+	Vector2f baseWorldPos = getParent()->convertToWorldSpace( mStickyBasePos );
+
+	Node* viewport = mScrollTarget->getParent();
+	if ( !viewport )
+		return;
+
+	Vector2f posInViewport = viewport->convertToNodeSpace( baseWorldPos );
+
+	Float topOffset = 0;
+	bool useTop = mTopEq != "auto";
+	if ( useTop )
+		topOffset =
+			lengthFromValue( mTopEq, CSS::PropertyRelativeTarget::ContainingBlockHeight, 0 );
+
+	Float bottomOffset = 0;
+	bool useBottom = mBottomEq != "auto";
+	if ( useBottom )
+		bottomOffset =
+			lengthFromValue( mBottomEq, CSS::PropertyRelativeTarget::ContainingBlockHeight, 0 );
+
+	Vector2f newPosInViewport = posInViewport;
+
+	if ( useTop ) {
+		if ( posInViewport.y < topOffset ) {
+			newPosInViewport.y = topOffset;
+		}
+	}
+
+	if ( useBottom ) {
+		Float viewportHeight = viewport->getSize().getHeight();
+		if ( posInViewport.y + getPixelsSize().getHeight() > viewportHeight - bottomOffset ) {
+			newPosInViewport.y = viewportHeight - bottomOffset - getPixelsSize().getHeight();
+		}
+	}
+
+	Vector2f cbWorldPos = cb->convertToWorldSpace( Vector2f( 0, 0 ) );
+	Vector2f cbInViewport = viewport->convertToNodeSpace( cbWorldPos );
+	Float cbBottomInViewport =
+		cbInViewport.y + cb->getPixelsSize().getHeight() - cb->getPixelsPadding().Bottom;
+
+	if ( newPosInViewport.y + getPixelsSize().getHeight() > cbBottomInViewport ) {
+		newPosInViewport.y = cbBottomInViewport - getPixelsSize().getHeight();
+	}
+
+	if ( newPosInViewport.y < cbInViewport.y + cb->getPixelsPadding().Top ) {
+		newPosInViewport.y = cbInViewport.y + cb->getPixelsPadding().Top;
+	}
+
+	if ( newPosInViewport != posInViewport ) {
+		Vector2f newWorldPos = viewport->convertToWorldSpace( newPosInViewport );
+		Vector2f newLocalPos = getParent()->convertToNodeSpace( newWorldPos );
+
+		mIsUpdatingScroll = true;
+		setPixelsPosition( newLocalPos );
+		mIsUpdatingScroll = false;
+	} else {
+		mIsUpdatingScroll = true;
+		setPixelsPosition( mStickyBasePos );
+		mIsUpdatingScroll = false;
+	}
+}
+
+void UIHTMLWidget::updateScrollListeners() {
+	if ( mScrollTarget ) {
+		if ( mScrollCb ) {
+			mScrollTarget->removeEventListener( mScrollCb );
+			mScrollCb = 0;
+		}
+		mScrollTarget = nullptr;
+	}
+
+	if ( mPosition == CSSPosition::Fixed || mPosition == CSSPosition::Sticky ) {
+		Node* parent = getParent();
+		while ( parent ) {
+			if ( parent->isType( UI_TYPE_SCROLLVIEW ) ) {
+				mScrollTarget = parent->asType<UIScrollView>()->getScrollView();
+				break;
+			}
+			parent = parent->getParent();
+		}
+
+		if ( mScrollTarget ) {
+			mScrollCb = mScrollTarget->on( Event::OnPositionChange, [this]( const Event* ) {
+				onScrollTargetPositionChange();
+			} );
+		}
+	}
+}
+
+void UIHTMLWidget::onParentChange() {
+	UILayout::onParentChange();
+	updateScrollListeners();
+}
+
+void UIHTMLWidget::onPositionChange() {
+	UILayout::onPositionChange();
+	if ( mPosition == CSSPosition::Sticky && !mIsUpdatingScroll ) {
+		mStickyBasePos = getPixelsPosition();
+		updateStickyPosition();
+	}
+}
+
+void UIHTMLWidget::onScrollTargetPositionChange() {
+	if ( mPosition == CSSPosition::Fixed ) {
+		updateOutOfFlowPosition();
+	} else if ( mPosition == CSSPosition::Sticky ) {
+		updateStickyPosition();
+	}
+}
+
 void UIHTMLWidget::invalidateIntrinsicSize() {
 	if ( mLayouter )
 		mLayouter->invalidateIntrinsicWidths();
diff --git a/src/eepp/ui/uirichtext.cpp b/src/eepp/ui/uirichtext.cpp
index 64e7809e8..f9d4a9df5 100644
--- a/src/eepp/ui/uirichtext.cpp
+++ b/src/eepp/ui/uirichtext.cpp
@@ -112,6 +112,36 @@ bool UIHTMLBody::applyProperty( const StyleSheetProperty& attribute ) {
 	return UIRichText::applyProperty( attribute );
 }
 
+void UIHTMLBody::updateLayout() {
+	UIRichText::updateLayout();
+
+	if ( mChild && mChild->isWidget() ) {
+		Float maxH = 0;
+		Node* child = mChild;
+		while ( child ) {
+			if ( child->isWidget() ) {
+				UIWidget* widget = child->asType<UIWidget>();
+				bool isFixed = false;
+				if ( widget->isType( UI_TYPE_HTML_WIDGET ) &&
+					 widget->asType<UIHTMLWidget>()->getCSSPosition() == CSSPosition::Fixed ) {
+					isFixed = true;
+				}
+				if ( !isFixed ) {
+					Float childH =
+						widget->getPixelsPosition().y + widget->getPixelsSize().getHeight();
+					maxH = std::max( maxH, childH );
+				}
+			}
+			child = child->getNextNode();
+		}
+		if ( maxH > 0 ) {
+			Float dpH = PixelDensity::pxToDp( maxH );
+			if ( dpH != getMinSize().getHeight() )
+				setMinHeight( dpH );
+		}
+	}
+}
+
 UIRichText* UIRichText::NewHtml() {
 	auto* html = UIHTMLHtml::New( "html" );
 	html->setClipType( ClipType::None );
diff --git a/src/tests/unit_tests/uihtml_position_tests.cpp b/src/tests/unit_tests/uihtml_position_tests.cpp
index 235622f3c..f9bf33cc5 100644
--- a/src/tests/unit_tests/uihtml_position_tests.cpp
+++ b/src/tests/unit_tests/uihtml_position_tests.cpp
@@ -8,6 +8,8 @@
 #include <eepp/ui/uihtmlwidget.hpp>
 #include <eepp/ui/uirichtext.hpp>
 #include <eepp/ui/uiscenenode.hpp>
+#include <eepp/ui/uiscrollbar.hpp>
+#include <eepp/ui/uiscrollview.hpp>
 #include <eepp/ui/uithememanager.hpp>
 #include <eepp/window/engine.hpp>
 #include <eepp/window/window.hpp>
@@ -351,3 +353,88 @@ UTEST( UIHTMLWidget, positionOutOfFlow_RightBottomWithMargin ) {
 
 	Engine::destroySingleton();
 }
+
+UTEST( UIHTMLWidget, positionOutOfFlow_FixedScroll ) {
+	init_ui_test();
+	UISceneNode* sceneNode = SceneManager::instance()->getUISceneNode();
+
+	UIScrollView* scrollView = UIScrollView::New();
+	scrollView->setParent( sceneNode->getRoot() );
+	scrollView->setPixelsSize( 800, 600 );
+
+	UIHTMLBody* body = UIHTMLBody::New( "body" );
+	body->setParent( scrollView );
+	body->applyProperty( StyleSheetProperty( "position", "relative" ) );
+
+	UIWidget* dummyChild = UIWidget::New();
+	dummyChild->setParent( body );
+	dummyChild->setPixelsSize( 800, 2000 );
+	dummyChild->setPixelsPosition( 0, 0 );
+
+	UIHTMLWidget* fixedChild = UIHTMLWidget::New();
+	fixedChild->setParent( body );
+	fixedChild->setPixelsSize( 100, 50 );
+	fixedChild->applyProperty( StyleSheetProperty( "position", "fixed" ) );
+	fixedChild->applyProperty( StyleSheetProperty( "top", "50px" ) );
+	fixedChild->applyProperty( StyleSheetProperty( "left", "50px" ) );
+
+	sceneNode->updateDirtyLayouts();
+
+	// Scroll down by 200px
+	scrollView->getScrollView()->setPosition( { 0, -200 } );
+
+	Vector2f worldPos = fixedChild->convertToWorldSpace( { 0, 0 } );
+	EXPECT_NEAR( 50.f, worldPos.x, 1.f );
+	EXPECT_NEAR( 50.f, worldPos.y, 1.f );
+
+	Engine::destroySingleton();
+}
+
+UTEST( UIHTMLWidget, positionOutOfFlow_StickyScroll ) {
+	init_ui_test();
+	UISceneNode* sceneNode = SceneManager::instance()->getUISceneNode();
+
+	UIScrollView* scrollView = UIScrollView::New();
+	scrollView->setParent( sceneNode->getRoot() );
+	scrollView->setPixelsSize( 800, 600 );
+
+	UIHTMLBody* body = UIHTMLBody::New( "body" );
+	body->setParent( scrollView );
+	body->applyProperty( StyleSheetProperty( "position", "relative" ) );
+
+	UIHTMLWidget* stickyChild = UIHTMLWidget::New();
+	stickyChild->setParent( body );
+	stickyChild->setPixelsSize( 100, 50 );
+	stickyChild->applyProperty( StyleSheetProperty( "margin-top", "100px" ) );
+	stickyChild->applyProperty( StyleSheetProperty( "position", "sticky" ) );
+	stickyChild->applyProperty( StyleSheetProperty( "top", "20px" ) );
+
+	UIWidget* dummyChild = UIWidget::New();
+	dummyChild->setParent( body );
+	dummyChild->setPixelsSize( 800, 2000 );
+	dummyChild->setPixelsPosition( 0, 0 );
+
+	sceneNode->updateDirtyLayouts();
+
+	// Force base pos (as if layouter did it)
+	stickyChild->setPixelsPosition( 0, 100 );
+
+	// Ensure base pos was captured correctly
+	EXPECT_NEAR( 100.f, stickyChild->getPixelsPosition().y, 1.f );
+
+	// Scroll down by 50px
+	Float actualMaxScrollY =
+		body->getPixelsSize().getHeight() - scrollView->getContainer()->getPixelsSize().getHeight();
+	scrollView->getVerticalScrollBar()->setValue( 50.f / actualMaxScrollY );
+
+	Vector2f worldPos1 = stickyChild->convertToWorldSpace( { 0, 0 } );
+	EXPECT_NEAR( 50.f, worldPos1.y, 1.f );
+
+	// Scroll down by 150px
+	scrollView->getVerticalScrollBar()->setValue( 150.f / actualMaxScrollY );
+
+	Vector2f worldPos2 = stickyChild->convertToWorldSpace( { 0, 0 } );
+	EXPECT_NEAR( 20.f, worldPos2.y, 1.f );
+
+	Engine::destroySingleton();
+}
diff --git a/src/tests/unit_tests/uihtml_tests.cpp b/src/tests/unit_tests/uihtml_tests.cpp
index 1468bf5c6..38e9ad12a 100644
--- a/src/tests/unit_tests/uihtml_tests.cpp
+++ b/src/tests/unit_tests/uihtml_tests.cpp
@@ -1173,3 +1173,71 @@ UTEST( UIHTML, InlineBlockBrowserTest ) {
 
 	Engine::destroySingleton();
 }
+
+UTEST( UIHTML, HeightExpansion ) {
+	Engine::instance()->createWindow( WindowSettings( 1024, 653, "Height Expansion Test",
+													  WindowStyle::Default, WindowBackend::Default,
+													  32, {}, 1, false, true ),
+									  ContextSettings( false, 0, 0, GLv_default, true, false ) );
+
+	UI::UISceneNode* sceneNode = init_test_inline_block();
+	sceneNode->setURI( "file://" + Sys::getProcessPath() + "assets/html/ensoft/" );
+
+	std::string html;
+	FileSystem::fileGet( "assets/html/ensoft/ensoft.html", html );
+
+	sceneNode->loadLayoutFromString( HTMLFormatter::HTMLtoXML( html ) );
+	sceneNode->update( Seconds( 1 ) );
+
+	// Wait a bit and update again to make sure layouts are computed
+	sceneNode->updateDirtyLayouts();
+
+	auto htmlNode = sceneNode->getRoot()->findByType( UI_TYPE_HTML_HTML );
+	auto bodyNode = sceneNode->getRoot()->findByType( UI_TYPE_HTML_BODY );
+
+	ASSERT_TRUE( htmlNode != nullptr );
+	ASSERT_TRUE( bodyNode != nullptr );
+
+	auto htmlWidget = htmlNode->asType<UIWidget>();
+	auto bodyWidget = bodyNode->asType<UIWidget>();
+
+	EXPECT_GT( htmlWidget->getSize().getHeight(), 0 );
+	EXPECT_GT( bodyWidget->getSize().getHeight(), 0 );
+
+	EXPECT_GE( htmlWidget->getSize().getHeight(), bodyWidget->getSize().getHeight() );
+
+	Engine::destroySingleton();
+}
+
+UTEST( UIHTML, HeightExpansion_FixedDoesNotExpand ) {
+	Engine::instance()->createWindow( WindowSettings( 1024, 653, "Height Expansion Test",
+													  WindowStyle::Default, WindowBackend::Default,
+													  32, {}, 1, false, true ),
+									  ContextSettings( false, 0, 0, GLv_default, true, false ) );
+
+	UI::UISceneNode* sceneNode = init_test_inline_block();
+
+	const std::string html = R"HTML(
+<!DOCTYPE html>
+<html>
+<body style="margin: 0; padding: 0;">
+    <div style="height: 100px;"></div>
+    <div style="position: fixed; top: 500px; height: 50px;"></div>
+</body>
+</html>
+)HTML";
+
+	sceneNode->loadLayoutFromString( HTMLFormatter::HTMLtoXML( html ) );
+	sceneNode->update( Seconds( 1 ) );
+	sceneNode->updateDirtyLayouts();
+
+	auto bodyNode = sceneNode->getRoot()->findByType( UI_TYPE_HTML_BODY );
+	ASSERT_TRUE( bodyNode != nullptr );
+
+	auto bodyWidget = bodyNode->asType<UIWidget>();
+
+	// The height should be 100px, not 550px because the fixed div should be ignored.
+	EXPECT_NEAR( bodyWidget->getPixelsSize().getHeight(), 100.f, 1.f );
+
+	Engine::destroySingleton();
+}