Fix tearing with SkiaOutputDeviceBufferQueue

The tearing is because the displayed_image_->EndPresent() is called
in wrong place. It should be called when the displayed_image_ is being
replaced by a new image.

Bug: 1036566
Change-Id: Ic12c41d0191e9ad62638f931bce03c9d44a31c73
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1988687Reviewed-by: Vasiliy Telezhnikov <vasilyt@chromium.org>
Commit-Queue: Peng Huang <penghuang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#728658}

components/viz/service/display_embedder/skia_output_device_buffer_queue.cc

@@ -315,11 +315,11 @@ void SkiaOutputDeviceBufferQueue::PageFlipComplete() {
   DCHECK(!in_flight_images_.empty());
 
   if (in_flight_images_.front()) {
-    if (displayed_image_)
+    if (displayed_image_) {
+      displayed_image_->EndPresent();
       available_images_.push_back(std::move(displayed_image_));
+    }
     displayed_image_ = std::move(in_flight_images_.front());
-    if (displayed_image_)
-      displayed_image_->EndPresent();
   }
 
   in_flight_images_.pop_front();