diff --git a/crates/mdbook-html/front-end/js/book.js b/crates/mdbook-html/front-end/js/book.js
index fe74b710..3790ccd8 100644
--- a/crates/mdbook-html/front-end/js/book.js
+++ b/crates/mdbook-html/front-end/js/book.js
@@ -658,6 +658,12 @@ aria-label="Show hidden lines">';
})();
(function chapterNavigation() {
+ function zoomOutImages() {
+ for (const elem of Array.from(document.querySelectorAll('input.checkbox-img'))) {
+ elem.checked = false;
+ }
+ }
+
document.addEventListener('keydown', function(e) {
if (e.altKey ||
e.ctrlKey ||
@@ -724,6 +730,9 @@ aria-label="Show hidden lines">';
e.preventDefault();
showHelp();
break;
+ case 'Escape':
+ zoomOutImages();
+ break;
}
// Rest of the keys are only active when the Shift key is not pressed
diff --git a/tests/gui/image-zoom.goml b/tests/gui/image-zoom.goml
index 0dfe9d9e..79df878c 100644
--- a/tests/gui/image-zoom.goml
+++ b/tests/gui/image-zoom.goml
@@ -11,17 +11,36 @@ define-function: (
},
)
+define-function: (
+ "check-image-zoomed-in",
+ [],
+ block {
+ // The image wrapper should now be displayed and have a "zoom-out" cursor.
+ assert-css: (".checkbox-label > .img-wrapper", {"display": "flex", "cursor": "zoom-out"})
+ // Same for the image it contains.
+ assert-css: (
+ ".checkbox-label > .img-wrapper img",
+ {"display": "block", "cursor": "zoom-out"},
+ )
+ },
+)
+
go-to: |DOC_PATH| + "basic/index.html"
call-function: ("check-image-not-zoomed-in", {})
// We click on the image to "zoom in".
click: ".checkbox-label > img"
-// The image wrapper should now be displayed and have a "zoom-out" cursor.
-assert-css: (".checkbox-label > .img-wrapper", {"display": "flex", "cursor": "zoom-out"})
-// Same for the image it contains.
-assert-css: (".checkbox-label > .img-wrapper img", {"display": "block", "cursor": "zoom-out"})
+call-function: ("check-image-zoomed-in", {})
// We click on the wrapper to "zoom out".
click: ".checkbox-label > img"
// We check that everything is back to the previous state.
call-function: ("check-image-not-zoomed-in", {})
+
+// We test that the "escape" key also hides the "zoomed in" image.
+// We click on the image to "zoom in".
+click: ".checkbox-label > img"
+call-function: ("check-image-zoomed-in", {})
+press-key: "Escape"
+// We check that everything is back to the previous state.
+call-function: ("check-image-not-zoomed-in", {})