Skip to content

Commit

Permalink
[GridNG] Opposite direction auto track subgrid fixes
Browse files Browse the repository at this point in the history 
This CL fixes several issues with opposite-direction nested subgrids in
auto-sized tracks. First, the `last_indefinite_index` array needs to be
reversed. We can't simply reverse the array, since it's an array of
prior indices that need to span the subgrid's index range. We also can't
simply offset the values, as this will be incorrect in reversed
scenarios, due to their stateful nature.

Ethan suggested a clever idea, which is to rebuild the array by looking
at when the parent array changed in subsequent values, as that's how
it's originally built up.

The second issue this fixes is that the extra margin for contribution
sizes needs to swap the start and end offsets for opposite directions.

A new test was added that's a variation of
`writing-directions-001.html` but with auto track sizes.

Bug: 618969
Change-Id: I495daa34e3c0c0cadd5f25d7a9212641c05bb81d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4506078
Commit-Queue: Kurt Catti-Schmidt <kschmi@microsoft.com>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Ethan Jimenez <ethavar@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1146118}
  • Loading branch information
@KurtCattiSchmidt @chromium-wpt-export-bot
KurtCattiSchmidt authored and chromium-wpt-export-bot committed May 18, 2023
1 parent e36dbb6 commit bc194a5
Show file tree
Hide file tree
Showing 2 changed files with 196 additions and 0 deletions.
96 changes: 96 additions & 0 deletions css/css-grid/subgrid/writing-directions-002-ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Reference: nested subgrids map margin/border/padding according to writing direction</title>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<style>
html,body {
font:12px/1 monospace;
}

.grid {
display: grid;
grid: 0.2em 1.4em / repeat(10, auto);
border: 1px solid;
padding: 0 0 0 0;
}

div > div {
display: grid;
grid-column: 1 / span 3;
grid: auto / subgrid;
border: 1px solid;
background: grey;
}

n {
grid-row: 1;
counter-increment: n;
}
n::before { content: counter(n, decimal); }

x {
background: silver;
}

</style>
</head>
<body>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
<div style="grid-template-columns: subgrid; grid-column: 1 /span 3;">
<x style="grid-column: 1; ">x</x>
</div>
</div>
</div>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div style="grid-template-columns: subgrid;">
<div style="grid-template-columns: subgrid; grid-column: 1 /span 3; padding-left: 10px;">
<x style="grid-column: 1; ">x</x>
</div>
</div>
</div>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
<div style="grid-template-columns: subgrid; grid-column-start:span 3;">
<x style="grid-column: 1;">x</x>
</div>
</div>
</div>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div style="grid-template-columns: subgrid;">
<div style="grid-template-columns: subgrid; grid-column-start:span 3; border-right: 20px solid; border-left: 10px solid;">
<x style="grid-column: 1;">x</x>
</div>
</div>
</div>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
<div style="grid-template-columns: subgrid; grid-column-start:span 3;">
<x style="grid-column: 1;">x</x>
</div>
</div>
</div>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div style="grid-template-columns: subgrid;">
<div style="grid-template-columns: subgrid; grid-column-start:span 3; margin: 0 20px 0 0;">
<x style="grid-column: 1;">x</x>
</div>
</div>
</div>

</body>
</html>
100 changes: 100 additions & 0 deletions css/css-grid/subgrid/writing-directions-002.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: nested subgrids map margin/border/padding according to writing direction</title>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="writing-directions-002-ref.html">
<style>
html,body {
font:12px/1 monospace;
}

.grid {
display: grid;
grid: 0.2em 1.4em / repeat(10, auto);
border: 1px solid;
padding: 0 0 0 0;
}

div > div {
display: grid;
grid-column: 1 / span 3;
grid: auto / subgrid;
border: 1px solid;
background: grey;
}

n {
grid-row: 1;
counter-increment: n;
}
n::before { content: counter(n, decimal); }

x {
background: silver;
}

.rtl { direction:rtl; }
.ltr { direction:ltr; }

</style>
</head>
<body>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div class="rtl" style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
<div class="ltr" style="grid-template-columns: subgrid;">
<x style="grid-column: 1;">x</x>
</div>
</div>
</div>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div class="rtl" style="grid-template-columns: subgrid; ">
<div class="ltr" style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
<x style="grid-column: 1;">x</x>
</div>
</div>
</div>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div class="rtl" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
<div class="ltr" style="grid-template-columns: subgrid; ">
<x style="grid-column: 1;">x</x>
</div>
</div>
</div>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div class="rtl" style="grid-template-columns: subgrid;">
<div class="ltr" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
<x style="grid-column: 1;">x</x>
</div>
</div>
</div>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div class="rtl" style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
<div class="ltr" style="grid-template-columns: subgrid; ">
<x style="grid-column: 1;">x</x>
</div>
</div>
</div>

<div class="grid">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div class="rtl" style="grid-template-columns: subgrid;">
<div class="ltr" style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
<x style="grid-column: 1;">x</x>
</div>
</div>
</div>

</body>
</html>

0 comments on commit bc194a5

Please sign in to comment.