LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html - Issue 637033003: [CSS Grid Layout] Fix positioned grid children position and size

Side by Side 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

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

	4 <style>

	5

	6 .grid {

	7 grid-template-columns: 100px 200px;

	8 grid-template-rows: 50px 150px;

	9 width: 100%;

	10 height: 100%;

	11 border: 5px solid black;

	12 margin: 30px;

	13 padding: 15px;

	14 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */

	15 position: relative;

	16 }

	17

	18 .absolute {

	19 position: absolute;

	20 }

	21

	22 .lengthSize {

	23 width: 50px;

	24 height: 20px;

	25 }

	26

	27 .percentageSize {

	28 width: 50%;

	29 height: 20%;

	30 }

	31

	32 .offsets {

	33 left: 5px;

	34 right: 10px;

	35 top: 15px;

	36 bottom: 20px;

	37 }

	38

	39 .onlyFirstRowOnlyFirstColumn {

	40 background-color: blue;

	41 grid-column: 1 / 2;

	42 grid-row: 1 / 2;

	43 }

	44

	45 .endSecondRowEndSecondColumn {

	46 background-color: orange;

	47 grid-column-end: 3;

	48 grid-row-end: 3;

	49 }

	50

	51 </style>

	52 <script src="../../resources/check-layout.js"></script>

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

	54

	55 <p>This test checks the different size options for absolutely positioned grid it ems.</p>

	56

	57 <div class="unconstrainedContainer">

	58 <div class="grid">

	59 <div class="absolute autoRowAutoColumn sizedToGridArea"

	60 data-offset-x="15" data-offset-y="15" data-expected-width="1030" dat a-expected-height="1030">

	61 </div>

	62 <div class="absolute secondRowSecondColumn sizedToGridArea"

	63 data-offset-x="115" data-offset-y="65" data-expected-width="915" dat a-expected-height="965">

	64 </div>

	65 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"

	66 data-offset-x="15" data-offset-y="15" data-expected-width="100" data -expected-height="50">

	67 </div>

	68 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"

	69 data-offset-x="15" data-offset-y="15" data-expected-width="315" data -expected-height="215">

	70 </div>

	71 </div>

	72 </div>

	73

	74 <div class="unconstrainedContainer">

	75 <div class="grid">

	76 <div class="absolute autoRowAutoColumn lengthSize"

	77 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="20">

	78 </div>

	79 <div class="absolute secondRowSecondColumn lengthSize"

	80 data-offset-x="115" data-offset-y="65" data-expected-width="50" data -expected-height="20">

	81 </div>

	82 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize"

	83 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="20">

	84 </div>

	85 <div class="absolute endSecondRowEndSecondColumn lengthSize"

	86 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="20">

	87 </div>

	88 </div>

	89 </div>

	90

	91 <div class="unconstrainedContainer">

	92 <div class="grid">

	93 <div class="absolute autoRowAutoColumn percentageSize"

	94 data-offset-x="15" data-offset-y="15" data-expected-width="515" data -expected-height="206">

	95 </div>

	96 <div class="absolute secondRowSecondColumn percentageSize"

	97 data-offset-x="115" data-offset-y="65" data-expected-width="457.5" d ata-expected-height="193">

	98 </div>

	99 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"

	100 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="10">

	101 </div>

	102 <div class="absolute endSecondRowEndSecondColumn percentageSize"

	103 data-offset-x="15" data-offset-y="15" data-expected-width="157.5" da ta-expected-height="43">

	104 </div>

	105 </div>

	106 </div>

	107

	108 <div class="unconstrainedContainer">

	109 <div class="grid">

	110 <div class="absolute autoRowAutoColumn offsets"

	111 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data -expected-height="995">

	112 </div>

	113 <div class="absolute secondRowSecondColumn offsets"

	114 data-offset-x="120" data-offset-y="80" data-expected-width="900" dat a-expected-height="930">

	115 </div>

	116 <div class="absolute onlyFirstRowOnlyFirstColumn offsets"

	117 data-offset-x="20" data-offset-y="30" data-expected-width="85" data- expected-height="15">

	118 </div>

	119 <div class="absolute endSecondRowEndSecondColumn offsets"

	120 data-offset-x="5" data-offset-y="15" data-expected-width="300" data- expected-height="180">

	121 </div>

	122 </div>

	123 </div>

	124

	125 </body>

OLD	NEW