mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision cd44958a002b1ad494168e0290554644de84526e
This commit is contained in:
WPT Sync Bot
parent
2ed23ce4c9
commit
4443426308
103 changed files with 1740 additions and 1138 deletions
|
|
@ -645,7 +645,7 @@ test(t => {
|
|||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
backgroundSize: "auto auto" },
|
||||
backgroundSize: "auto" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
backgroundSize: "50% auto, 6px auto, contain" },
|
||||
];
|
||||
|
|
@ -657,7 +657,7 @@ test(t => {
|
|||
// Test inheriting a background-size value
|
||||
|
||||
expected[0].backgroundSize = div.style.backgroundSize =
|
||||
"30px auto, 40% auto, auto auto";
|
||||
"30px auto, 40% auto, auto";
|
||||
frames = getKeyframes(div);
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
document.getElementById("test").style.backgroundSize = "auto auto";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"auto auto", "background-size supporting value");
|
||||
"auto", "background-size supporting value");
|
||||
}, "background-size_auto_auto");
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "auto 15px";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Filter Effects Module Level 2: getComputedValue().backdropFilter</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<meta name="assert" content="backdrop-filter supports omitted arguments'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
#target {
|
||||
color: lime;
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("backdrop-filter", "none");
|
||||
|
||||
test_computed_value("backdrop-filter", "blur(100px)");
|
||||
test_computed_value("backdrop-filter", "blur()", "blur(0px)");
|
||||
|
||||
test_computed_value("backdrop-filter", "brightness(0)");
|
||||
test_computed_value("backdrop-filter", "brightness(300%)", "brightness(3)");
|
||||
test_computed_value("backdrop-filter", "brightness()", "brightness(0)");
|
||||
|
||||
test_computed_value("backdrop-filter", "contrast(0)");
|
||||
test_computed_value("backdrop-filter", "contrast(300%)", "contrast(3)");
|
||||
test_computed_value("backdrop-filter", "contrast()", "contrast(1)");
|
||||
|
||||
test_computed_value("backdrop-filter", "drop-shadow(1px 2px)", "drop-shadow(rgb(0, 255, 0) 1px 2px 0px)");
|
||||
test_computed_value("backdrop-filter", "drop-shadow(rgb(4, 5, 6) 1px 2px 0px)");
|
||||
|
||||
test_computed_value("backdrop-filter", "grayscale(50%)", "grayscale(0.5)");
|
||||
test_computed_value("backdrop-filter", "grayscale()", "grayscale(1)");
|
||||
|
||||
test_computed_value("backdrop-filter", "hue-rotate(90deg)");
|
||||
test_computed_value("backdrop-filter", "hue-rotate()", "hue-rotate(0deg)");
|
||||
|
||||
test_computed_value("backdrop-filter", "invert(0)");
|
||||
test_computed_value("backdrop-filter", "invert(100%)", "invert(1)");
|
||||
test_computed_value("backdrop-filter", "invert()", "invert(0)");
|
||||
|
||||
test_computed_value("backdrop-filter", "opacity(0)");
|
||||
test_computed_value("backdrop-filter", "opacity(100%)", "opacity(1)");
|
||||
test_computed_value("backdrop-filter", "opacity()", "opacity(1)");
|
||||
|
||||
test_computed_value("backdrop-filter", "saturate(0)");
|
||||
test_computed_value("backdrop-filter", "saturate(300%)", "saturate(3)");
|
||||
test_computed_value("backdrop-filter", "saturate()", "saturate(1)");
|
||||
|
||||
test_computed_value("backdrop-filter", "sepia(0)");
|
||||
test_computed_value("backdrop-filter", "sepia(100%)", "sepia(1)");
|
||||
test_computed_value("backdrop-filter", "sepia()", "sepia(1)");
|
||||
|
||||
test_computed_value("backdrop-filter", 'blur(10px) url("https://www.example.com/picture.svg#f") contrast(20) brightness(30)');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Filter Effects Module Level 2: parsing backdrop-filter with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<meta name="assert" content="backdrop-filter supports only the grammar 'none | <backdrop-filter-function-list>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// Edge fails: expected "" but got "none"
|
||||
|
||||
test_invalid_value("backdrop-filter", "auto");
|
||||
test_invalid_value("backdrop-filter", "none hue-rotate(0deg)");
|
||||
|
||||
test_invalid_value("backdrop-filter", "blur(10)");
|
||||
test_invalid_value("backdrop-filter", "blur(-100px)");
|
||||
|
||||
test_invalid_value("backdrop-filter", "brightness(-20)");
|
||||
test_invalid_value("backdrop-filter", "brightness(30px)");
|
||||
|
||||
test_invalid_value("backdrop-filter", "contrast(-20)");
|
||||
test_invalid_value("backdrop-filter", "contrast(30px)");
|
||||
|
||||
test_invalid_value("backdrop-filter", "drop-shadow(10 20)");
|
||||
test_invalid_value("backdrop-filter", "drop-shadow(10% 20%)");
|
||||
test_invalid_value("backdrop-filter", "drop-shadow(1px)");
|
||||
test_invalid_value("backdrop-filter", "drop-shadow(1px 2px 3px 4px)");
|
||||
test_invalid_value("backdrop-filter", "drop-shadow(rgb(4, 5, 6))");
|
||||
test_invalid_value("backdrop-filter", "drop-shadow()");
|
||||
|
||||
test_invalid_value("backdrop-filter", "grayscale(-20)");
|
||||
test_invalid_value("backdrop-filter", "grayscale(30px)");
|
||||
|
||||
test_invalid_value("backdrop-filter", "hue-rotate(90)");
|
||||
|
||||
test_invalid_value("backdrop-filter", "invert(-20)");
|
||||
test_invalid_value("backdrop-filter", "invert(30px)");
|
||||
|
||||
test_invalid_value("backdrop-filter", "opacity(-20)");
|
||||
test_invalid_value("backdrop-filter", "opacity(30px)");
|
||||
|
||||
test_invalid_value("backdrop-filter", "saturate(-20)");
|
||||
test_invalid_value("backdrop-filter", "saturate(30px)");
|
||||
|
||||
test_invalid_value("backdrop-filter", "sepia(-20)");
|
||||
test_invalid_value("backdrop-filter", "sepia(30px)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Filter Effects Module Level 2: parsing backdrop-filter with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<meta name="assert" content="backdrop-filter supports the full grammar 'none | <backdrop-filter-function-list>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("backdrop-filter", "none");
|
||||
|
||||
test_valid_value("backdrop-filter", "blur(100px)");
|
||||
test_valid_value("backdrop-filter", "blur(0)", "blur(0px)");
|
||||
test_valid_value("backdrop-filter", "blur()");
|
||||
|
||||
test_valid_value("backdrop-filter", "brightness(0)");
|
||||
test_valid_value("backdrop-filter", "brightness(300%)");
|
||||
test_valid_value("backdrop-filter", "brightness()");
|
||||
|
||||
test_valid_value("backdrop-filter", "contrast(0)");
|
||||
test_valid_value("backdrop-filter", "contrast(300%)");
|
||||
test_valid_value("backdrop-filter", "contrast()");
|
||||
|
||||
test_valid_value("backdrop-filter", "drop-shadow(1px 2px)");
|
||||
test_valid_value("backdrop-filter", "drop-shadow(1px 2px 3px)");
|
||||
test_valid_value("backdrop-filter", "drop-shadow(0 0 0)", "drop-shadow(0px 0px 0px)");
|
||||
test_valid_value("backdrop-filter", "drop-shadow(rgb(4, 5, 6) 1px 2px)");
|
||||
test_valid_value("backdrop-filter", "drop-shadow(1px 2px rgb(4, 5, 6))", "drop-shadow(rgb(4, 5, 6) 1px 2px)");
|
||||
test_valid_value("backdrop-filter", "drop-shadow(rgba(4, 5, 6, 0.75) 1px 2px 3px)");
|
||||
|
||||
test_valid_value("backdrop-filter", "grayscale(0)");
|
||||
test_valid_value("backdrop-filter", "grayscale(300%)", "grayscale(100%)");
|
||||
test_valid_value("backdrop-filter", "grayscale()");
|
||||
|
||||
test_valid_value("backdrop-filter", "hue-rotate(90deg)");
|
||||
test_valid_value("backdrop-filter", "hue-rotate(0)", "hue-rotate(0deg)");
|
||||
test_valid_value("backdrop-filter", "hue-rotate()");
|
||||
|
||||
test_valid_value("backdrop-filter", "invert(0)");
|
||||
test_valid_value("backdrop-filter", "invert(300%)", "invert(100%)");
|
||||
test_valid_value("backdrop-filter", "invert()");
|
||||
|
||||
test_valid_value("backdrop-filter", "opacity(0)");
|
||||
test_valid_value("backdrop-filter", "opacity(300%)", "opacity(100%)");
|
||||
test_valid_value("backdrop-filter", "opacity()");
|
||||
|
||||
test_valid_value("backdrop-filter", "saturate(0)");
|
||||
test_valid_value("backdrop-filter", "saturate(300%)");
|
||||
test_valid_value("backdrop-filter", "saturate()");
|
||||
|
||||
test_valid_value("backdrop-filter", "sepia(0)");
|
||||
test_valid_value("backdrop-filter", "sepia(300%)", "sepia(100%)");
|
||||
test_valid_value("backdrop-filter", "sepia()");
|
||||
|
||||
test_valid_value("backdrop-filter", 'url("picture.svg#f")');
|
||||
|
||||
test_valid_value("backdrop-filter", 'url("https://www.example.com/picture.svg#f")');
|
||||
|
||||
test_valid_value("backdrop-filter", 'blur(10px) url("picture.svg#f") contrast(20) brightness(30)');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,7 +1,10 @@
|
|||
'use strict';
|
||||
|
||||
(function() {
|
||||
|
||||
function assert_initial(property, initial) {
|
||||
test(() => {
|
||||
const target = document.getElementById('target');
|
||||
if (!getComputedStyle(target)[property])
|
||||
return;
|
||||
target.style[property] = 'initial';
|
||||
|
|
@ -13,6 +16,8 @@ function assert_initial(property, initial) {
|
|||
/**
|
||||
* Create tests that a CSS property inherits and has the given initial value.
|
||||
*
|
||||
* The current document must have an element #target within element #container.
|
||||
*
|
||||
* @param {string} property The name of the CSS property being tested.
|
||||
* @param {string} initial The computed value for 'initial'.
|
||||
* @param {string} other An arbitrary value for the property that round
|
||||
|
|
@ -22,6 +27,8 @@ function assert_inherited(property, initial, other) {
|
|||
assert_initial(property, initial);
|
||||
|
||||
test(() => {
|
||||
const container = document.getElementById('container');
|
||||
const target = document.getElementById('target');
|
||||
if (!getComputedStyle(target)[property])
|
||||
return;
|
||||
container.style[property] = 'initial';
|
||||
|
|
@ -45,6 +52,8 @@ function assert_inherited(property, initial, other) {
|
|||
* Create tests that a CSS property does not inherit, and that it has the
|
||||
* given initial value.
|
||||
*
|
||||
* The current document must have an element #target within element #container.
|
||||
*
|
||||
* @param {string} property The name of the CSS property being tested.
|
||||
* @param {string} initial The computed value for 'initial'.
|
||||
* @param {string} other An arbitrary value for the property that round
|
||||
|
|
@ -54,6 +63,8 @@ function assert_not_inherited(property, initial, other) {
|
|||
assert_initial(property, initial);
|
||||
|
||||
test(() => {
|
||||
const container = document.getElementById('container');
|
||||
const target = document.getElementById('target');
|
||||
if (!getComputedStyle(target)[property])
|
||||
return;
|
||||
container.style[property] = 'initial';
|
||||
|
|
@ -69,3 +80,7 @@ function assert_not_inherited(property, initial, other) {
|
|||
target.style[property] = '';
|
||||
}, 'Property ' + property + ' does not inherit');
|
||||
}
|
||||
|
||||
window.assert_inherited = assert_inherited;
|
||||
window.assert_not_inherited = assert_not_inherited;
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -10,14 +10,12 @@ function test_valid_value(property, value, serializedValue) {
|
|||
var stringifiedValue = JSON.stringify(value);
|
||||
|
||||
test(function(){
|
||||
var div = document.createElement('div');
|
||||
div.style[property] = value;
|
||||
assert_not_equals(div.style.getPropertyValue(property), "", "property should be set");
|
||||
|
||||
var div = document.createElement('div');
|
||||
var div = document.getElementById('target') || document.createElement('div');
|
||||
div.style[property] = "";
|
||||
div.style[property] = value;
|
||||
var readValue = div.style.getPropertyValue(property);
|
||||
if (serializedValue instanceof Array)
|
||||
assert_not_equals(readValue, "", "property should be set");
|
||||
if (Array.isArray(serializedValue))
|
||||
assert_in_array(readValue, serializedValue, "serialization should be sound");
|
||||
else
|
||||
assert_equals(readValue, serializedValue, "serialization should be canonical");
|
||||
|
|
@ -32,7 +30,8 @@ function test_invalid_value(property, value) {
|
|||
var stringifiedValue = JSON.stringify(value);
|
||||
|
||||
test(function(){
|
||||
var div = document.createElement('div');
|
||||
var div = document.getElementById('target') || document.createElement('div');
|
||||
div.style[property] = "";
|
||||
div.style[property] = value;
|
||||
assert_equals(div.style.getPropertyValue(property), "");
|
||||
}, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value");
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
# <shape-box> only
|
||||
== shape-outside-margin-box-001.html shape-outside-margin-box-001-ref.html
|
||||
== shape-outside-margin-box-002.html shape-outside-margin-box-002-ref.html
|
||||
|
|
|
|||
|
|
@ -1,90 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Individual transform: compare individual transform with transform functions</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<meta name="assert" content="Tests whether individaul transform works correctlyi by compare the rendering result with transfrom functions of the 'transform' property."/>
|
||||
<style>
|
||||
div {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform-origin: 0 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 0px 10px 0px;
|
||||
border-color: lime;
|
||||
}
|
||||
.row_1 {
|
||||
top: 100px;
|
||||
}
|
||||
.scale_1{
|
||||
left: 100px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
transform: scaleX(2);
|
||||
}
|
||||
.translate_1 {
|
||||
left: 150px;
|
||||
transform: translateX(150px);
|
||||
}
|
||||
.rotate_1 {
|
||||
left: 450px;
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.row_2 {
|
||||
top: 250px;
|
||||
}
|
||||
.scale_2{
|
||||
left: 100px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
transform: scale(2, 2);
|
||||
}
|
||||
.translate_2 {
|
||||
left: 150px;
|
||||
top: 200px;
|
||||
transform: translate(150px, 50px);
|
||||
}
|
||||
.rotate_2 {
|
||||
left: 450px;
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate3d(0, 0, 1, 90deg);
|
||||
}
|
||||
.row_3 {
|
||||
transform: perspective(500px);
|
||||
top: 400px;
|
||||
}
|
||||
.scale_3{
|
||||
left: 100px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
transform: scale3d(2, 2, 2);
|
||||
}
|
||||
.translate_3 {
|
||||
left: 150px;
|
||||
transform: translate3d(150px, 10px, 10px);
|
||||
}
|
||||
.rotate_3 {
|
||||
left: 450px;
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate3d(0, 1, 0, 45deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="scale_1 row_1"></div>
|
||||
<div class="translate_1 row_1"></div>
|
||||
<div class="rotate_1 row_1"></div>
|
||||
<div class="scale_2 row_2"></div>
|
||||
<div class="translate_2 row_2"></div>
|
||||
<div class="rotate_2 row_2"></div>
|
||||
<div class="scale_3 row_3"></div>
|
||||
<div class="translate_3 row_3"></div>
|
||||
<div class="rotate_3 row_3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Individual transform: compare individual transform with transform functions</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<meta name="assert" content="Tests whether individaul transform works correctlyi by compare the rendering result with transfrom functions of the 'transform' property."/>
|
||||
<link rel="match" href="individual-transform-1-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform-origin: 0 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 0px 10px 0px;
|
||||
border-color: lime;
|
||||
}
|
||||
.row_1 {
|
||||
top: 100px;
|
||||
}
|
||||
.scale_1{
|
||||
left: 100px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
/* test 'scale: <number>' */
|
||||
scale: 2;
|
||||
}
|
||||
.translate_1 {
|
||||
left: 150px;
|
||||
/* test 'translate: <length-percentage>' */
|
||||
translate: 150px;
|
||||
}
|
||||
.rotate_1 {
|
||||
left: 450px;
|
||||
transform-origin: 50% 50%;
|
||||
/* test 'rota: te<angle>' */
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
.row_2 {
|
||||
top: 250px;
|
||||
}
|
||||
.scale_2{
|
||||
left: 100px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
/* test 'scale: <number>{2}'' */
|
||||
scale: 2 2;
|
||||
}
|
||||
.translate_2 {
|
||||
left: 150px;
|
||||
top: 200px;
|
||||
/* test 'translate: <length-percentage><length-percentage>' */
|
||||
translate: 150px 50px;
|
||||
}
|
||||
.rotate_2 {
|
||||
left: 450px;
|
||||
transform-origin: 50% 50%;
|
||||
/* test 'rotate: <number>{3}<angle>'*/
|
||||
rotate: 0 0 1 90deg;
|
||||
}
|
||||
.row_3 {
|
||||
transform: perspective(500px);
|
||||
top: 400px;
|
||||
}
|
||||
.scale_3{
|
||||
left: 100px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
/* test 'scale: <number>{3}'' */
|
||||
scale: 2 2 2;
|
||||
}
|
||||
.translate_3 {
|
||||
left: 150px;
|
||||
/* test 'translate: <length-percentage><length>' */
|
||||
translate: 150px 10px 10px;
|
||||
}
|
||||
.rotate_3 {
|
||||
left: 450px;
|
||||
transform-origin: 50% 50%;
|
||||
/* test 'rotate: <number>{3}<angle>'*/
|
||||
rotate: 0 1 0 45deg;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="scale_1 row_1"></div>
|
||||
<div class="translate_1 row_1"></div>
|
||||
<div class="rotate_1 row_1"></div>
|
||||
<div class="scale_2 row_2"></div>
|
||||
<div class="translate_2 row_2"></div>
|
||||
<div class="rotate_2 row_2"></div>
|
||||
<div class="scale_3 row_3"></div>
|
||||
<div class="translate_3 row_3"></div>
|
||||
<div class="rotate_3 row_3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Individual transform: combine individual transform properties</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
|
||||
<style>
|
||||
div {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
transform-origin: 0 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 0px 10px 0px;
|
||||
border-color: lime;
|
||||
transform: translate(50px, 50px) rotate(45deg) scale(2, 2);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Individual transform: combine individual transform properties</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
|
||||
<link rel="match" href="individual-transform-2-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
transform-origin: 0 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 0px 10px 0px;
|
||||
border-color: lime;
|
||||
translate: 50px 50px;
|
||||
rotate: 45deg;
|
||||
scale: 2 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Individual transform: combine individual transform properties</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
|
||||
<link rel="match" href="individual-transform-2-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
transform-origin: 0 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 0px 10px 0px;
|
||||
border-color: lime;
|
||||
rotate: 45deg;
|
||||
scale: 2 2;
|
||||
translate: 50px 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Individual transform: combine individual transform properties</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
|
||||
<link rel="match" href="individual-transform-2-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
transform-origin: 0 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 0px 10px 0px;
|
||||
border-color: lime;
|
||||
translate: 50px 50px;
|
||||
rotate: 45deg;
|
||||
transform: scale(2, 2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Individual transform: combine individual transform properties</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
|
||||
<link rel="match" href="individual-transform-2-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
transform-origin: 0 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 0px 10px 0px;
|
||||
border-color: lime;
|
||||
translate: 50px 50px;
|
||||
transform: rotate(45deg) scale(2, 2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Individual transform: combine individual transform properties</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
|
||||
<link rel="match" href="individual-transform-2-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
transform-origin: 0 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 0px 10px 0px;
|
||||
border-color: lime;
|
||||
translate: 0px 50px;
|
||||
transform: translateX(50px) rotate(45deg) scale(2, 2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,10 +5,3 @@
|
|||
== perspective-zero.html reference/green.html
|
||||
== perspective-zero-2.html perspective-zero-2-ref.html
|
||||
== perspective-untransformable-no-stacking-context.html perspective-untransformable-no-stacking-context-ref.html
|
||||
|
||||
== individual-transform-1.html individual-transform-1-ref.html
|
||||
== individual-transform-2a.html individual-transform-2-ref.html
|
||||
== individual-transform-2b.html individual-transform-2-ref.html
|
||||
== individual-transform-2c.html individual-transform-2-ref.html
|
||||
== individual-transform-2d.html individual-transform-2-ref.html
|
||||
== individual-transform-2e.html individual-transform-2-ref.html
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue