Bug 1449132 [wpt PR 10194] - [css-grid] Fix resolution of percentage paddings and margins of grid items, a=testonly
authorManuel Rego Casasnovas <rego@igalia.com>
Mon, 09 Apr 2018 21:29:17 +0000
changeset 467243 c1715027770e6a4a487ba2ad522b91a6a51691ac
parent 467242 e117fa7c449c13971a2eca201b848620e1704cda
child 467244 25e91d9ab4e9b9516fbabd0e05bccc3c76f7c0b1
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
bugs1449132, 10194, 808758, 980756, 547417
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 1449132 [wpt PR 10194] - [css-grid] Fix resolution of percentage paddings and margins of grid items, a=testonly Automatic update from web-platform-tests[css-grid] Fix resolution of percentage paddings and margins of grid items We were not resolving properly percentage paddings and margins for tracks that have something like minmax(auto, 100px). The reason was that while computing the minimum size of a grid item, the percentages were resolved against the inline size of the grid container. But for grid items we shouldn't never use the grid container size, but the grid area size, as that's their containing block. The patch modifies ContainingBlockLogicalWidthForContent() and ContainingBlockLogicalHeightForContent() in LayoutBox, so for grid items we return 0 if the area size hasn't been set yet. We never want to use the grid container's sizes in these cases. BUG=808758 TEST=external/wpt/css/css-grid/grid-items/grid-items-percentage-margins-* TEST=external/wpt/css/css-grid/grid-items/grid-items-percentage-paddings-* Change-Id: Ib142e51aee1fe623d38688469b179f01f82eb07b Reviewed-on: https://chromium-review.googlesource.com/980756 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#547417} wpt-commits: e4efc10a82630de47f920a737aa8ea94845191af wpt-pr: 10194 wpt-commits: e4efc10a82630de47f920a737aa8ea94845191af wpt-pr: 10194
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -314503,16 +314503,88 @@
     ]
    ],
    "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-items-percentage-margins-001.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-margins-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-margins-002.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-margins-002.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-paddings-001.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-paddings-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-paddings-002.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-paddings-002.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html": [
+    [
+     "/css/css-grid/grid-items/grid-items-percentage-paddings-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": [
     [
@@ -502544,16 +502616,64 @@
   "css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html": [
    "0295b15da5707dcd4b44cd95c66edbd19c08c1b8",
    "testharness"
   ],
   "css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html": [
    "3d9ee014d1341bae70de86de585658f7432f76ef",
    "testharness"
   ],
+  "css/css-grid/grid-items/grid-items-percentage-margins-001.html": [
+   "dac1d8c4fb5a35f7758e700fc0733a6aa88bbfd9",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-margins-002.html": [
+   "c676792bc50636a5ceba31f870cb23e3ac48ae0d",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html": [
+   "ef99c3e1f89409f0ad73defba818bd532eab840e",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html": [
+   "7bca7e112e006468d4329c267a0517b0f6e6f16f",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html": [
+   "128e954475484a57546231e8ee80bb1ffe414838",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html": [
+   "84c9b8d9f9ca3ab51f666a9b112f4622fb399e89",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-paddings-001.html": [
+   "8e46d9ce055a64d94f0136022295079f867e3210",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-paddings-002.html": [
+   "3115e10181a67224cd178dd242b55976d7ef77a2",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html": [
+   "9100d95c22d9865d69594418b4845364b2644a4f",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html": [
+   "8ad00d5b2d6e635633d664fa74ad3792d09cfb08",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html": [
+   "fd59a40079b6b70c4cab6abcf8d6d4146fb452a1",
+   "testharness"
+  ],
+  "css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html": [
+   "10f3a7444d59c1bfa6cbc85551603150b57cee30",
+   "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-percentage-margins-001.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track).">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  width: 500px;
+  justify-items: start;
+  position: relative;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 100%;
+  height: 10px;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</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 margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min).">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  width: 500px;
+  justify-items: start;
+  position: relative;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 100%;
+  height: 10px;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</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 margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins 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/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track) in a vertical-lr grid container.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</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 margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins 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/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-lr grid container.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</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 margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins 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/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track) in a vertical-rl grid container.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</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 margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-expected-x="60" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-expected-x="10" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-expected-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-expected-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins 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/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-rl grid container.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</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 margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-expected-x="60" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-expected-x="10" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-expected-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-expected-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track).">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  width: 500px;
+  justify-items: start;
+  position: relative;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 100%;
+  height: 10px;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</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 padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min).">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  width: 500px;
+  justify-items: start;
+  position: relative;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 100%;
+  height: 10px;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</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 padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings 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/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track) in a vertical-lr grid container.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</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 padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings 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/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-lr grid container.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</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 padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings 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/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track) in a vertical-rl grid container.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</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 padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings 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/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-rl grid container.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</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 padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>