-
Notifications
You must be signed in to change notification settings - Fork 6.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[TransformInterop] Make blocks whose DOM parent is an inline follow D…
…OM tree. When the TransformInterop feature is enabled, 3D scene extension (transform-style: preserve-3d) and the perspective property should follow the DOM tree. This makes that happen for blocks (or, really, any non-inlines) whose DOM parent is an inline. Bug: 1008483 Change-Id: I5bcd6d7087c28639a053b686f90880d94f4c6986 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2956891 Reviewed-by: Koji Ishii <kojii@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/master@{#892164}
- Loading branch information
Showing
9 changed files
with
227 additions
and
6 deletions.
There are no files selected for viewing
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
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
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
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
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
39 changes: 39 additions & 0 deletions
39
...arty/blink/web_tests/external/wpt/css/css-transforms/3d-rendering-context-and-inline.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,39 @@ | ||
| <!DOCTYPE HTML> | ||
| <title>CSS Test (Transforms): 3D Rendering Context following DOM Tree (inlines)</title> | ||
| <link rel="author" title="L. David Baron" href="https://dbaron.org/"> | ||
| <link rel="author" title="Google" href="http://www.google.com/"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts"> | ||
| <meta name="assert" content="Blocks inside of inlines participate in 3D Rendering Contexts based on their parent, not their containing block."> | ||
| <link rel="match" href="transform-blank-ref.html"> | ||
|
|
||
| <style> | ||
|
|
||
| .outer { | ||
| display: block; | ||
| width: 100px; | ||
| height: 100px; | ||
| transform-style: preserve-3d; | ||
| transform: rotateX(90deg); | ||
| } | ||
|
|
||
| .middle { | ||
| display: inline; | ||
| } | ||
|
|
||
| .inner { | ||
| display: block; | ||
| width: 100px; | ||
| height: 100px; | ||
| transform: rotateX(-90deg); | ||
| background: red; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <p>Nothing should appear except this sentence.</p> | ||
|
|
||
| <div class="outer"> | ||
| <div class="middle"> | ||
| <div class="inner"></div> | ||
| </div> | ||
| </div> |
43 changes: 43 additions & 0 deletions
43
...rty/blink/web_tests/external/wpt/css/css-transforms/perspective-children-only-abspos.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,43 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset=UTF-8> | ||
| <title>CSS Test (Transforms): perspective applies only to DOM children (position: absolute)</title> | ||
| <link rel="author" title="L. David Baron" href="https://dbaron.org/"> | ||
| <link rel="author" title="Google" href="http://www.google.com/"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-perspective"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/918"> | ||
| <meta name="assert" content="The perspective property influences an element's children."> | ||
| <link rel="match" href="reference/green.html"> | ||
| <style> | ||
|
|
||
| div { | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
|
|
||
| #outer { | ||
| position: relative; | ||
| background: red; | ||
| perspective: 100px; | ||
| } | ||
|
|
||
| #middle { | ||
| } | ||
|
|
||
| #inner { | ||
| transform: translateZ(-100px); | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| background: green; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <p>Pass if there is NO red below:</p> | ||
|
|
||
| <div id="outer"> | ||
| <div id="middle"> | ||
| <div id="inner"></div> | ||
| </div> | ||
| </div> |
44 changes: 44 additions & 0 deletions
44
...rty/blink/web_tests/external/wpt/css/css-transforms/perspective-children-only-fixpos.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,44 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset=UTF-8> | ||
| <title>CSS Test (Transforms): perspective applies only to DOM children (position: absolute)</title> | ||
| <link rel="author" title="L. David Baron" href="https://dbaron.org/"> | ||
| <link rel="author" title="Google" href="http://www.google.com/"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-perspective"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/918"> | ||
| <meta name="assert" content="The perspective property influences an element's children."> | ||
| <link rel="match" href="reference/green.html"> | ||
| <style> | ||
|
|
||
| div { | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
|
|
||
| #outer { | ||
| transform: scale(1); | ||
| position: relative; | ||
| background: red; | ||
| perspective: 100px; | ||
| } | ||
|
|
||
| #middle { | ||
| } | ||
|
|
||
| #inner { | ||
| transform: translateZ(-100px); | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| background: green; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <p>Pass if there is NO red below:</p> | ||
|
|
||
| <div id="outer"> | ||
| <div id="middle"> | ||
| <div id="inner"></div> | ||
| </div> | ||
| </div> |
40 changes: 40 additions & 0 deletions
40
...rty/blink/web_tests/external/wpt/css/css-transforms/perspective-children-only-inline.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,40 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset=UTF-8> | ||
| <title>CSS Test (Transforms): perspective applies only to DOM children (position: absolute)</title> | ||
| <link rel="author" title="L. David Baron" href="https://dbaron.org/"> | ||
| <link rel="author" title="Google" href="http://www.google.com/"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-perspective"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/918"> | ||
| <meta name="assert" content="The perspective property influences an element's children."> | ||
| <link rel="match" href="reference/green.html"> | ||
| <style> | ||
|
|
||
| div { | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
|
|
||
| #outer { | ||
| background: red; | ||
| perspective: 100px; | ||
| } | ||
|
|
||
| #middle { | ||
| display: inline; | ||
| } | ||
|
|
||
| #inner { | ||
| transform: translateZ(-100px); | ||
| background: green; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <p>Pass if there is NO red below:</p> | ||
|
|
||
| <div id="outer"> | ||
| <div id="middle"> | ||
| <div id="inner"></div> | ||
| </div> | ||
| </div> |