third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-children-writing-modes.html - Issue 1909153002: [css-grid] Fix bug with positioned items in vertical writing mode

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-children-writing-modes.html

Issue 1909153002: [css-grid] Fix bug with positioned items in vertical writing mode (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Increase size of grids in the tests to avoid weird visual results 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

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

2 <html>	2 <html>

3 <link href="resources/grid.css" rel="stylesheet">	3 <link href="resources/grid.css" rel="stylesheet">

4 <style>	4 <style>

5	5

6 .grid {	6 .grid {

7 margin: 1px;	7 margin: 5px;

8 width: 50px;	8 width: 100px;

9 height: 25px;	9 height: 75px;

10 grid: 100% / 100%;	10 grid: 20px / 30px;

11 padding: 5px 10px 15px 20px;	11 padding: 5px 10px 15px 20px;

	12 border-style: solid;

	13 border-width: 5px 10px 15px 20px;

	14 float: left;

12 /* Ensures that the grid container is the containing block of the grid child ren. */	15 /* Ensures that the grid container is the containing block of the grid child ren. */

13 position: relative;	16 position: relative;

14 }	17 }

15	18

16 .absolute {	19 .absolute {

17 position: absolute;	20 position: absolute;

18 }	21 }

19	22

20 .onlyFirstRowOnlyFirstColumn {	23 .onlyFirstRowOnlyFirstColumn {

21 background-color: green;	24 background-color: green;

22 grid-column: 1 / 2;	25 grid-column: 1 / 2;

23 grid-row: 1 / 2;	26 grid-row: 1 / 2;

24 }	27 }

25	28

	29 .offsets {

	30 left: 0;

	31 top: 0;

	32 }

	33

26 .red {	34 .red {

27 background-color: red;	35 background-color: red;

28 width: 50px;

29 height: 25px;

30 top: 5px;

31 left: 20px;

32 }	36 }

33	37

34 </style>	38 </style>

35 <body>	39 <body>

36	40

37 <p>This test checks the behavior of the positioned grid children in combination with the writing modes and text direction properties.</p>	41 <p>This test checks the behavior of the positioned grid children in combination with the writing modes and text direction properties.</p>

38 <p>For the test to pass you should see no red and all the green boxes should hav e the very the same position and size within each grey box. The black box will b e positioned depending on the writing mode and text direction values.</p>	42 <p>For the test to pass you should see no red and only green boxes. The black bo x will be positioned depending on the writing mode and text direction values.</p >

39	43

40 <div class="grid">	44 <div class="grid">

41 <div class="sizedToGridArea red"></div>	45 <div class="red"></div>

42 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>	46 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>

43 </div>	47 </div>

44	48

45 <div class="grid verticalRL">	49 <div class="grid verticalRL">

46 <div class="sizedToGridArea red"></div>	50 <div class="red"></div>

47 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>	51 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>

48 </div>	52 </div>

49	53

50 <div class="grid verticalLR">	54 <div class="grid verticalLR">

51 <div class="sizedToGridArea red"></div>	55 <div class="red"></div>

52 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>	56 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>

53 </div>	57 </div>

54	58

55 <div class="grid directionRTL">	59 <div class="grid directionRTL">

56 <div class="sizedToGridArea red"></div>	60 <div class="red"></div>

57 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>	61 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>

58 </div>	62 </div>

59	63

60 <div class="grid verticalRL directionRTL">	64 <div class="grid verticalRL directionRTL">

61 <div class="sizedToGridArea red"></div>	65 <div class="red"></div>

62 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>	66 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>

63 </div>	67 </div>

64	68

65 <div class="grid verticalLR directionRTL">	69 <div class="grid verticalLR directionRTL">

66 <div class="sizedToGridArea red"></div>	70 <div class="red"></div>

67 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>	71 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>

68 </div>	72 </div>

69	73

	74 <div class="grid">

	75 <div class="red"></div>

	76 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div>

	77 </div>

	78

	79 <div class="grid verticalRL">

	80 <div class="red"></div>

	81 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div>

	82 </div>

	83

	84 <div class="grid verticalLR">

	85 <div class="red"></div>

	86 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div>

	87 </div>

	88

	89 <div class="grid directionRTL">

	90 <div class="red"></div>

	91 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div>

	92 </div>

	93

	94 <div class="grid verticalRL directionRTL">

	95 <div class="red"></div>

	96 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div>

	97 </div>

	98

	99 <div class="grid verticalLR directionRTL">

	100 <div class="red"></div>

	101 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div>

	102 </div>

	103

70 </body>	104 </body>

71 </html>	105 </html>

OLD	NEW