LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items.html - Issue 273893002: New Layout Test to verify 'float' and 'clear' don't affect grid's items.

Side by Side Diff: LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items.html

Issue 273893002: New Layout Test to verify 'float' and 'clear' don't affect grid's items. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Applied suggested changes. Created 6 years, 7 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

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>
	ojan 2014/05/21 18:40:57 We usually leave out the <html><head> and <body> e We usually leave out the <html><head> and <body> elements unless the test requires it. They just add noise. jfernandez 2014/05/22 15:16:52 Done, even that most of the files in the css-grid- Show quoted text On 2014/05/21 18:40:57, ojan wrote: > We usually leave out the <html><head> and <body> elements unless the test > requires it. They just add noise. Done, even that most of the files in the css-grid-layout folder have such elements.
	3 <link href="resources/grid.css" rel="stylesheet">

	4 <head>

	5 <style>

	6 .grid {

	7 background-color:grey;

	8 }

	9 .gridItem {
	ojan 2014/05/21 18:40:57 It'd be good to give each grid item a different ba It'd be good to give each grid item a different background color. That way we can be sure they're all in the right place. jfernandez 2014/05/22 15:16:52 Actually, the "firstRowSecondColumn" and related s Show quoted text On 2014/05/21 18:40:57, ojan wrote: > It'd be good to give each grid item a different background color. That way we > can be sure they're all in the right place. Actually, the "firstRowSecondColumn" and related style classes, not only place the item in the appropriated row and column, but it gives a different color depending on the position.
	10 width: 50px;

	11 height: 50px;

	12 }

	13 </style>

	14 </head>

	15 <body>

	16 <div>This test checks that the grid's items are not affected by the 'float' and 'clear' properties.</div>

	17 <div class="grid">

	18 <div style="float: right;" class="gridItem firstRowFirstColumn"></div>
	ojan 2014/05/21 18:40:57 Why are there 6 divs here and only 4 in the expect Why are there 6 divs here and only 4 in the expected.html? jfernandez 2014/05/22 15:16:52 Done. Show quoted text On 2014/05/21 18:40:57, ojan wrote: > Why are there 6 divs here and only 4 in the expected.html? Done. ojan 2014/05/23 02:13:36 I'm still confused by this. Do some of the divs ob Show quoted text On 2014/05/22 15:16:52, jfernandez wrote: > On 2014/05/21 18:40:57, ojan wrote: > > Why are there 6 divs here and only 4 in the expected.html? > > Done. I'm still confused by this. Do some of the divs obscure other ones? If so, how are we sure that this test is actually verifying the div is rendering in the right place (e.g. instead of not rendering at all). jfernandez 2014/05/23 14:57:06 I understand what you mean and I agree; it's confu Show quoted text On 2014/05/23 02:13:36, ojan wrote: > On 2014/05/22 15:16:52, jfernandez wrote: > > On 2014/05/21 18:40:57, ojan wrote: > > > Why are there 6 divs here and only 4 in the expected.html? > > > > Done. > > I'm still confused by this. Do some of the divs obscure other ones? If so, how > are we sure that this test is actually verifying the div is rendering in the > right place (e.g. instead of not rendering at all). I understand what you mean and I agree; it's confusing. The reason to add several items in the same grid cell is to check out that float:left does not affect the items. Being overlapped is the proof that floating is not affecting. I think that using the check-layout script the test would be clearer. I've added a new case without the grid layout to show how the items would be placed in the container based on the float/clear properties.
	19 <div class="gridItem firstRowFirstColumn"></div>

	20 <div style="float: left;" class="gridItem firstRowSecondColumn"></div>

	21 <div style="float: right;" class="gridItem secondRowFirstColumn"></div>

	22 <div style="clear: right;" class="gridItem secondRowFirstColumn"></div>

	23 <div style="float: left;" class="gridItem secondRowSecondColumn"></div>

	24 </div>

	25 </body>

	26 </html>

	27

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items-expected.html » ('j') | no next file with comments »