third_party/WebKit/LayoutTests/css3/flexbox/flex-align.html - Issue 1875263005: [css-flexbox] More correctly implement percentage sizing

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

Issue 1875263005: [css-flexbox] More correctly implement percentage sizing (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 8 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 | « third_party/WebKit/LayoutTests/css3/flexbox/definite-cross-sizes.html ('k') | third_party/WebKit/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html » ('j') | third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp » ('J')
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 <link href="resources/flexbox.css" rel="stylesheet">	3 <link href="resources/flexbox.css" rel="stylesheet">

4 <style>	4 <style>

5 body {	5 body {

6 margin: 0;	6 margin: 0;

7 }	7 }

8 .flexbox {	8 .flexbox {

9 width: 600px;	9 width: 600px;

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

(...skipping 53 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
64 <div class="flexbox">	64 <div class="flexbox">

65 <div data-expected-height="60" data-offset-y="0" style="flex: 1 0 0; height: 60px;"></div>	65 <div data-expected-height="60" data-offset-y="0" style="flex: 1 0 0; height: 60px;"></div>

66 <div data-expected-height="120" data-offset-y="0" style="flex: 1 0 0;"></div>	66 <div data-expected-height="120" data-offset-y="0" style="flex: 1 0 0;"></div>

67 <div data-expected-height="60" data-offset-y="30" style="flex: 1 0 0; height: 60px; margin: auto 0;"></div>	67 <div data-expected-height="60" data-offset-y="30" style="flex: 1 0 0; height: 60px; margin: auto 0;"></div>

68 <div data-expected-height="0" data-offset-y="120" style="flex: 1 0 0; margin: auto 0 0;"></div>	68 <div data-expected-height="0" data-offset-y="120" style="flex: 1 0 0; margin: auto 0 0;"></div>

69 <div data-expected-height="0" data-offset-y="60" style="flex: 1 0 0; margin: a uto 0;"></div>	69 <div data-expected-height="0" data-offset-y="60" style="flex: 1 0 0; margin: a uto 0;"></div>

70 <div data-expected-height="100" data-offset-y="10" style="flex: 1 0 0; height: 100px; margin: 10px 0;"></div>	70 <div data-expected-height="100" data-offset-y="10" style="flex: 1 0 0; height: 100px; margin: 10px 0;"></div>

71 <div data-expected-height="50" data-offset-y="20" style="flex: 1 0 0; height: 50px; margin: 20px 0 10px;"></div>	71 <div data-expected-height="50" data-offset-y="20" style="flex: 1 0 0; height: 50px; margin: 20px 0 10px;"></div>

72 <div data-expected-height="90" data-offset-y="20" style="flex: 1 0 0; margin: 20px 0 10px;"></div>	72 <div data-expected-height="90" data-offset-y="20" style="flex: 1 0 0; margin: 20px 0 10px;"></div>

73 <div data-expected-height="120" data-offset-y="0" style="flex: 1 0 0;">	73 <div data-expected-height="120" data-offset-y="0" style="flex: 1 0 0;">

74 <!-- Since no parent has a fixed height, this div shrink-wraps. -->	74 <div data-expected-height="120" style="height: 100%; background-color:black" ></div>

75 <div data-expected-height="0" style="height: 100%; background-color:black">< /div>

76 </div>	75 </div>

77 </div>	76 </div>

78	77

79 <div class="flexbox" style="align-items: flex-start">	78 <div class="flexbox" style="align-items: flex-start">

80 <div data-expected-height="0" data-offset-y="0" style="flex: 1 0 0;"></div>	79 <div data-expected-height="0" data-offset-y="0" style="flex: 1 0 0;"></div>

81 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height : 100px;"></div>	80 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height : 100px;"></div>

82 </div>	81 </div>

83	82

84 <div class="flexbox" style="align-items: flex-end">	83 <div class="flexbox" style="align-items: flex-end">

85 <div data-expected-height="0" data-offset-y="100" style="flex: 1 0 0;"></div >	84 <div data-expected-height="0" data-offset-y="100" style="flex: 1 0 0;"></div >

(...skipping 202 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
288 {	287 {

289 if (!condition)	288 if (!condition)

290 document.getElementById("results").innerText += msg;	289 document.getElementById("results").innerText += msg;

291 }	290 }

292	291

293 additionalBaselineChecks();	292 additionalBaselineChecks();

294 </script>	293 </script>

295	294

296 </body>	295 </body>

297 </html>	296 </html>

OLD	NEW