Bug 1520584 part 1 - [css-align][css-grid] Translate the static position to grid area coordinates. r=dholbert
authorMats Palmgren <mats@mozilla.com>
Tue, 29 Jan 2019 17:44:56 +0100
changeset 455959 280344f386b27fa1ba1fe0b8058a30053466d729
parent 455958 f34ff529f92e55627ddbc6f1304f87eaaf5bb341
child 455960 e12caed89db3e037deb713d8a22a5c9cfa542b1e
push id35463
push usershindli@mozilla.com
push dateTue, 29 Jan 2019 21:38:17 +0000
treeherdermozilla-central@4440fbf71c72 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1520584
milestone67.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 1520584 part 1 - [css-align][css-grid] Translate the static position to grid area coordinates. r=dholbert
layout/generic/ReflowInput.cpp
layout/generic/nsAbsoluteContainingBlock.cpp
testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001-ref.html
testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001.html
testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002-ref.html
testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002.html
testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003-ref.html
testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003.html
testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004-ref.html
testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004.html
--- a/layout/generic/ReflowInput.cpp
+++ b/layout/generic/ReflowInput.cpp
@@ -26,16 +26,17 @@
 #include "nsLayoutUtils.h"
 #include "mozilla/Preferences.h"
 #include "nsFontInflationData.h"
 #include "StickyScrollContainer.h"
 #include "nsIFrameInlines.h"
 #include "CounterStyleManager.h"
 #include <algorithm>
 #include "mozilla/dom/HTMLInputElement.h"
+#include "nsGridContainerFrame.h"
 
 #ifdef DEBUG
 #  undef NOISY_VERTICAL_ALIGN
 #else
 #  undef NOISY_VERTICAL_ALIGN
 #endif
 
 using namespace mozilla;
@@ -1658,18 +1659,37 @@ void ReflowInput::InitAbsoluteConstraint
       mFlags.mBOffsetsNeedCSSAlign = (bStartIsAuto && bEndIsAuto);
     }
 
     if (mFlags.mStaticPosIsCBOrigin) {
       hypotheticalPos.mWritingMode = cbwm;
       hypotheticalPos.mIStart = nscoord(0);
       hypotheticalPos.mBStart = nscoord(0);
     } else {
+      // XXXmats all this is broken for orthogonal writing-modes: bug 1521988.
       CalculateHypotheticalPosition(aPresContext, placeholderFrame,
                                     aReflowInput, hypotheticalPos, aFrameType);
+      if (aReflowInput->mFrame->IsGridContainerFrame()) {
+        // 'hypotheticalPos' is relative to the padding rect of the CB *frame*.
+        // In grid layout the CB is the grid area rectangle, so we translate
+        // 'hypotheticalPos' to be relative that rectangle here.
+        nsRect cb = nsGridContainerFrame::GridItemCB(mFrame);
+        nscoord left(0);
+        nscoord right(0);
+        if (cbwm.IsBidiLTR()) {
+          left = cb.X();
+        } else {
+          right = aReflowInput->ComputedWidth() +
+                  aReflowInput->ComputedPhysicalPadding().LeftRight() -
+                  cb.XMost();
+        }
+        LogicalMargin offsets(cbwm, nsMargin(cb.Y(), right, nscoord(0), left));
+        hypotheticalPos.mIStart -= offsets.IStart(cbwm);
+        hypotheticalPos.mBStart -= offsets.BStart(cbwm);
+      }
     }
   }
 
   // Initialize the 'left' and 'right' computed offsets
   // XXX Handle new 'static-position' value...
 
   // Size of the containing block in its writing mode
   LogicalSize cbSize = aCBSize;
--- a/layout/generic/nsAbsoluteContainingBlock.cpp
+++ b/layout/generic/nsAbsoluteContainingBlock.cpp
@@ -724,32 +724,18 @@ void nsAbsoluteContainingBlock::ReflowAb
       border.IStart(outerWM) + offsets.IStart(outerWM) + margin.IStart(outerWM),
       border.BStart(outerWM) + offsets.BStart(outerWM) + margin.BStart(outerWM),
       kidSize.ISize(outerWM), kidSize.BSize(outerWM));
   nsRect r = rect.GetPhysicalRect(
       outerWM, logicalCBSize.GetPhysicalSize(wm) +
                    border.Size(outerWM).GetPhysicalSize(outerWM));
 
   // Offset the frame rect by the given origin of the absolute containing block.
-  // If the frame is auto-positioned on both sides of an axis, it will be
-  // positioned based on its containing block and we don't need to offset
-  // (unless the caller demands it (the STATIC_POS_IS_CB_ORIGIN case)).
-  if (aContainingBlock.TopLeft() != nsPoint(0, 0)) {
-    const nsStyleSides& offsets = kidReflowInput.mStylePosition->mOffset;
-    if (!(offsets.GetLeftUnit() == eStyleUnit_Auto &&
-          offsets.GetRightUnit() == eStyleUnit_Auto) ||
-        (rsFlags & ReflowInput::STATIC_POS_IS_CB_ORIGIN)) {
-      r.x += aContainingBlock.x;
-    }
-    if (!(offsets.GetTopUnit() == eStyleUnit_Auto &&
-          offsets.GetBottomUnit() == eStyleUnit_Auto) ||
-        (rsFlags & ReflowInput::STATIC_POS_IS_CB_ORIGIN)) {
-      r.y += aContainingBlock.y;
-    }
-  }
+  r.x += aContainingBlock.x;
+  r.y += aContainingBlock.y;
 
   aKidFrame->SetRect(r);
 
   nsView* view = aKidFrame->GetView();
   if (view) {
     // Size and position the view and set its opacity, visibility, content
     // transparency, and clip
     nsContainerFrame::SyncFrameViewAfterReflow(aPresContext, aKidFrame, view,
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001-ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Grid aligned descendants with static position</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 20px;
+  padding: 2px 4px 6px 1px;
+}
+.absolute {
+  position: absolute;
+  grid-column: 1 / 2;
+}
+.content {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+    <div class="absolute" style="margin-top:2px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="padding-bottom: 14px">
+    <div class="absolute" style="margin-top:10px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-left:8px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid aligned descendants with static position</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
+<link rel="match" href="descendant-static-position-001-ref.html">
+<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 20px;
+  padding: 2px 4px 6px 1px;
+}
+.grid > div {
+  background: red;
+  background-clip: content-box;
+}
+.absolute {
+  position: absolute;
+  background: red;
+  grid-column: 1 / 2;
+}
+.content {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="padding-left:3px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="border-left:2px solid black; padding-left:1px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="padding-top:10px">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-left:8px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002-ref.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Grid aligned descendants with static position (direction: rtl)</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 20px;
+  padding: 2px 4px 6px 1px;
+  direction: rtl;
+  margin-left: 40px;
+}
+.absolute {
+  position: absolute;
+  grid-column: 1 / 2;
+}
+.content {
+  float: right;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+    <div class="absolute" style="margin-top:2px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="padding-bottom: 14px">
+    <div class="absolute" style="margin-top:10px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-right:8px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px">
+    <div class="absolute" style="margin-top:2px;">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid aligned descendants with static position (direction: rtl)</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
+<link rel="match" href="descendant-static-position-002-ref.html">
+<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 20px;
+  padding: 2px 4px 6px 1px;
+  direction: rtl;
+  margin-left: 40px;
+}
+.grid > div {
+  background: red;
+  background-clip: content-box;
+}
+.absolute {
+  position: absolute;
+  background: red;
+  grid-column: 1 / 2;
+}
+.content {
+  float: right;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="padding-left:3px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="border-left:2px solid black; padding-left:1px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="padding-top:10px">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px; padding-left:10px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Grid aligned descendants with static position</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 100px;
+  justify-content: end;
+  padding: 2px 4px 6px 1px;
+}
+.absolute {
+  position: absolute;
+  grid-column: 1 / 2;
+}
+.content {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+    <div class="absolute" style="margin-top:2px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="padding-bottom: 14px">
+    <div class="absolute" style="margin-top:10px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-left:8px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid aligned descendants with static position</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
+<link rel="match" href="descendant-static-position-003-ref.html">
+<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 100px;
+  justify-content: end;
+  padding: 2px 4px 6px 1px;
+}
+.grid > div {
+  background: red;
+  background-clip: content-box;
+}
+.absolute {
+  position: absolute;
+  background: red;
+  grid-column: 1 / 2;
+}
+.content {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="padding-left:3px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="border-left:2px solid black; padding-left:1px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="padding-top:10px">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-left:8px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004-ref.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Grid aligned descendants with static position (direction: rtl)</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 100px;
+  justify-content: center;
+  padding: 2px 4px 6px 1px;
+  direction: rtl;
+  margin-left: 40px;
+}
+.absolute {
+  position: absolute;
+  grid-column: 1 / 2;
+}
+.content {
+  float: right;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+    <div class="absolute" style="margin-top:2px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="padding-bottom: 14px">
+    <div class="absolute" style="margin-top:10px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-right:8px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px">
+    <div class="absolute" style="margin-top:2px;">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid aligned descendants with static position (direction: rtl)</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
+<link rel="match" href="descendant-static-position-004-ref.html">
+<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 100px;
+  justify-content: center;
+  padding: 2px 4px 6px 1px;
+  direction: rtl;
+  margin-left: 40px;
+}
+.grid > div {
+  background: red;
+  background-clip: content-box;
+}
+.absolute {
+  position: absolute;
+  background: red;
+  grid-column: 1 / 2;
+}
+.content {
+  float: right;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="padding-left:3px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="border-left:2px solid black; padding-left:1px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="padding-top:10px">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px; padding-left:10px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>