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:
Boris Chiou 2019-11-16 01:52:32 +00:00
Родитель 7a96f9362c
Коммит 52546e8558
7 изменённых файлов: 99 добавлений и 30 удалений

Просмотреть файл

@ -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]