LayoutTests/css3/flexbox/multiline-shrink-to-fit.html - Issue 289903007: Inline flexbox width is wrongly calculated when wrapping vertically

Side by Side Diff: LayoutTests/css3/flexbox/multiline-shrink-to-fit.html

Issue 289903007: Inline flexbox width is wrongly calculated when wrapping vertically (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Addressing comments of patch set 7 Created 6 years, 5 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
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <style>	3 <style>

4 .flexbox {	4 .flexbox {

5 display: -webkit-flex;	5 display: -webkit-flex;

6 background-color: #aaa;	6 background-color: #aaa;

7 position: relative;	7 position: relative;

8 -webkit-flex-wrap: wrap;	8 -webkit-flex-wrap: wrap;

9 -webkit-flex-direction: column;	9 -webkit-flex-direction: column;

10 float: left;	10 float: left;

(...skipping 17 matching lines...) Expand all Loading...
28 </style>	28 </style>

29 <body>	29 <body>

30 <p>Test to make sure that multiline column flexboxes shrink-to-fit properly.</p>	30 <p>Test to make sure that multiline column flexboxes shrink-to-fit properly.</p>

31	31

32 <div class="flexbox">	32 <div class="flexbox">

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

34 <div style="width: 100px; height: 10px"></div>	34 <div style="width: 100px; height: 10px"></div>

35 <div style="width: 100px; height: 10px"></div>	35 <div style="width: 100px; height: 10px"></div>

36 <div style="width: 100px; height: 20px"></div>	36 <div style="width: 100px; height: 20px"></div>

37 </div>	37 </div>

38 <p style="clear:left">The grey background should be 400px wide.</p>	38 <p style="clear:left">The grey background should be 100px wide.</p>

39	39

40 <div class="flexbox" style="height: 30px">	40 <div class="flexbox" style="height: 30px">

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

42 <div style="width: 100px; height: 10px"></div>	42 <div style="width: 100px; height: 10px"></div>

43 <div style="width: 100px; height: 10px"></div>	43 <div style="width: 100px; height: 10px"></div>

44 <div style="width: 100px; height: 20px"></div>	44 <div style="width: 100px; height: 20px"></div>

45 </div>	45 </div>

46 <p style="clear:left">The grey background should be 400px wide.</p>	46 <p style="clear:left">The grey background should be 100px wide.</p>

47	47

48 <div style="width: 150px">	48 <div style="width: 150px">

49 <div class="flexbox">	49 <div class="flexbox">

50 <div style="width: 100px; height: 20px"></div>	50 <div style="width: 100px; height: 20px"></div>

51 <div style="width: 100px; height: 10px"></div>	51 <div style="width: 100px; height: 10px"></div>

52 <div style="width: 100px; height: 10px"></div>	52 <div style="width: 100px; height: 10px"></div>

53 <div style="width: 100px; height: 20px"></div>	53 <div style="width: 100px; height: 20px"></div>

54 </div>	54 </div>

55 </div>	55 </div>

56 <p style="clear:left">The grey background should be 150px wide.</p>	56 <p style="clear:left">The grey background should be 100px wide.</p>

57	57

58 <div style="width: 150px">	58 <div style="width: 150px">

59 <div class="flexbox" style="height: 35px">	59 <div class="flexbox" style="height: 35px">

60 <div style="width: 100px; height: 20px"></div>	60 <div style="width: 100px; height: 20px"></div>

61 <div style="width: 100px; height: 10px"></div>	61 <div style="width: 100px; height: 10px"></div>

62 <div style="width: 100px; height: 10px"></div>	62 <div style="width: 100px; height: 10px"></div>

63 <div style="width: 100px; height: 20px"></div>	63 <div style="width: 100px; height: 20px"></div>

64 </div>	64 </div>

65 </div>	65 </div>

66 <p style="clear:left">The grey background should be 150px wide and 5px should	66 <p style="clear:left">The grey background should be 100px wide and 5px should

67 stick out the bottom.</p>	67 stick out the bottom.</p>

68	68

69 </body>	69 </body>

70 </html>	70 </html>

OLD	NEW