third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-016.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-016.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-015.html ('k') | third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-rl-001.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-016.html

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

new file mode 100644

index 0000000000000000000000000000000000000000..2a47e02d50322ac16f7f89d2463f1194c521e1da

--- /dev/null

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

@@ -0,0 +1,62 @@

+<!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">

+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">

+<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;

+ padding-bottom: 10px;

+.firstRowSecondColumn {

+ grid-row: 1;

+ grid-column: 2;

+ background: blue;

+ justify-self: start;

+ align-self: stretch;

+ padding-right: 20px;

+.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;

+ padding-bottom: 20px;

+ padding-right: 10px;

+</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="120" class="firstRowFirstColumn">XX X</div>

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

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

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

+</div>