pytest-dev · mganisin · Nov 23, 2022
diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss
@@ -141,6 +141,7 @@ div.image {
 	margin-left: $spacing;
 	overflow: hidden;
 	width: $extra-media-width;
+	cursor: zoom-in;
 
 	img {
 		width: $extra-media-width;
@@ -215,3 +216,28 @@ div.video {
 		border-top: $triangle-width solid #999;
 	}
 }
+
+
+/*---------------------------
+ * 4. Zoom in self-contained
+ *---------------------------*/
+
+#large {
+	display: none;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 100;
+	position: fixed;
+	margin: auto;
+	overflow: scroll;
+	cursor: zoom-out;
+	background: rgba(0,0,0,0.5) no-repeat center;
+
+	img {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
diff --git a/src/pytest_html/html_report.py b/src/pytest_html/html_report.py
@@ -201,6 +201,9 @@ def _generate_report(self, session):
 
         body.extend(results)
 
+        if self.self_contained:
+            body.append(html.div(html.img(), id="large", onclick="zoomOut()"))
+
         doc = html.html(head, body)
 
         unicode_doc = "<!DOCTYPE html>\n{}".format(doc.unicode(indent=2))

diff --git a/src/pytest_html/resources/main.js b/src/pytest_html/resources/main.js
@@ -111,6 +111,23 @@ function addCollapse() {
     });
 }
 
+function zoomIn(event) {
+    const large = find('#large');
+    find('img', large).setAttribute('src', event.target.getAttribute('src'));
+    large.style.display = 'block';
+    large.scrollTop = 0;
+}
+
+function zoomOut() { // eslint-disable-line no-unused-vars
+    find('#large').style.display = 'none';
+}
+
+function addZoomIn() {
+    findAll('.image img').forEach(function(elem) {
+        elem.addEventListener('click', zoomIn);
+    });
+}
+
 function getQueryParameter(name) {
     const match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
     return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
@@ -121,6 +138,8 @@ function init () { // eslint-disable-line no-unused-vars
 
     addCollapse();
 
+    addZoomIn();
+
     showFilters();
 
     sortColumn(find('.initial-sort'));

diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css