diff --git a/nel/tools/CMakeLists.txt b/nel/tools/CMakeLists.txt
index 5297f34a4..079ded560 100644
--- a/nel/tools/CMakeLists.txt
+++ b/nel/tools/CMakeLists.txt
@@ -37,3 +37,8 @@ ENDIF()
 IF(WITH_NEL_TESTS)
   ADD_SUBDIRECTORY(nel_unit_test)
 ENDIF()
+
+IF(WITH_HTMLCSS_TEST)
+  ADD_SUBDIRECTORY(htmlcss_test)
+ENDIF()
+
diff --git a/nel/tools/htmlcss_test/CMakeLists.txt b/nel/tools/htmlcss_test/CMakeLists.txt
new file mode 100644
index 000000000..d37498f60
--- /dev/null
+++ b/nel/tools/htmlcss_test/CMakeLists.txt
@@ -0,0 +1,15 @@
+CMAKE_MINIMUM_REQUIRED(VERSION 2.8.1)
+CMAKE_POLICY(SET CMP0015 NEW)
+
+LINK_DIRECTORIES(${LINK_DIRECTORIES} ${CMAKE_LIBRARY_DIR})
+ADD_DEFINITIONS(${LIBXML2_DEFINITIONS})
+
+FILE(GLOB SRC htmlcss_test.cpp)
+ADD_EXECUTABLE(htmlcss_test ${SRC})
+INCLUDE_DIRECTORIES(${CMAKE_CURRENT_SOURCE_DIR} ${LUA_INCLUDE_DIR} ${LIBXML2_INCLUDE_DIR} )
+TARGET_LINK_LIBRARIES(htmlcss_test nelmisc nelgui ${LUA_LIBRARIES} ${LIBXML2_LIBRARIES})
+NL_DEFAULT_PROPS(htmlcss_test "Ryzom, Tests: html/css parser tests")
+NL_ADD_RUNTIME_FLAGS(htmlcss_test)
+
+INSTALL(TARGETS htmlcss_test   RUNTIME DESTINATION bin COMPONENT tools)
+# TODO: test fixtures
diff --git a/nel/tools/htmlcss_test/htmlcss_test.cpp b/nel/tools/htmlcss_test/htmlcss_test.cpp
new file mode 100644
index 000000000..4e5b79843
--- /dev/null
+++ b/nel/tools/htmlcss_test/htmlcss_test.cpp
@@ -0,0 +1,183 @@
+/*
+ * File:   main.cpp
+ * Author: Karu <nimetu@gmail.com>
+ *
+ * Created on 2015-04-11
+ */
+
+typedef struct _xmlNode xmlNode;
+
+#include <string>
+#include <fstream>
+
+#include "nel/misc/types_nl.h"
+#include "nel/misc/file.h"
+#include "nel/misc/path.h"
+
+#include "nel/gui/html_parser.h"
+#include "nel/gui/css_parser.h"
+#include "nel/gui/html_element.h"
+#include "nel/gui/css_style.h"
+
+#include "nel/gui/libwww.h"
+
+using namespace std;
+using namespace NLMISC;
+using namespace NLGUI;
+
+sint indent { 0 };
+
+// ***************************************************************************
+void checkRuleset(CHtmlElement &elm, CCssStyle &style, TStyleVec testset, bool exists)
+{
+	bool verbose = false;
+	std::string existsMessage = exists ? "exist" : "unset";
+	for (auto it : testset)
+	{
+		bool failed = (exists != style.hasStyle(it.first));
+		if (failed)
+		{
+			bool failed2 = true;
+			if (it.first == "font-size")
+			{
+				printf("[%s]: font-size: %d; expected '%s'\n", existsMessage.c_str(), style.Current.FontSize, it.second.c_str());
+				printf("     (%s)\n", elm.toString().c_str());
+				failed2 = false;
+			}
+			else if (it.first == "background-color")
+			{
+				printf("[%s]: background-color: '%s'; expected '%s'\n", existsMessage.c_str(), style.Current.BackgroundColor.toString().c_str(), it.second.c_str());
+				printf("     (%s)\n", elm.toString().c_str());
+				failed2 = false;
+			}
+
+			if (failed2)
+			{
+				printf("[%s] FAIL: '%s': '%s'\n", existsMessage.c_str(), it.first.c_str(), it.second.c_str());
+				printf("     (%s)\n", elm.toString().c_str());
+				for (auto it2 : style.Current.StyleRules)
+					printf("'%s': '%s'\n", it2.first.c_str(), it2.second.c_str());
+			}
+		}
+		else if (exists && !style.checkStyle(it.first, it.second))
+		{
+			printf("[%s] FAIL: expecting '%s': '%s', got '%s'\n", existsMessage.c_str(), it.first.c_str(), it.second.c_str(), style.getStyle(it.first).c_str());
+			printf("     (%s)\n", elm.toString().c_str());
+		}
+		else if (!failed)
+		{
+			if (verbose)
+				printf("[%s] PASS: '%s': '%s'\n", existsMessage.c_str(), it.first.c_str(), it.second.c_str());
+		}
+	}
+}
+
+// ***************************************************************************
+void recursiveHtmlRender(CHtmlElement &elm, CCssStyle &style)
+{
+	bool verbose = false;
+	if (elm.Type == CHtmlElement::TEXT_NODE)
+	{
+		std::string val = trim(elm.Value);
+		if (verbose)
+			if (!val.empty())
+				printf("[%d] '%s'\n", indent, val.c_str());
+	}
+	else if (elm.Type == CHtmlElement::ELEMENT_NODE)
+	{
+		style.pushStyle();
+
+		if (verbose)
+			printf("========= '%s'\n", elm.toString().c_str());
+
+		style.getStyleFor(elm);
+		style.applyStyle(elm.Style);
+		if (elm.hasAttribute("data-ruleset"))
+		{
+			TStyleVec testset = CCssParser::parseDecls(elm.getAttribute("data-ruleset"));
+			checkRuleset(elm, style, testset, true);
+		}
+
+		if (elm.hasAttribute("data-ruleunset"))
+		{
+			TStyleVec testset = CCssParser::parseDecls(elm.getAttribute("data-ruleunset"));
+			checkRuleset(elm, style, testset, false);
+		}
+
+		if (elm.hasAttribute("data-ruleset-before"))
+		{
+			TStyleVec testset = CCssParser::parseDecls(elm.getAttribute("data-ruleset-before"));
+
+		}
+
+		for (auto it = elm.Children.begin(); it != elm.Children.end(); ++it)
+		{
+			recursiveHtmlRender(*it, style);
+		}
+
+		style.popStyle();
+	}
+}
+
+// ***************************************************************************
+void runTestOnFile(const std::string &filename)
+{
+	CHtmlElement dom;
+
+	CHtmlParser htmlParser;
+
+	std::vector<CHtmlParser::StyleLink> links;
+	std::vector<std::string> styles;
+	//, elm, styles, links
+
+	ifstream f(filename);
+	if (!f.is_open())
+	{
+		printf("!! failed to open file '%s'\n", filename.c_str());
+		return;
+	}
+
+	printf(": %s\n", filename.c_str());
+	std::string htmlString;
+	std::string line;
+	while (getline(f, line))
+		htmlString += line;
+
+	htmlParser.getDOM(htmlString, dom, styles, links);
+
+	CCssStyle style;
+	for (std::string s : styles)
+	{
+		if (!s.empty())
+			style.parseStylesheet(s);
+	}
+
+	for (auto it = dom.Children.begin(); it != dom.Children.end(); ++it)
+		recursiveHtmlRender(*it, style);
+}
+
+// ***************************************************************************
+int main(int argc, const char *argv[])
+{
+	CApplicationContext *appContext = new CApplicationContext;
+
+	// htmlcss_test file.html
+	if (argc == 2)
+	{
+		runTestOnFile(argv[1]);
+	}
+	else
+	{
+		std::vector<std::string> result;
+		CPath::getPathContent("tests/", true /*recursive*/, false /*wantDir*/, true /*wantFile*/, result, NULL /*callback*/, true /*showEverything*/);
+		printf(":: got %ld files\n", result.size());
+		for (const auto &fname : result)
+		{
+			if (endsWith(fname, ".html") && fname != "tests/XX-template.html")
+				runTestOnFile(fname);
+		}
+	}
+
+	printf(">>> all done\n");
+	return EXIT_SUCCESS;
+}
diff --git a/nel/tools/htmlcss_test/tests/01-syntax-tests.html b/nel/tools/htmlcss_test/tests/01-syntax-tests.html
new file mode 100644
index 000000000..f9b2c9356
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/01-syntax-tests.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+:lang(en) { --text: '(en)'; }
+:lang(de-DE) { --text: '(de-DE)'; }
+a { test: " (" var(--lang) ")"}
+
+div {
+	/* '--a' and '--b' are both 'initial' */
+	--should-not-exist: var(--a, var(--b, ( "p() " ) ), { "b" [ "r" ] });
+	/* 'before -var- after' */
+	--concate-test: 'before' var(--exists) 'after';
+	--exists: '-var-';
+	/* fallback should be at least one char */
+	--invalid-fallback: var(--exists,);
+	/* using fallback */
+	--fallback: var(--a, 'ok');
+}
+		</style>
+		<div data-ruleset="--concate-test: 'before' '-var-' 'after'; --exists: '-var-'; --fallback: 'ok';"
+			data-ruleunset="--should-not-exists: 1; --invalid-fallback: 1;" />
+
+		<a lang="en" data-ruleset="--text: '(en)';">link</a>
+		<a lang="de" data-ruleunset="--text: 1;">link</a>
+
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/css-tricks/01-var-toggle.html b/nel/tools/htmlcss_test/tests/css-tricks/01-var-toggle.html
new file mode 100644
index 000000000..72e49b854
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/css-tricks/01-var-toggle.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+p {
+	--mq-sm: initial;
+}
+
+.small {
+	--mq-sm: ;
+}
+
+p {
+	--padding-when-small: var(--mq-sm) 2rem;
+	--padding-when-large: 4rem;
+	padding: var(--padding-when-small, var(--padding-when-large));
+}
+		</style>
+		<p data-ruleset="padding-left: 4rem;" comment="--mq-sm==initial, should use fallback value" />
+		<div>
+			<p class="small" data-ruleset="padding-left: 2rem;" comment="--mq-sm==;, should use defined value"/>
+		</div>
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e01.basic.html b/nel/tools/htmlcss_test/tests/custom-properties/e01.basic.html
new file mode 100644
index 000000000..c5085b8ef
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e01.basic.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+:root {
+	--main-color: #06c;
+	--accent-color: #006;
+}
+/* The rest of the CSS file */
+#foo h1 {
+	color: var(--main-color);
+}
+		</style>
+		<div id="foo">
+			<h1 data-ruleset="color: #06c;">Header</h1>
+		</div>
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e02.case-sensitive-name.html b/nel/tools/htmlcss_test/tests/custom-properties/e02.case-sensitive-name.html
new file mode 100644
index 000000000..1d9dc7b88
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e02.case-sensitive-name.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+:root {
+	--main-color: #06c;
+	--accent-color: #006;
+	--MAIN-COLOR: #f00;
+}
+/* The rest of the CSS file */
+#foo h1 {
+	color: var(--main-color);
+}
+h2 {
+	color: var(--MAIN-COLOR);
+}
+		</style>
+		<div id="foo">
+			<h1 data-ruleset="color: #06c;">Header1</h1>
+			<h2 data-ruleset="color: #f00;">Header2</h1>
+		</div>
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e03.value-syntax.html b/nel/tools/htmlcss_test/tests/custom-properties/e03.value-syntax.html
new file mode 100644
index 000000000..28f0a9c69
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e03.value-syntax.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+:root {
+	--foo: if(x > 5) this.width = 10;
+}
+/* The rest of the CSS file */
+#foo h1 {
+	test: var(--foo)
+}
+		</style>
+		<div id="foo">
+			<h1 data-ruleset="test: if(x > 5) this.width = 10;">Header</h1>
+		</div>
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e05.inherited.html b/nel/tools/htmlcss_test/tests/custom-properties/e05.inherited.html
new file mode 100644
index 000000000..bafbbf37f
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e05.inherited.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+:root { --color: blue; }
+div { --color: green; }
+#alert { --color: red; }
+* { color: var(--color); }
+		</style>
+		<p data-ruleset="color: blue;">I inherited blue from the root element!</p>
+		<div data-ruleset="color: green;">I got green set directly on me!</div>
+		<div id='alert' data-ruleset="color: red;">
+			While I got red set directly on me!
+			<p data-ruleset="color: red;">I’m red too, because of inheritance!</p>
+		</div>
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e06.i18n.html b/nel/tools/htmlcss_test/tests/custom-properties/e06.i18n.html
new file mode 100644
index 000000000..861e60412
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e06.i18n.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+a:lang(en) {--lang: 'en';}
+a:lang(de) {--lang: 'de';}
+a { test: var(--lang); }
+		</style>
+
+		<a lang="en" data-ruleset="test: 'en';">link</a>
+
+		<a lang="de" data-ruleset="test: 'de';">link</a>
+
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e07-safe-use-not-cyclic.html b/nel/tools/htmlcss_test/tests/custom-properties/e07-safe-use-not-cyclic.html
new file mode 100644
index 000000000..39ed3a299
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e07-safe-use-not-cyclic.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+:root {
+	--main-color: #c06;
+    --accent-background: var(--main-color);
+}
+div {
+	test: var(--accent-background);
+}
+		</style>
+		<div data-ruleset="test: #c06;"/>
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e08-cyclic.html b/nel/tools/htmlcss_test/tests/custom-properties/e08-cyclic.html
new file mode 100644
index 000000000..4d1f5fdd8
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e08-cyclic.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+div {
+	--one: calc(var(--two) + 20px);
+	--two: calc(var(--one) - 20px);
+	--ok: 'ok';
+}
+		</style>
+		<div data-ruleset="--ok: 'ok';"
+			data-ruleunset="--one: 1; --two: 1;" />
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e09-not-cyclic.html b/nel/tools/htmlcss_test/tests/custom-properties/e09-not-cyclic.html
new file mode 100644
index 000000000..f3e1788ee
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e09-not-cyclic.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+one   { --foo: 10px; }
+two   { --bar: calc(var(--foo) + 10px); }
+three { --foo: calc(var(--bar) + 10px); }
+		</style>
+		<one data-ruleset="--foo: 10px;">
+			<two data-ruleset="--bar: calc( 10px + 10px);">
+				<three data-ruleset="--foo: calc( calc( 10px + 10px) + 10px);"/>
+			</two>
+		</one>
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e10.fallback.html b/nel/tools/htmlcss_test/tests/custom-properties/e10.fallback.html
new file mode 100644
index 000000000..5d785bffa
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e10.fallback.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+/* In the component’s style: */
+.component .header {
+	color: var(--header-color, blue);
+}
+.component .text {
+	color: var(--text-color, black);
+}
+
+/* In the larger application’s style: */
+.component {
+	--text-color: #080;
+	/* header-color isn’t set, and so remains blue, the fallback value */
+}
+		</style>
+		<div class="component">
+			<h1 class="header" data-ruleset="color: blue;">header</h1>
+			<p class="text" data-ruleset="color: #080;">text</p>
+		</div>
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e11.1.invalid-property-name.html b/nel/tools/htmlcss_test/tests/custom-properties/e11.1.invalid-property-name.html
new file mode 100644
index 000000000..488e733a9
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e11.1.invalid-property-name.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+			div {
+			  --side: margin-top;
+			  var(--side): 20px;
+			}
+		</style>
+		<div data-ruleset="--side: margin-top;" data-ruleunset="var(--side): 1;" />
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e11.2.whitespace-after-var.html b/nel/tools/htmlcss_test/tests/custom-properties/e11.2.whitespace-after-var.html
new file mode 100644
index 000000000..a67b4ba1d
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e11.2.whitespace-after-var.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+			div {
+			  --gap: 20;
+			  margin-top: var(--gap)px;
+			}
+		</style>
+		<!-- should have whitespace, ie '20 px' -->
+		<div data-ruleset="margin-top: 20 px;" />
+	</body>
+</html>
diff --git a/nel/tools/htmlcss_test/tests/custom-properties/e13.invalid-variables.html b/nel/tools/htmlcss_test/tests/custom-properties/e13.invalid-variables.html
new file mode 100644
index 000000000..f60877d82
--- /dev/null
+++ b/nel/tools/htmlcss_test/tests/custom-properties/e13.invalid-variables.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<style>
+:root { --not-a-color: 20px; }
+p { background-color: red; }
+p { background-color: var(--not-a-color); }
+		</style>
+		<!-- this should have 'red' because var() has invalid value for color -->
+		<!-- TODO: not really supported by NEL currently -->
+		<div data-ruleset="background-color: red;" />
+	</body>
+</html>