Skip to content

Commit

Permalink
[IMP] add some comparison testing for flex box
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gorash
Gorash committed Sep 19, 2024
1 parent 97b9d1f commit ce81106
Show file tree
Hide file tree
Showing 4 changed files with 420 additions and 4 deletions.
2 changes: 1 addition & 1 deletion ck
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ if [ ! -f .cutekit/tools-ready ]; then
mkdir -p .cutekit
if [ ! -d .cutekit/venv ]; then
echo "Setting up Python virtual environment..."
python3 -m venv .cutekit/venv
python3.11 -m venv .cutekit/venv
fi
source .cutekit/venv/bin/activate

Expand Down
66 changes: 63 additions & 3 deletions meta/plugins/reftest.py
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
from cutekit import shell, vt100, cli, builder, model
from pathlib import Path
import dataclasses as dt
from dataclasses_json import DataClassJsonMixin
import tempfile
import re
import textwrap
import difflib


def buildPaperMuncher(args: model.TargetArgs) -> builder.ProductScope:
Expand Down Expand Up @@ -38,3 +38,63 @@ def _(args: model.TargetArgs):
print(f"{vt100.GREEN}Passed{vt100.RESET}")
else:
print(f"{vt100.RED}Failed{vt100.RESET}")

for file in shell.find("tests", ["*.xml"]):
print(f"Running comparison test {file}...")

temp = Path(file).parent / '.tmp.xhtml'

with Path(file).open() as ref:
content = ref.read()

for name, test in re.findall(r"""<test\s*(?:name=['"]([^'"]+)['"])?\s*>([\w\W]+?)</test>""", content):
search = re.search(r"""<container>([\w\W]+?)</container>""", content)
container = search and search.group(1)

ref = None
ref_xhtml = None
for tag, rendering in re.findall(r"""<(rendering|error)>([\w\W]+?)</(?:rendering|error)>""", test):
if container:
xhtml = container.replace("<slot/>", rendering)
else:
xhtml = rendering

with temp.open("w") as f:
f.write(f"<!DOCTYPE html>\n{textwrap.dedent(xhtml)}")

output = paperMuncher.popen("html2pdf", "-sdlpo", "/dev/null", temp)

if not ref_xhtml:
ref_xhtml = rendering
ref = output
continue

ref_result = ref.split('---')[-3]
output_result = output.split('---')[-3]

is_same = ref_result == output_result

if is_same == (tag == 'rendering'):
print(f"{vt100.GREEN}Passed{vt100.RESET}")
else:
if tag == 'error':
print(f"{vt100.RED}Failed {name!r} (The result should be different){vt100.RESET}")
print(f"{vt100.WHITE}{ref_xhtml[1:].rstrip()}{vt100.RESET}")
print(f"{vt100.BLUE}{rendering[1:].rstrip()}{vt100.RESET}")
else:
print(f"{vt100.RED}Failed {name!r}{vt100.RESET}")
print(f"{vt100.WHITE}{ref_xhtml[1:].rstrip()}{vt100.RESET}")
print(f"{vt100.BLUE}{rendering[1:].rstrip()}{vt100.RESET}")

diff_html = []
theDiffs = difflib.ndiff(ref_result.splitlines(), output_result.splitlines())
for eachDiff in theDiffs:
if eachDiff[0] == "-":
diff_html.append(f"{vt100.RED}{eachDiff}{vt100.RESET}")
elif eachDiff[0] == "+":
diff_html.append(f"{vt100.GREEN}{eachDiff}{vt100.RESET}")
elif eachDiff[0] != "?":
diff_html.append(eachDiff)
print('\n'.join(diff_html))

temp.unlink()
259 changes: 259 additions & 0 deletions tests/css/display-block.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
<test name="display: block">
<container>
<html lang="en">
<head>
<style>
div {
width: 25px;
height: 100px;
}
div.w-200 {
width: 200px;
border: 1px solid black;
}
div.w-100 {
width: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<slot/>
</body>
</html>
</container>

<rendering>
<div class="w-200">
<div class="w-100 red"></div>
<div class="w-100 green"></div>
</div>
</rendering>

<rendering>
<div class="w-200">
<div class="w-100 red" style="width: 50%;"></div>
<div class="w-100 green"></div>
</div>
</rendering>

<rendering>
<div class="w-200">
<div class="w-100 red" style="width: 100px;"></div>
<div class="w-100 green"></div>
</div>
</rendering>

<error>
<div class="w-200">
<div class="red"></div>
<div class="w-100 green"></div>
</div>
</error>

<error>
<div class="w-200">
<div class="w-100 red" style="width: 51%;"></div>
<div class="w-100 green"></div>
</div>
</error>

<error>
<div class="w-200">
<div class="w-100 red" style="width: 101px;"></div>
<div class="w-100 green"></div>
</div>
</error>

<rendering>
<div class="w-200">
<div class="w-100 red"></div>
<div class="w-100 green" style="width: 50%;"></div>
</div>
</rendering>

<rendering>
<div class="w-200">
<div class="w-100 red" style="width: 50%;"></div>
<div class="w-100 green" style="width: 50%;"></div>
</div>
</rendering>

<rendering>
<div class="w-200" style="position: relative;">
<div class="w-100 red"></div>
<div class="w-100 green" style="position: absolute; top: 100px;"></div>
</div>
</rendering>
</test>

<test name="display: inline-block">
<container>
<html lang="en">
<head>
<style>
div {
width: 25px;
height: 100px;
}
div.w-200 {
width: 200px;
border: 1px solid black;
}
div.w-100 {
width: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
div.inline-block {
display: inline-block;
}
</style>
</head>
<body>
<slot/>
</body>
</html>
</container>

<rendering>
<div class="w-200">
<div class="w-100 red"></div>
<div class="w-100 green"></div>
</div>
</rendering>

<rendering>
<div class="w-200">
<div class="w-100 red"></div>
<div class="inline-block w-100 green"></div>
</div>
</rendering>

<error>
<div class="w-200">
<div class="inline-block w-100 red"></div>
<div class="w-100 green"></div>
</div>
</error>

<rendering>
<div class="w-200" style="line-height: 0;">
<div class="inline-block w-100 red"></div>
<div class="w-100 green"></div>
</div>
</rendering>

<rendering>
<div class="w-200" style="font-size: 0;">
<div class="inline-block w-100 red"></div>
<div class="w-100 green"></div>
</div>
</rendering>

<rendering>
<div class="w-200" style="position: relative;">
<div class="inline-block w-100 red"></div>
<div class="w-100 green" style="position: absolute; top: 100px;"></div>
</div>
</rendering>

<error>
<div class="w-200">
<div class="inline-block w-100 red"></div>
<div class="inline-block w-100 green"></div>
</div>
</error>

<rendering>
<div class="w-200" style="line-height: 0;">
<div class="inline-block w-100 red"></div>
<div class="inline-block w-100 green"></div>
</div>
</rendering>

<error>
<div class="w-200" style="font-size: 0;">
<div class="inline-block w-100 red"></div>
<div class="inline-block w-100 green"></div>
</div>
</error>

<rendering>
<div class="w-200" style="line-height: 0; font-size: 1px;">
<div class="inline-block w-100 red"></div>
<div class="inline-block w-100 green"></div>
</div>
</rendering>

<error>
<div class="w-200" style="line-height: 0; font-size: 0px;">
<div class="inline-block w-100 red"></div>
<div class="inline-block w-100 green"></div>
</div>
</error>

<error>
<div class="w-200" style="line-height: 0; font-size: 1px; width: 201px;">
<div class="inline-block w-100 red"></div>
<div class="inline-block w-100 green"></div>
</div>
</error>
</test>

<test name="display: inline">
<container>
<html lang="en">
<head>
<style>
div {
width: 25px;
height: 100px;
}
div.w-200 {
width: 200px;
border: 1px solid black;
}
div.w-100 {
width: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
div.inline {
display: inline;
}
</style>
</head>
<body>
<slot/>
</body>
</html>
</container>

<rendering>
<div class="w-200">
<div class="w-100 red"></div>
<div class="w-100 green"></div>
</div>
</rendering>

<error>
<div class="w-200">
<div class="inline w-100 red"></div>
<div class="w-100 green"></div>
</div>
</error>
</test>
Loading

0 comments on commit ce81106

Please sign in to comment.