WebUI Tab Strip: Fix tab group drag not working in RTL

Bug: 1027373
Change-Id: I0aa95bb619edffe9ee3ae6a83603777dc9fc6df8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2079376
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#745298}

chrome/browser/resources/tab_strip/tab_group.html

@@ -72,10 +72,14 @@
   --drag-image-padding: 25px;
   padding: var(--drag-image-padding);
   transform: translate(
-      calc(-1 * var(--drag-image-padding)),
+      calc(var(--drag-image-x-direction, -1) * var(--drag-image-padding)),
       calc(-1 * var(--drag-image-padding)));
 }
 
+:host-context([dir='rtl']):host([getting-drag-image_]) #dragImage {
+  --drag-image-x-direction: 1;
+}
+
 :host([getting-drag-image_]) #tabGroup {
   background: var(--tabstrip-background-color);
   border-radius: var(--tabstrip-tab-border-radius);

chrome/test/data/webui/tab_strip/tab_group_test.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://tab-strip/tab.js';
 import 'chrome://tab-strip/tab_group.js';
 
 suite('TabGroup', () => {
@@ -10,6 +11,8 @@ suite('TabGroup', () => {
   setup(() => {
     document.body.innerHTML = '';
     tabGroupElement = document.createElement('tabstrip-tab-group');
+    tabGroupElement.appendChild(document.createElement('tabstrip-tab'));
+    document.body.appendChild(tabGroupElement);
   });
 
   test('UpdatesVisuals', () => {
@@ -31,4 +34,25 @@ suite('TabGroup', () => {
         tabGroupElement.style.getPropertyValue(
             '--tabstrip-tab-group-text-color-rgb'));
   });
+
+  test('DraggableChipStaysInPlace', () => {
+    const originalChipRect = tabGroupElement.$('#chip').getBoundingClientRect();
+    tabGroupElement.setDragging(true);
+    const newChipRect = tabGroupElement.$('#chip').getBoundingClientRect();
+    assertEquals(originalChipRect.left, newChipRect.left);
+    assertEquals(originalChipRect.top, newChipRect.top);
+    assertEquals(originalChipRect.right, newChipRect.right);
+    assertEquals(originalChipRect.bottom, newChipRect.bottom);
+  });
+
+  test('DraggableChipStaysInPlaceInRTL', () => {
+    document.documentElement.dir = 'rtl';
+    const originalChipRect = tabGroupElement.$('#chip').getBoundingClientRect();
+    tabGroupElement.setDragging(true);
+    const newChipRect = tabGroupElement.$('#chip').getBoundingClientRect();
+    assertEquals(originalChipRect.left, newChipRect.left);
+    assertEquals(originalChipRect.top, newChipRect.top);
+    assertEquals(originalChipRect.right, newChipRect.right);
+    assertEquals(originalChipRect.bottom, newChipRect.bottom);
+  });
 });