blob: 925ce3018b5b7a48af20fdcdd0c4feebea24b74a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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>
|
