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: Addressing comments of patch set 6 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') | LayoutTests/css3/flexbox/multiline-justify-content.html » ('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-rl;

	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="110" data-expected-height="60">

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

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

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

	35 <div style="width: 110px; 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="80" data-expected-height="35">

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

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

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

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

	43 </div>

	44

	45 <div style="width: 300px;">

	46 <div class="inline-flexbox column align-content-flex-start wrap" style="width: 5 0%" data-expected-width="150" data-expected-height="60">
	tony 2014/07/22 16:42:02 I don't really understand the point of a test with I don't really understand the point of a test with a fixed width. I thought we were trying to test the shrink-to-fit behavior, but a fixed width won't test that. harpreet.sk 2014/07/23 13:43:24 This test case was added earlier to check for the Show quoted text On 2014/07/22 16:42:02, tony wrote: > I don't really understand the point of a test with a fixed width. I thought we > were trying to test the shrink-to-fit behavior, but a fixed width won't test > that. This test case was added earlier to check for the working of old solution but since it has been removed so we can remove this test case.
	47 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div>

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

	49 <div style="width: 50px; 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;">

	55 <div class="inline-flexbox column align-content-flex-start wrap" style="width: 5 0%; height: 35px;" data-expected-width="150" data-expected-height="35">

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

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

	58 <div style="width: 50px; 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-width="280" data-expected-height="20">

	64 <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="0">< /div>
	tony 2014/07/22 16:42:02 I would add more variety to the heights in some of I would add more variety to the heights in some of the vertical-rl tests. harpreet.sk 2014/07/23 13:43:24 Done. Show quoted text On 2014/07/22 16:42:02, tony wrote: > I would add more variety to the heights in some of the vertical-rl tests. Done.
	65 <div style="width: 100px; height: 10px" data-offset-x="130" data-offset-y="0"> </div>

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

	67 <div style="width: 100px; height: 20px" data-offset-x="0" 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-width="200" data-expected-height="20">

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

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

	73 <div style="width: 30px; height: 10px" data-offset-x="20" data-offset-y="0"></ 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-width="280" data-expected-height="20">

	78 <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-off set-x="180" data-offset-y="0"></div>
	tony 2014/07/22 16:42:02 Why do you set the writing mode on both the flexbo Why do you set the writing mode on both the flexbox and the children? writing-mode is an inherited property. harpreet.sk 2014/07/23 13:43:24 Oops! sorry i forget that. This test case has been Show quoted text On 2014/07/22 16:42:02, tony wrote: > Why do you set the writing mode on both the flexbox and the children? > writing-mode is an inherited property. Oops! sorry i forget that. This test case has been removed and added some new test cases.
	79 <div class="writing-mode-vertical" style="width: 50px; height: 10px" data-offs et-x="130" data-offset-y="0"></div>

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

	81 <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-off set-x="0" 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-width="200" data-expected-height="20">

	85 <div class="writing-mode-vertical" style="width: 60px; height: 20px" data-offs et-x="140" data-offset-y="0"></div>

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

	87 <div class="writing-mode-vertical" style="width: 50px; height: 10px" data-offs et-x="20" data-offset-y="0"></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