--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
@@ -1,136 +1,136 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test for following keyframe marker.
 // * element existence
 // * title
-// * and left style
+// * and marginInlineStart style
 
 const TEST_DATA = [
   {
     targetClass: "multi-types",
     properties: [
       {
         name: "background-color",
         expectedValues: [
           {
             title: "rgb(255, 0, 0)",
-            left: "0%",
+            marginInlineStart: "0%",
           },
           {
             title: "rgb(0, 255, 0)",
-            left: "100%",
+            marginInlineStart: "100%",
           }
         ],
       },
       {
         name: "background-repeat",
         expectedValues: [
           {
             title: "space round",
-            left: "0%",
+            marginInlineStart: "0%",
           },
           {
             title: "round space",
-            left: "100%",
+            marginInlineStart: "100%",
           }
         ],
       },
       {
         name: "font-size",
         expectedValues: [
           {
             title: "10px",
-            left: "0%",
+            marginInlineStart: "0%",
           },
           {
             title: "20px",
-            left: "100%",
+            marginInlineStart: "100%",
           }
         ],
       },
       {
         name: "margin-left",
         expectedValues: [
           {
             title: "0px",
-            left: "0%",
+            marginInlineStart: "0%",
           },
           {
             title: "100px",
-            left: "100%",
+            marginInlineStart: "100%",
           }
         ],
       },
       {
         name: "opacity",
         expectedValues: [
           {
             title: "0",
-            left: "0%",
+            marginInlineStart: "0%",
           },
           {
             title: "1",
-            left: "100%",
+            marginInlineStart: "100%",
           }
         ],
       },
       {
         name: "text-align",
         expectedValues: [
           {
             title: "right",
-            left: "0%",
+            marginInlineStart: "0%",
           },
           {
             title: "center",
-            left: "100%",
+            marginInlineStart: "100%",
           }
         ],
       },
       {
         name: "transform",
         expectedValues: [
           {
             title: "translate(0px)",
-            left: "0%",
+            marginInlineStart: "0%",
           },
           {
             title: "translate(100px)",
-            left: "100%",
+            marginInlineStart: "100%",
           }
         ],
       },
     ],
   },
   {
     targetClass: "narrow-offsets",
     properties: [
       {
         name: "opacity",
         expectedValues: [
           {
             title: "0",
-            left: "0%",
+            marginInlineStart: "0%",
           },
           {
             title: "1",
-            left: "10%",
+            marginInlineStart: "10%",
           },
           {
             title: "0",
-            left: "13%",
+            marginInlineStart: "13%",
           },
           {
             title: "1",
-            left: "100%",
+            marginInlineStart: "100%",
           },
         ],
       },
     ],
   }
 ];
 
 add_task(async function() {
@@ -158,15 +158,16 @@ add_task(async function() {
         info(`Checking ${ hintTarget }`);
         const markerEl = markerEls[i];
         const expectedValue = expectedValues[i];
 
         info(`Checking title in ${ hintTarget }`);
         is(markerEl.getAttribute("title"), expectedValue.title,
          `title in ${ hintTarget } should be ${ expectedValue.title }`);
 
-        info(`Checking left style in ${ hintTarget }`);
-        is(markerEl.style.left, expectedValue.left,
-         `left in ${ hintTarget } should be ${ expectedValue.left }`);
+        info(`Checking marginInlineStart style in ${ hintTarget }`);
+        is(markerEl.style.marginInlineStart, expectedValue.marginInlineStart,
+          `marginInlineStart in ${ hintTarget } should be ` +
+          `${ expectedValue.marginInlineStart }`);
       }
     }
   }
 });

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
@@ -1,51 +1,51 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test for following DelaySign component works.
 // * element existance
-// * left position
+// * marginInlineStart position
 // * width
 // * additinal class
 
 const TEST_DATA = [
   {
     targetClass: "delay-positive",
     expectedResult: {
-      left: "25%",
+      marginInlineStart: "25%",
       width: "25%",
     },
   },
   {
     targetClass: "delay-negative",
     expectedResult: {
       additionalClass: "negative",
-      left: "0%",
+      marginInlineStart: "0%",
       width: "25%",
     },
   },
   {
     targetClass: "fill-backwards-with-delay-iterationstart",
     expectedResult: {
       additionalClass: "fill",
-      left: "25%",
+      marginInlineStart: "25%",
       width: "25%",
     },
   },
   {
     targetClass: "fill-both",
   },
   {
     targetClass: "fill-both-width-delay-iterationstart",
     expectedResult: {
       additionalClass: "fill",
-      left: "25%",
+      marginInlineStart: "25%",
       width: "25%",
     },
   },
   {
     targetClass: "keyframes-easing-step",
   },
 ];
 
@@ -59,18 +59,18 @@ add_task(async function() {
       findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);
 
     info(`Checking delay sign existance for ${ targetClass }`);
     const delaySignEl = animationItemEl.querySelector(".animation-delay-sign");
 
     if (expectedResult) {
       ok(delaySignEl, "The delay sign element should be in animation item element");
 
-      is(delaySignEl.style.left, expectedResult.left,
-        `Left position should be ${ expectedResult.left }`);
+      is(delaySignEl.style.marginInlineStart, expectedResult.marginInlineStart,
+        `marginInlineStart position should be ${ expectedResult.marginInlineStart }`);
       is(delaySignEl.style.width, expectedResult.width,
         `Width should be ${ expectedResult.width }`);
 
       if (expectedResult.additionalClass) {
         ok(delaySignEl.classList.contains(expectedResult.additionalClass),
           `delay sign element should have ${ expectedResult.additionalClass } class`);
       } else {
         ok(!delaySignEl.classList.contains(expectedResult.additionalClass),

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
@@ -1,40 +1,40 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test for following EndDelaySign component works.
 // * element existance
-// * left position
+// * marginInlineStart position
 // * width
 // * additinal class
 
 const TEST_DATA = [
   {
     targetClass: "enddelay-positive",
     expectedResult: {
-      left: "75%",
+      marginInlineStart: "75%",
       width: "25%",
     },
   },
   {
     targetClass: "enddelay-negative",
     expectedResult: {
       additionalClass: "negative",
-      left: "50%",
+      marginInlineStart: "50%",
       width: "25%",
     },
   },
   {
     targetClass: "enddelay-with-fill-forwards",
     expectedResult: {
       additionalClass: "fill",
-      left: "75%",
+      marginInlineStart: "75%",
       width: "25%",
     },
   },
   {
     targetClass: "enddelay-with-iterations-infinity",
   },
   {
     targetClass: "delay-negative",
@@ -51,18 +51,18 @@ add_task(async function() {
       findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);
 
     info(`Checking endDelay sign existance for ${ targetClass }`);
     const endDelaySignEl = animationItemEl.querySelector(".animation-end-delay-sign");
 
     if (expectedResult) {
       ok(endDelaySignEl, "The endDelay sign element should be in animation item element");
 
-      is(endDelaySignEl.style.left, expectedResult.left,
-        `Left position should be ${ expectedResult.left }`);
+      is(endDelaySignEl.style.marginInlineStart, expectedResult.marginInlineStart,
+        `marginInlineStart position should be ${ expectedResult.marginInlineStart }`);
       is(endDelaySignEl.style.width, expectedResult.width,
         `Width should be ${ expectedResult.width }`);
 
       if (expectedResult.additionalClass) {
         ok(endDelaySignEl.classList.contains(expectedResult.additionalClass),
           `endDelay sign element should have ${ expectedResult.additionalClass } class`);
       } else {
         ok(!endDelaySignEl.classList.contains(expectedResult.additionalClass),