Bug 1452182 [wpt PR 9921] - [css-grid] Minimum width items should include margins for indefinite grid containers, a=testonly
authorManuel Rego Casasnovas <rego@igalia.com>
Mon, 09 Apr 2018 16:48:39 +0000
changeset 467046 cd77044e9e571f53a7cf90d2baa92d05169b4d0d
parent 467045 8aab95b86cdb7202ed2b16636a07af4b5b669200
child 467047 1ba63dc017d5239e37e79824670e1b0c3a751451
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1452182, 816762, 955062, 543046
milestone61.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 1452182 [wpt PR 9921] - [css-grid] Minimum width items should include margins for indefinite grid containers, a=testonly Automatic update from web-platform-tests[css-grid] Minimum width items should include margins for indefinite grid containers We had a TODO in IndefiniteSizeStrategy::MinLogicalWidthForChild() that was always using 0 as margin of the item. The patch just changes that for a call to GridLayoutUtils::MarginLogicalWidthForChild() (like we do in the DefiniteSizeStrategy version). BUG=816762 TEST=external/wpt/css/css-grid/grid-items/grid-items-minimum-width-001.html TEST=external/wpt/css/css-grid/grid-items/grid-items-minimum-width-002.html Change-Id: I743584aff234625f2d00327c711c0577ffeab457 Reviewed-on: https://chromium-review.googlesource.com/955062 Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Cr-Commit-Position: refs/heads/master@{#543046} wpt-commits: 19fb3d6fc8327dea0037de0364e6ff7f9bc5ee50 wpt-pr: 9921 wpt-commits: 19fb3d6fc8327dea0037de0364e6ff7f9bc5ee50 wpt-pr: 9921
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -313863,16 +313863,64 @@
     ]
    ],
    "css/css-grid/grid-items/grid-item-min-auto-size-001.html": [
     [
      "/css/css-grid/grid-items/grid-item-min-auto-size-001.html",
      {}
     ]
    ],
+   "css/css-grid/grid-items/grid-items-minimum-width-001.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-minimum-width-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-minimum-width-002.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-minimum-width-002.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html",
+     {}
+    ]
+   ],
    "css/css-grid/grid-items/grid-minimum-size-grid-items-021.html": [
     [
      "/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html",
      {}
     ]
    ],
    "css/css-grid/grid-items/grid-minimum-size-grid-items-022.html": [
     [
@@ -501268,16 +501316,48 @@
   "css/css-grid/grid-items/grid-items-003.html": [
    "26b9b3908e766348322e5029e79dbac4248e6776",
    "reftest"
   ],
   "css/css-grid/grid-items/grid-items-inline-blocks-001.html": [
    "d36bce8f5be4f39442a884386ea08062c873b73d",
    "reftest"
   ],
+  "css/css-grid/grid-items/grid-items-minimum-width-001.html": [
+   "b966e131ea84ee815ac866c43000dc785aec7976",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-minimum-width-002.html": [
+   "9000f0fa00c17e9c5f00346709f3a0a87cbb1e51",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html": [
+   "c02833f09f5b3b66a5807d7c0145044cf244f2fb",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html": [
+   "79cb2aad0f70c532ede28367db867c3abdae716d",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html": [
+   "989908844f12f99ccd7862818a31778a8786217b",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html": [
+   "240f06eb9af9d5e94d5d4ddd1fbecf6b46f3e92c",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html": [
+   "482e8cd355affd797af1983490a2b56824d6c5be",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html": [
+   "456df30ce85f22ab081b498b3300cb31cc55233a",
+   "testharness"
+  ],
   "css/css-grid/grid-items/grid-items-sizing-alignment-001-ref.html": [
    "33080559b7f451958ea4785075bf6c8e4d8902eb",
    "support"
   ],
   "css/css-grid/grid-items/grid-items-sizing-alignment-001.html": [
    "d18e219d785033b3f23ad2f27f2fb39ac5552766",
    "reftest"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-001.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width.">
+<link rel="stylesheet" href="../support/grid.css">
+<style>
+.grid {
+  width: 100px;
+  border: solid thick;
+  grid: 10px 10px / minmax(auto, 0px);
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-002.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width.">
+<link rel="stylesheet" href="../support/grid.css">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px;
+  grid: 10px 10px / minmax(auto, 0px);
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items orthogonal</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that orthogonal grid items minimum width takes into account borders, padding and margins for grid containers with definite width.">
+<link rel="stylesheet" href="../support/grid.css">
+<style>
+.grid {
+  width: 100px;
+  border: solid thick;
+  grid: 10px 10px / minmax(auto, 0px);
+}
+
+.grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items orthogonal</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that orthogonal grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width.">
+<link rel="stylesheet" href="../support/grid.css">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px;
+  grid: 10px 10px / minmax(auto, 0px);
+}
+
+.grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items vertical-lr</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width in vertical-lr.">
+<link rel="stylesheet" href="../support/grid.css">
+<style>
+.grid {
+  width: 100px;
+  border: solid thick;
+  grid: minmax(auto, 0px) / 10px 10px;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items vertical-lr</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width in vertical-lr.">
+<link rel="stylesheet" href="../support/grid.css">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px;
+  grid: minmax(auto, 0px) / 10px 10px;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items vertical-rl</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width in vertical-rl.">
+<link rel="stylesheet" href="../support/grid.css">
+<style>
+.grid {
+  width: 100px;
+  border: solid thick;
+  grid: minmax(auto, 0px) / 10px 10px;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items vertical-rl</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width in vertical-rl.">
+<link rel="stylesheet" href="../support/grid.css">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px;
+  grid: minmax(auto, 0px) / 10px 10px;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>