Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-initialize-span-one-items.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;
 }
 .gridAutoAndAuto {
     grid-template-columns: auto auto;
 }
 .gridFixedMinContentFixedMaxContent {
    grid-template-columns: minmax(50px, min-content) minmax(40px, max-content);
 }
 .gridMaxContentAndAuto {
     grid-template-columns: max-content auto;
 }
 .gridMinContentAndAuto {
     grid-template-columns: min-content auto;
 }
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
    <div class="firstRowFirstColumn">X</div>
    <div class="firstRowBothColumn">XXX XX XXX</div>
</div>

<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoReversed">
    <div class="firstRowSecondColumn">X</div>
    <div class="firstRowBothColumn">XXX XX XXX</div>
</div>

<div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContent">
    <div class="sizedToGridArea firstRowFirstColumn"></div>
    <div class="firstRowBothColumn">XXX XX XXX</div>
</div>

<div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContentTwoEmptyChildren">
    <div class="sizedToGridArea firstRowFirstColumn"></div>
    <div class="sizedToGridArea firstRowSecondColumn"></div>
    <div class="firstRowBothColumn">XXX XX XXX</div>
</div>

<div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContentFixedSizeChild">
    <div class="firstRowFirstColumn">XXXXXX</div>
    <div class="firstRowBothColumn">XXX XX XXX</div>
</div>

<div class="grid gridMaxContentAndAuto justifyContentStart" id="gridMaxContentAndAuto">
    <div class="firstRowFirstColumn">X</div>
    <div class="firstRowBothColumn">XXX XX XXX</div>
</div>

<div class="grid gridMaxContentAndAuto justifyContentStart" id="gridMaxContentAndAutoReversed">
    <div class="firstRowSecondColumn">X</div>
    <div class="firstRowBothColumn">XXX XX XXX</div>
</div>

<div class="grid gridMinContentAndAuto justifyContentStart" id="gridMinContentAndAuto">
    <div class="firstRowFirstColumn">X</div>
    <div class="firstRowBothColumn">XXX XX XXX</div>
</div>

<div class="grid gridMinContentAndAuto justifyContentStart" id="gridMinContentAndAutoReversed">
    <div class="firstRowSecondColumn">X</div>
    <div class="firstRowBothColumn">XXX XX XXX</div>
</div>

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

description('This test checks that content sized tracks are initialized using non-spanning grid items.');

testGridColumnsValues("gridAutoAndAuto", "10px 90px");
testGridColumnsValues("gridAutoAndAutoReversed", "90px 10px");
testGridColumnsValues("gridFixedMinContentFixedMaxContent", "50px 50px");
testGridColumnsValues("gridFixedMinContentFixedMaxContentTwoEmptyChildren", "50px 50px");
testGridColumnsValues("gridFixedMinContentFixedMaxContentFixedSizeChild", "60px 40px");
testGridColumnsValues("gridMaxContentAndAuto", "80px 20px");
testGridColumnsValues("gridMaxContentAndAutoReversed", "90px 10px");
testGridColumnsValues("gridMinContentAndAuto", "10px 90px");
testGridColumnsValues("gridMinContentAndAutoReversed", "20px 80px");
</script>
</body>