Blitz - WPT: row-scrollbar-gutter-002.html

wpt / css / css-grid / grid-lanes / subgrid / grid-subgridded-to-grid-lanes / row-scrollbar-gutter-002.html

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/row-scrollbar-gutter-002.html

<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Grid Lanes Test: row-axis fieldset subgrids of a grid-lanes container with 'overflow' and/or 'scrollbar-gutter'</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-item-contribution">
<link rel="match" href="row-scrollbar-gutter-002-ref.html">
<style>
:root {
  overflow: scroll;
}
.grid-lanes {
  display: inline grid-lanes;
  grid-lanes-direction: row;
  grid-auto-flow: column;
  border: 5px solid blue;
  vertical-align: top;
}
.subgrid {
  block-size: 75px;
  display: grid;
  grid-template-rows: subgrid;
}
.item {
  inline-size: 50px;
  block-size: 50px;
  background: green;
}
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
</style>

<p>All the following subgrid scroll containers shouldn't have any scrollbars.</p>

<p>Testcase 1: subgrid with 'overflow: scroll'</p>
<div class="grid-lanes">
  <fieldset class="subgrid" style="overflow: scroll;"><div class="item"></div></fieldset>
</div>
<div class="grid-lanes" style="writing-mode: vertical-rl;">
  <fieldset class="subgrid" style="overflow: scroll;"><div class="item"></div></fieldset>
</div>

<p>Testcase 2: subgrid with 'overflow: auto' and 'scrollbar-gutter: stable'</p>
<div class="grid-lanes">
  <fieldset class="subgrid" style="overflow: auto; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>
<div class="grid-lanes" style="writing-mode: vertical-rl;">
  <fieldset class="subgrid" style="overflow: auto; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>

<p>Testcase 3: subgrid with 'overflow: hidden' and 'scrollbar-gutter: stable'</p>
<div class="grid-lanes">
  <fieldset class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>
<div class="grid-lanes" style="writing-mode: vertical-rl;">
  <fieldset class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/row-scrollbar-gutter-002-ref.html

<!DOCTYPE HTML>
<meta charset="utf-8">
<style>
:root {
  overflow: scroll;
}
.grid {
  display: inline grid;
  grid-lanes-direction: row;
  grid-auto-flow: column;
  border: 5px solid blue;
  vertical-align: top;
}
.subgrid {
  block-size: 75px;
  display: grid;
  grid-template-rows: subgrid;
}
.item {
  inline-size: 50px;
  block-size: 50px;
  background: green;
}
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
</style>

<p>All the following subgrid scroll containers shouldn't have any scrollbars.</p>

<p>Testcase 1: subgrid with 'overflow: scroll'</p>
<div class="grid">
  <fieldset class="subgrid" style="overflow: scroll;"><div class="item"></div></fieldset>
</div>
<div class="grid" style="writing-mode: vertical-rl;">
  <fieldset class="subgrid" style="overflow: scroll;"><div class="item"></div></fieldset>
</div>

<p>Testcase 2: subgrid with 'overflow: auto' and 'scrollbar-gutter: stable'</p>
<div class="grid">
  <fieldset class="subgrid" style="overflow: auto; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>
<div class="grid" style="writing-mode: vertical-rl;">
  <fieldset class="subgrid" style="overflow: auto; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>

<p>Testcase 3: subgrid with 'overflow: hidden' and 'scrollbar-gutter: stable'</p>
<div class="grid">
  <fieldset class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>
<div class="grid" style="writing-mode: vertical-rl;">
  <fieldset class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>