LayoutTests/css3/flexbox/multiline-reverse-wrap-baseline.html - Issue 1088633002: Unprefix flexbox tests.

Side by Side Diff: LayoutTests/css3/flexbox/multiline-reverse-wrap-baseline.html

Issue 1088633002: Unprefix flexbox tests. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 5 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 | Annotate | Revision Log

« LayoutTests/css3/flexbox/anonymous-block-merge-crash.html ('K') | « LayoutTests/css3/flexbox/multiline-min-max.html ('k') | LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow.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 .flexbox {	4 .flexbox {

5 width: 200px;	5 width: 200px;

6 display: -webkit-flex;	6 display: flex;

7 background-color: #aaa;	7 background-color: #aaa;

8 position: relative;	8 position: relative;

9 -webkit-flex-wrap: wrap-reverse;	9 flex-wrap: wrap-reverse;

10 -webkit-align-items: baseline;	10 align-items: baseline;

11 margin-bottom: 10px;	11 margin-bottom: 10px;

12 }	12 }

13 .flexbox > div {	13 .flexbox > div {

14 border: 0;	14 border: 0;

15 }	15 }

16	16

17 .flexbox :nth-child(1) {	17 .flexbox :nth-child(1) {

18 background-color: lightblue;	18 background-color: lightblue;

19 }	19 }

20 .flexbox :nth-child(2) {	20 .flexbox :nth-child(2) {

21 background-color: lightgreen;	21 background-color: lightgreen;

22 }	22 }

23 .flexbox :nth-child(3) {	23 .flexbox :nth-child(3) {

24 background-color: pink;	24 background-color: pink;

25 }	25 }

26 .flexbox :nth-child(4) {	26 .flexbox :nth-child(4) {

27 background-color: yellow;	27 background-color: yellow;

28 }	28 }

29 </style>	29 </style>

30 <body>	30 <body>

31 <p>Test to make sure that wrap-reverse flips the cross axis directions and items	31 <p>Test to make sure that wrap-reverse flips the cross axis directions and items

32 with baseline alignment are aligned to cross axis start.</p>	32 with baseline alignment are aligned to cross axis start.</p>

33	33

34 <div class="flexbox">	34 <div class="flexbox">

35 <div style="-webkit-flex: 1 0 100px;">first<br>first<br>first</div>	35 <div style="flex: 1 0 100px;">first<br>first<br>first</div>

36 <div style="-webkit-flex: 1 0 100px;">second</div>	36 <div style="flex: 1 0 100px;">second</div>

37 <div style="-webkit-flex: 1 0 100px; margin-top: 5px">third</div>	37 <div style="flex: 1 0 100px; margin-top: 5px">third</div>

38 <div style="-webkit-flex: 1 0 100px;">fourth<br>fourth</div>	38 <div style="flex: 1 0 100px;">fourth<br>fourth</div>

39 </div>	39 </div>

40	40

41 <div class="flexbox">	41 <div class="flexbox">

42 <div style="-webkit-flex: 1 0 100px;">first<br>first<br>first</div>	42 <div style="flex: 1 0 100px;">first<br>first<br>first</div>

43 <div style="-webkit-flex: 1 0 100px;">second</div>	43 <div style="flex: 1 0 100px;">second</div>

44 <div style="-webkit-flex: 1 0 100px;">third</div>	44 <div style="flex: 1 0 100px;">third</div>

45 <div style="-webkit-flex: 1 0 100px; margin-bottom: 5px">fourth<br>fourth</div >	45 <div style="flex: 1 0 100px; margin-bottom: 5px">fourth<br>fourth</div>

46 </div>	46 </div>

47	47

48 <div class="flexbox" style="width: 300px;">	48 <div class="flexbox" style="width: 300px;">

49 <div style="-webkit-flex: 1 0 100px; -webkit-align-self: flex-start; height: 1 00px">first</div>	49 <div style="flex: 1 0 100px; align-self: flex-start; height: 100px">first</div >

50 <div style="-webkit-flex: 1 0 100px;">second</div>	50 <div style="flex: 1 0 100px;">second</div>

51 <div style="-webkit-flex: 1 0 100px;">third<br>third</div>	51 <div style="flex: 1 0 100px;">third<br>third</div>

52 </div>	52 </div>

53	53

54 </body>	54 </body>

55 </html>	55 </html>

OLD	NEW