Fix full-page screenshots in some circumstances.

lib/capybara/apparition/page.rb

@@ -157,7 +157,7 @@ def render(options)
           %w[x y width height].each_with_object({}) { |key, hash| hash[key] = pos[key] }
         elsif options[:full]
           evaluate <<~JS
-            { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight}
+            { width: document.documentElement.scrollWidth, height: document.documentElement.scrollHeight}
           JS
         else
           evaluate <<~JS

spec/integration/driver_spec.rb

@@ -145,13 +145,16 @@ def session_url(path)
         @session.visit('/apparition/long_page')
 
         create_screenshot file
-        expect(FastImage.size(file)).to eq(
+        screenshot_size = FastImage.size(file)
+        expect(screenshot_size).to eq(
           @driver.evaluate_script('[window.innerWidth, window.innerHeight]')
         )
 
         create_screenshot file, full: true
-        expect(FastImage.size(file)).to eq(
-          @driver.evaluate_script('[document.documentElement.clientWidth, document.documentElement.clientHeight]')
+        full_screenshot_size = FastImage.size(file)
+        expect(full_screenshot_size).not_to eq(screenshot_size)
+        expect(full_screenshot_size).to eq(
+          @driver.evaluate_script('[document.documentElement.scrollWidth, document.documentElement.scrollHeight]')
         )
       end
 
@@ -185,7 +188,7 @@ def session_url(path)
         create_screenshot file, full: true, selector: '#penultimate'
 
         expect(FastImage.size(file)).to eq(
-          @driver.evaluate_script('[document.documentElement.clientWidth, document.documentElement.clientHeight]')
+          @driver.evaluate_script('[document.documentElement.scrollWidth, document.documentElement.scrollHeight]')
         )
       end
 

spec/support/views/long_page.erb

@@ -1,3 +1,9 @@
+<style>
+  html {
+    height: 100%;
+  }
+</style>
+
 <div style="min-width: 300">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacus odio, dapibus id bibendum in, rhoncus sed dolor. In quis nulla at diam euismod suscipit vitae vitae sapien. Nam viverra hendrerit augue a accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce fermentum tortor at neque malesuada sodales. Nunc quis augue a quam venenatis pharetra sit amet et risus. Nulla pharetra enim a leo varius scelerisque aliquam urna vestibulum. Sed felis eros, iaculis convallis fermentum ac, condimentum ac lacus. Sed turpis magna, tristique eu faucibus non, faucibus vitae elit. Morbi venenatis adipiscing aliquam.</p>
 
@@ -38,4 +44,4 @@
   <p id="penultimate">Praesent viverra, augue vel vestibulum gravida, diam mauris sodales massa, eget cursus nisi sem in libero. Sed convallis molestie pellentesque. Ut vel ipsum massa, sit amet cursus quam. Nullam dapibus, elit eu lobortis malesuada, tellus ante consectetur diam, eget dignissim mi ante in nisl. Mauris egestas bibendum laoreet. Morbi tincidunt feugiat magna, et rutrum lectus laoreet eget. Ut ac tortor ante. In odio tortor, rhoncus a rhoncus sed, viverra ultrices metus. Quisque mollis massa velit, cursus auctor ligula. Quisque egestas arcu erat.</p>
 
   <p><a href="/">Phasellus blandit velit</a> non dolor bibendum eleifend. In lobortis metus vel lorem auctor fermentum nec pulvinar nisl. Vestibulum urna mauris, malesuada quis viverra sit amet, convallis vel arcu. Mauris quis tortor ipsum, ac cursus erat. Cras laoreet accumsan elit, sed convallis nibh scelerisque vel. Praesent nec nunc dolor, et rutrum sem. Integer sagittis imperdiet arcu, et dictum nisl mattis eget. In sapien tellus, eleifend ut accumsan id, aliquam quis risus. Cras viverra neque et augue fringilla eu malesuada felis tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer a magna non tellus fringilla gravida sed quis justo. Cras pulvinar ultricies tincidunt. Nullam hendrerit risus id massa feugiat iaculis. Duis rhoncus ipsum dolor, ut semper dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
-</div>
+</div>