test_grid_fragmentation.html (2512B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> 11 <link rel="match" href="grid-fragmentation-001-ref.html"> 12 13 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 14 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 15 16 <style type="text/css"> 17 html,body { 18 color:black; background-color:white; font-size:16px; padding:0; margin:0; 19 } 20 body { overflow:hidden; } 21 22 .columns { 23 position:relative; 24 -ms-columns: 5; 25 -webkit-columns: 5; 26 columns: 5; 27 -ms-column-fill: auto; 28 -webkit-column-fill: auto; 29 column-fill: auto; 30 border: 2px dashed; 31 margin-bottom: 5px; 32 } 33 34 .grid { 35 display: grid; 36 grid-template-columns: 30px 30px 30px; 37 grid-auto-rows: 50px; 38 grid-gap: 12px; 39 border:5px solid; 40 align-content: start; 41 } 42 span { background:lime; border:1px solid black; } 43 x { display:block; height:20px; } 44 45 </style> 46 47 <script> 48 "use strict"; 49 50 SimpleTest.waitForExplicitFinish(); 51 52 function runTests() { 53 var wrapper = document.getElementById("wrapper"); 54 var fragments = wrapper.getGridFragments(); 55 56 // test fragments of the grid 57 is(fragments.length, 2, "Grid is split into two fragments."); 58 59 if (fragments.length == 2) { 60 var grid0 = fragments[0]; 61 var grid1 = fragments[1]; 62 63 // test that both fragments have one row track and two lines 64 is(grid0.rows.tracks.length, 1, "Fragment 0 has one row track."); 65 is(grid0.rows.lines.length, 2, "Fragment 0 has two row lines."); 66 is(grid1.rows.tracks.length, 1, "Fragment 1 has one row track."); 67 is(grid1.rows.lines.length, 2, "Fragment 1 has two row lines."); 68 } 69 70 SimpleTest.finish(); 71 } 72 </script> 73 </head> 74 <body onLoad="runTests();"> 75 76 <div class="columns" style="height: 100px/*fragmentainer ends in the last row*/"> 77 <div style="padding-top:10px; background:grey"> 78 <div id="wrapper" class="grid"> 79 <span style="grid-row:span 2"><x></x></span> 80 <span style="height:60px; background:cyan"><x></x></span> 81 <span style="align-self:end; background:pink"><x></x></span> 82 <span style="grid-row:1; height:60px"><x></x></span> 83 </div></div></div> 84 85 </body> 86 </html>