Daniel Holbert
7d38ad46e9
Some context on this patch: the style 'overflow-{x,y}:clip' is only supposed to
clip overflow in the specified axis (x or y). But under the hood, we need to
set up a *two*-dimensional clipping rect, with *some* size and position for the
other axis. So we use the ink-overflow rect's size and position, which should
be exactly-generous-enough to result in no actual clipping (since it's at the
boundary of anything that would be clipped).
However: until this patch, this didn't work quite right in cases where
transforms were involved -- we'd essentially double-transform the rect when
clipping (since the ink-overflow rect already has transforms applied, and then
we transform it when clipping).
This patch fixes that by explicitly using our un-transformed API for
InkOverflow(), so that the transform only gets incorporated once.
Differential Revision: https://phabricator.services.mozilla.com/D265864
67 lines
1.4 KiB
HTML
67 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Reference Case</title>
|
|
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
<!-- Note: This reference case should have almost identical markup to the
|
|
testcase; the only difference should be the removal of the 'clip-{x,y}'
|
|
classes and their 'overflow-{x,y}: clip' styles. -->
|
|
<style>
|
|
body { margin-left: 50px; }
|
|
body { margin-left: 50px; }
|
|
.outer {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 4px solid grey;
|
|
display: inline-block;
|
|
margin: 30px;
|
|
}
|
|
.shift-left {
|
|
transform: translatex(-10px);
|
|
}
|
|
.shift-right {
|
|
transform: translatex(10px);
|
|
}
|
|
.shift-up {
|
|
transform: translatey(-10px);
|
|
}
|
|
.shift-down {
|
|
transform: translatey(10px);
|
|
}
|
|
.child {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
border: 4px solid blue;
|
|
}
|
|
.wide {
|
|
width: 90px;
|
|
margin-left: -20px;
|
|
}
|
|
.tall {
|
|
height: 90px;
|
|
margin-top: -20px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="outer shift-left">
|
|
<div class="child wide"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="child wide"></div>
|
|
</div>
|
|
<div class="outer shift-right">
|
|
<div class="child wide"></div>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="outer shift-up">
|
|
<div class="child tall"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="child tall"></div>
|
|
</div>
|
|
<div class="outer shift-down">
|
|
<div class="child tall"></div>
|
|
</div>
|
|
</body>
|