third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html - Issue 1607463004: [css-grid] Allow to place positioned grid items on the padding

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html

Issue 1607463004: [css-grid] Allow to place positioned grid items on the padding (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix test Created 4 years, 11 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 unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt ('k') | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>
	svillar 2016/01/19 12:04:51 Don't need this, actually there is no </html> Don't need this, actually there is no </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: 500px;

	10 height: 300px;

	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 top: 0;

	21 left: 0;

	22 width: 100%;

	23 height: 100%;

	24 background: lime;

	25 }

	26

	27 </style>

	28 <script src="../../resources/testharness.js"></script>

	29 <script src="../../resources/testharnessreport.js"></script>

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

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

	32 <div id="log"></div>

	33

	34 <p>This test checks that positioned grid items can be placed directly on the pad ding.</p>

	35

	36 <div class="grid">

	37 <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"

	38 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expect ed-height="15">

	39 </div>

	40 <div class="absolute" style="grid-column: 1 / 2; grid-row: auto / 1;"

	41 data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expe cted-height="15">

	42 </div>

	43 <div class="absolute" style="grid-column: auto / 1; grid-row: 1 / 2;"

	44 data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expec ted-height="50">

	45 </div>

	46 <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"

	47 data-offset-x="315" data-offset-y="215" data-expected-width="215" data-e xpected-height="115">

	48 </div>

	49 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / auto;"

	50 data-offset-x="115" data-offset-y="215" data-expected-width="200" data-e xpected-height="115">

	51 </div>

	52 <div class="absolute" style="grid-column: 3 / auto; grid-row: 2 / 3;"

	53 data-offset-x="315" data-offset-y="65" data-expected-width="215" data-ex pected-height="150">

	54 </div>

	55 </div>

	56

	57 <div class="grid">

	58 <div class="absolute" style="grid-column: -5 / 1; grid-row: -5 / 1;"

	59 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expect ed-height="15">

	60 </div>

	61 <div class="absolute" style="grid-column: 1 / 2; grid-row: -5 / 1;"

	62 data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expe cted-height="15">

	63 </div>

	64 <div class="absolute" style="grid-column: -5 / 1; grid-row: 1 / 2;"

	65 data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expec ted-height="50">

	66 </div>

	67 <div class="absolute" style="grid-column: 3 / 5; grid-row: 3 / 5;"

	68 data-offset-x="315" data-offset-y="215" data-expected-width="215" data-e xpected-height="115">

	69 </div>

	70 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / 5;"

	71 data-offset-x="115" data-offset-y="215" data-expected-width="200" data-e xpected-height="115">

	72 </div>

	73 <div class="absolute" style="grid-column: 3 / 5; grid-row: 2 / 3;"

	74 data-offset-x="315" data-offset-y="65" data-expected-width="215" data-ex pected-height="150">

	75 </div>

	76 </div>

	77

	78 <div class="grid">

	79 <div class="absolute" style="grid-column: span 2 / 1; grid-row: span 2 / 1;"

	80 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expect ed-height="15">

	81 </div>

	82 <div class="absolute" style="grid-column: 1 / 2; grid-row: span 2 / 1;"

	83 data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expe cted-height="15">

	84 </div>

	85 <div class="absolute" style="grid-column: span 2 / 1; grid-row: 1 / 2;"

	86 data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expec ted-height="50">

	87 </div>

	88 <div class="absolute" style="grid-column: 3 / span 2; grid-row: 3 / span 2;"

	89 data-offset-x="315" data-offset-y="215" data-expected-width="215" data-e xpected-height="115">

	90 </div>

	91 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / span 2;"

	92 data-offset-x="115" data-offset-y="215" data-expected-width="200" data-e xpected-height="115">

	93 </div>

	94 <div class="absolute" style="grid-column: 3 / span 2; grid-row: 2 / 3;"

	95 data-offset-x="315" data-offset-y="65" data-expected-width="215" data-ex pected-height="150">

	96 </div>

	97 </div>

	98

	99 <div class="grid">

	100 <div class="absolute" style="grid-column: foo / 1; grid-row: foo / 1;"

	101 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expect ed-height="15">

	102 </div>

	103 <div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;"

	104 data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expe cted-height="15">

	105 </div>

	106 <div class="absolute" style="grid-column: foo / 1; grid-row: 1 / 2;"

	107 data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expec ted-height="50">

	108 </div>

	109 <div class="absolute" style="grid-column: 3 / foo; grid-row: 3 / foo;"

	110 data-offset-x="315" data-offset-y="215" data-expected-width="215" data-e xpected-height="115">

	111 </div>

	112 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / foo;"

	113 data-offset-x="115" data-offset-y="215" data-expected-width="200" data-e xpected-height="115">

	114 </div>

	115 <div class="absolute" style="grid-column: 3 / foo; grid-row: 2 / 3;"

	116 data-offset-x="315" data-offset-y="65" data-expected-width="215" data-ex pected-height="150">

	117 </div>

	118 </div>

	119

	120 </body>

OLD	NEW