Login: Fix horizontal flip for supervised user image grid.

Use flipped image instead of relying on css transform for image
preview. This allows both the grid image and the image preview
to be displayed correctly.

Bug: 779519
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Icd0fb45f1dc433d490f24d5342c250197e96c11b
Reviewed-on: https://chromium-review.googlesource.com/743693Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: David Reveman <reveman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#512564}

chrome/browser/resources/chromeos/login/screen_supervised_user_creation.css

@@ -420,10 +420,6 @@ html[dir=rtl] #supervised-user-creation-image-preview {
   display: none;
 }
 
-.camera #supervised-user-creation-image-preview-img {
-  transform: rotateY(180deg);
-}
-
 .default-image #supervised-user-creation-image-preview-img {
   background: white;
   border: solid 1px #cacaca;

chrome/browser/resources/chromeos/user_images_grid.js

@@ -462,9 +462,10 @@ cr.define('options', function() {
         this.cameraTitle_ = this.capturedImageTitle_;
         this.cameraImage = previewImg.src;
       }.bind(this));
-      previewImg.src = canvas.toDataURL('image/png');
+      var imageUrl = this.flipFrame_(canvas);
+      previewImg.src = imageUrl;
       var e = new Event('phototaken');
-      e.dataURL = this.flipFrame_(canvas);
+      e.dataURL = imageUrl;
       this.dispatchEvent(e);
       return true;
     },