Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css-intrinsic-dimensions/multicol.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Multicol intrinsic width calculation</title>
        <style>
            .gap15 { -webkit-column-gap:15px; column-gap:15px; }
            .mc3 { -webkit-columns:3; columns:3; }
            .mc3w50 { -webkit-columns:3 50px; columns:3 50px; }
            .mc3w150 { -webkit-columns:3 150px; columns:3 150px; }
            .mcw50 { -webkit-columns:50px; columns:50px; }
            .mcw150 { -webkit-columns:150px; columns:150px; }
            .intrinsic { width:fit-content; }
            .hidden { visibility:hidden; } /* hide garbage produced from &#x200b; characters */
        </style>
    </head>
    <body>
        <!-- min intrinsic width, non-auto column-count -->
        <div style="width:1px;">
            <div class="intrinsic mc3 gap15" data-expected-width="330">
                <div style="width:100px; height:10px;"></div>
            </div>
        </div>
        <!-- max intrinsic width, non-auto column-count -->
        <div style="width:1000px;">
            <div class="intrinsic mc3 gap15" data-expected-width="330">
                <div style="width:100px; height:10px;"></div>
            </div>
        </div>
        <!-- min intrinsic width, non-auto column-count, breakable lines -->
        <div style="width:1px;">
            <div class="intrinsic mc3 gap15" data-expected-width="330">
                <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
            </div>
        </div>
        <!-- max intrinsic width, non-auto column-count, breakable lines -->
        <div style="width:1000px;">
            <div class="intrinsic mc3 gap15" data-expected-width="630">
                <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
            </div>
        </div>

        <!-- min intrinsic width, non-auto column-count and small column-width -->
        <div style="width:1px;">
            <div class="intrinsic mc3w50 gap15" data-expected-width="50">
                <div style="width:100px; height:10px;"></div>
            </div>
        </div>
        <!-- max intrinsic width, non-auto column-count and small column-width -->
        <div style="width:1000px;">
            <div class="intrinsic mc3w50 gap15" data-expected-width="330">
                <div style="width:100px; height:10px;"></div>
            </div>
        </div>
        <!-- min intrinsic width, non-auto column-count and small column-width, breakable lines -->
        <div style="width:1px;">
            <div class="intrinsic mc3w50 gap15" data-expected-width="50">
                <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
            </div>
        </div>
        <!-- max intrinsic width, non-auto column-count and small column-width, breakable lines -->
        <div style="width:1000px;">
            <div class="intrinsic mc3w50 gap15" data-expected-width="630">
                <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
            </div>
        </div>

        <!-- min intrinsic width, non-auto column-count and large column-width -->
        <div style="width:1px;">
            <div class="intrinsic mc3w150 gap15" data-expected-width="100">
                <div style="width:100px; height:10px;"></div>
            </div>
        </div>
        <!-- max intrinsic width, non-auto column-count and large column-width -->
        <div style="width:1000px;">
            <div class="intrinsic mc3w150 gap15" data-expected-width="480">
                <div style="width:100px; height:10px;"></div>
            </div>
        </div>
        <!-- min intrinsic width, non-auto column-count and large column-width, breakable lines -->
        <div style="width:1px;">
            <div class="intrinsic mc3w150 gap15" data-expected-width="100">
                <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
            </div>
        </div>
        <!-- max intrinsic width, non-auto column-count and large column-width, breakable lines -->
        <div style="width:1000px;">
            <div class="intrinsic mc3w150 gap15" data-expected-width="630">
                <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
            </div>
        </div>

        <!-- min intrinsic width, auto column-count and small column-width -->
        <div style="width:1px;">
            <div class="intrinsic mcw50 gap15" data-expected-width="50">
                <div style="width:100px; height:10px;"></div>
            </div>
        </div>
        <!-- max intrinsic width, auto column-count and small column-width -->
        <div style="width:1000px;">
            <div class="intrinsic mcw50 gap15" data-expected-width="100">
                <div style="width:100px; height:10px;"></div>
            </div>
        </div>
        <!-- min intrinsic width, auto column-count and small column-width, breakable lines -->
        <div style="width:1px;">
            <div class="intrinsic mcw50 gap15" data-expected-width="50">
                <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
            </div>
        </div>
        <!-- max intrinsic width, auto column-count and small column-width, breakable lines -->
        <div style="width:1000px;">
            <div class="intrinsic mcw50 gap15" data-expected-width="200">
                <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
            </div>
        </div>

        <!-- min intrinsic width, auto column-count and large column-width -->
        <div style="width:1px;">
            <div class="intrinsic mcw150 gap15" data-expected-width="100">
                <div style="width:100px; height:10px;"></div>
            </div>
        </div>
        <!-- max intrinsic width, auto column-count and large column-width -->
        <div style="width:1000px;">
            <div class="intrinsic mcw150 gap15" data-expected-width="150">
                <div style="width:100px; height:10px;"></div>
            </div>
        </div>
        <!-- min intrinsic width, auto column-count and large column-width, breakable lines -->
        <div style="width:1px;">
            <div class="intrinsic mcw150 gap15" data-expected-width="100">
                <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
            </div>
        </div>
        <!-- max intrinsic width, auto column-count and large column-width, breakable lines -->
        <div style="width:1000px;">
            <div class="intrinsic mcw150 gap15" data-expected-width="200">
                <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
            </div>
        </div>

        <script src="../../resources/check-layout.js"></script>
        <script>
            checkLayout(".intrinsic");
        </script>
    </body>
</html>