Bug 1855763 - Use another alias other than moz-transform to test use counters, and other manual fix-ups. r=layout-reviewers,jfkthame

Depends on D189760

Differential Revision: https://phabricator.services.mozilla.com/D189769
This commit is contained in:
Emilio Cobos Álvarez 2023-10-02 12:36:17 +00:00
parent 813ca5b3b9
commit c2ce7e5fb8
27 changed files with 49 additions and 97 deletions

View file

@ -68,7 +68,7 @@ add_task(async function () {
// Check for shorthands.
{ name: "CSS_PROPERTY_Padding" },
// Check for aliases.
{ name: "CSS_PROPERTY_MozTransform" },
{ name: "CSS_PROPERTY_MozAppearance" },
// Check for counted unknown properties.
{ name: "CSS_PROPERTY_WebkitPaddingStart" },
],

View file

@ -3,7 +3,7 @@
div {
background-image: none;
padding: 10px;
-moz-transform: scale(10);
-moz-appearance: none;
/* Just a property we're unlikely to implement */
-webkit-padding-start: 58.5;
/* Sentinel use counter to signal that telemetry for this document has been captured */

View file

@ -5,7 +5,7 @@
function boom()
{
var d = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
d.style.setProperty("-moz-transform", "translate(0pt, 10px)", "");
d.style.setProperty("transform", "translate(0pt, 10px)", "");
d.style.setProperty("opacity", "0.8", "");
d.style.setProperty("background-color", "gray", "");
var c = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");

View file

@ -2138,8 +2138,9 @@ class nsLayoutUtils {
/**
* Some frames with 'position: fixed' (nsStyleDisplay::mPosition ==
* StylePositionProperty::Fixed) are not really fixed positioned, since
* they're inside an element with -moz-transform. This function says
* whether such an element is a real fixed-pos element.
* they're inside a transformed element or other element that establishes a
* fixed-pos containing block). This function says whether such an element is
* a real fixed-pos element.
*/
static bool IsReallyFixedPos(const nsIFrame* aFrame);

View file

@ -8,14 +8,9 @@ body {
overflow: hidden;
}
::-webkit-scrollbar {
display: none;
}
div {
margin: 0;
padding: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
}
@ -25,7 +20,6 @@ div {
width: 350px;
height: 70%;
max-height: 500px;
-webkit-perspective: 5000px;
perspective: 5000px;
transform: translate(-50%, -50%) rotateY(20deg);
}
@ -39,7 +33,6 @@ div {
}
#content {
-ms-overflow-style: none;
overflow: hidden scroll;
height: 100%;
background: #fefee0;

View file

@ -1,9 +1,6 @@
<!DOCTYPE HTML>
<title>preserve-3d hit testing</title>
<style>
#stage {
}
#parent {
transform-style: preserve-3d;
}
@ -21,7 +18,6 @@
background-color: #835A99;
transform: translate3d(600px, 200px, 350px);
}
</style>
<body>
<div id="stage">

View file

@ -70,31 +70,31 @@ runtests();
function runtests() {
var style = window.getComputedStyle(document.getElementById("test1"));
is(style.getPropertyValue("-moz-transform"), "matrix(0.5, 0, 0, 1, 0, 0)",
is(style.getPropertyValue("transform"), "matrix(0.5, 0, 0, 1, 0, 0)",
"Scalex proper matrix is applied");
style = window.getComputedStyle(document.getElementById("test2"));
is(style.getPropertyValue("-moz-transform"), "matrix(1, 0, 0, 0.5, 0, 0)",
is(style.getPropertyValue("transform"), "matrix(1, 0, 0, 0.5, 0, 0)",
"Scaley proper matrix is applied");
style = window.getComputedStyle(document.getElementById("test3"));
is(style.getPropertyValue("-moz-transform"), "matrix(0.5, 0, 0, 0.5, 0, 0)",
is(style.getPropertyValue("transform"), "matrix(0.5, 0, 0, 0.5, 0, 0)",
"Scale proper matrix is applied");
style = window.getComputedStyle(document.getElementById("test4"));
is(style.getPropertyValue("-moz-transform"), "none",
is(style.getPropertyValue("transform"), "none",
"Three dimensional scale should be ignored");
style = window.getComputedStyle(document.getElementById("test5"));
is(style.getPropertyValue("-moz-transform"), "none",
is(style.getPropertyValue("transform"), "none",
"Percent values in scale should be ignored");
style = window.getComputedStyle(document.getElementById("test6"));
is(style.getPropertyValue("-moz-transform"), "matrix(640000, 0, 0, 1e-19, 0, 0)",
is(style.getPropertyValue("transform"), "matrix(640000, 0, 0, 1e-19, 0, 0)",
"Ensure wacky values are accepted");
style = window.getComputedStyle(document.getElementById("test7"));
is(style.getPropertyValue("-moz-transform"), "none",
is(style.getPropertyValue("transform"), "none",
"No unit values allowed in scale");
}
</script>

View file

@ -93,7 +93,7 @@ function runtests() {
// round differently. We will parse out the values and compare them
// individually. The matrix should be: matrix(1, 0, 0.57735, 1, 0, 0)
var style = window.getComputedStyle(document.getElementById("test1"));
var tformStyle = style.getPropertyValue("-moz-transform");
var tformStyle = style.getPropertyValue("transform");
var tformValues = tformStyle.substring(tformStyle.indexOf('(') + 1,
tformStyle.indexOf(')')).split(',');
is((+tformValues[0]), 1, "Test1: skewx: param 0 is 1");
@ -106,7 +106,7 @@ function runtests() {
// Again, handle rounding for test 2, proper matrix should be:
// matrix(1, 1.73205, 0, 1, 0, 0)
style = window.getComputedStyle(document.getElementById("test2"));
tformStyle = style.getPropertyValue("-moz-transform");
tformStyle = style.getPropertyValue("transform");
tformValues = tformStyle.substring(tformStyle.indexOf('(') + 1,
tformStyle.indexOf(')')).split(',');
is((+tformValues[0]), 1, "Test2: skewy: param 0 is 1");
@ -117,29 +117,29 @@ function runtests() {
is((+tformValues[5]), 0, "Test2: skewy: param 5 is 0");
style = window.getComputedStyle(document.getElementById("test3"));
is(style.getPropertyValue("-moz-transform"), "matrix(1, 1, 1, 1, 0, 0)",
is(style.getPropertyValue("transform"), "matrix(1, 1, 1, 1, 0, 0)",
"Test3: Skew proper matrix is applied");
style = window.getComputedStyle(document.getElementById("test4"));
is(style.getPropertyValue("-moz-transform"), "matrix(1, 1, 0, 1, 0, 0)",
is(style.getPropertyValue("transform"), "matrix(1, 1, 0, 1, 0, 0)",
"Test4: Skew angle wrap: proper matrix is applied");
style = window.getComputedStyle(document.getElementById("test5"));
is(style.getPropertyValue("-moz-transform"), "matrix(1, -1, 1, 1, 0, 0)",
is(style.getPropertyValue("transform"), "matrix(1, -1, 1, 1, 0, 0)",
"Test5: Skew mixing deg and grad");
style = window.getComputedStyle(document.getElementById("test6"));
is(style.getPropertyValue("-moz-transform"), "none",
is(style.getPropertyValue("transform"), "none",
"Test6: Skew with invalid units");
style = window.getComputedStyle(document.getElementById("test7"));
is(style.getPropertyValue("-moz-transform"), "none",
is(style.getPropertyValue("transform"), "none",
"Test7: Skew with more invalid units");
// Test 8: skew with negative degrees, here again we must handle rounding.
// The matrix should be: matrix(1, 3.73206, -1, 1, 0, 0)
style = window.getComputedStyle(document.getElementById("test8"));
tformStyle = style.getPropertyValue("-moz-transform");
tformStyle = style.getPropertyValue("transform");
tformValues = tformStyle.substring(tformStyle.indexOf('(') + 1,
tformStyle.indexOf(')')).split(',');
is((+tformValues[0]), 1, "Test8: Test skew with negative degrees-param 0 is 1");
@ -150,15 +150,15 @@ function runtests() {
is((+tformValues[5]), 0, "Test8: param 5 is 0");
style = window.getComputedStyle(document.getElementById("test9"));
is(style.getPropertyValue("-moz-transform"), "none",
is(style.getPropertyValue("transform"), "none",
"Test9: Skew in 3d should be ignored");
style = window.getComputedStyle(document.getElementById("test10"));
is(style.getPropertyValue("-moz-transform"), "matrix(1, -10000, 1, 1, 0, 0)",
is(style.getPropertyValue("transform"), "matrix(1, -10000, 1, 1, 0, 0)",
"Test10: Skew with nearly infinite numbers");
style = window.getComputedStyle(document.getElementById("test11"));
is(style.getPropertyValue("-moz-transform"), "matrix(1, -10000, 10000, 1, 0, 0)",
is(style.getPropertyValue("transform"), "matrix(1, -10000, 10000, 1, 0, 0)",
"Test11: Skew with more infinite numbers");
}

View file

@ -1,5 +1,5 @@
<html class="reftest-paged"><head>
<title>Crash [@ nsViewManager::CreateView][@ nsCSSFrameConstructor::AddFrameConstructionItemsInternal] on closing print preview with -moz-transform, position: fixed table displays</title>
<title>Crash [@ nsViewManager::CreateView][@ nsCSSFrameConstructor::AddFrameConstructionItemsInternal] on closing print preview with transform, position: fixed table displays</title>
</head><body>
<div style="position: fixed;">
<div style="display: table-header-group; transform: rotate(1deg);">

View file

@ -8,7 +8,7 @@
/**
* This is a copy of multicolor-image-2.html with a few changes:
* (1) the whole thing is inside a -moz-transform
* (1) the whole thing is inside a transform
* (2) different border-images have different values for
* repeat/stretch/round
*/
@ -17,10 +17,6 @@
width: 100px;
transform: translate(100px, 100px) scale(2,3);
transform-origin: 0 0;
-khtml-transform: translate(100px, 100px) scale(2,3);
-khtml-transform-origin: 0 0;
transform: translate(100px, 100px) scale(2,3);
transform-origin: 0 0;
}
div {
@ -30,8 +26,6 @@
}
div.one {
border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
-khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
border-width: 4px 6px 8px 11px;
border-style: solid;
@ -40,8 +34,6 @@
}
div.two {
border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
-khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
border-width: 3px 1px 0px 4px;
border-style: solid;
@ -50,8 +42,6 @@
}
div.three {
border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
border-width: 10px 2px 5px 3px;
border-style: solid;
@ -60,8 +50,6 @@
}
div.four {
border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
-khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
border-width: 5px 7px 1px 0;
border-style: solid;
@ -73,8 +61,6 @@
border-width: 4px 8px 10px 2px;
border-style: solid;
border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
width: 0;
height: 8px;
}
@ -83,15 +69,11 @@
border-width: 4px 0 10px 2px;
border-style: solid;
border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
width: 17px;
height: 0;
}
div.seven {
border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
border-width: 1px 3px 0 0;
border-style: solid;

View file

@ -8,7 +8,7 @@
/**
* This is a copy of multicolor-image-2.html with a few changes:
* (1) the whole thing is inside a -moz-transform
* (1) the whole thing is inside a transform
* (2) different border-images have different values for
* repeat/stretch/round
*/
@ -18,10 +18,6 @@
/* This transform has no scale, and thus tests pixel-snapping codepaths! */
transform: translate(100px, 100px);
transform-origin: 0 0;
-khtml-transform: translate(100px, 100px);
-khtml-transform-origin: 0 0;
transform: translate(100px, 100px);
transform-origin: 0 0;
}
div {
@ -31,8 +27,6 @@
}
div.one {
border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
-khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
border-width: 4px 6px 8px 11px;
border-style: solid;
@ -41,8 +35,6 @@
}
div.two {
border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
-khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
border-width: 3px 1px 0px 4px;
border-style: solid;
@ -51,8 +43,6 @@
}
div.three {
border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
border-width: 10px 2px 5px 3px;
border-style: solid;
@ -61,8 +51,6 @@
}
div.four {
border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
-khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
border-width: 5px 7px 1px 0;
border-style: solid;
@ -74,8 +62,6 @@
border-width: 4px 8px 10px 2px;
border-style: solid;
border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
width: 0;
height: 8px;
}
@ -84,15 +70,11 @@
border-width: 4px 0 10px 2px;
border-style: solid;
border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
width: 17px;
height: 0;
}
div.seven {
border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
border-width: 1px 3px 0 0;
border-style: solid;

View file

@ -1,5 +1,5 @@
<!DOCTYPE HTML>
<title>Testcase for hypothetical box calculation for position:fixed inside -moz-transform</title>
<title>Testcase for hypothetical box calculation for position:fixed inside transform</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
</style>

View file

@ -1,5 +1,5 @@
<!DOCTYPE HTML>
<title>Testcase for hypothetical box calculation for position:fixed inside -moz-transform</title>
<title>Testcase for hypothetical box calculation for position:fixed inside transform</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
</style>

View file

@ -1,5 +1,5 @@
<!DOCTYPE HTML>
<title>Test for incorrect inherited/aInherited use in -moz-transform-origin handling</title>
<title>Test for incorrect inherited/aInherited use in transform-origin handling</title>
<style type="text/css">
p {

View file

@ -1,5 +1,5 @@
<!DOCTYPE HTML>
<title>Test for incorrect inherited/aInherited use in -moz-transform-origin handling</title>
<title>Test for incorrect inherited/aInherited use in transform-origin handling</title>
<style type="text/css">
p {

View file

@ -1,5 +1,5 @@
<!DOCTYPE HTML>
<title>Test for incorrect inherited/aInherited use in -moz-transform-origin handling</title>
<title>Test for incorrect inherited/aInherited use in transform-origin handling</title>
<style type="text/css">
p {

View file

@ -1,5 +1,5 @@
<!DOCTYPE HTML>
<title>Test for incorrect inherited/aInherited use in -moz-transform-origin handling</title>
<title>Test for incorrect inherited/aInherited use in transform-origin handling</title>
<style type="text/css">
p {

View file

@ -10,7 +10,6 @@
height: 200px;
width: 800px;
transform: rotate(40deg);
transform: rotate(40deg);
}
#d2 {
background: white;
@ -20,7 +19,6 @@
height: 204px;
width: 804px;
transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
</head>
@ -30,7 +28,7 @@ function doTest() {
// The first rotation here makes the transform active. The second rotation
// sets it back where it belongs.
var d = document.getElementById("d");
d.style.transform = d.style.transform = 'rotate(45deg)';
d.style.transform = 'rotate(45deg)';
document.documentElement.removeAttribute('class');
}
window.addEventListener("MozReftestInvalidate", doTest);

View file

@ -2,8 +2,7 @@
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
Test painting patterns with scaling by background-size and
-moz-transform.
Test painting patterns with scaling by background-size and transform.
-->
<!DOCTYPE html>
<html>

View file

@ -371,7 +371,7 @@ include ../../toolkit/themes/osx/reftests/reftest.list
include ../../toolkit/content/tests/reftests/reftest.list
# -moz-transform/
# transform/
# skipping on non-e10s windows because of assertion in bug 1401228
skip-if(winWidget&&!browserIsRemote) include transform/reftest.list

View file

@ -5,9 +5,9 @@ fuzzy(0-1,0-6) == rotatey-1a.html rotatey-1-ref.html
== scalezrotatex-1.html scalezrotatex-1-ref.html
# Check that the perspectve() transform function results in some visual changes
!= rotatex-perspective-1a.html rotatex-1-ref.html
# Check that -moz-perspective results in visual changes to child transformed elements
# Check that perspective results in visual changes to child transformed elements
!= rotatex-perspective-1b.html rotatex-1-ref.html
# -moz-perspective should only apply to child elements
# perspective should only apply to child elements
== rotatex-perspective-1c.html rotatex-1-ref.html
== rotatex-perspective-3a.html rotatex-perspective-3-ref.html
== scalez-1a.html scalez-1-ref.html

View file

@ -14,7 +14,7 @@ p {
</style>
<head>
<body onload="document.getElementById('a').style.removeProperty('-moz-transform-origin');">
<body onload="document.getElementById('a').style.removeProperty('transform-origin');">
<div id="a" style="transform-origin: 10px 10px">
<p style="font-size: 10px"></p>
</div>

View file

@ -1,6 +1,6 @@
<html>
<head>
<title>Crash [@ nsViewManager::CreateView] with ::first-line position: absolute and -moz-transform</title>
<title>Crash [@ nsViewManager::CreateView] with ::first-line position: absolute and transform</title>
<style>
#a::first-line { transform: translate(50px);}
</style>

View file

@ -5,7 +5,8 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/*
* A class used for intermediate representations of the -moz-transform property.
* A class used for intermediate representations of the transform and
* transform-like properties.
*/
#include "nsStyleTransformMatrix.h"

View file

@ -1491,15 +1491,15 @@ advance_clock(1000);
is(cs.textIndent, "100px", "cascade2 test at 8s");
done_div();
new_div("-moz-animation: primitives1 2s linear forwards");
is(cs.getPropertyValue("-moz-transform"), "matrix(1, 0, 0, 1, 0, 0)",
new_div("animation: primitives1 2s linear forwards");
is(cs.getPropertyValue("transform"), "matrix(1, 0, 0, 1, 0, 0)",
"primitives1 at 0s");
advance_clock(1000);
is(cs.getPropertyValue("-moz-transform"),
is(cs.getPropertyValue("transform"),
"matrix(-0.707107, 0.707107, -0.707107, -0.707107, 0, 0)",
"primitives1 at 1s");
advance_clock(1000);
is(cs.getPropertyValue("-moz-transform"), "matrix(0, -1, 1, 0, 0, 0)",
is(cs.getPropertyValue("transform"), "matrix(0, -1, 1, 0, 0, 0)",
"primitives1 at 0s");
done_div();

View file

@ -31,10 +31,10 @@ var p = document.getElementById("display");
for (var test in tests) {
p.setAttribute("style", "transform: rotate(" + test + ")");
is(p.style.getPropertyValue("-moz-transform"), "rotate(" + test + ")",
is(p.style.getPropertyValue("transform"), "rotate(" + test + ")",
test + " serializes to exactly itself");
// We can't test any equivalence since we don't have any properties
// with angle values that we compute. (-moz-transform doesn't help.)
// with angle values that we compute. (transform doesn't help.)
/*
var equiv = tests[test];
if (equiv) {

View file

@ -4,7 +4,7 @@
</style>
<body>
<!-- For some reasons, the ref has a small offset when there are spaces between meters.
Given that we don't want to test -moz-transform and even a perfect match but just
Given that we don't want to test transform and even a perfect match but just
the general rendering, we are going to keep this dirty test.
It's very similar to the non-vertical test with a difference, for the RTL: RTL
does not apply for vertical meters. -->