mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1110950: Trigger a reflow (as well as a repaint) for changes to 'object-fit' and 'object-position', so subdocuments can be repositioned/resized. r=roc
This commit is contained in:
Daniel Holbert
parent
9a3738d626
commit
c07d3703bb
24
layout/reftests/image/image-object-fit-dyn-1-ref.html
Normal file
24
layout/reftests/image/image-object-fit-dyn-1-ref.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
div.limeRect {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
background: lime;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="limeRect"></div>
|
||||
<div class="limeRect"></div>
|
||||
<div class="limeRect"></div>
|
||||
<div class="limeRect"></div>
|
||||
</body>
|
||||
</html>
|
||||
45
layout/reftests/image/image-object-fit-dyn-1.html
Normal file
45
layout/reftests/image/image-object-fit-dyn-1.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!--
|
||||
This testcase ensures that we repaint correctly when "object-fit" is
|
||||
adjusted on a replaced element with SVG content. We start with
|
||||
"object-fit: contain", which lets some of the red background show through
|
||||
as we fit the SVG's square aspect-ratio into the wide rectangular
|
||||
container elements. We then change dynamically to "object-fit: cover",
|
||||
which should scale our SVG content to cover each replaced element's
|
||||
content-box. No red should ultimately be visible in the reftest snapshot.
|
||||
-->
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
embed, img, object, video {
|
||||
object-fit: contain;
|
||||
background: red;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function go() {
|
||||
var elemsToTweak = ["embed", "img", "object", "video"];
|
||||
elemsToTweak.forEach(tweakElemObjectFit);
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
function tweakElemObjectFit(tagName) {
|
||||
var elem = document.getElementsByTagName(tagName)[0];
|
||||
elem.style.objectFit = "cover";
|
||||
}
|
||||
document.addEventListener("MozReftestInvalidate", go);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<embed src="500.svg">
|
||||
<img src="500.svg">
|
||||
<object data="500.svg"></object>
|
||||
<video poster="500.svg"></video>
|
||||
</body>
|
||||
</html>
|
||||
24
layout/reftests/image/image-object-position-dyn-1-ref.html
Normal file
24
layout/reftests/image/image-object-position-dyn-1-ref.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
div.limeRect {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
background: lime;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="limeRect"></div>
|
||||
<div class="limeRect"></div>
|
||||
<div class="limeRect"></div>
|
||||
<div class="limeRect"></div>
|
||||
</body>
|
||||
</html>
|
||||
45
layout/reftests/image/image-object-position-dyn-1.html
Normal file
45
layout/reftests/image/image-object-position-dyn-1.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!--
|
||||
This testcase ensures that we repaint correctly when "object-position" is
|
||||
adjusted on a replaced element with SVG content. We start with
|
||||
"object-position: 10px 15px", which lets a strip of the red background
|
||||
show through on the top and left edges. We then change dynamically to
|
||||
"object-position: 0 0", which (given our "object-fit: fill" value) lets
|
||||
the SVG image fill each replaced element without any uncovered edges.
|
||||
-->
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
embed, img, object, video {
|
||||
object-fit: fill;
|
||||
object-position: 10px 15px;
|
||||
background: red;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function go() {
|
||||
var elemsToTweak = ["embed", "img", "object", "video"];
|
||||
elemsToTweak.forEach(tweakElemObjectFit);
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
function tweakElemObjectFit(tagName) {
|
||||
var elem = document.getElementsByTagName(tagName)[0];
|
||||
elem.style.objectPosition = "0 0";
|
||||
}
|
||||
document.addEventListener("MozReftestInvalidate", go);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<embed src="500.svg">
|
||||
<img src="500.svg">
|
||||
<object data="500.svg"></object>
|
||||
<video poster="500.svg"></video>
|
||||
</body>
|
||||
</html>
|
||||
@ -12,8 +12,10 @@ random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1c.htm
|
||||
random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1d.html sync-image-switch-1-ref.html # bug 855050 for WinXP
|
||||
|
||||
# Tests for "object-fit" & "object-position"
|
||||
test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-fit-dyn-1.html image-object-fit-dyn-1-ref.html
|
||||
test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-fit-with-background-1.html image-object-fit-with-background-1-ref.html
|
||||
test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-fit-with-background-2.html image-object-fit-with-background-2-ref.html
|
||||
test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-position-dyn-1.html image-object-position-dyn-1-ref.html
|
||||
test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-position-with-background-1.html image-object-position-with-background-1-ref.html
|
||||
test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-position-with-background-2.html image-object-position-with-background-2-ref.html
|
||||
|
||||
|
||||
@ -1489,13 +1489,20 @@ nsChangeHint nsStylePosition::CalcDifference(const nsStylePosition& aOther) cons
|
||||
{
|
||||
nsChangeHint hint = nsChangeHint(0);
|
||||
|
||||
// Changes to "z-index", "object-fit", & "object-position" require a repaint.
|
||||
if (mZIndex != aOther.mZIndex ||
|
||||
mObjectFit != aOther.mObjectFit ||
|
||||
mObjectPosition != aOther.mObjectPosition) {
|
||||
// Changes to "z-index" require a repaint.
|
||||
if (mZIndex != aOther.mZIndex) {
|
||||
NS_UpdateHint(hint, nsChangeHint_RepaintFrame);
|
||||
}
|
||||
|
||||
// Changes to "object-fit" & "object-position" require a repaint. They
|
||||
// may also require a reflow, if we have a nsSubDocumentFrame, so that we
|
||||
// can adjust the size & position of the subdocument.
|
||||
if (mObjectFit != aOther.mObjectFit ||
|
||||
mObjectPosition != aOther.mObjectPosition) {
|
||||
NS_UpdateHint(hint, NS_CombineHint(nsChangeHint_RepaintFrame,
|
||||
nsChangeHint_NeedReflow));
|
||||
}
|
||||
|
||||
if (mOrder != aOther.mOrder) {
|
||||
// "order" impacts both layout order and stacking order, so we need both a
|
||||
// reflow and a repaint when it changes. (Technically, we only need a
|
||||
|
||||
Loading…
Reference in New Issue
Block a user