зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1596610 - Set WillChangeBits::TRANSFORM for offset-path and add tests for it. r=hiro
Differential Revision: https://phabricator.services.mozilla.com/D53109 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Родитель
7a96f9362c
Коммит
52546e8558
|
@ -1,6 +1,7 @@
|
|||
[DEFAULT]
|
||||
prefs =
|
||||
layout.css.individual-transform.enabled=true
|
||||
layout.css.motion-path.enabled=true
|
||||
plugin.load_flash_only=false
|
||||
skip-if = os == 'android'
|
||||
support-files =
|
||||
|
|
|
@ -5,15 +5,6 @@
|
|||
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<script src="chrome://mochikit/content/tests/SimpleTest/paint_listener.js"></script>
|
||||
<style>
|
||||
#checkOpacityRepaint {
|
||||
will-change: opacity;
|
||||
}
|
||||
#checkTransformRepaint {
|
||||
will-change: transform;
|
||||
}
|
||||
#checkTranslateRepaint {
|
||||
will-change: translate;
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
@ -22,18 +13,6 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="checkRepaint">
|
||||
Check repaint without will-change
|
||||
</div>
|
||||
<div id="checkOpacityRepaint">
|
||||
Check repaint with will-change
|
||||
</div>
|
||||
<div id="checkTransformRepaint">
|
||||
Check repaint with will-change
|
||||
</div>
|
||||
<div id="checkTranslateRepaint">
|
||||
Check repaint with will-change
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
|
||||
|
@ -46,7 +25,8 @@ function waitForPaints() {
|
|||
}
|
||||
|
||||
add_task(async () => {
|
||||
var element = document.getElementById("checkRepaint");
|
||||
var element = document.createElement("div");
|
||||
document.body.appendChild(element);
|
||||
|
||||
await waitForPaints();
|
||||
|
||||
|
@ -60,10 +40,15 @@ add_task(async () => {
|
|||
// on this property. If this is broken then this test wont
|
||||
// be reliable check for will-change.
|
||||
is(painted, true, "element should have been painted");
|
||||
|
||||
element.remove();
|
||||
});
|
||||
|
||||
add_task(async () => {
|
||||
var element = document.getElementById("checkOpacityRepaint");
|
||||
var element = document.createElement("div");
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.style.willChange = "opacity";
|
||||
|
||||
await waitForPaints();
|
||||
|
||||
|
@ -76,12 +61,17 @@ add_task(async () => {
|
|||
// BasicLayers' heuristics are so that even with will-change:opacity,
|
||||
// we can still have repaints.
|
||||
if (utils.layerManagerType != "Basic") {
|
||||
is(painted, false, "will-change checkOpacityRepaint element should not have been painted");
|
||||
is(painted, false, "will-change:opacity element should not have been painted");
|
||||
}
|
||||
|
||||
element.remove();
|
||||
});
|
||||
|
||||
add_task(async () => {
|
||||
var element = document.getElementById("checkTransformRepaint");
|
||||
var element = document.createElement("div");
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.style.willChange = "transform";
|
||||
|
||||
await waitForPaints();
|
||||
|
||||
|
@ -94,12 +84,17 @@ add_task(async () => {
|
|||
// BasicLayers' heuristics are so that even with will-change:transform,
|
||||
// we can still have repaints.
|
||||
if (utils.layerManagerType != "Basic") {
|
||||
is(painted, false, "will-change checkTransformRepaint element should not have been painted");
|
||||
is(painted, false, "will-change:transform element should not have been painted");
|
||||
}
|
||||
|
||||
element.remove();
|
||||
});
|
||||
|
||||
add_task(async () => {
|
||||
var element = document.getElementById("checkTranslateRepaint");
|
||||
var element = document.createElement("div");
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.style.willChange = "translate";
|
||||
|
||||
await waitForPaints();
|
||||
|
||||
|
@ -112,8 +107,33 @@ add_task(async () => {
|
|||
// BasicLayers' heuristics are so that even with will-change:translate,
|
||||
// we can still have repaints.
|
||||
if (utils.layerManagerType != "Basic") {
|
||||
is(painted, false, "will-change checkTranslateRepaint element should not have been painted");
|
||||
is(painted, false, "will-change:translate element should not have been painted");
|
||||
}
|
||||
|
||||
element.remove();
|
||||
});
|
||||
|
||||
add_task(async () => {
|
||||
var element = document.createElement("div");
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.style.willChange = "offset-path";
|
||||
|
||||
await waitForPaints();
|
||||
|
||||
utils.checkAndClearPaintedState(element);
|
||||
element.style.offsetPath = "path('M55 50 h1')";
|
||||
|
||||
await waitForPaints();
|
||||
|
||||
var painted = utils.checkAndClearPaintedState(element);
|
||||
// BasicLayers' heuristics are so that even with will-change:offset-path,
|
||||
// we can still have repaints.
|
||||
if (utils.layerManagerType != "Basic") {
|
||||
is(painted, false, "will-change:offset-path element should not have been painted");
|
||||
}
|
||||
|
||||
element.remove();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
== will-change-stacking-context-position-1.html green-square-100-by-100-ref.html
|
||||
== will-change-stacking-context-transform-1.html green-square-100-by-100-ref.html
|
||||
test-pref(layout.css.individual-transform.enabled,true) == will-change-stacking-context-translate-1.html green-square-100-by-100-ref.html
|
||||
test-pref(layout.css.motion-path.enabled,true) == will-change-stacking-context-offset-path-1.html green-square-100-by-100-ref.html
|
||||
== will-change-stacking-context-transform-style-1.html green-square-100-by-100-ref.html
|
||||
== will-change-stacking-context-z-index-1.html green-square-100-by-100-ref.html
|
||||
test-pref(layout.css.contain.enabled,true) == will-change-fixpos-cb-contain-1.html green-square-100-by-100-offset-ref.html
|
||||
|
@ -18,4 +19,5 @@ test-pref(layout.css.contain.enabled,true) == will-change-fixpos-cb-contain-1.ht
|
|||
== will-change-fixpos-cb-position-1.html green-square-100-by-100-offset-ref.html
|
||||
== will-change-fixpos-cb-transform-1.html green-square-100-by-100-offset-ref.html
|
||||
test-pref(layout.css.individual-transform.enabled,true) == will-change-fixpos-cb-translate-1.html green-square-100-by-100-offset-ref.html
|
||||
test-pref(layout.css.motion-path.enabled,true) == will-change-fixpos-cb-offset-path-1.html green-square-100-by-100-offset-ref.html
|
||||
== will-change-fixpos-cb-transform-style-1.html green-square-100-by-100-offset-ref.html
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: offset-path' creates a containing block for fixed positioned elements</title>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="green-square-100-by-100-offset-ref.html">
|
||||
<meta name="assert" content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: offset-path; margin: 100px 0 0 100px; background: red }
|
||||
.child { top: 0; left: 0; width: 50px; background: green }
|
||||
#fixpos { position: fixed }
|
||||
#abspos { position: absolute; left: 50px }
|
||||
</style>
|
||||
<body>
|
||||
<div id="wc">
|
||||
<div class="child" id="fixpos">
|
||||
</div>
|
||||
<div class="child" id="abspos">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: offset-path' creates a stacking context</title>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="green-square-100-by-100-ref.html">
|
||||
<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: offset-path; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
<body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
|
@ -1151,7 +1151,9 @@ fn change_bits_for_longhand(longhand: LonghandId) -> WillChangeBits {
|
|||
LonghandId::Opacity => WillChangeBits::OPACITY,
|
||||
LonghandId::Transform => WillChangeBits::TRANSFORM,
|
||||
#[cfg(feature = "gecko")]
|
||||
LonghandId::Translate | LonghandId::Rotate | LonghandId::Scale => WillChangeBits::TRANSFORM,
|
||||
LonghandId::Translate | LonghandId::Rotate | LonghandId::Scale | LonghandId::OffsetPath => {
|
||||
WillChangeBits::TRANSFORM
|
||||
}
|
||||
_ => WillChangeBits::empty(),
|
||||
};
|
||||
|
||||
|
|
|
@ -1 +1 @@
|
|||
prefs: [layout.css.individual-transform.enabled:true]
|
||||
prefs: [layout.css.individual-transform.enabled:true, layout.css.motion-path.enabled:true]
|
||||
|
|
Загрузка…
Ссылка в новой задаче