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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-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: New version applying suggested changes Created 6 years, 2 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 | LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-items-expected.txt » ('j') | Source/core/rendering/RenderBox.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-items.html
diff --git a/LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-items.html b/LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-items.html
new file mode 100644
index 0000000000000000000000000000000000000000..f60874977a6d3eefd0ec3a31505108cc589e368e
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-items.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+ grid-template-columns: 50px 100px 150px 200px;
+ grid-template-rows: 50px 100px 150px 200px;
+ border: 5px solid black;
+ margin: 10px;
+ padding: 15px;
+}
+
+.unconstrainedContainer {
+ /* For accurate x / y offset. */
+ position: relative;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.thirdRowThirdColumnSpanning2Rows {
+ grid-column: 3;
+ grid-row: 3 / span 2;
+ background-color: maroon;
+}
+
+.thirdRowThirdColumnSpanning2Rows2Columns {
+ grid-column: 3 / span 2;
+ grid-row: 3 / span 2;
+ background-color: aqua;
+}
+
+.endFirstRowEndFirstColumn {
+ background-color: blue;
+ grid-column-end: 2;
+ grid-row-end: 2;
+}
+
+.endFirstRowEndSecondColumn {
+ background-color: lime;
+ grid-column-end: 3;
+ grid-row-end: 2;
+}
+
+.endSecondRowEndFirstColumn {
+ background-color: purple;
+ grid-column-end: 2;
+ grid-row-end: 3;
+}
+
+.endSecondRowEndSecondColumn {
+ background-color: orange;
+ grid-column-end: 3;
+ grid-row-end: 3;
+}
+
+.endThirdRowEndThirdColumnSpanning2Rows {
+ grid-column-end: 4;
+ grid-row: span 2 / 4;
+ background-color: maroon;
+}
+
+.endThirdRowEndThirdColumnSpanning2Rows2Columns {
+ grid-column: span 2 / 4;
+ grid-row: span 2 / 4;
+ background-color: aqua;
+}
+
+.onlyFirstRowOnlyFirstColumn {
+ background-color: blue;
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+}
+
+.onlyFirstRowOnlySecondColumn {
+ background-color: lime;
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+}
+
+.onlySecondRowOnlyFirstColumn {
+ background-color: purple;
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+}
+
+.onlySecondRowOnlySecondColumn {
+ background-color: orange;
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
+}
+
+.onlyThirdRowOnlyThirdColumnSpanning2Rows {
+ grid-column: 3 / 4;
+ grid-row: 3 / 5;
+ background-color: maroon;
+}
+
+.onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns {
+ grid-column: 3 / 5;
+ grid-row: 3 / 5;
+ background-color: aqua;
+}
+
+.offsetLeft25 {
+ left: 25px;
+}
+
+.offsetRight50 {
+ right: 50px;
+}
+
+.offsetTop75 {
+ top: 75px;
+}
+
+.offsetBottom100 {
+ bottom: 100px;
+}
+
+.offsetLeftMinus20 {
+ left: -20px;
+}
+
+.offsetRightMinus40 {
+ right: -40px;
+}
+
+.offsetTopMinus60 {
+ top: -60px;
+}
+
+.offsetBottomMinus80 {
+ bottom: -80px;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks the behavior of the absolutely positioned grid items.</p>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="sizedToGridArea absolute autoRowAutoColumn"
+ data-offset-x="15" data-offset-y="5" data-expected-width="530" data-expected-height="530">
+ </div>
+ <div class="sizedToGridArea absolute firstRowFirstColumn"
+ data-offset-x="30" data-offset-y="20" data-expected-width="515" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowFirstColumn"
+ data-offset-x="30" data-offset-y="70" data-expected-width="515" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute firstRowSecondColumn"
+ data-offset-x="80" data-offset-y="20" data-expected-width="465" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowSecondColumn"
+ data-offset-x="80" data-offset-y="70" data-expected-width="465" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows"
+ data-offset-x="180" data-offset-y="170" data-expected-width="365" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns"
+ data-offset-x="180" data-offset-y="170" data-expected-width="350" data-expected-height="350">
+ </div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
+ data-offset-x="15" data-offset-y="70" data-expected-width="315" data-expected-height="250">
+ </div>
+ <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns"
+ data-offset-x="80" data-offset-y="70" data-expected-width="250" data-expected-height="250">
+ </div>
+ <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
+ data-offset-x="15" data-offset-y="5" data-expected-width="165" data-expected-height="165">
+ </div>
+ <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
+ data-offset-x="15" data-offset-y="5" data-expected-width="65" data-expected-height="165">
+ </div>
+ <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
+ data-offset-x="15" data-offset-y="5" data-expected-width="165" data-expected-height="65">
+ </div>
+ <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
+ data-offset-x="15" data-offset-y="5" data-expected-width="65" data-expected-height="65">
+ </div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn"
+ data-offset-x="30" data-offset-y="20" data-expected-width="50" data-expected-height="50">
+ </div>
+ <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn"
+ data-offset-x="30" data-offset-y="70" data-expected-width="50" data-expected-height="100">
+ </div>
+ <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn"
+ data-offset-x="80" data-offset-y="20" data-expected-width="100" data-expected-height="50">
+ </div>
+ <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+ data-offset-x="80" data-offset-y="70" data-expected-width="100" data-expected-height="100">
+ </div>
+ <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns"
+ data-offset-x="180" data-offset-y="170" data-expected-width="350" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows"
+ data-offset-x="180" data-offset-y="170" data-expected-width="150" data-expected-height="350">
+ </div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
Julien - ping for review 2014/10/23 15:24:43 In these examples, the grid container is not the c
Manuel Rego 2014/10/23 21:51:12 Thanks for the link, now I think I've got it.
+ <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+ data-offset-x="40" data-offset-y="80" data-expected-width="530" data-expected-height="530">
+ </div>
+ <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+ data-offset-x="70" data-offset-y="100" data-expected-width="515" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+ data-offset-x="-20" data-offset-y="-30" data-expected-width="515" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+ data-offset-x="60" data-offset-y="-40" data-expected-width="465" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+ data-offset-x="30" data-offset-y="145" data-expected-width="465" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+ data-offset-x="205" data-offset-y="70" data-expected-width="365" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+ data-offset-x="160" data-offset-y="110" data-expected-width="350" data-expected-height="350">
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-items-expected.txt » ('j') | Source/core/rendering/RenderBox.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698