third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html - Issue 2417853002: [css-grid] Implementing the grid's first line baseline.

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html

Issue 2417853002: [css-grid] Implementing the grid's first line baseline. (Closed)

Patch Set: Patch rebased. Created 4 years, 1 month 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/fast/css-grid-layout/grid-baseline-margins.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.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>

3 <head>

4 <link href="resources/flexbox.css" rel="stylesheet">

5 <style>	2 <style>

6 .flexbox, .inline-flexbox {	3 .flexbox {

7 background-color: lightgrey;	4 display: -webkit-flex;

	5 display: flex;

8 }	6 }

9	7 .inline-flexbox {

10 .inline-block {	8 display: -webkit-inline-flex;

11 display: inline-block;	9 display: inline-flex;

12 }	10 }

13	11 .flex-one {

14 .border {	12 -webkit-flex: 1;

15 border: 11px solid pink;	13 flex: 1;

16 }	14 }

17	15 .inline-block { display: inline-block; }

18 .padding {	16 .flexbox, .inline-flexbox { background-color: lightgrey; }

19 padding: 13px;	17 .border { border: 11px solid pink; }

20 }	18 .padding { padding: 13px; }

21	19 .margin { margin: 8px 0; }

22 .margin {

23 margin: 8px 0;

24 }

25

26 .flexbox > div {	20 .flexbox > div {

27 min-width: 0;	21 min-width: 0;

28 min-height: 0;	22 min-height: 0;

29 }	23 }

30 </style>	24 </style>

31 </head>	25 <p>This test ensures that Baseline Alignment works for 1-dimensional Grid like i n Flexible Box, even using margins, paddings and borders.</p>

32 <body>

33

34 <div>	26 <div>

35 before text	27 before text

36 <div class="border" style="display: inline-block; background-color: lightgrey">	28 <div class="border" style="display: inline-block; background-color: lightgrey">

37 <div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;">	29 <div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;">

38 baseline	30 baseline

39 </div>	31 </div>

40 </div>	32 </div>

41 after text	33 after text

42 </div>	34 </div>

43	35

(...skipping 30 matching lines...) Expand all Loading...
74 </div>	66 </div>

75 </div>	67 </div>

76 middle of	68 middle of

77 <div class="inline-flexbox margin border padding"></div>	69 <div class="inline-flexbox margin border padding"></div>

78 the grey box.	70 the grey box.

79 </div>	71 </div>

80	72

81 <div>	73 <div>

82 Should align with the top	74 Should align with the top

83 <div class="inline-block border margin padding" style="background-color: pink">	75 <div class="inline-block border margin padding" style="background-color: pink">

84 <div class="flexbox border margin padding" style="width: 50px; height: 50px; b ackground-color: pink">	76 <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink">

85 <div style="width: 200px; overflow: scroll; background-color: lightgrey; m argin-top: 4px; border-top: 9px solid pink;"></div>	77 <div style="width: 200px; overflow: scroll; background-color: lightgrey; m argin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;">< /div>

86 </div>	78 </div>

87 </div>	79 </div>

88 of the horizontal scrollbar.	80 of the horizontal scrollbar.

89 </div>	81 </div>

90	82

91 <div>	83 <div>

92 Should align 10px above the	84 Should align 10px above the

93 <div class="inline-block" style="background-color: pink">	85 <div class="inline-block" style="background-color: pink">

94 <div class="flexbox" style="width: 50px; height: 50px; background-color: pink" >	86 <div class="flexbox" style="width: 100px; height: 100px; background-color: pin k">

95 <div style="width: 200px; overflow: scroll; background-color: lightgrey; p adding-bottom: 10px"></div>	87 <div style="width: 200px; overflow: scroll; background-color: lightgrey; p adding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-botto m: 10px solid pink;"></div>

96 </div>	88 </div>

97 </div>	89 </div>

98 horizontal scrollbar, if one is visible.	90 horizontal scrollbar, if one is visible.

99 </div>	91 </div>

100

101 </body>

102 </html>

OLD	NEW