1 files changed, 146 insertions, 0 deletions
diff --git a/testing/web-platform/mozilla/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-003.html b/testing/web-platform/mozilla/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-003.html
new file mode 100644
index 0000000000..af0fc54e1d
--- /dev/null
+++ b/testing/web-platform/mozilla/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-003.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<!-- NOTE(dholbert) This should maybe move to the shared WPT directory, but I'm
+     putting it in the internal directory for now because tables with captions
+     and aspect-ratio behave extremely differently in each engine right now,
+     and I'm not sure the behavior is well-specified. -->
+<meta name="assert" content="For a grid item with display:table, a caption, an 'aspect-ratio', a resolvable percent height, and a non-stretching justify-self, the item's inline-size should be resolved based on the height and 'aspect-ratio' (after subtracting away the space needed for the caption)">
+<style>
+  .group { margin-bottom: 20px;}
+  .group.orthog .item { writing-mode: vertical-rl }
+  .grid {
+      height: 32px;
+      width: 24px;
+      display: inline-grid;
+      border: 2px solid black;
+      vertical-align: top;
+      background: cyan;
+  }
+
+  .item {
+      display: table;
+      height: 100%;
+      background: fuchsia;
+      box-sizing: border-box;
+      aspect-ratio: 1/2;
+  }
+  cap {
+      display: table-caption;
+      height: 4px;
+      width: 6px;
+      background: orange;
+  }
+  .center     { justify-self: center; }
+  .start      { justify-self: start; }
+  .end        { justify-self: end; }
+  .self-start { justify-self: self-start; }
+  .self-end   { justify-self: self-end; }
+  .flex-start { justify-self: flex-start; }
+  .flex-end   { justify-self: flex-end; }
+  .left       { justify-self: left; }
+  .right      { justify-self: right; }
+  .normal     { justify-self: normal; }
+  .stretch    { justify-self: stretch; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+  <div class="group">
+    <div class="grid">
+      <div class="item start"
+           data-expected-width="14" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item end"
+           data-expected-width="14" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item self-start"
+           data-expected-width="14" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item self-end"
+           data-expected-width="14" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-start"
+           data-expected-width="14" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-end"
+           data-expected-width="14" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item left"
+           data-expected-width="14" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item right"
+           data-expected-width="14" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item center"
+           data-expected-width="14" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item normal"
+           data-expected-width="24" data-expected-height="52"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item stretch"
+           data-expected-width="24" data-expected-height="52"><cap></cap></div>
+    </div>
+  </div>
+
+  <!-- For these ones, the item's writing-mode will be orthogonal to the
+       grid container's writing-mode -->
+  <div class="group orthog">
+    <div class="grid">
+      <div class="item start"
+           data-expected-width="22" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item end"
+           data-expected-width="22" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item self-start"
+           data-expected-width="22" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item self-end"
+           data-expected-width="22" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-start"
+           data-expected-width="22" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-end"
+           data-expected-width="22" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item left"
+           data-expected-width="22" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item right"
+           data-expected-width="22" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item center"
+           data-expected-width="22" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item normal"
+           data-expected-width="22" data-expected-height="32"><cap></cap></div>
+    </div>
+    <div class="grid">
+      <div class="item stretch"
+           data-expected-width="24" data-expected-height="32"><cap></cap></div>
+    </div>
+  </div>
+</body>