third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html - Issue 1903183002: [css-grid] Fix grid-template-columns|rows computed style with content alignment

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html

Issue 1903183002: [css-grid] Fix grid-template-columns|rows computed style with content alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 8 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

Download patch

« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html

diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html

new file mode 100644

index 0000000000000000000000000000000000000000..8b1c5c6d2219924e523d86db46198d698a681642

--- /dev/null

+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html

@@ -0,0 +1,53 @@

+<!DOCTYPE HTML>

+<link href="resources/grid.css" rel="stylesheet">

+<link href="resources/grid-alignment.css" rel="stylesheet">

+<style>

+.grid {

+ grid-template-columns: 300px 200px 100px;

+ grid-template-rows: 150px 100px 50px;

+ width: 800px;

+ height: 500px;

+.gaps {

+ grid-gap: 10px 20px;

+</style>

+<div class="grid contentStart" id="gridContentStart"></div>

+<div class="grid contentCenter" id="gridContentCenter"></div>

+<div class="grid contentEnd" id="gridContentEnd"></div>

+<div class="grid contentSpaceBetween" id="gridContentSpaceBetween"></div>

+<div class="grid contentSpaceAround" id="gridContentSpaceAround"></div>

+<div class="grid contentSpaceEvenly" id="gridContentSpaceEvenly"></div>

+<div class="grid contentStretch" id="gridContentStretch"></div>

+<div class="grid gaps contentStart" id="gridGapsContentStart"></div>

+<div class="grid gaps contentCenter" id="gridGapsContentCenter"></div>

+<div class="grid gaps contentEnd" id="gridGapsContentEnd"></div>

+<div class="grid gaps contentSpaceBetween" id="gridGapsContentSpaceBetween"></div>

+<div class="grid gaps contentSpaceAround" id="gridGapsContentSpaceAround"></div>

+<div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div>

+<div class="grid gaps contentStretch" id="gridGapsContentStretch"></div>

+<script src="../../resources/js-test.js"></script>

+<script src="resources/grid-definitions-parsing-utils.js"></script>

+<script>

+ description("Test that computed style for grid-template-columns and grid-template-rows works as expected with content alignment and gaps.");

+ testGridDefinitionsValues(document.getElementById("gridContentStart"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridContentCenter"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridContentSpaceBetween"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridContentStretch"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridGapsContentStart"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridGapsContentCenter"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridGapsContentEnd"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceBetween"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");

+ testGridDefinitionsValues(document.getElementById("gridGapsContentStretch"), "300px 200px 100px", "150px 100px 50px");

+</script>