diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /layout/style/test/test_grid_computed_values.html | |
parent | Initial commit. (diff) | |
download | thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/style/test/test_grid_computed_values.html')
-rw-r--r-- | layout/style/test/test_grid_computed_values.html | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/layout/style/test/test_grid_computed_values.html b/layout/style/test/test_grid_computed_values.html new file mode 100644 index 0000000000..68a183606c --- /dev/null +++ b/layout/style/test/test_grid_computed_values.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset=utf-8> + <title>Test computed grid values</title> + <link rel="author" title="Tobias Schneider" href="mailto:schneider@jancona.com"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <link rel='stylesheet' href='/resources/testharness.css'> + <style> + + #grid { + display: grid; + width: 500px; + height: 400px; + grid-template-columns: + [a] auto + [b] minmax(min-content, 1fr) + [b c d] repeat(2, [e] 40px) + repeat(5, auto); + grid-template-rows: + [a] minmax(min-content, 1fr) + [b] auto + [b c d e] 30px 30px + auto auto; + grid-auto-columns: 3fr; + grid-auto-rows: 2fr; + } + #grid2 { + display: grid; + width: 500px; + height: 400px; + grid-auto-columns: 10px; + grid-auto-rows: 2fr; + } + + </style> +</head> +<body> + +<div> + <div id="grid"> + <div style="grid-column-start:1; width:50px"></div> + <div style="grid-column-start:9; width:50px"></div> + </div> + <div id="grid2"> + <div style="grid-column: span X / 1"></div> + <div style="grid-column: 1 / span X 2"></div> + </div> +<div> + +<script> + + var gridElement = document.getElementById("grid"); + + function test_grid_template(assert_fn, width, height, desc) { + test(function() { + assert_fn(getComputedStyle(gridElement).gridTemplateColumns, + "[a] 50px [b] " + width + "px [b c d e] 40px [e] 40px 0px 0px 0px 0px 50px"); + assert_fn(getComputedStyle(gridElement).gridTemplateRows, + "[a] " + height + "px [b] 0px [b c d e] 30px 30px 0px 0px"); + }, desc); + } + + test_grid_template(assert_equals, 320, 340, "test computed grid-template-{columns,rows} values"); + + gridElement.style.overflow = 'scroll'; + var v_scrollbar = gridElement.offsetWidth - gridElement.clientWidth; + var h_scrollbar = gridElement.offsetHeight - gridElement.clientHeight; + test_grid_template(assert_equals, 320 - v_scrollbar, 340 - h_scrollbar, + "test computed grid-template-{columns,rows} values, overflow: scroll"); + + gridElement.style.width = '600px'; + gridElement.style.overflow = 'visible'; + test_grid_template(assert_equals, 420, 340, + "test computed grid-template-{columns,rows} values, after reflow"); + + gridElement.style.display = 'none'; + test_grid_template(assert_not_equals, 420, 340, + "test computed grid-template-{columns,rows} values, display: none"); + + gridElement.style.display = 'grid'; + gridElement.parentNode.style.display = 'none'; + test_grid_template(assert_not_equals, 420, 340, + "test computed grid-template-{columns,rows} values, display: none on parent"); + + gridElement.parentNode.style.display = ''; + function test_grid2() { + gridElement = document.getElementById("grid2"); + test(function() { + const expectedCols = SpecialPowers.getBoolPref("layout.css.serialize-grid-implicit-tracks") + ? "10px 10px 10px" + : "none"; + const expectedRows = SpecialPowers.getBoolPref("layout.css.serialize-grid-implicit-tracks") + ? "400px" + : "none"; + + assert_equals(getComputedStyle(gridElement).gridTemplateColumns, + expectedCols); + assert_equals(getComputedStyle(gridElement).gridTemplateRows, + expectedRows); + }, "test #grid2 computed grid-template-{columns,rows} values"); + } + + test(function() { + assert_equals(getComputedStyle(gridElement).gridAutoColumns, "3fr"); + assert_equals(getComputedStyle(gridElement).gridAutoRows, "2fr"); + test_grid2(); + }, "test computed grid-auto-{columns,rows} values"); + +</script> +</body> +</html> |