mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 22:28:59 +02:00
6354070dee
Automatic update from web-platform-tests[css-grid] Add support for calc() in gutter properties There was a crash in debug if you use calc() mixing fixed and percentage values due to the wrong DCHECK in GapLength constructor. The patch fixes this assert. In addition LayoutGrid::GridGap() was also wrong and didn't consider calc() either. The fix is again easy just using the proper check. Regarding testing, the parsing tests have been updated to include this combination of fixed and percentage values in calc(). At the same time, the patch actually uses "grid-" prefixed properties in the tests that were supposed to test those. Last, two new tests are added to verify the proper behavior of calc() with mixed values on a grid layout container. BUG=816300 TEST=external/wpt/css/css-align/gaps/column-gap-parsing-001.html TEST=external/wpt/css/css-align/gaps/gap-parsing-001.html TEST=external/wpt/css/css-align/gaps/grid-column-gap-parsing-001.html TEST=external/wpt/css/css-align/gaps/grid-gap-parsing-001.html TEST=external/wpt/css/css-align/gaps/grid-row-gap-parsing-001.html TEST=external/wpt/css/css-align/gaps/row-gap-parsing-001.html TEST=external/wpt/css/css-grid/alignment/grid-gutters-011.html TEST=external/wpt/css/css-grid/alignment/grid-gutters-012.html Change-Id: I4c9fe6b2525a253c6bb00cbda727c2bf1ae6e90b Reviewed-on: https://chromium-review.googlesource.com/962148 Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Reviewed-by: Sergio Villar <svillar@igalia.com> Cr-Commit-Position: refs/heads/master@{#543079} wpt-commits: f721ccc131535df0ba4cf1dc9eddbbe1a13858eb wpt-pr: 10027 wpt-commits: f721ccc131535df0ba4cf1dc9eddbbe1a13858eb wpt-pr: 10027
31 lines
1,007 B
HTML
31 lines
1,007 B
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: Support for calc mixing fixed and percentage values for grid-gap as alias for gap</title>
|
|
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
|
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
|
<link rel="help" href0"https://www.w3.org/TR/css-align-3/#gap-legacy">
|
|
<link rel="match" href="../reference/grid-different-gutters-ref.html">
|
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
|
<style>
|
|
#grid {
|
|
display: grid;
|
|
width: 200px;
|
|
height: 220px;
|
|
grid-gap: calc(15% + 7px) calc(10px + 5%);
|
|
grid-template-columns: 90px 90px;
|
|
grid-template-rows: 90px 90px;
|
|
background-color: green;
|
|
}
|
|
|
|
#grid > div {
|
|
background-color: silver;
|
|
}
|
|
</style>
|
|
|
|
<p>The test passes if it has the same visual effect as reference.</p>
|
|
<div id="grid">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|