Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add WPT tests for TransformInterop feature. #23865

Merged
merged 1 commit into from
Jun 6, 2020
Merged

Add WPT tests for TransformInterop feature. #23865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 118 additions & 0 deletions css/css-transforms/3d-rendering-context-behavior.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!doctype HTML>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style>
div {
width: 200px;
height: 200px;
}

.rotate45 {
transform: rotateY(45deg)
}
.rotateNeg45 {
transform: rotateY(-45deg)
}

.parent {
transform-style: preserve-3d;
}

.perspective {
perspective: 200px;
}
</style>

<div class="parent rotateNeg45">
<div id=childOfPreserve3D class="child rotate45"></div>
</div>

<div class="parent rotateNeg45">
<div id=absChildOfPreserve3D class="child rotate45" style="position: absolute"></div>
</div>

<div class="parent rotateNeg45">
<div id=fixedChildOfPreserve3D class="child rotate45" style="position: absolute"></div>
</div>

<div class="parent rotateNeg45">
<div>
<div id=childWithIntermediate class="child rotate45" style="position: absolute"></div>
</div>
</div>

<div class="parent rotateNeg45">
<div>
<div id=absWithIntermediate class="child rotate45" style="position: absolute"></div>
</div>
</div>

<div class="parent rotateNeg45">
<div>
<div id=fixedWithIntermediate class="child rotate45" style="position: fixed"></div>
</div>
</div>

<div class="perspective">
<div id=childWithPerspectiveParent class="child rotate45" style="position: absolute"></div>
<div id=absWithPerspectiveParent class="child rotate45" style="position: absolute"></div>
<div id=fixedWithPerspectiveParent class="child rotate45" style="position: fixed"></div>
</div>

<div class="perspective">
<div>
<div id=childWithIntermediateAndPerspectiveParent class="child rotate45"></div>
<div id=absWithIntermediateAndPerspectiveParent class="child rotate45" style="position: absolute"></div>
<div id=fixedWithIntermediateAndPerspectiveParent class="child rotate45" style="position: fixed"></div>
</div>
</div>

<script>
test(function() {
assert_equals(childOfPreserve3D.getBoundingClientRect().width, 200);
assert_equals(absChildOfPreserve3D.getBoundingClientRect().width, 200);
assert_equals(fixedChildOfPreserve3D.getBoundingClientRect().width, 200);
}, "Direct DOM parent is root of rendering context");

test(function() {
assert_equals(childWithIntermediate.getBoundingClientRect().width, 200);
assert_equals(absWithIntermediate.getBoundingClientRect().width, 200);
assert_equals(fixedWithIntermediate.getBoundingClientRect().width, 200);
}, "Intermediate DOM nodes cause rendering context to end");

test(function() {
assert_approx_equals(
childWithPerspectiveParent.getBoundingClientRect().width, 161, 1);
}, "Perspective applies to direct DOM normal-flow children");

test(function() {
assert_approx_equals(
absWithPerspectiveParent.getBoundingClientRect().width, 161, 1);
}, "Perspective applies to direct DOM abs-pos children");

test(function() {
assert_approx_equals(
fixedWithPerspectiveParent.getBoundingClientRect().width, 161, 1);
}, "Perspective applies to direct DOM fixed-pos children");

test(function() {
assert_approx_equals(
childWithIntermediateAndPerspectiveParent.getBoundingClientRect().width,
141, 1);
}, "Perspective does not apply to DOM normal-flow grandchildren");

test(function() {
assert_approx_equals(
absWithIntermediateAndPerspectiveParent.getBoundingClientRect().width,
141, 1);
}, "Perspective does not apply to DOM abs-pos grandchildren");

test(function() {
assert_approx_equals(
fixedWithIntermediateAndPerspectiveParent.getBoundingClientRect().width,
141, 1);
}, "Perspective does not apply to DOM fixed-pos grandchildren");
</script>
15 changes: 15 additions & 0 deletions css/css-transforms/backface-visibility-hidden-002-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<title>backface visibility: hidden self-transform</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">

<p>The test passes if there is a green rectangle and no red.</p>
<style>
div {
width: 100px;
height: 100px;
}
</style>
<div style="backface-visibility:hidden"></div>
<div style="background: green"></div>
19 changes: 19 additions & 0 deletions css/css-transforms/backface-visibility-hidden-002.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>backface visibility: hidden self-transform</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
<link rel="match" href="backface-visibility-hidden-002-ref.html">

<p>The test passes if there is a green rectangle and no red.</p>
<style>
div {
width: 100px;
height: 100px;
}
.target {
transform: rotateY(180deg);
}
</style>
<div class=target style="backface-visibility: hidden; background: red"></div>
<div class=target style="background: green"></div>
21 changes: 21 additions & 0 deletions css/css-transforms/backface-visibility-hidden-003-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>backface visibility: hidden applies to pseudo-stacking contexts</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">

<p>The test passes if there is a green rectangle and no red</p>
<style>
div {
width: 100px;
height: 100px;
}
.target {
transform: rotateY(180deg);
}
</style>
<div class=target style="backface-visibility: hidden">
</div>
<div class=target>
<div style="background: green"></div>
</div>
23 changes: 23 additions & 0 deletions css/css-transforms/backface-visibility-hidden-003.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<title>backface visibility: hidden applies to pseudo-stacking contexts</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
<link rel="match" href="backface-visibility-hidden-003-ref.html">

<p>The test passes if there is a green rectangle and no red</p>
<style>
div {
width: 100px;
height: 100px;
}
.target {
transform: rotateY(180deg);
}
</style>
<div class=target style="backface-visibility: hidden">
<div style="background: red"></div>
</div>
<div class=target>
<div style="background: green"></div>
</div>
16 changes: 16 additions & 0 deletions css/css-transforms/backface-visibility-hidden-004-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>backface visibility: hidden does not apply to child pseudo-stacking contexts</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">

<p>The test passes if there is a green rectangle and no red</p>
<style>
div {
width: 100px;
height: 100px;
}
</style>
<div class=target style="backface-visibility: hidden">
<div style="background: green; isolation: isolate"></div>
</div>
20 changes: 20 additions & 0 deletions css/css-transforms/backface-visibility-hidden-004.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<title>backface visibility: hidden does not apply to child pseudo-stacking context descendants</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
<link rel="match" href="backface-visibility-hidden-004-ref.html">

<p>The test passes if there is a green rectangle and no red</p>
<style>
div {
width: 100px;
height: 100px;
}
.target {
transform: rotateY(180deg);
}
</style>
<div class=target style="backface-visibility: hidden">
<div style="background: green; isolation: isolate"></div>
</div>
18 changes: 18 additions & 0 deletions css/css-transforms/backface-visibility-hidden-005-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>backface visibility: hidden inside preserve-3d applies to pseudo-stacking contexts</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">

<p>The test passes if there is a green rectangle and no red</p>
<style>
div {
width: 100px;
height: 100px;
}
</style>
<div style="transform-style: preserve-3d">
<div class=target style="backface-visibility: hidden">
<div style="background: green; isolation: isolate"></div>
</div>
</div>
22 changes: 22 additions & 0 deletions css/css-transforms/backface-visibility-hidden-005.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>backface visibility: hidden inside preserve-3d does not apply to pseudo-stacking context descendants</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
<link rel="match" href="backface-visibility-hidden-005-ref.html">

<p>The test passes if there is a green rectangle and no red</p>
<style>
div {
width: 100px;
height: 100px;
}
.target {
transform: rotateY(180deg);
}
</style>
<div style="transform-style: preserve-3d">
<div class=target style="backface-visibility: hidden; transform-style: preserve-3d">
<div style="background: green; isolation: isolate; "></div>
</div>
</div>
0 .../backface-visibility-hidden-animated.html → ...kface-visibility-hidden-animated-001.html
View file
Open in desktop
File renamed without changes.
25 changes: 25 additions & 0 deletions css/css-transforms/backface-visibility-hidden-animated-002.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<title>backface visibility: hidden does not apply to child pseudo-stacking context descendants, even when animation is present</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
<link rel="match" href="backface-visibility-hidden-004-ref.html">

<p>The test passes if there is a green rectangle and no red</p>
<style>

div {
width: 100px;
height: 100px;
}
@keyframes spin {
from { transform: rotateY(180deg); }
to { transform: rotateY(180deg); }
}
.target {
animation: 10000s linear 0s 1 forwards spin;
}
</style>
<div class=target style="backface-visibility: hidden">
<div style="background: green; isolation: isolate"></div>
</div>
4 changes: 2 additions & 2 deletions css/css-transforms/composited-under-rotateY-180deg-clip-perspective.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div style="transform: rotateY(180deg); overflow: hidden; width: 100px">
<div style="width: 100px; height: 100px; background: green; will-change: transform"></div>
</div>
<div style="transform: rotateY(180deg); overflow: hidden; width: 100px; backface-visibility: hidden">
<div style="width: 100px; height: 100px; background: red; will-change: transform"></div>
<div style="transform: rotateY(180deg); overflow: hidden; width: 100px;
height: 100px; background: red; backface-visibility: hidden"></div>
</div>
</div>
Loading