mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 10:07:15 +02:00
LibWeb: Implement CSS perspective-origin
This commit is contained in:
Psychpsyo
Notes:
github-actions[bot]
2025-11-21 11:15:32 +00:00
Author: https://github.com/Psychpsyo Commit: https://github.com/LadybirdBrowser/ladybird/commit/2db3796fd35 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6805 Reviewed-by: https://github.com/AtkinsSJ ✅ Reviewed-by: https://github.com/gmta ✅ Reviewed-by: https://github.com/konradekk
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: perspective-origin - 0px center('center' computes to '50%' in vertical position)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
|
||||
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The 'perspective-origin' property set 'center' computes to 50% for the vertical position.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
}
|
||||
#test {
|
||||
perspective: 2px;
|
||||
perspective-origin: 0px center;
|
||||
}
|
||||
#redSquare {
|
||||
background-color: red;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
#ref {
|
||||
perspective: 2px;
|
||||
perspective-origin: 0px 50%;
|
||||
}
|
||||
#greenSquare {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
top: 25px;
|
||||
transform: translateZ(1px);
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test"><div id="redSquare"></div></div>
|
||||
<div id="ref"><div id="greenSquare"></div></div>
|
||||
</body>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: perspective-origin - center 0px('center' computes to '50%' in horizontal position)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
|
||||
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The 'perspective-origin' property set 'center' computes to 50% for the horizontal position.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
}
|
||||
#test {
|
||||
perspective: 2px;
|
||||
perspective-origin: center 0px;
|
||||
}
|
||||
#redSquare {
|
||||
background-color: red;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
#ref {
|
||||
perspective: 2px;
|
||||
perspective-origin: 50% 0px;
|
||||
}
|
||||
#greenSquare {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
left: 25px;
|
||||
transform: translateZ(1px);
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test"><div id="redSquare"></div></div>
|
||||
<div id="ref"><div id="greenSquare"></div></div>
|
||||
</body>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: perspective-origin - 50% bottom('bottom' computes to '100%' in vertical position)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
|
||||
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The 'perspective-origin' property set 'bottom' computes to 100% for the vertical position.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
}
|
||||
#test {
|
||||
perspective: 2px;
|
||||
perspective-origin: 50% bottom;
|
||||
}
|
||||
#redSquare {
|
||||
background-color: red;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
#ref {
|
||||
perspective: 2px;
|
||||
perspective-origin: 50% 100%;
|
||||
}
|
||||
#greenSquare {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
left: 25px;
|
||||
top: 50px;
|
||||
transform: translateZ(1px);
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test"><div id="redSquare"></div></div>
|
||||
<div id="ref"><div id="greenSquare"></div></div>
|
||||
</body>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: perspective-origin - 50% top('top' computes to '0%' in vertical position)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
|
||||
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The 'perspective-origin' property set 'top' computes to 0% for the vertical position.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
}
|
||||
#test {
|
||||
perspective: 2px;
|
||||
perspective-origin: 50% top;
|
||||
}
|
||||
#redSquare {
|
||||
background-color: red;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
#ref {
|
||||
perspective: 2px;
|
||||
perspective-origin: 50% 0%;
|
||||
}
|
||||
#greenSquare {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
left: 25px;
|
||||
transform: translateZ(1px);
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test"><div id="redSquare"></div></div>
|
||||
<div id="ref"><div id="greenSquare"></div></div>
|
||||
</body>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: perspective-origin - left 50%('left' computes to '0%' in horizontal position)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
|
||||
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The 'perspective-origin' property set 'left' computes to 0% for the horizontal position.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
}
|
||||
#test {
|
||||
perspective: 2px;
|
||||
perspective-origin: left 50%;
|
||||
}
|
||||
#redSquare {
|
||||
background-color: red;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
#ref {
|
||||
perspective: 2px;
|
||||
perspective-origin: 0% 50%;
|
||||
}
|
||||
#greenSquare {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
top: 25px;
|
||||
transform: translateZ(1px);
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test"><div id="redSquare"></div></div>
|
||||
<div id="ref"><div id="greenSquare"></div></div>
|
||||
</body>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: perspective-origin - right 50%('right' computes to '100%' in horizontal position)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
|
||||
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The 'perspective-origin' property set 'right' computes to 100% for the horizontal position.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
}
|
||||
#test {
|
||||
perspective: 2px;
|
||||
perspective-origin: right 50%;
|
||||
}
|
||||
#redSquare {
|
||||
background-color: red;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
#ref {
|
||||
perspective: 2px;
|
||||
perspective-origin: 100% 50%;
|
||||
}
|
||||
#greenSquare {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
left: 50px;
|
||||
top: 25px;
|
||||
transform: translateZ(1px);
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test"><div id="redSquare"></div></div>
|
||||
<div id="ref"><div id="greenSquare"></div></div>
|
||||
</body>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The 'perspective-origin's position must not move with the children of a scroll container if it is on one.</title>
|
||||
<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective-origin-property">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective-matrix-computation">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The 'perspective-origin's position must not move with the children of a scroll container if it is on one.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
#holder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
perspective: 2px;
|
||||
perspective-origin: 0px 0px;
|
||||
}
|
||||
#red {
|
||||
background-color: red;
|
||||
height: 200px;
|
||||
width: 100px;
|
||||
}
|
||||
#greenSquare {
|
||||
transform: translateZ(1px);
|
||||
background-color: green;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 100px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="holder">
|
||||
<div id="red"></div>
|
||||
<div id="greenSquare"></div>
|
||||
</div>
|
||||
<script>
|
||||
holder.scroll({top: 100, behavior: "instant"});
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: perspective property</title>
|
||||
<link rel="author" title="Francisca Gil" href="mailto:pancha0.0@gmail.com">
|
||||
<link rel="reviewer" title="Apple Inc." href="http://www.apple.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/reference/perspective-origin-reftest.html">
|
||||
<meta name="assert" content="Asserts that origin 'x1' visually moves the objects '-x1*d/(d-1)' ">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
perspective: 3px;
|
||||
perspective-origin: 0px 50%;
|
||||
}
|
||||
.redSquare {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: red;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
transform: translateZ(1px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="container">
|
||||
<div class="redSquare"></div>
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: perspective property</title>
|
||||
<link rel="author" title="Francisca Gil" href="mailto:pancha0.0@gmail.com">
|
||||
<link rel="reviewer" title="Apple Inc." href="http://www.apple.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/reference/perspective-reftest.html">
|
||||
<meta name="assert" content="Asserts that origin '<x,y>' visually moves the objects '<-x,-y>*d/(d-1)' ">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
perspective: 3px;
|
||||
perspective-origin: 0px 0px;
|
||||
}
|
||||
.redSquare {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: red;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
transform: translateZ(1px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="container">
|
||||
<div class="redSquare"></div>
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test (Transforms): perspective-origin</title>
|
||||
<link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com">
|
||||
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
|
||||
<meta name="assert" content="This tests that 'perspective-origin: 0 0' is
|
||||
the same as 'perspective-origin: top left', different from no
|
||||
'perspective-origin', and different from no perspective or no transform.">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/transform3d-perspective-origin-ref.html">
|
||||
</head>
|
||||
<body>
|
||||
<div style="perspective: 1000px; perspective-origin: 0 0;">
|
||||
<div style="transform: rotatex(45deg); width: 100px; height: 100px;
|
||||
background: lime">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user