mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-06 19:29:24 +02:00
e77635deff
A few changes to address some of the feedback in: https://github.com/w3c/csswg-drafts/issues/6748#issuecomment-962273499 I moved the definition of the lateral/longitudinal axes earlier in the document so that they can be used for the rule-image-* section too. I also tweaked the borders/rule-colors in the last example to make it clearer. Differential Revision: https://phabricator.services.mozilla.com/D132971
46 lines
1 KiB
HTML
46 lines
1 KiB
HTML
<!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>
|