Quelle test_grid_container_shorthands.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/style/test/test_grid_container_shorthands.html

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>Test parsing of grid container shorthands (grid-template, grid)</title>
  <link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <link rel='stylesheet' href='/resources/testharness.css'>
</head>
<body>

<script>

var initial_values = {
    gridTemplateAreas: "none",
    gridTemplateRows: "none",
    gridTemplateColumns: "none",
    gridAutoFlow: "row",
    // Computed value for 'auto'
    gridAutoRows: "auto",
    gridAutoColumns: "auto",
};

// For various specified values of the grid-template shorthand,
// test the computed values of the corresponding longhands.
var grid_template_test_cases = [
    {
        specified: "none",
    },
    {
        specified: "40px / 100px",
        gridTemplateRows: "40px",
        gridTemplateColumns: "100px",
    },
    {
        specified: "minmax(auto,1fr) / minmax(auto,1fr)",
        gridTemplateRows: "1fr",
        gridTemplateColumns: "1fr",
    },
    {
        specified: "[foo] 40px [bar] / [baz] 100px [fizz]",
        gridTemplateRows: "[foo] 40px [bar]",
        gridTemplateColumns: "[baz] 100px [fizz]",
    },
    {
        specified: " none/100px",
        gridTemplateRows: "none",
        gridTemplateColumns: "100px",
    },
    {
        specified: "40px/none",
        gridTemplateRows: "40px",
        gridTemplateColumns: "none",
    },
    {
        specified: "40px/repeat(1, 20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(1, 20px)",
    },
    {
        specified: "40px/[a]repeat(1, 20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "[a] repeat(1, 20px)",
    },
    {
        specified: "40px/repeat(1, [a] 20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(1, [a] 20px)",
    },
    {
        specified: "40px/[a]repeat(2, [b]20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "[a] repeat(2, [b] 20px)",
    },
    {
        specified: "40px/[a]repeat(2, 20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "[a] repeat(2, 20px)",
    },
    {
        specified: "40px/repeat(2, [a] 20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(2, [a] 20px)",
    },
    {
        specified: "40px/[a]repeat(2, [b]20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "[a] repeat(2, [b] 20px)",
    },
    {
        specified: "40px/repeat(2, 20px[a])",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(2, 20px [a])",
    },
    {
        specified: "40px/repeat(2, 20px[a]) [b]",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(2, 20px [a]) [b]",
    },
    {
        specified: "40px/repeat(2, [a] 20px[b]) [c]",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(2, [a] 20px [b]) [c]",
    },
    {
        specified: "40px/[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]",
        gridTemplateRows: "40px",
        gridTemplateColumns: "[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]",
    },
    {
        specified: "'fizz'",
        gridTemplateAreas: "\"fizz\"",
        gridTemplateRows: "auto",
    },
    {
        specified: "[bar] 'fizz'",
        gridTemplateAreas: "\"fizz\"",
        gridTemplateRows: "[bar] auto",
    },
    {
        specified: "'fizz' / [foo] 40px",
        gridTemplateAreas: "\"fizz\"",
        gridTemplateRows: "auto",
        gridTemplateColumns: "[foo] 40px",
    },
    {
        specified: "[bar] 'fizz' / [foo] 40px",
        gridTemplateAreas: "\"fizz\"",
        gridTemplateRows: "[bar] auto",
        gridTemplateColumns: "[foo] 40px",
    },
    {
        specified: "'fizz' 100px / [foo] 40px",
        gridTemplateAreas: "\"fizz\"",
        gridTemplateRows: "100px",
        gridTemplateColumns: "[foo] 40px",
    },
    {
        specified: "[bar] 'fizz' 100px [buzz] \n [a] '.' 200px [b] / [foo] 40px",
        gridTemplateAreas: "\"fizz\" \".\"",
        gridTemplateRows: "[bar] 100px [buzz a] 200px [b]",
        gridTemplateColumns: "[foo] 40px",
    },
    {
        specified: "subgrid / subgrid",
        gridTemplateColumns: "subgrid",
        gridTemplateRows: "subgrid",
    },
    {
        specified: "subgrid [foo] / subgrid",
        gridTemplateColumns: "subgrid",
        gridTemplateRows: "subgrid [foo]",
    },
    {
        specified: "subgrid [foo] repeat(3, [] [a b] [c]) / subgrid",
        gridTemplateColumns: "subgrid",
        gridTemplateRows: "subgrid [foo] repeat(3, [] [a b] [c])",
    },
    {
        // Test that the number of lines is clamped to kMaxLine = 10000.
        // https://drafts.csswg.org/css-grid/#overlarge-grids
        specified: "subgrid [foo] repeat(999999999, [a]) / subgrid",
        gridTemplateColumns: "subgrid",
        gridTemplateRows: "subgrid [foo] repeat(10000, [a])",
    },
    {
        specified: "subgrid [bar]/ subgrid [] [foo",
        gridTemplateColumns: "subgrid [] [foo]",
        gridTemplateRows: "subgrid [bar]",
    },
    {
        specified: "'fizz' repeat(1, 100px)",
    },
    {
        specified: "'fizz' repeat(auto-fill, 100px)",
    },
    {
        specified: "'fizz' / repeat(1, 100px)",
    },
    {
        specified: "'fizz' / repeat(auto-fill, 100px)",
    },
];

grid_test_cases = grid_template_test_cases.concat([
    {
        specified: "auto-flow / 0",
        gridAutoFlow: "row",
        gridAutoRows: "auto",
        gridTemplateColumns: "0px",
    },
    {
        specified: "auto-flow dense / 0",
        gridAutoFlow: "dense",
        gridAutoRows: "auto",
        gridTemplateColumns: "0px",
    },
    {
        specified: "auto-flow minmax(auto,1fr) / none",
        gridAutoFlow: "row",
        gridAutoRows: "1fr",
    },
    {
        specified: "auto-flow 40px / none",
        gridAutoFlow: "row",
        gridAutoRows: "40px",
    },
    {
        specified: "none / auto-flow 40px",
        gridAutoFlow: "column",
        gridAutoRows: "auto",
        gridAutoColumns: "40px",
    },
    {
        specified: "none / auto-flow minmax(auto,1fr)",
        gridAutoFlow: "column",
        gridAutoRows: "auto",
        gridAutoColumns: "1fr",
    },
    {
        specified: "0 / auto-flow dense auto",
        gridAutoFlow: "column dense",
        gridAutoRows: "auto",
        gridAutoColumns: "auto",
        gridTemplateRows: "0px",
    },
    {
        specified: "dense auto-flow minmax(min-content, 2fr) / 0",
        gridAutoFlow: "dense",
        gridAutoRows: "minmax(min-content, 2fr)",
        gridAutoColumns: "auto",
        gridTemplateColumns: "0px",
    },
    {
        specified: "auto-flow 40px / 100px",
        gridAutoFlow: "row",
        gridAutoRows: "40px",
        gridAutoColumns: "auto",
        gridTemplateColumns: "100px",
    },
]);

function run_tests(test_cases, shorthand, subproperties) {
    test_cases.forEach(function(test_case) {
        test(function() {
            var element = document.createElement('div');
            document.body.appendChild(element);
            element.style[shorthand] = test_case.specified;
            var computed = window.getComputedStyle(element);
            subproperties.forEach(function(longhand) {
                assert_equals(
                    computed[longhand],
                    test_case[longhand] || initial_values[longhand],
                    longhand
                );
            });
        }, "test parsing of 'grid-template: " + test_case.specified + "'");
    });
}

run_tests(grid_template_test_cases, "gridTemplate", [
    "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);

run_tests(grid_test_cases, "grid", [
    "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
    "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]);

</script>
</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.1 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.