Bug 1630689 [wpt PR 23017] - [css-grid] Migrate grid-content-alignment-with-span-vertical-lr.html to WPT, a=testonly
authorMario Sanchez Prada <mario@igalia.com>
Tue, 28 Apr 2020 11:26:47 +0000
changeset 527456 c62cda7aea286e8f602fa12d7ce96d958fd993f3
parent 527455 d2c70c4dd51bf0647846497ef0e53085e7b015f2
child 527457 e8e0cd6c920a1e28aba03c7b2dea70cfe2b1ae6e
push id114723
push userarchaeopteryx@coole-files.de
push dateFri, 01 May 2020 14:54:07 +0000
treeherderautoland@8f743729a39b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1630689, 23017, 767015, 1063749, 2153026, 759993
milestone77.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 1630689 [wpt PR 23017] - [css-grid] Migrate grid-content-alignment-with-span-vertical-lr.html to WPT, a=testonly Automatic update from web-platform-tests [css-grid] Migrate grid-content-alignment-with-span-vertical-lr.html to WPT Migrate this test out of blink/web_tests/fast/css-grid-layout and into the WPT-specific directory, adding links to the relevant specs and a test assertion describing its purpose. Bug: 767015, 1063749 Change-Id: I4d4ba98c67f82e5d82da46b3aa783c264c5a35c3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2153026 Commit-Queue: Mario Sanchez Prada <mario@igalia.com> Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Manuel Rego <rego@igalia.com> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#759993} -- wpt-commits: 10a3cc8a6d030fee6bcf3ac273507bd995ea5afb wpt-pr: 23017
testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks (vertical-lr).</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-lr'." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  grid-auto-columns: 20px;
+  grid-auto-rows: 40px;
+  grid-template-areas: "a a b"
+                       "c d b";
+  position: relative;
+  width: 200px;
+  height: 300px;
+}
+.a {
+  grid-area: a;
+  background-color: blue;
+}
+.b {
+  grid-area: b;
+  background-color: lime;
+}
+.c {
+  grid-area: c;
+  background-color: purple;
+}
+.d {
+  grid-area: d;
+  background-color: orange;
+}
+.stretchedGrid {
+  grid-auto-columns: auto;
+  grid-auto-rows: auto;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
+    <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+    <div class="c" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
+    <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
+    <div class="c" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
+    <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
+    <div class="c" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+    <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
+    <div class="c" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+    <div class="c" data-offset-x="160" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
+    <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
+    <div class="c" data-offset-x="130" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
+    <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
+    <div class="c" data-offset-x="120" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    <div class="c" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+</body>
+</html>