third_party/WebKit/LayoutTests/css3/flexbox/flex-justify-content.html - Issue 2832503003: [css-flex] Implement the space-evenly content-distribution value

Side by Side Diff: third_party/WebKit/LayoutTests/css3/flexbox/flex-justify-content.html

Issue 2832503003: [css-flex] Implement the space-evenly content-distribution value (Closed)

Patch Set: Fixed layout tests. Created 3 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/css3/flexbox/css-properties-expected.txt ('k') | third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <style>	3 <style>

4 body {	4 body {

5 margin: 0;	5 margin: 0;

6 }	6 }

7 .flexbox {	7 .flexbox {

8 width: 600px;	8 width: 600px;

9 display: flex;	9 display: flex;

10 background-color: #aaa;	10 background-color: #aaa;

(...skipping 78 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
89 </div>	89 </div>

90	90

91 <!-- True centering on overflow. -->	91 <!-- True centering on overflow. -->

92 <div class="flexbox" style="justify-content: space-around">	92 <div class="flexbox" style="justify-content: space-around">

93 <div data-expected-width="800" data-offset-x="-100" style="width: 800px;"></di v>	93 <div data-expected-width="800" data-offset-x="-100" style="width: 800px;"></di v>

94 </div>	94 </div>

95	95

96 <!-- Make sure we don't crash with no children. -->	96 <!-- Make sure we don't crash with no children. -->

97 <div class="flexbox" style="justify-content: space-around"></div>	97 <div class="flexbox" style="justify-content: space-around"></div>

98	98

	99 <div class="flexbox" style="justify-content: space-evenly">

	100 <div data-expected-width="100" data-offset-x="75" style="flex: 1 0 0; max-widt h: 100px;"></div>

	101 <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div >

	102 <div data-expected-width="100" data-offset-x="425" style="width: 100px;"></div >

	103 </div>

	104

	105 <div class="flexbox" style="justify-content: space-evenly">

	106 <div data-expected-width="200" data-offset-x="0" style="flex: 1 100px;"></div>

	107 <div data-expected-width="200" data-offset-x="200" style="flex: 1 100px;"></di v>

	108 <div data-expected-width="200" data-offset-x="400" style="flex: 1 100px;"></di v>

	109 </div>

	110

	111 <!-- If there's only one child, we justify-content: center. -->

	112 <div class="flexbox" style="justify-content: space-evenly">

	113 <div data-expected-width="100" data-offset-x="250" style="flex: 1 0 0; max-wid th: 100px;"></div>

	114 </div>

	115

	116 <!-- True centering on overflow. -->

	117 <div class="flexbox" style="justify-content: space-evenly">

	118 <div data-expected-width="800" data-offset-x="-100" style="width: 800px;"></di v>

	119 </div>

	120

	121 <!-- Make sure we don't crash with no children. -->

	122 <div class="flexbox" style="justify-content: space-evenly"></div>

	123

99 <!-- margin:auto applies before justify-content. -->	124 <!-- margin:auto applies before justify-content. -->

100 <div class="flexbox" style="justify-content: flex-end">	125 <div class="flexbox" style="justify-content: flex-end">

101 <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div>	126 <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div>

102 <div data-expected-width="100" data-offset-x="100" style="width: 100px; margin -right: auto"></div>	127 <div data-expected-width="100" data-offset-x="100" style="width: 100px; margin -right: auto"></div>

103 <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div >	128 <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div >

104 </div>	129 </div>

105	130

106 <!-- The justify-content does nothing here because we are shrinking. -->	131 <!-- The justify-content does nothing here because we are shrinking. -->

107 <div class="flexbox" style="justify-content: flex-end">	132 <div class="flexbox" style="justify-content: flex-end">

108 <div data-expected-width="200" data-offset-x="0" style="flex: 0 1 300px;"></di v>	133 <div data-expected-width="200" data-offset-x="0" style="flex: 0 1 300px;"></di v>

109 <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div >	134 <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div >

110 <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div >	135 <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div >

111 </div>	136 </div>

112	137

113 <!-- We overflow the flexbox (no negative flexing) and align the end. The overfl ow is to the left. -->	138 <!-- We overflow the flexbox (no negative flexing) and align the end. The overfl ow is to the left. -->

114 <div class="flexbox" style="justify-content: flex-end">	139 <div class="flexbox" style="justify-content: flex-end">

115 <div data-expected-width="300" data-offset-x="-100" style="flex: 1 0 300px;">< /div>	140 <div data-expected-width="300" data-offset-x="-100" style="flex: 1 0 300px;">< /div>

116 <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div >	141 <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div >

117 <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div >	142 <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div >

118 </div>	143 </div>

119	144

120 </body>	145 </body>

121 </html>	146 </html>

OLD	NEW