Bug 1490730 part 2 - [css-grid] Static position should use content-box, not padding-box. Test reference updates.
authorMats Palmgren <mats@mozilla.com>
Sat, 15 Sep 2018 01:30:18 +0200
changeset 436475 69980706914c31ea69ce66eaeacdfe0cae78ee8c
parent 436474 df4e19315cd308ce146ffb6dd81385b4e690833a
child 436476 e5c0ba4149fe7c83ea78e7d356b216577a417642
push id107864
push usermpalmgren@mozilla.com
push dateFri, 14 Sep 2018 23:30:30 +0000
treeherdermozilla-inbound@e5c0ba4149fe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1490730
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1490730 part 2 - [css-grid] Static position should use content-box, not padding-box. Test reference updates.
layout/reftests/css-grid/grid-abspos-items-015-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html
testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html
--- a/layout/reftests/css-grid/grid-abspos-items-015-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-015-ref.html
@@ -33,17 +33,17 @@ separator { clear:both; display:block; h
   writing-mode: vertical-lr; direction:rtl;
   z-index:1;
 }
 
 abs1,abs2,abs3,abs4 {
   grid-area: 2 / 2 / 3 / 3;
   position: absolute;
 }
-abs1 { height:97px; top:-12px; left:-37px; background:lime; }
+abs1 { height:97px; top:-12px; left:-30px; background:lime; }
 abs2 { right:-18px; left:3px; background:pink; }
 abs3 { top: -20px; left:-35px; right:-26px; background:cyan; }
 abs4 { top:-6px; bottom:-53px; background:silver; }
 abs1::before { content:"1";}
 abs2::before { content:"2";}
 abs3::before { content:"3";}
 abs4::before { content:"4";}
 
@@ -62,19 +62,19 @@ abs4::before { content:"4";}
 
 .hl abs2, .hr abs2 { top:-25px; }
 .hl abs2 { left:-43px; }
 .hr abs2 { left:-32px; right:-29px; }
 .vl abs2, .vr abs2, .vrl abs2, .vlr abs2 { left:-38px; right:-41px; }
 .vr abs2, .vrl abs2 { left:-55px; right:-24px; }
 .vrl abs2 { top:-16px; }
 
-.hr abs1 { left: 94px; }
-.vl abs1, .vr abs1, .vrl abs1, .vlr abs1 { top:-6px; left:-32px; }
-.vr abs1, .vrl abs1 { left:71px; }
+.hr abs1 { left: 91px; }
+.vl abs1, .vr abs1, .vrl abs1, .vlr abs1 { top:-6px; left:-25px; }
+.vr abs1, .vrl abs1 { left:68px; }
 .vrl abs1 { top:-17px; }
 
 .hl abs4 { left:51px; }
 .hr abs4 { left:10px; }
 .vl abs4, .vr abs4, .vrl abs4, .vlr abs4 { top:0px; bottom:-41px; left:-25px; }
 .vr abs4, .vrl abs4 { left:68px; }
 .vrl abs4 { top:-11px; bottom:-29px; }
 
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html
@@ -6,31 +6,32 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 1px 2px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      height: 32px;
-      width: 26px;
+      height: 30px;
+      width: 22px;
     }
     .small > .container {
-      height: 4px;
-      width: 8px;
+      height: 2px;
+      width: 4px;
     }
 
     .container > * {
       background: teal;
       height: 6px;
       width: 8px;
     }
     .big   .alignStart  { margin-top:  0px; }
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html
@@ -6,31 +6,32 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 1px 2px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      height: 42px;
-      width: 26px;
+      height: 40px;
+      width: 22px;
     }
     .small > .container {
-      height: 4px;
-      width: 8px;
+      height: 2px;
+      width: 4px;
       margin-bottom: 20px; /* to reduce overlap between overflowing images */
     }
 
     .container > * {
       display: block;
     }
     .big   .alignStart  { margin-top:   0px; }
     .big   .alignCenter { margin-top:  13px; }
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html
@@ -6,40 +6,41 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 1px 2px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      height: 32px;
-      width: 26px;
+      height: 30px;
+      width: 22px;
     }
     .small > .container {
-      height: 4px;
-      width: 8px;
+      height: 2px;
+      width: 4px;
     }
 
     .container > * {
       background: teal;
       height: 6px;
       width: 8px;
     }
-    .big   > .container > * { margin-left: 18px; }
-    .small > .container > * { margin-left:  0px; }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
 
     .big   .alignStart  { margin-top:  0px; }
     .big   .alignCenter { margin-top: 13px; }
     .big   .alignEnd    { margin-top: 26px; }
     .small .alignStart  { margin-top:  0px; }
     .small .alignCenter { margin-top: -1px; }
     .small .alignEnd    { margin-top: -2px; }
   </style>
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html
@@ -6,40 +6,41 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 1px 2px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      height: 32px;
-      width: 26px;
+      height: 30px;
+      width: 22px;
     }
     .small > .container {
-      height: 4px;
-      width: 8px;
+      height: 2px;
+      width: 4px;
     }
 
     .container > * {
       background: teal;
       height: 6px;
       width: 8px;
     }
-    .big   > .container > * { margin-left: 18px; }
-    .small > .container > * { margin-left:  0px; }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
 
     .big   .alignStart  { margin-top:  0px; }
     .big   .alignCenter { margin-top: 13px; }
     .big   .alignEnd    { margin-top: 26px; }
     .small .alignStart  { margin-top:  0px; }
     .small .alignCenter { margin-top: -1px; }
     .small .alignEnd    { margin-top: -2px; }
   </style>
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html
@@ -6,45 +6,46 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 2px 1px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      width: 32px;
-      height: 26px;
+      width: 30px;
+      height: 22px;
     }
     .small > .container {
-      width: 4px;
-      height: 8px;
+      width: 2px;
+      height: 4px;
       margin-right: 10px; /* To avoid overlap between overflowing kids */
     }
 
     .container > * {
       background: teal;
       width: 6px;
       height: 8px;
     }
-    .big   .alignStart  { margin-left: 26px; }
-    .big   .alignCenter { margin-left: 13px; }
-    .big   .alignEnd    { margin-left:  0px; }
-    .small .alignStart  { margin-left: -2px; }
-    .small .alignCenter { margin-left: -1px; }
-    .small .alignEnd    { margin-left:  0px; }
+    .big   .alignStart  { margin-left: 24px; }
+    .big   .alignCenter { margin-left: 11px; }
+    .big   .alignEnd    { margin-left: -2px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -3px; }
+    .small .alignEnd    { margin-left: -2px; }
   </style>
 </head>
 <body>
   <div class="big">
     <!-- The various align-self values, from
          https://www.w3.org/TR/css-align-3/#propdef-align-self -->
     <!-- auto | normal | stretch -->
     <div class="container"><div class="alignStart"><!--auto--></div></div>
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html
@@ -6,45 +6,46 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 2px 1px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      width: 32px;
-      height: 26px;
+      width: 30px;
+      height: 22px;
     }
     .small > .container {
-      width: 4px;
-      height: 8px;
+      width: 2px;
+      height: 4px;
       margin-right: 10px; /* To avoid overlap between overflowing kids */
     }
 
     .container > * {
       background: teal;
       width: 6px;
       height: 8px;
     }
-    .big   .alignStart  { margin-left: 26px; }
-    .big   .alignCenter { margin-left: 13px; }
-    .big   .alignEnd    { margin-left:  0px; }
-    .small .alignStart  { margin-left: -2px; }
-    .small .alignCenter { margin-left: -1px; }
-    .small .alignEnd    { margin-left:  0px; }
+    .big   .alignStart  { margin-left: 24px; }
+    .big   .alignCenter { margin-left: 11px; }
+    .big   .alignEnd    { margin-left: -2px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -3px; }
+    .small .alignEnd    { margin-left: -2px; }
   </style>
 </head>
 <body>
   <div class="big">
     <!-- The various align-self values, from
          https://www.w3.org/TR/css-align-3/#propdef-align-self -->
     <!-- auto | normal | stretch -->
     <div class="container"><div class="alignStart"><!--auto--></div></div>
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html
@@ -6,31 +6,32 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 2px 1px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      width: 32px;
-      height: 26px;
+      width: 30px;
+      height: 22px;
     }
     .small > .container {
-      width: 4px;
-      height: 8px;
+      width: 2px;
+      height: 4px;
       margin-right: 10px; /* To avoid overlap between overflowing kids */
     }
 
     .container > * {
       background: teal;
       width: 6px;
       height: 8px;
     }
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html
@@ -6,31 +6,32 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 2px 1px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      width: 42px;
-      height: 26px;
+      width: 40px;
+      height: 22px;
     }
     .small > .container {
-      width: 4px;
-      height: 8px;
+      width: 2px;
+      height: 4px;
       margin-bottom: 20px; /* to reduce overlap between overflowing images */
     }
 
     .container > * {
       display: block;
     }
     .big   .alignStart  { margin-left:  0px; }
     .big   .alignCenter { margin-left: 17px; }
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html
@@ -6,45 +6,46 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 2px 1px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      width: 32px;
-      height: 26px;
+      width: 30px;
+      height: 22px;
     }
     .small > .container {
-      width: 4px;
-      height: 8px;
+      width: 2px;
+      height: 4px;
       margin-right: 10px; /* To avoid overlap between overflowing kids */
     }
 
     .container > * {
       background: teal;
       width: 6px;
       height: 8px;
     }
-    .big   .alignStart  { margin-left: 26px; }
-    .big   .alignCenter { margin-left: 13px; }
-    .big   .alignEnd    { margin-left:  0px; }
-    .small .alignStart  { margin-left: -2px; }
-    .small .alignCenter { margin-left: -1px; }
-    .small .alignEnd    { margin-left:  0px; }
+    .big   .alignStart  { margin-left: 24px; }
+    .big   .alignCenter { margin-left: 11px; }
+    .big   .alignEnd    { margin-left: -2px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -3px; }
+    .small .alignEnd    { margin-left: -2px; }
   </style>
 </head>
 <body>
   <div class="big">
     <!-- The various justify-self values, from
          https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
     <!-- auto | normal | stretch -->
     <div class="container"><div class="alignStart"><!--auto--></div></div>
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html
@@ -6,45 +6,46 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 2px 1px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      width: 32px;
-      height: 26px;
+      width: 30px;
+      height: 22px;
     }
     .small > .container {
-      width: 4px;
-      height: 8px;
+      width: 2px;
+      height: 4px;
       margin-right: 10px; /* To avoid overlap between overflowing kids */
     }
 
     .container > * {
       background: teal;
       width: 6px;
       height: 8px;
     }
-    .big   .alignStart  { margin-left: 26px; }
-    .big   .alignCenter { margin-left: 13px; }
-    .big   .alignEnd    { margin-left:  0px; }
-    .small .alignStart  { margin-left: -2px; }
-    .small .alignCenter { margin-left: -1px; }
-    .small .alignEnd    { margin-left:  0px; }
+    .big   .alignStart  { margin-left: 24px; }
+    .big   .alignCenter { margin-left: 11px; }
+    .big   .alignEnd    { margin-left: -2px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -3px; }
+    .small .alignEnd    { margin-left: -2px; }
   </style>
 </head>
 <body>
   <div class="big">
     <!-- The various justify-self values, from
          https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
     <!-- auto | normal | stretch -->
     <div class="container"><div class="alignStart"><!--auto--></div></div>
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html
@@ -6,40 +6,41 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 1px 2px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      height: 32px;
-      width: 26px;
+      height: 30px;
+      width: 22px;
     }
     .small > .container {
-      height: 4px;
-      width: 8px;
+      height: 2px;
+      width: 4px;
     }
 
     .container > * {
       background: teal;
       height: 6px;
       width: 8px;
     }
-    .big   > .container > * { margin-left: 18px; }
-    .small > .container > * { margin-left:  0px; }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
 
     .big   .alignStart  { margin-top:  0px; }
     .big   .alignCenter { margin-top: 13px; }
     .big   .alignEnd    { margin-top: 26px; }
     .small .alignStart  { margin-top:  0px; }
     .small .alignCenter { margin-top: -1px; }
     .small .alignEnd    { margin-top: -2px; }
   </style>
--- a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html
@@ -6,40 +6,41 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .container {
       display: block;
+      padding: 1px 2px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
     }
     br { clear: both }
 
     .big > .container {
-      height: 32px;
-      width: 26px;
+      height: 30px;
+      width: 22px;
     }
     .small > .container {
-      height: 4px;
-      width: 8px;
+      height: 2px;
+      width: 4px;
     }
 
     .container > * {
       background: teal;
       height: 6px;
       width: 8px;
     }
-    .big   > .container > * { margin-left: 18px; }
-    .small > .container > * { margin-left:  0px; }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
 
     .big   .alignStart  { margin-top:  0px; }
     .big   .alignCenter { margin-top: 13px; }
     .big   .alignEnd    { margin-top: 26px; }
     .small .alignStart  { margin-top:  0px; }
     .small .alignCenter { margin-top: -1px; }
     .small .alignEnd    { margin-top: -2px; }
   </style>
--- a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html
+++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html
@@ -36,29 +36,29 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <body onload="checkLayout('.container')">
 
 <div id="log"></div>
 
 <div class="container relative">
   <div class="grid">
-    <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="35" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
+    <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
   </div>
 </div>
 
 <div class="container relative">
   <div class="grid">
-    <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="35" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
+    <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
   </div>
 </div>
 
 <div class="container relative">
   <div class="grid">
-    <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="35" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
+    <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
   </div>
 </div>
 
 <div class="container">
   <div class="grid relative">
     <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div>
   </div>
 </div>
@@ -72,29 +72,29 @@
 <div class="container">
   <div class="grid relative">
     <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="65" data-offset-y="30" data-expected-width="265" data-expected-height="180"></div>
   </div>
 </div>
 
 <div class="container relative">
   <div class="grid directionRTL">
-    <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-135" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
+    <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
   </div>
 </div>
 
 <div class="container relative">
   <div class="grid directionRTL">
-    <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="-135" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
+    <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
   </div>
 </div>
 
 <div class="container relative">
   <div class="grid directionRTL">
-    <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="-135" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
+    <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
   </div>
 </div>
 
 <div class="container">
   <div class="grid relative directionRTL">
     <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div>
   </div>
 </div>