ant-design/scripts/visual-regression/report-template.html
vagusX b42ffe64f4
scripts(visual-regression): show target filename (#48444)
* scripts(visual-regression): show target filename

* feat: update

* feat: show filename

* feat: update
2024-04-15 14:40:10 +08:00

116 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ant Design Visual Diff Report</title>
<link href="https://unpkg.com/antd@latest/dist/reset.css" rel="stylesheet" />
<style>
body {
padding-top: 16px;
padding-bottom: 16px;
}
/* figcaption */
figcaption {
color: #a3a3a3;
text-align: center;
}
figure {
cursor: pointer;
}
/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
vertical-align: top;
}
td img {
max-width: 100%;
}
th,
td {
width: 33%;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
/* Hover Effect */
tr:hover {
background-color: #e5e5e5;
}
/* Responsive Table */
@media screen and (max-width: 600px) and (min-width: 1px) {
table {
border: 0;
}
th,
td {
display: block;
padding: 6px;
border: none;
}
th {
text-align: left;
background-color: transparent;
}
tr:nth-child(even) {
background-color: transparent;
}
tr:nth-child(odd) {
background-color: transparent;
}
tr:hover {
background-color: transparent;
}
}
</style>
</head>
<body>
{{reportContent}}
<script>
window.addEventListener('click', function (e) {
if (e.target.tagName === 'FIGCAPTION') {
// get previous sibling
const img = e.target.previousElementSibling;
if (img.tagName === 'IMG' && img.src) {
window.open(img.src, '_blank');
}
}
if (e.target.tagName === 'IMG' && e.target.src) {
window.open(e.target.src, '_blank');
}
});
</script>
</body>
</html>