diff options
Diffstat (limited to 'layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html')
| -rw-r--r-- | layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html | 46 |
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> |