diff --git a/css/css-grid/alignment/grid-alignment-style-changes-003.html b/css/css-grid/alignment/grid-alignment-style-changes-003.html
index 5c63fd82b8ee76b..dc7f350af51d5a7 100644
--- a/css/css-grid/alignment/grid-alignment-style-changes-003.html
+++ b/css/css-grid/alignment/grid-alignment-style-changes-003.html
@@ -37,15 +37,15 @@
 <script>
 function runTest() {
     let before = {
-        item1: {"data-offset-x": 10 },
-        item2: {"data-offset-x": 10 },
-        item3: {"data-offset-x": 10 }
+        item1: {"data-offset-x": 40 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 40 }
     };
 
     let after = {
-        item1: {"data-offset-x": 0 },
+        item1: {"data-offset-x": 70 },
         item2: {"data-offset-x": 40 },
-        item3: {"data-offset-x": 0  }
+        item3: {"data-offset-x": 70 }
     };
 
     evaluateStyleChangeMultiple("before", before);
diff --git a/css/css-grid/alignment/grid-alignment-style-changes-004.html b/css/css-grid/alignment/grid-alignment-style-changes-004.html
index c7d004657ee8a68..84475fdbce99973 100644
--- a/css/css-grid/alignment/grid-alignment-style-changes-004.html
+++ b/css/css-grid/alignment/grid-alignment-style-changes-004.html
@@ -38,15 +38,15 @@
 <script>
 function runTest() {
     let before = {
-        item1: {"data-offset-x": 0 },
+        item1: {"data-offset-x": 70 },
         item2: {"data-offset-x": 25 },
-        item3: {"data-offset-x": 0 }
+        item3: {"data-offset-x": 70 }
     };
 
     let after = {
-        item1: {"data-offset-x": 10 },
-        item2: {"data-offset-x": 10 },
-        item3: {"data-offset-x": 10 }
+        item1: {"data-offset-x": 40 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 40 }
     };
 
     evaluateStyleChangeMultiple("before", before);
diff --git a/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html b/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
index 3939c5b46207819..c9e630cbac40c15 100644
--- a/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
+++ b/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
@@ -41,7 +41,7 @@
 
 <div class="grid width300 justifyItemsBaseline">
   <div class="firstRowFirstColumn"                                   data-offset-x="0" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
-  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="75"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
   <div class="autoRowSpanning2AutoColumn width25"></div>
 </div>
 
diff --git a/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html b/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
index f2f23cbe2650dd3..e96f8da6e724b0e 100644
--- a/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
+++ b/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
@@ -52,7 +52,7 @@
 
 <div class="grid width300 justifyItemsBaseline">
   <div class="firstRowFirstColumn fixedWidth"                        data-offset-x="0" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="80"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
   <div class="autoRowSpanning2AutoColumn width25"></div>
 </div>
 
diff --git a/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html b/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
index 1160895f401808c..19a4f5193bfb129 100644
--- a/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
+++ b/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
@@ -52,7 +52,7 @@
 
 <div class="grid width300 justifyItemsBaseline">
   <div class="firstRowFirstColumn relativeWidth"                    data-offset-x="00" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="80"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
   <div class="autoRowSpanning2AutoColumn width25"></div>
 </div>
 
diff --git a/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html b/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
index 460a4537eb71c60..1b563f1f42ad319 100644
--- a/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
+++ b/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
@@ -37,5 +37,19 @@
 </style>
 
 <p>4x1 with orthogonal items, but opposite block-flow direction.</p>
-<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
-<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 23px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 23px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
diff --git a/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html b/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
index 9c2f6e45218962e..8593ea1abce9757 100644
--- a/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
+++ b/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
@@ -36,7 +36,35 @@
 </style>
 
 <p>1x4 with parallel items, but opposite block-flow direction.</p>
-<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
-<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
-<div class="block verticalRL"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
-<div class="block verticalRL"><div class="block1"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
diff --git a/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html b/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
index e92a90ef26941dc..cba725f4256d67c 100644
--- a/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
+++ b/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
@@ -31,5 +31,19 @@
 </style>
 
 <p>4x1 with orthogonal items, but opposite block-flow direction.</p>
-<div class="block verticalLR"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div></div>
-<div class="block verticalLR"><div class="block1"><div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalRL">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 10px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html b/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
index fe00a5f5a2eb748..6f5641448d588dc 100644
--- a/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
+++ b/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
@@ -30,5 +30,19 @@
 </style>
 
 <p>1x4 with parallel items, but opposite block-flow direction.</p>
-<div class="block verticalLR"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div>
-<div class="block verticalLR"><div class="block1"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div></div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalRL">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left:15.5px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html b/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
index ffa3e0512a90d43..30658b8cc730598 100644
--- a/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
+++ b/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
@@ -30,5 +30,19 @@
 </style>
 
 <p>1x4 with parallel items, but opposite block-flow direction.</p>
-<div class="block verticalRL"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalLR"><div class="item">É</div><div class="item">É</div></div></div>
-<div class="block verticalRL"><div class="block1"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div></div><div class="block2 verticalLR"><div class="item">É</div><div class="item">É</div></div></div></div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalLR">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 16px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html b/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html
index e56de9f1b3dae00..cd80fd3873b3f2d 100644
--- a/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html
+++ b/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html
@@ -56,20 +56,20 @@
 <div id="log"></div>
 
 <div class="grid" style="grid-template-columns: minmax(auto, 0px);">
-  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
-  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="item1" data-offset-x="-25" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="25" data-offset-y="50"></div>
   <div class="area" data-expected-width="75" data-expected-height="100"></div>
 </div>
 
 <div class="grid" style="grid-template-columns: minmax(auto, 75px);">
-  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
-  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="item1" data-offset-x="-25" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="25" data-offset-y="50"></div>
   <div class="area" data-expected-width="75" data-expected-height="100"></div>
 </div>
 
 <div class="grid" style="grid-template-columns: minmax(auto, 88px);">
-  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
-  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="item1" data-offset-x="-12" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="38" data-offset-y="50"></div>
   <div class="area" data-expected-width="88" data-expected-height="100"></div>
 </div>