/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html

https://gitlab.com/jonnialva90/iridium-browser · HTML · 158 lines · 136 code · 21 blank · 1 comment · 0 complexity · 4d24d5271795ba4d4f5148660a268a32 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

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

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

  6. <style>
    7. 

  7. body {
    8. 

  8.     margin: 0;
    9. 

  9. }
    10. 

  10. 

  11. .grid {
    12. 

  12.     grid: 50px 50px / 100px 100px;
    13. 

  13.     position: relative;
    14. 

  14.     width: 300px;
    15. 

  15.     height: 200px;
    16. 

  16. }
    17. 

  17. 

  18. .cell {
    19. 

  19.     width: 20px;
    20. 

  20.     height: 40px;
    21. 

  21. }
    22. 

  22. 

  23. .justifyContentStart {
    24. 

  24.     justify-content: start;
    25. 

  25. }
    26. 

  26. 

  27. .justifyContentEnd {
    28. 

  28.     justify-content: end;
    29. 

  29. }
    30. 

  30. 

  31. .justifyContentCenter {
    32. 

  32.     justify-content: center;
    33. 

  33. }
    34. 

  34. 

  35. .justifyContentLeft {
    36. 

  36.     justify-content: left;
    37. 

  37. }
    38. 

  38. 

  39. .justifyContentRight {
    40. 

  40.     justify-content: right;
    41. 

  41. }
    42. 

  42. 

  43. .justifyContentFlexStart {
    44. 

  44.     justify-content: flex-start;
    45. 

  45. }
    46. 

  46. 

  47. .justifyContentFlexEnd {
    48. 

  48.     justify-content: flex-end;
    49. 

  49. }
    50. 

  50. </style>
    51. 

  51. </head>
    52. 

  52. <body onload="checkLayout('.grid')">
    53. 

  53. 

  54. <p>This test checks that the align-content property is applied correctly in vertical-RL grids.</p>
    55. 

  55. 

  56. <div style="position: relative">
    57. 

  57.     <p>direction: LTR | justify-content: 'center'</p>
    58. 

  58.     <div class="grid verticalRL justifyContentCenter" data-expected-width="300" data-expected-height="200">
    59. 

  59.         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
    60. 

  60.         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
    61. 

  61.         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
    62. 

  62.         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
    63. 

  63.     </div>
    64. 

  64. </div>
    65. 

  65. 

  66. <div style="position: relative">
    67. 

  67.     <p>direction: LTR | justify-content: 'left'</p>
    68. 

  68.     <div class="grid verticalRL justifyContentLeft" data-expected-width="300" data-expected-height="200">
    69. 

  69.         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
    70. 

  70.         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
    71. 

  71.         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    72. 

  72.         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
    73. 

  73.     </div>
    74. 

  74. </div>
    75. 

  75. 

  76. <div style="position: relative">
    77. 

  77.     <p>direction: LTR | justify-content: 'right'</p>
    78. 

  78.     <div class="grid verticalRL justifyContentRight" data-expected-width="300" data-expected-height="200">
    79. 

  79.         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
    80. 

  80.         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
    81. 

  81.         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
    82. 

  82.         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div>
    83. 

  83.     </div>
    84. 

  84. </div>
    85. 

  85. 

  86. <div style="position: relative">
    87. 

  87.     <p>direction: LTR | justify-content: 'start'</p>
    88. 

  88.     <div class="grid verticalRL justifyContentStart" data-expected-width="300" data-expected-height="200">
    89. 

  89.         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
    90. 

  90.         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
    91. 

  91.         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    92. 

  92.         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
    93. 

  93.     </div>
    94. 

  94. </div>
    95. 

  95. 

  96. <div style="position: relative">
    97. 

  97.     <p>direction: LTR | justify-content: 'end'</p>
    98. 

  98.     <div class="grid verticalRL justifyContentEnd" data-expected-width="300" data-expected-height="200">
    99. 

  99.         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
    100. 

  100.         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
    101. 

  101.         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
    102. 

  102.         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div>
    103. 

  103.     </div>
    104. 

  104. </div>
    105. 

  105. 

  106. <!-- RTL direction. -->
    107. 

  107. <div style="position: relative">
    108. 

  108.     <p>direction: RTL | justify-content: 'center'</p>
    109. 

  109.     <div class="grid verticalRL directionRTL justifyContentCenter" data-expected-width="300" data-expected-height="200">
    110. 

  110.         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
    111. 

  111.         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
    112. 

  112.         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
    113. 

  113.         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
    114. 

  114.     </div>
    115. 

  115. </div>
    116. 

  116. 

  117. <div style="position: relative">
    118. 

  118.     <p>direction: RTL | justify-content: 'left'</p>
    119. 

  119.     <div class="grid verticalRL directionRTL justifyContentLeft" data-expected-width="300" data-expected-height="200">
    120. 

  120.         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
    121. 

  121.         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    122. 

  122.         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
    123. 

  123.         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="10" data-expected-width="20" data-expected-height="40"></div>
    124. 

  124.     </div>
    125. 

  125. </div>
    126. 

  126. 

  127. <div style="position: relative">
    128. 

  128.     <p>direction: RTL | justify-content: 'right'</p>
    129. 

  129.     <div class="grid verticalRL directionRTL justifyContentRight" data-expected-width="300" data-expected-height="200">
    130. 

  130.         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
    131. 

  131.         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
    132. 

  132.         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
    133. 

  133.         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
    134. 

  134.     </div>
    135. 

  135. </div>
    136. 

  136. 

  137. <div style="position: relative">
    138. 

  138.     <p>direction: RTL | justify-content: 'start'</p>
    139. 

  139.     <div class="grid verticalRL directionRTL justifyContentStart" data-expected-width="300" data-expected-height="200">
    140. 

  140.         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
    141. 

  141.         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
    142. 

  142.         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
    143. 

  143.         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
    144. 

  144.     </div>
    145. 

  145. </div>
    146. 

  146. 

  147. <div style="position: relative">
    148. 

  148.     <p>direction: RTL | justify-content: 'end'</p>
    149. 

  149.     <div class="grid verticalRL directionRTL justifyContentEnd" data-expected-width="300" data-expected-height="200">
    150. 

  150.         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
    151. 

  151.         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    152. 

  152.         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
    153. 

  153.         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="10" data-expected-width="20" data-expected-height="40"></div>
    154. 

  154.     </div>
    155. 

  155. </div>
    156. 

  156. 

  157. </body>
    158. 

  158. </html>
    159.