LayoutTests/css3/flexbox/nested-stretch.html - Issue 1088633002: Unprefix flexbox tests.

Side by Side Diff: LayoutTests/css3/flexbox/nested-stretch.html

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

Patch Set: whoops, a > went missing 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

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

2 <html>	2 <html>

3 <head>	3 <head>

4 <style>	4 <style>

5 div {	5 div {

6 outline: 1px solid black;	6 outline: 1px solid black;

7 background: hsla(210,100%,90%, .8);	7 background: hsla(210,100%,90%, .8);

8 padding: 5px;	8 padding: 5px;

9 margin: 5px;	9 margin: 5px;

10 }	10 }

11	11

12 .flexbox {	12 .flexbox {

13 display: -webkit-flex;	13 display: flex;

14 }	14 }

15	15

16 .row {	16 .row {

17 -webkit-flex-direction: row;	17 flex-direction: row;

18 }	18 }

19	19

20 .column {	20 .column {

21 display: -webkit-flex;	21 display: flex;

22 -webkit-flex-direction: column;	22 flex-direction: column;

23 }	23 }

24	24

25 .flex {	25 .flex {

26 -webkit-flex: 1 0 auto;	26 flex: 1 0 auto;

27 }	27 }

28 </style>	28 </style>

29 <script src="../../resources/check-layout.js"></script>	29 <script src="../../resources/check-layout.js"></script>

30 </head>	30 </head>

31 <body onload="checkLayout('.flexbox')">	31 <body onload="checkLayout('.flexbox')">

32 There should be two boxes of equal height on the left and 3 boxes of equal	32 There should be two boxes of equal height on the left and 3 boxes of equal

33 height on the right.	33 height on the right.

34 <div class="flexbox row" style="width: 600px">	34 <div class="flexbox row" style="width: 600px">

35 <div data-expected-width=290 data-expected-height=220 class="column flex">	35 <div data-expected-width=290 data-expected-height=220 class="column flex">

36 <div data-expected-width=270 data-expected-height=95 class="flex"></div>	36 <div data-expected-width=270 data-expected-height=95 class="flex"></div>

37 <div data-expected-width=270 data-expected-height=95 class="flex"></div>	37 <div data-expected-width=270 data-expected-height=95 class="flex"></div>

38 </div>	38 </div>

39 <div data-expected-width=290 data-expected-height=220 class="column flex">	39 <div data-expected-width=290 data-expected-height=220 class="column flex">

40 <div data-expected-width=270 data-expected-height=60 class="flex" style="hei ght: 50px;"></div>	40 <div data-expected-width=270 data-expected-height=60 class="flex" style="hei ght: 50px;"></div>

41 <div data-expected-width=270 data-expected-height=60 class="flex" style="hei ght: 50px;"></div>	41 <div data-expected-width=270 data-expected-height=60 class="flex" style="hei ght: 50px;"></div>

42 <div data-expected-width=270 data-expected-height=60 class="flex" style="hei ght: 50px;"></div>	42 <div data-expected-width=270 data-expected-height=60 class="flex" style="hei ght: 50px;"></div>

43 </div>	43 </div>

44 </div>	44 </div>

45	45

46 None of the boxes should overflow and the inner most boxes should be end aligned .	46 None of the boxes should overflow and the inner most boxes should be end aligned .

47 <div class="flexbox column" style="width: 600px; height: 300px; position: relati ve;">	47 <div class="flexbox column" style="width: 600px; height: 300px; position: relati ve;">

48 <div data-expected-width=590 data-expected-height=250 class="column flex" styl e="-webkit-justify-content: flex-end">	48 <div data-expected-width=590 data-expected-height=250 class="column flex" styl e="justify-content: flex-end">

49 <div data-offset-y="180" data-expected-width=570 data-expected-height=30 sty le="height: 20px; -webkit-flex: none;"></div>	49 <div data-offset-y="180" data-expected-width=570 data-expected-height=30 sty le="height: 20px; flex: none;"></div>

50 <div data-offset-y="220" data-expected-width=570 data-expected-height=30 sty le="height: 20px; -webkit-flex: none;"></div>	50 <div data-offset-y="220" data-expected-width=570 data-expected-height=30 sty le="height: 20px; flex: none;"></div>

51 </div>	51 </div>

52 <div data-expected-width=590 data-expected-height=30 style="height: 20px; -web kit-flex: none;"></div>	52 <div data-expected-width=590 data-expected-height=30 style="height: 20px; flex : none;"></div>

53 </div>	53 </div>

54	54

55	55

56 </body>	56 </body>

57 </html>	57 </html>

OLD	NEW