-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add WPT tests for TransformInterop feature.
Bug: 1008483 Change-Id: Id075e3f3cfd9d6c725a724ad03534a4a2fc1d377
- Loading branch information
1 parent
2ff9124
commit 7fae980
Showing
13 changed files
with
423 additions
and
2 deletions.
There are no files selected for viewing
118 changes: 118 additions & 0 deletions
118
css/css-transforms/3d-rendering-context-behavior.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
15
css/css-transforms/backface-visibility-hidden-002-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
19
css/css-transforms/backface-visibility-hidden-002.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
21
css/css-transforms/backface-visibility-hidden-003-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
23
css/css-transforms/backface-visibility-hidden-003.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
16
css/css-transforms/backface-visibility-hidden-004-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
20
css/css-transforms/backface-visibility-hidden-004.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
18
css/css-transforms/backface-visibility-hidden-005-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
22
css/css-transforms/backface-visibility-hidden-005.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
File renamed without changes.
25 changes: 25 additions & 0 deletions
25
css/css-transforms/backface-visibility-hidden-animated-002.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.