LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto.html - Issue 439063002: flexbox: incorrect flexbox height with overflow:auto on flex item

Side by Side Diff: LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto.html

Issue 439063002: flexbox: incorrect flexbox height with overflow:auto on flex item (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 6 years, 4 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>

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

	4 <style>

	5 .flexbox {

	6 border:5px solid green;
	cbiesinger 2014/08/08 03:47:29 nit: please consistently add a space after the col nit: please consistently add a space after the colon harpreet.sk 2014/08/08 05:35:04 Done. Show quoted text On 2014/08/08 03:47:29, cbiesinger wrote: > nit: please consistently add a space after the colon Done.
	7 position:relative;

	8 width:50px;

	9 }

	10

	11 .inline-flexbox {

	12 border:5px solid green;

	13 position:relative;

	14 height:50px;

	15 }

	16

	17 .overflow {

	18 border:1px solid red;

	19 overflow:auto;

	20 }

	21

	22 .vertical {

	23 -webkit-writing-mode: vertical-rl;

	24 }

	25 </style>

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

	27 <body onload="checkLayout('.flexbox'); checkLayout('.inline-flexbox')">

	28 <div class="flexbox" data-expected-height="47">
	cbiesinger 2014/08/08 03:47:29 I must be missing something. I don't understand wh I must be missing something. I don't understand why this has an expected height of 47. Shouldn't it be 22 because that's what the inner div's height is, and nothing else affects the height? That's what I Get when I paste this test into jsbin, but clearly this test passes, so I must be missing something... cbiesinger 2014/08/08 03:56:39 I must've done something wrong in my test. it's 47 Show quoted text On 2014/08/08 03:47:29, cbiesinger wrote: > I must be missing something. I don't understand why this has an expected height > of 47. Shouldn't it be 22 because that's what the inner div's height is, and > nothing else affects the height? That's what I Get when I paste this test into > jsbin, but clearly this test passes, so I must be missing something... I must've done something wrong in my test. it's 47 mostly because of the scrollbar.
	29 <div class="overflow"><div style="width:100px; height:20px"></div></div>
	cbiesinger 2014/08/08 03:47:29 also in these attributes also in these attributes harpreet.sk 2014/08/08 05:35:04 Done. Show quoted text On 2014/08/08 03:47:29, cbiesinger wrote: > also in these attributes Done.
	30 </div>

	31

	32 <div class="flexbox row-reverse" data-expected-height="47">

	33 <div class="overflow"><div style="width:100px; height:20px"></div></div>

	34 </div>

	35

	36 <div class="flexbox vertical" data-expected-height="32">

	37 <div class="overflow"><div style="width:100px; height:20px"></div></div>

	38 </div>

	39

	40 <div class="flexbox row-reverse vertical" data-expected-height="32">

	41 <div class="overflow"><div style="width:100px; height:20px"></div></div>

	42 </div>

	43

	44 <div class="flexbox" data-expected-height="47">

	45 <div class="overflow align-self-baseline"><div style="width:100px; height:20px "></div></div>

	46 </div>

	47

	48 <div class="flexbox row-reverse" data-expected-height="47">

	49 <div class="overflow align-self-baseline"><div style="width:100px; height:20px "></div></div>

	50 </div>

	51

	52 <div class="flexbox vertical" data-expected-height="32">

	53 <div class="overflow align-self-baseline"><div style="width:100px; height:20px "></div></div>

	54 </div>

	55

	56 <div class="flexbox row-reverse vertical" data-expected-height="32">

	57 <div class="overflow align-self-baseline"><div style="width:100px; height:20px "></div></div>

	58 </div>

	59

	60 <div class="inline-flexbox column" data-expected-width="32">

	61 <div class="overflow"><div style="width:20px; height:100px"></div></div>

	62 </div>

	63

	64 <div class="inline-flexbox column-reverse" data-expected-width="32">

	65 <div class="overflow"><div style="width:20px; height:100px"></div></div>

	66 </div>

	67

	68 <div class="inline-flexbox column vertical" data-expected-width="47">

	69 <div class="overflow"><div style="width:20px; height:100px"></div></div>

	70 </div>

	71

	72 <div class="inline-flexbox column-reverse vertical" data-expected-width="47">

	73 <div class="overflow"><div style="width:20px; height:100px"></div></div>

	74 </div>

	75

	76 <div class="inline-flexbox column" data-expected-width="32">

	77 <div class="overflow align-self-baseline"><div style="width:20px; height:100px "></div></div>

	78 </div>

	79

	80 <div class="inline-flexbox column-reverse" data-expected-width="32">

	81 <div class="overflow align-self-baseline"><div style="width:20px; height:100px "></div></div>

	82 </div>

	83

	84 <div class="inline-flexbox column vertical" data-expected-width="32">

	85 <div class="overflow align-self-baseline"><div style="width:20px; height:100px "></div></div>

	86 </div>

	87

	88 <div class="inline-flexbox column-reverse vertical" data-expected-width="32">

	89 <div class="overflow align-self-baseline"><div style="width:20px; height:100px "></div></div>

	90 </div>

	91 </body>

	92 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto-expected.txt » ('j') | Source/core/rendering/RenderFlexibleBox.cpp » ('J')