mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 13:48:23 +02:00
d34f54c921
Automatic update from web-platform-tests [css-grid] Update item placement when grid-template-areas changes Before r747669, both explicit and implicit named lines were stored in NamedGridColumnLines and NamedGridRowLines. But that patch moved the implicit ones into their own ImplicitNamedGridColumnLines and ImplicitNamedGridRowLines fields. However, LayoutGrid::NamedGridLinesDefinitionDidChange was not updated to also look at the new fields. Therefore, a dynamic change in grid-template-areas might not force the grid items to be placed again. BUG=1066679 TEST=external/wpt/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html Change-Id: I4b6ff2de1f1c13f985b146169f39283613defc88 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2132397 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#755548} -- wpt-commits: c0b2de63e58ca20f2b1da08221e5a5b48e3cc999 wpt-pr: 22621
57 lines
1.7 KiB
HTML
57 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: Grid item placement with dynamically named grid lines</title>
|
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
|
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
|
|
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
|
|
<meta name="assert" content="Grid item placement is updated when the names of the grid lines change dynamically.">
|
|
<style>
|
|
.container {
|
|
display: grid;
|
|
width: 300px;
|
|
height: 100px;
|
|
background: red;
|
|
}
|
|
.container::before {
|
|
content: "";
|
|
grid-area: main;
|
|
background: green;
|
|
}
|
|
.explicit {
|
|
grid-template-columns: [quux-start] 100% [quux-end];
|
|
grid-template-rows: [quux-start] 100% [quux-end];
|
|
}
|
|
.explicit.changed {
|
|
grid-template-columns: [main-start] 100% [main-end];
|
|
grid-template-rows: [main-start] 100% [main-end];
|
|
}
|
|
.auto-repeat {
|
|
grid-template-columns: repeat(auto-fill, [quux-start] 100% [quux-end]);
|
|
grid-template-rows: repeat(auto-fill, [quux-start] 100% [quux-end]);
|
|
}
|
|
.auto-repeat.changed {
|
|
grid-template-columns: repeat(auto-fill, [main-start] 100% [main-end]);
|
|
grid-template-rows: repeat(auto-fill, [main-start] 100% [main-end]);
|
|
}
|
|
.implicit {
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: 100%;
|
|
grid-template-areas: "quux";
|
|
}
|
|
.implicit.changed {
|
|
grid-template-areas: "main";
|
|
}
|
|
</style>
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
<div class="container explicit"></div>
|
|
<div class="container auto-repeat"></div>
|
|
<div class="container implicit"></div>
|
|
<script>
|
|
// Force layout
|
|
document.body.offsetLeft;
|
|
|
|
// Change the grid line names
|
|
for (let container of document.querySelectorAll(".container")) {
|
|
container.classList.add("changed");
|
|
}
|
|
</script>
|