LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html - Issue 289903007: Inline flexbox width is wrongly calculated when wrapping vertically

Side by Side Diff: LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.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: 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

« no previous file with comments | « no previous file | LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation-expected.txt » ('j') | Source/core/rendering/RenderFlexibleBox.cpp » ('J')
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/flexbox.css" rel="stylesheet">

	4 <style>

	5 .inline-flexbox {

	6 background-color: #aaa;

	7 position: relative;

	8 }

	9

	10 .writing-mode-vertical {

	11 -webkit-writing-mode: vertical-lr;
	tony 2014/07/21 17:50:59 I would use vertical-rl instead. Neither are very I would use vertical-rl instead. Neither are very popular, but vertical-rl is how you would write CJK. harpreet.sk 2014/07/22 10:10:23 Done. Show quoted text On 2014/07/21 17:50:59, tony wrote: > I would use vertical-rl instead. Neither are very popular, but vertical-rl is > how you would write CJK. Done.
	12 }

	13 .inline-flexbox > * {

	14 flex: none;

	15 }

	16 .inline-flexbox :nth-child(1) {

	17 background-color: lightblue;

	18 }

	19 .inline-flexbox :nth-child(2) {

	20 background-color: lightgreen;

	21 }

	22 .inline-flexbox :nth-child(3) {

	23 background-color: pink;

	24 }

	25 .inline-flexbox :nth-child(4) {

	26 background-color: yellow;

	27 }

	28 </style>

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

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

	31 <div class="inline-flexbox column align-content-flex-start wrap" data-expected-w idth="100">
	tony 2014/07/21 17:50:59 I think all the flexboxes should have a expected-h I think all the flexboxes should have a expected-height too. harpreet.sk 2014/07/22 10:10:23 Done. Show quoted text On 2014/07/21 17:50:59, tony wrote: > I think all the flexboxes should have a expected-height too. Done.
	32 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div>
	tony 2014/07/21 17:50:59 Looks like all the flex items have a width of 100p Looks like all the flex items have a width of 100px. Can you change that in some test cases? harpreet.sk 2014/07/22 10:10:23 Done. Show quoted text On 2014/07/21 17:50:59, tony wrote: > Looks like all the flex items have a width of 100px. Can you change that in > some test cases? Done.
	33 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20">< /div>

	34 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="30">< /div>

	35 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40">< /div>

	36 </div>

	37

	38 <div class="inline-flexbox column align-content-flex-start wrap" style="height: 35px" data-expected-width="200">

	39 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div>

	40 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20">< /div>

	41 <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"> </div>

	42 <div style="width: 100px; height: 20px" data-offset-x="100" data-offset-y="10" ></div>

	43 </div>

	44

	45 <div style="width: 300px; height:100px">
	tony 2014/07/21 17:50:58 What is the height here for? What is the height here for? harpreet.sk 2014/07/22 10:10:23 No use of height so removed. Show quoted text On 2014/07/21 17:50:58, tony wrote: > What is the height here for? No use of height so removed.
	46 <div class="inline-flexbox column align-content-flex-start wrap" style="width: 5 0%" data-expected-width="150">

	47 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div>

	48 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20">< /div>

	49 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="30">< /div>

	50 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40">< /div>

	51 </div>

	52 </div>

	53

	54 <div style="width: 300px; height:100px">
	tony 2014/07/21 17:50:59 What is the height here for? What is the height here for? harpreet.sk 2014/07/22 10:10:23 No use of height so removed. Show quoted text On 2014/07/21 17:50:59, tony wrote: > What is the height here for? No use of height so removed.
	55 <div class="inline-flexbox column align-content-flex-start wrap" style="width: 5 0%; height: 35px;" data-expected-width="150">

	56 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div>

	57 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20">< /div>

	58 <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"> </div>

	59 <div style="width: 100px; height: 20px" data-offset-x="100" data-offset-y="10" ></div>

	60 </div>

	61 </div>

	62

	63 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-ver tical" data-expected-height="20">

	64 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div>

	65 <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"> </div>

	66 <div style="width: 100px; height: 10px" data-offset-x="200" data-offset-y="0"> </div>

	67 <div style="width: 100px; height: 20px" data-offset-x="300" data-offset-y="0"> </div>

	68 </div>

	69

	70 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-ver tical" style="width: 200px" data-expected-height="40">

	71 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div>

	72 <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"> </div>

	73 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20">< /div>

	74 <div style="width: 100px; height: 20px" data-offset-x="100" data-offset-y="20" ></div>

	75 </div>

	76

	77 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-ver tical" data-expected-height="20">

	78 <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-off set-x="0" data-offset-y="0"></div>

	79 <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-off set-x="100" data-offset-y="0"></div>

	80 <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-off set-x="200" data-offset-y="0"></div>

	81 <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-off set-x="300" data-offset-y="0"></div>

	82 </div>

	83

	84 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-ver tical" style="width: 200px" data-expected-height="40">

	85 <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-off set-x="0" data-offset-y="0"></div>

	86 <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-off set-x="100" data-offset-y="0"></div>

	87 <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-off set-x="0" data-offset-y="20"></div>

	88 <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-off set-x="100" data-offset-y="20"></div>

	89 </div>

	90 </body>

	91 </html>

OLD	NEW