mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-02 18:08:58 +00:00
Bug 1929899 [wpt PR 49027] - View transition layered capture: determine geometry based on box model, a=testonly
Automatic update from web-platform-tests View transition layered capture: determine geometry based on box model Instead of capturing the border offset, we capture the following layout sizes to determine sizing, in addition to the border box: - padding box - content box - The box-sizing property - In layered capture mode, we use the content box size as the reference box for positioning the snapshot, so that padding take effect. - The ::view-transition-image-pair pseudo-element now has position:relative so that it gets affected by padding. It has the content box size. - The width/height of the group is determined by the box-sizing property, and it receives the computed padding. Bug: 375395117 Change-Id: I18fe5126fbfac58b0619043cc5521ea1f280e457 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5953705 Reviewed-by: Khushal Sagar <khushalsagar@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Reviewed-by: Arthur Sonzogni <arthursonzogni@chromium.org> Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org> Cr-Commit-Position: refs/heads/main@{#1379706} -- wpt-commits: 07dfce3f1885843deaa9a2ecd978317f7f25e9ab wpt-pr: 49027
This commit is contained in:
Noam Rosenthal
moz-wptsync-bot
parent
aaecfe15b4
commit
fefa2653d5
@ -22,7 +22,7 @@
|
||||
|
||||
.parent {
|
||||
view-transition-name: parent;
|
||||
border: 3px solid black;
|
||||
border: 10px solid black;
|
||||
background: green;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Borders should not affect snapshot position</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
html {
|
||||
view-transition-name: none;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.inline {
|
||||
view-transition-name: parent;
|
||||
border: 10px solid black;
|
||||
background: green;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 40px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<span class="inline">
|
||||
ABC
|
||||
</span>
|
||||
</body>
|
||||
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Borders should not affect snapshot position</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
|
||||
<link rel="match" href="border-offset-with-padding-inline-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="resources/compute-test.js"></script>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
html {
|
||||
view-transition-name: none;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.inline {
|
||||
view-transition-name: parent;
|
||||
border: 10px solid black;
|
||||
background: green;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*),
|
||||
::view-transition-group(*) {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<span class="inline">
|
||||
ABC
|
||||
</span>
|
||||
<script>
|
||||
const transition = document.startViewTransition(() => {
|
||||
document.documentElement.classList.add("vt-new");
|
||||
});
|
||||
transition.ready.then(() => takeScreenshot());
|
||||
</script>
|
||||
</body>
|
||||
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Borders should not affect snapshot position</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
|
||||
<link rel="match" href="border-offset-ref.tentative.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="resources/compute-test.js"></script>
|
||||
<style>
|
||||
html {
|
||||
view-transition-name: none;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.parent {
|
||||
view-transition-name: parent;
|
||||
border: 10px solid black;
|
||||
background: green;
|
||||
padding: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 30px;
|
||||
padding-left: 6px;
|
||||
height: 36px;
|
||||
background: yellow;
|
||||
border: 2px dashed blue;
|
||||
view-transition-group: parent;
|
||||
}
|
||||
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*),
|
||||
::view-transition-group(*) {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
::view-transition-group(parent) {
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="parent">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
<script>
|
||||
const transition = document.startViewTransition(() => {
|
||||
document.documentElement.classList.add("vt-new");
|
||||
});
|
||||
transition.ready.then(() => takeScreenshot());
|
||||
</script>
|
||||
</body>
|
||||
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Borders should not affect snapshot position</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
|
||||
<link rel="match" href="border-offset-ref.tentative.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="resources/compute-test.js"></script>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
html {
|
||||
view-transition-name: none;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.parent {
|
||||
view-transition-name: parent;
|
||||
border: 10px solid black;
|
||||
background: green;
|
||||
padding: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: yellow;
|
||||
border: 2px dashed blue;
|
||||
}
|
||||
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*),
|
||||
::view-transition-group(*) {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
::view-transition-group(parent) {
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="parent">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
<script>
|
||||
const transition = document.startViewTransition(() => {
|
||||
document.documentElement.classList.add("vt-new");
|
||||
});
|
||||
transition.ready.then(() => takeScreenshot());
|
||||
</script>
|
||||
</body>
|
||||
@ -1,7 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Borders should not affect snapshot position</title>
|
||||
<meta name=fuzzy content="maxDifference=0-255; totalPixels=0-515">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
|
||||
<link rel="match" href="border-offset-ref.tentative.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
@ -25,7 +24,7 @@
|
||||
|
||||
.parent {
|
||||
view-transition-name: parent;
|
||||
border: 3px solid black;
|
||||
border: 10px solid black;
|
||||
background: green;
|
||||
}
|
||||
|
||||
|
||||
@ -5,8 +5,9 @@
|
||||
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
box-sizing: {{GET[sizing]}};
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 33px;
|
||||
background: pink;
|
||||
@ -3,13 +3,15 @@
|
||||
<title>Box model is copied to group style</title>
|
||||
<meta name=fuzzy content="maxDifference=0-10; totalPixels=0-200000">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
|
||||
<link rel="match" href="box-model-capture-ref.html">
|
||||
<link rel="match" href="box-model-capture-ref.sub.html">
|
||||
<meta name="variant" content="?sizing=border-box">
|
||||
<meta name="variant" content="?sizing=content-box">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
* {
|
||||
/* Will add tests for different sizing once the spec is resolved. */
|
||||
box-sizing: border-box;
|
||||
box-sizing: {{GET[sizing]}};
|
||||
}
|
||||
|
||||
html {
|
||||
view-transition-name: none;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user