mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 10:07:15 +02:00
Tests: Import a bunch of WPT tests from /css/css-transforms
This commit is contained in:
Andreas Kling
committed by
Andreas Kling
Andreas Kling
parent
b64ccb95ec
commit
d6f7fccf49
Notes:
github-actions[bot]
2024-11-22 19:08:01 +00:00
Author: https://github.com/awesomekling Commit: https://github.com/LadybirdBrowser/ladybird/commit/d6f7fccf493 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2506 Reviewed-by: https://github.com/shannonbooth
@@ -0,0 +1,32 @@
|
||||
<!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="../../../../../expected/wpt-import/css/css-transforms/individual-transform/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>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!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="../../../../../expected/wpt-import/css/css-transforms/individual-transform/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>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!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="../../../../../expected/wpt-import/css/css-transforms/individual-transform/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>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!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="../../../../../expected/wpt-import/css/css-transforms/individual-transform/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>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!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="../../../../../expected/wpt-import/css/css-transforms/individual-transform/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>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>
|
||||
Individual transform properties' animations create stacking context in delay phase
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/stacking-context-ref.html">
|
||||
<meta name="assert" content="Individual transform properties' animations
|
||||
should create stacking context even in delay
|
||||
phase."/>
|
||||
<style>
|
||||
#back {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: fixed;
|
||||
background: green;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@keyframes scale {
|
||||
from, to { scale: 1; }
|
||||
}
|
||||
#test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation: scale 100s 100s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="back"></div>
|
||||
<div id="test"></div>
|
||||
</body>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<title>transform-box: fill-box</title>
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/../transform-box/reference/greensquare200x200.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box">
|
||||
<meta name="assert" content="translate percentages are relative to the reference box.">
|
||||
<style>
|
||||
svg {
|
||||
background-color: red;
|
||||
}
|
||||
rect {
|
||||
transform-box: fill-box;
|
||||
}
|
||||
#target1 {
|
||||
rotate: 90deg;
|
||||
}
|
||||
#target2 {
|
||||
translate: 50% -50%;
|
||||
}
|
||||
#target3 {
|
||||
transform-origin: 25% 25%;
|
||||
translate: 25% 25%;
|
||||
rotate: 180deg;
|
||||
}
|
||||
#target4 {
|
||||
transform-origin: 75px 75px;
|
||||
translate: 25% 25%;
|
||||
rotate: -180deg;
|
||||
}
|
||||
</style>
|
||||
<p>There should be a green 200x200 rectangle below, and no red.</p>
|
||||
<svg width="200" height="200">
|
||||
<rect id="target1" x="100" y="100" width="100" height="100" fill="green"/>
|
||||
<rect id="target2" x="50" y="50" width="100" height="100" fill="green"/>
|
||||
<rect id="target3" x="25" y="25" width="100" height="100" fill="green"/>
|
||||
<rect id="target4" x="25" y="25" width="100" height="100" fill="green"/>
|
||||
</svg>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<title>transform-box: view-box</title>
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/../transform-box/reference/greensquare200x200.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box">
|
||||
<meta name="assert" content="translate percentages are relative to the reference box.">
|
||||
<style>
|
||||
svg {
|
||||
background-color: red;
|
||||
}
|
||||
rect {
|
||||
transform-box: view-box;
|
||||
}
|
||||
#target1 {
|
||||
transform-origin: 25% 25%;
|
||||
scale: 2;
|
||||
}
|
||||
#target2 {
|
||||
translate: 50%;
|
||||
}
|
||||
#target3 {
|
||||
translate: 0 50%;
|
||||
}
|
||||
#target4 {
|
||||
transform-origin: 50% 50%;
|
||||
rotate: 180deg;
|
||||
}
|
||||
</style>
|
||||
<p>There should be a green 200x200 rectangle below, and no red.</p>
|
||||
<svg width="200" height="200">
|
||||
<rect id="target1" x="25" y="25" width="50" height="50" fill="green"/>
|
||||
<rect id="target2" width="100" height="100" fill="green"/>
|
||||
<rect id="target3" width="100" height="100" fill="green"/>
|
||||
<rect id="target4" width="100" height="100" fill="green"/>
|
||||
</svg>
|
||||
Reference in New Issue
Block a user