Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-update-sizes-after-distributing-all.html 

<!DOCTYPE html>
<head>
<link href="resources/grid.css" rel="stylesheet"/>
<link href="resources/grid-alignment.css" rel="stylesheet"/>
<style>
 .grid { font: 10px/1 Ahem; }

 .gridAutoAndMaxContent {
    grid-template-columns: auto max-content;
 }
 .gridFixedMinContentAndFixedMaxContent {
    grid-template-columns: minmax(10px, min-content) minmax(10px, max-content);
 }
 .gridMinContentAndMaxContent {
    grid-template-columns: min-content max-content;
 }

 .gridMinContentAndFixedAndMaxContent {
    grid-template-columns: min-content 20px max-content;
 }

 .gridMaxContentAndFixedAndAuto {
    grid-template-columns: max-content 20px auto;
 }

 .gridRepeatTwoMaxContentAndMinContent {
    grid-template-columns: repeat(2, max-content min-content);
 }

 .gridRepeatTwoAutoAndMaxContent {
    grid-template-columns: repeat(2, auto max-content);
 }

 .columns1And2 { grid-column: 1 / span 2; }
 .columns2And3 { grid-column: 2 / span 2; }
 .columns3And4 { grid-column: 3 / span 2; }
 .columns1To3 { grid-column: 1 / span 3; }
 .columns1To4 { grid-column: 1 / span 4; }
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>

<div class="constrainedContainer">
    <div class="grid gridAutoAndMaxContent" id="gridAutoAndMaxContent">
	<div class="columns1And2">XXXX XXXX</div>
	<div class="columns1And2">XXXXX X</div>
    </div>
</div>

<div class="grid gridFixedMinContentAndFixedMaxContent" id="gridFixedMinContentAndFixedMaxContent">
    <div class="columns1And2">XXXX XXXX</div>
    <div class="columns1And2">XXXXX XXXXX</div>
</div>

<div class="grid gridMinContentAndMaxContent" id="gridMinContentAndMaxContent">
    <div class="columns1And2">XX XX</div>
    <div class="columns1And2">XXX XX XXX</div>
</div>

<div class="grid gridMinContentAndFixedAndMaxContent" id="gridMinContentAndFixedAndMaxContent">
    <div class="columns1To3">XXXX XXXX</div>
    <div class="columns1To3">XXXXX XXX XXXX</div>
</div>

<div class="grid gridMaxContentAndFixedAndAuto justifyContentStart" id="gridMaxContentAndFixedAndAuto">
    <div class="columns1To3">XXXX XXXX</div>
    <div class="columns1To3">XXXXX XXX XXXX</div>
</div>

<div class="grid gridRepeatTwoMaxContentAndMinContent" id="gridRepeatTwoMaxContentAndMinContentTwoOverlapping">
    <div class="columns1And2">XXXX XXXX</div>
    <div class="columns3And4">XX XX</div>
    <div class="columns1And2">XXXXX XXX XXXX</div>
    <div class="columns3And4">XXX XX XXX</div>
</div>

<div class="grid gridRepeatTwoMaxContentAndMinContent" id="gridRepeatTwoMaxContentAndMinContentThreeOverlapping">
    <div class="columns2And3">XXXXX XXX XXXX</div>
    <div class="columns3And4">XXX XX XXX</div>
    <div class="columns1And2">XXXX XXXX</div>
</div>

<div class="grid gridRepeatTwoMaxContentAndMinContent" id="gridRepeatTwoMaxContentAndMinContentTwoAndFourOverlapping">
    <div class="columns1To4">XXXX XXXX</div>
    <div class="columns3And4">XX XX</div>
    <div class="columns1To4">XXXXX XXX XXXX</div>
    <div class="columns1And2">XXX XX XXX</div>
    <div class="columns3And4">X X X X X</div>
    <div class="columns1And2">XXXXXX</div>
</div>

<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentTwoOverlapping">
    <div class="columns1And2">XXXX XXXX</div>
    <div class="columns3And4">XX XX</div>
    <div class="columns1And2">XXXXX XXX XXXX</div>
    <div class="columns3And4">XXX XX XXX</div>
</div>

<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentThreeOverlapping">
    <div class="columns2And3">XXXXX XXX XXXX</div>
    <div class="columns3And4">XXX XX XXX</div>
    <div class="columns1And2">XXXX XXXX</div>
</div>

<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping">
    <div class="columns1To4">XXXX XXXX</div>
    <div class="columns3And4">XX XX</div>
    <div class="columns1To4">XXXXX XXX XXXX</div>
    <div class="columns1And2">XXX XX XXX</div>
    <div class="columns3And4">X X X X X</div>
    <div class="columns1And2">XXXXXX</div>
</div>

<script>
function testGridColumnsValues(id, computedColumnValue)
{
    shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
}

debug("Check that tracks are updated after distributing the extra space for all the items in the same group span.");
testGridColumnsValues("gridAutoAndMaxContent", "25px 65px");
testGridColumnsValues("gridFixedMinContentAndFixedMaxContent", "25px 85px");
testGridColumnsValues("gridMinContentAndMaxContent", "15px 85px");
testGridColumnsValues("gridMinContentAndFixedAndMaxContent", "15px 20px 105px");
testGridColumnsValues("gridMaxContentAndFixedAndAuto", "105px 20px 15px");
testGridColumnsValues("gridRepeatTwoMaxContentAndMinContentTwoOverlapping", "115px 25px 85px 15px");
testGridColumnsValues("gridRepeatTwoMaxContentAndMinContentThreeOverlapping", "65px 25px 115px 15px");
testGridColumnsValues("gridRepeatTwoMaxContentAndMinContentTwoAndFourOverlapping", "70px 30px 80px 10px");
testGridColumnsValues("gridRepeatTwoAutoAndMaxContentTwoOverlapping", "25px 115px 15px 85px");
testGridColumnsValues("gridRepeatTwoAutoAndMaxContentThreeOverlapping", "20px 115px 25px 75px");
testGridColumnsValues("gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping", "30px 70px 10px 80px");
</script>
</body>