if the capture selector matches multiple elements, make sure all of the elements will be captured and visible in the screenshot

2 files changed, 23 insertions, 1 deletions

diff --git a/tests/PHPUnit/UI b/tests/PHPUnit/UI
-Subproject 38cc1225c722d9a722221d2fc7796a6b8120635
+Subproject 0af99d928e2dc3c7dd5d6e4de865d0d89d03749
diff --git a/tests/lib/screenshot-testing/support/page-renderer.js b/tests/lib/screenshot-testing/support/page-renderer.js
index 1124873f3a..ab9c0f170e 100644
--- a/tests/lib/screenshot-testing/support/page-renderer.js
+++ b/tests/lib/screenshot-testing/support/page-renderer.js
@@ -237,7 +237,29 @@ PageRenderer.prototype.capture = function (outputPath, callback, selector) {
             var element = window.jQuery(selector);
 
             if (element && element.length) {
-                return element[0].getBoundingClientRect();
+                var clipRect = {bottom: null, height: null, left: null, right: null, top: null, width: null};
+
+                element.each(function (index, node) {
+                    var rect = node.getBoundingClientRect();
+
+                    if (null === clipRect.left || rect.left < clipRect.left) {
+                        clipRect.left = rect.left;
+                    }
+                    if (null === clipRect.top || rect.top < clipRect.top) {
+                        clipRect.top = rect.top;
+                    }
+                    if (null === clipRect.right || rect.right > clipRect.right) {
+                        clipRect.right = rect.right;
+                    }
+                    if (null === clipRect.bottom || rect.bottom > clipRect.bottom) {
+                        clipRect.bottom = rect.bottom;
+                    }
+                });
+
+                clipRect.width  = clipRect.right - clipRect.left;
+                clipRect.height = clipRect.bottom - clipRect.top;
+
+                return clipRect;
             }
 
         }, selector);