PageRenderTime 26ms CodeModel.GetById 18ms RepoModel.GetById 0ms app.codeStats 0ms

/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html

https://gitlab.com/jonnialva90/iridium-browser
HTML | 109 lines | 98 code | 11 blank | 0 comment | 0 complexity | 970395535f8cb72a8d436b2997f77b77 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

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

  4. <style>
    5. 

  5. .grid {
    6. 

  6.     grid-template-columns: 50px 100px 150px 200px;
    7. 

  7.     grid-template-rows: 50px 100px 150px 200px;
    8. 

  8. }
    9. 

  9. 

  10. .unconstrainedContainer {
    11. 

  11.     /* For accurate x / y offset. */
    12. 

  12.     position: relative;
    13. 

  13. }
    14. 

  14. </style>
    15. 

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

  16. <body onload="checkLayout('.grid')">
    17. 

  17. 

  18. <p>This test checks that the auto-placement algorithm is sparse by default.</p>
    19. 

  19. 

  20. <div class="unconstrainedContainer">
    21. 

  21.     <div class="grid">
    22. 

  22.         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    23. 

  23.         <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
    24. 

  24.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
    25. 

  25.         <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="50" data-offset-y="50" data-expected-width="250" data-expected-height="100"></div>
    26. 

  26.         <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
    27. 

  27.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
    28. 

  28.     </div>
    29. 

  29. </div>
    30. 

  30. 

  31. <div class="unconstrainedContainer">
    32. 

  32.     <div class="grid">
    33. 

  33.         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    34. 

  34.         <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
    35. 

  35.         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
    36. 

  36.         <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
    37. 

  37.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
    38. 

  38.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
    39. 

  39.         <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning3" data-offset-x="50" data-offset-y="150" data-expected-width="450" data-expected-height="350"></div>
    40. 

  40.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="300" data-expected-width="50" data-expected-height="200"></div>
    41. 

  41.     </div>
    42. 

  42. </div>
    43. 

  43. 

  44. <div class="unconstrainedContainer">
    45. 

  45.     <div class="grid">
    46. 

  46.         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
    47. 

  47.         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
    48. 

  48.         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    49. 

  49.         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
    50. 

  50.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
    51. 

  51.     </div>
    52. 

  52. </div>
    53. 

  53. 

  54. <div class="unconstrainedContainer">
    55. 

  55.     <div class="grid">
    56. 

  56.         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
    57. 

  57.         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    58. 

  58.         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
    59. 

  59.         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
    60. 

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

  61.     </div>
    62. 

  62. </div>
    63. 

  63. 

  64. <div class="unconstrainedContainer">
    65. 

  65.     <div class="grid gridAutoFlowColumnSparse">
    66. 

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

  67.         <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
    68. 

  68.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    69. 

  69.         <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="250"></div>
    70. 

  70.         <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="150"></div>
    71. 

  71.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
    72. 

  72.     </div>
    73. 

  73. </div>
    74. 

  74. 

  75. <div class="unconstrainedContainer">
    76. 

  76.     <div class="grid gridAutoFlowColumnSparse">
    77. 

  77.         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
    78. 

  78.         <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
    79. 

  79.         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    80. 

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

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

  82.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
    83. 

  83.         <div class="sizedToGridArea autoRowSpanning3AutoColumnSpanning2" data-offset-x="150" data-offset-y="50" data-expected-width="350" data-expected-height="450"></div>
    84. 

  84.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
    85. 

  85.     </div>
    86. 

  86. </div>
    87. 

  87. 

  88. <div class="unconstrainedContainer">
    89. 

  89.     <div class="grid gridAutoFlowColumnSparse">
    90. 

  90.         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
    91. 

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

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

  93.         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
    94. 

  94.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
    95. 

  95.     </div>
    96. 

  96. </div>
    97. 

  97. 

  98. <div class="unconstrainedContainer">
    99. 

  99.     <div class="grid gridAutoFlowColumnSparse">
    100. 

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

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

  102.         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    103. 

  103.         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
    104. 

  104.         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
    105. 

  105.     </div>
    106. 

  106. </div>
    107. 

  107. 

  108. </body>
    109. 

  109. </html>
    110. 

  110.