1 files changed, 46 insertions, 0 deletions
diff --git a/layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html b/layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html
new file mode 100644
index 0000000000..925ce3018b
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of rule overflow and clipping.</title>
+<style>
+html,body {
+  color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 2ch 2ch;
+  gap: 20px;
+
+  column-rule: 6px solid blue;
+  column-rule-longitudinal-edge-inset: min(-100vw, -100vh);
+
+  row-rule: 6px solid lime;
+  row-rule-longitudinal-edge-inset: min(-100vw, -100vh);
+
+  border: 4px dotted;
+  margin: 30px;
+  padding: 1ch;
+  background: lightgrey;
+}
+
+.test2 { overflow: hidden; }
+
+x {
+  block-size: 48px;
+  background: grey;
+}
+
+pre {
+  font-size: 10px;
+}
+</style>
+<body>
+<pre>Both grids have '*-edge-inset: min(-100vw, -100vh)'.
+The right grid has 'overflow: hidden' which clips its rules at the padding edge.</pre>
+  <div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x></div>
+  <div class="grid test2" style="top:100px "><x>1</x><x>2</x><x>3</x><x>4</x></div>
+</body>