Daniel Holbert
681f25341f
Automatic update from web-platform-tests Use Ahem font in WPT old-content-is-inline.html (#57340) This testcase is only valid (i.e. it only actually matches its reference case) if the text doesn't linewrap. So it needs to specify a specific font in order to have some guarantees that linewrapping won't happen. Hence, this patch switches to the Ahem font, and reduces the length of the strings so that they're short enough to fit on a single line in that font. This patch also removes the styling that was making the text transparent, and makes the text blue instead; with the Ahem font, we're not at as much risk of fuzzy failures from subtle antialiasing differences. Fixes https://github.com/web-platform-tests/interop/issues/1250 -- wpt-commits: fadfaa1a530fbbc35dddef0d2651f89a8a24a23d wpt-pr: 57340
83 lines
1.8 KiB
HTML
83 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<title>View transitions: Old content is an inline element (ref)</title>
|
|
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
|
<link rel="author" href="mailto:bokan@chromium.org">
|
|
<link rel="stylesheet" href="/fonts/ahem.css">
|
|
|
|
<style>
|
|
:root {
|
|
background-color: rebeccapurple;
|
|
font: 20px/1 Ahem;
|
|
}
|
|
|
|
body { margin: 0; }
|
|
|
|
.container {
|
|
position: absolute;
|
|
left: 100px;
|
|
width: 400px;
|
|
height: 100px;
|
|
background-color: grey;
|
|
}
|
|
|
|
.container.start {
|
|
top: 100px;
|
|
}
|
|
|
|
.container.end {
|
|
top: 300px;
|
|
}
|
|
|
|
.container.transitioned {
|
|
left: 20px;
|
|
width: 600px;
|
|
transform: translateY(-50px);
|
|
}
|
|
|
|
.inline {
|
|
background-color: limegreen;
|
|
color: blue;
|
|
}
|
|
|
|
.transitioned .inline {
|
|
opacity: 0;
|
|
}
|
|
|
|
#dummyEndInline {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 250px;
|
|
/* scale transform applied in script below */
|
|
transform-origin: top left;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="container start">
|
|
<span>FILL FILL</span>
|
|
<span id="start" class="inline">INL INL</span>
|
|
<p>START STATE</p>
|
|
</div>
|
|
|
|
<div class="container end transitioned">
|
|
<span>FILL FILL</span>
|
|
<span id="end" class="inline">INL INL</span>
|
|
<p>END STATE</p>
|
|
</div>
|
|
|
|
<div id="dummyEndInline">
|
|
<span style="opacity:0">FILL FILL</span>
|
|
<span class="inline">INL INL</span>
|
|
</div>
|
|
<script>
|
|
let endWidth = document.getElementById('end').getBoundingClientRect().width;
|
|
let startWidth = document.getElementById('start').getBoundingClientRect().width;
|
|
let scale = endWidth / startWidth;
|
|
/* Default UA CSS scales the image pseudos to match the group in the inline
|
|
direction. The block direction scales to retain the image's aspect ratio.
|
|
So have the dummy end line scale to match the end state width and apply the
|
|
same scale to its height. */
|
|
document.getElementById('dummyEndInline').style.transform = `scale(${scale})`;
|
|
</script>
|
|
|