third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-013.html - Issue 2919473002: [css-grid] Apply flow-aware logic for margins during stretching

Unified Diff: third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-013.html

Issue 2919473002: [css-grid] Apply flow-aware logic for margins during stretching (Closed)

Patch Set: Created 3 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

« no previous file with comments | « third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-012.html ('k') | third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-014.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-013.html

diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-013.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-013.html

new file mode 100644

index 0000000000000000000000000000000000000000..25baada5b9697f6253b1ed859591872d12468cfd

--- /dev/null

+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-013.html

@@ -0,0 +1,59 @@

+<!DOCTYPE html>

+<meta charset="utf-8">

+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>

+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">

+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">

+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">

+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">

+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">

+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">

+<style>

+.grid {

+ position: relative;

+ display: inline-grid;

+ font: 20px/1 Ahem;

+ background: grey;

+ width: 250px;

+ height: 250px;

+ writing-mode: vertical-lr;

+.grid > div { writing-mode: horizontal-tb; }

+.firstRowFirstColumn {

+ grid-row: 1;

+ grid-column: 1;

+ background: green;

+ justify-self: stretch;

+ align-self: start;

+.firstRowSecondColumn {

+ grid-row: 1;

+ grid-column: 2;

+ background: blue;

+ justify-self: start;

+ align-self: stretch;

+.secondRowFirstColumn {

+ grid-row: 2;

+ grid-column: 1;

+ background: yellow;

+ justify-self: start;

+ align-self: start;

+.secondRowSecondColumn {

+ grid-row: 2;

+ grid-column: 2;

+ background: red;

+ justify-self: stretch;

+ align-self: stretch;

+</style>

+<script src="/resources/testharness.js"></script>

+<script src="/resources/testharnessreport.js"></script>

+<script src="../support/check-layout-th.js"></script>

+<body onload="checkLayout('.grid')">

+<div class="grid">

+ <div data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="125" class="firstRowFirstColumn">XX X</div>

+ <div data-offset-x="0" data-offset-y="125" data-expected-width="125" data-expected-height="20" class="firstRowSecondColumn">XX X</div>

+ <div data-offset-x="125" data-offset-y="0" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div>

+ <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>

+</div>