LayoutTests/css3/flexbox/style-change.html - Issue 1088633002: Unprefix flexbox tests.

Side by Side Diff: LayoutTests/css3/flexbox/style-change.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/stretched-child-shrink-on-relayout.html ('k') | LayoutTests/css3/flexbox/true-centering.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 display: -webkit-flex;	8 display: flex;

9 background-color: #aaa;	9 background-color: #aaa;

10 position: relative;	10 position: relative;

11 }	11 }

12	12

13 .flexbox > :nth-child(1) {	13 .flexbox > :nth-child(1) {

14 background-color: blue;	14 background-color: blue;

15 }	15 }

16 .flexbox > :nth-child(2) {	16 .flexbox > :nth-child(2) {

17 background-color: green;	17 background-color: green;

18 }	18 }

19	19

20 .absolute {	20 .absolute {

21 position: absolute;	21 position: absolute;

22 width: 50px;	22 width: 50px;

23 height: 50px;	23 height: 50px;

24 background-color: yellow !important;	24 background-color: yellow !important;

25 }	25 }

26 </style>	26 </style>

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

28 <body>	28 <body>

29	29

30 <p>This test verifies that changing order, align-content, align-items, align-sel f, or justify-content will relayout.</p>	30 <p>This test verifies that changing order, align-content, align-items, align-sel f, or justify-content will relayout.</p>

31	31

32 <div id="flexbox" class="flexbox" style="width: 300px; height: 300px;">	32 <div id="flexbox" class="flexbox" style="width: 300px; height: 300px;">

33 <div id="a" style="-webkit-flex: 0 0 auto; width: 100px; height: 100px;"></div >	33 <div id="a" style="flex: 0 0 auto; width: 100px; height: 100px;"></div>

34 <div id="b" style="-webkit-flex: 0 0 auto; width: 100px; height: 100px;"></div >	34 <div id="b" style="flex: 0 0 auto; width: 100px; height: 100px;"></div>

35 </div>	35 </div>

36 <script>	36 <script>

37	37

38 var flexbox = document.getElementById("flexbox");	38 var flexbox = document.getElementById("flexbox");

39 var aDiv = document.getElementById("a");	39 var aDiv = document.getElementById("a");

40 var bDiv = document.getElementById("b");	40 var bDiv = document.getElementById("b");

41	41

42 function checkValues(aXOffset, aYOffset, bXOffset, bYOffset)	42 function checkValues(aXOffset, aYOffset, bXOffset, bYOffset)

43 {	43 {

44 aDiv.setAttribute("data-offset-x", aXOffset);	44 aDiv.setAttribute("data-offset-x", aXOffset);

45 aDiv.setAttribute("data-offset-y", aYOffset);	45 aDiv.setAttribute("data-offset-y", aYOffset);

46 bDiv.setAttribute("data-offset-x", bXOffset);	46 bDiv.setAttribute("data-offset-x", bXOffset);

47 bDiv.setAttribute("data-offset-y", bYOffset);	47 bDiv.setAttribute("data-offset-y", bYOffset);

48 checkLayout('.flexbox');	48 checkLayout('.flexbox');

49 }	49 }

50	50

51 checkValues(0, 0, 100, 0);	51 checkValues(0, 0, 100, 0);

52	52

53 flexbox.style.webkitJustifyContent = "flex-end";	53 flexbox.style.justifyContent = "flex-end";

54 checkValues(100, 0, 200, 0);	54 checkValues(100, 0, 200, 0);

55	55

56 flexbox.style.webkitAlignItems = "flex-end";	56 flexbox.style.alignItems = "flex-end";

57 checkValues(100, 200, 200, 200);	57 checkValues(100, 200, 200, 200);

58	58

59 bDiv.style.webkitOrder = -1;	59 bDiv.style.webkitOrder = -1;

60 checkValues(200, 200, 100, 200);	60 checkValues(200, 200, 100, 200);

61	61

62 aDiv.style.webkitAlignSelf = "flex-start";	62 aDiv.style.alignSelf = "flex-start";

63 checkValues(200, 0, 100, 200);	63 checkValues(200, 0, 100, 200);

64	64

65 flexbox.style.width = "100px";	65 flexbox.style.width = "100px";

66 flexbox.style.webkitFlexWrap = "wrap";	66 flexbox.style.flexWrap = "wrap";

67 flexbox.style.webkitAlignContent = "flex-end";	67 flexbox.style.alignContent = "flex-end";

68 checkValues(0, 200, 0, 100);	68 checkValues(0, 200, 0, 100);

69	69

70 </script>	70 </script>

71	71

72 </body>	72 </body>

73 </html>	73 </html>

OLD	NEW