Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(35)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html

Issue 637033003: [CSS Grid Layout] Fix positioned grid children position and size (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 6 years 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 | « LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html ('k') | LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html
diff --git a/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html b/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html
new file mode 100644
index 0000000000000000000000000000000000000000..432a9eb466b7783328436096e451c047e4a362dc
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+ grid-template-columns: 100px 200px;
+ grid-template-rows: 50px 150px;
+ width: 100%;
+ height: 100%;
+ border: 5px solid black;
+ margin: 30px;
+ padding: 15px;
+ /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+ position: relative;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.lengthSize {
+ width: 50px;
+ height: 20px;
+}
+
+.percentageSize {
+ width: 50%;
+ height: 20%;
+}
+
+.offsets {
+ left: 5px;
+ right: 10px;
+ top: 15px;
+ bottom: 20px;
+}
+
+.onlyFirstRowOnlyFirstColumn {
+ background-color: blue;
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+}
+
+.endSecondRowEndSecondColumn {
+ background-color: orange;
+ grid-column-end: 3;
+ grid-row-end: 3;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks the different size options for absolutely positioned grid items.</p>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="absolute autoRowAutoColumn sizedToGridArea"
+ data-offset-x="15" data-offset-y="15" data-expected-width="1030" data-expected-height="1030">
+ </div>
+ <div class="absolute secondRowSecondColumn sizedToGridArea"
+ data-offset-x="115" data-offset-y="65" data-expected-width="915" data-expected-height="965">
+ </div>
+ <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
+ data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+ </div>
+ <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
+ data-offset-x="15" data-offset-y="15" data-expected-width="315" data-expected-height="215">
+ </div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="absolute autoRowAutoColumn lengthSize"
+ data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20">
+ </div>
+ <div class="absolute secondRowSecondColumn lengthSize"
+ data-offset-x="115" data-offset-y="65" data-expected-width="50" data-expected-height="20">
+ </div>
+ <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize"
+ data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20">
+ </div>
+ <div class="absolute endSecondRowEndSecondColumn lengthSize"
+ data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20">
+ </div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="absolute autoRowAutoColumn percentageSize"
+ data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="206">
+ </div>
+ <div class="absolute secondRowSecondColumn percentageSize"
+ data-offset-x="115" data-offset-y="65" data-expected-width="457.5" data-expected-height="193">
+ </div>
+ <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
+ data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="10">
+ </div>
+ <div class="absolute endSecondRowEndSecondColumn percentageSize"
+ data-offset-x="15" data-offset-y="15" data-expected-width="157.5" data-expected-height="43">
+ </div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="absolute autoRowAutoColumn offsets"
+ data-offset-x="5" data-offset-y="15" data-expected-width="1015" data-expected-height="995">
+ </div>
+ <div class="absolute secondRowSecondColumn offsets"
+ data-offset-x="120" data-offset-y="80" data-expected-width="900" data-expected-height="930">
+ </div>
+ <div class="absolute onlyFirstRowOnlyFirstColumn offsets"
+ data-offset-x="20" data-offset-y="30" data-expected-width="85" data-expected-height="15">
+ </div>
+ <div class="absolute endSecondRowEndSecondColumn offsets"
+ data-offset-x="5" data-offset-y="15" data-expected-width="300" data-expected-height="180">
+ </div>
+ </div>
+</div>
+
+</body>
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html ('k') | LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698