Don't optimize display list for projective transforms

There are situations where elements are transformed from outside the display list. With projective transforms it's currently difficult to detect these. In those cases we just don't optimize the display list, so that they will always be shown. Fixes #13822.
servo · May 10, 2017 · 3236611 · 3236611
1 parent 0040160
commit 3236611
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 0 deletions.
diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs
@@ -2222,6 +2222,14 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
             }
 
             match transform {
+                Some(transform) if transform.m13 != 0.0 ||  transform.m23 != 0.0 => {
+                    // We cannot properly handle perspective transforms, because there may be a
+                    // situation where an element is transformed from outside the clip into the
+                    // clip region. Here we don't have enough information to detect when that is
+                    // happening. For the moment we just punt on trying to optimize the display
+                    // list for those cases.
+                    max_rect()
+                }
                 Some(transform) => {
                     let clip = Rect::new(Point2D::new((clip.origin.x - origin.x).to_f32_px(),
                                                       (clip.origin.y - origin.y).to_f32_px()),

diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -5849,6 +5849,18 @@
      {}
     ]
    ],
+   "css/transform_3d_from_outside_viewport.html": [
+    [
+     "/_mozilla/css/transform_3d_from_outside_viewport.html",
+     [
+      [
+       "/_mozilla/css/transform_3d_from_outside_viewport_ref.html",
+       "!="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/transform_optimization.html": [
     [
      "/_mozilla/css/transform_optimization.html",
@@ -9259,6 +9271,11 @@
      {}
     ]
    ],
+   "css/transform_3d_from_outside_viewport_ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/transform_3d_ref.html": [
     [
      {}
@@ -24062,6 +24079,14 @@
    "1450d169d4c5506fff240adca5c28b0cb6accd9f",
    "reftest"
   ],
+  "css/transform_3d_from_outside_viewport.html": [
+   "b59ccc70dec5de8bf55440ef3d4dd35d2ec1493a",
+   "reftest"
+  ],
+  "css/transform_3d_from_outside_viewport_ref.html": [
+   "87531bec4e8b60f17d885d6236ec0629f68f6c9a",
+   "support"
+  ],
   "css/transform_3d_ref.html": [
    "e59866f74ae9dc10a2220c1bb240862371f3edc9",
    "support"

diff --git a/tests/wpt/mozilla/tests/css/transform_3d_from_outside_viewport.html b/tests/wpt/mozilla/tests/css/transform_3d_from_outside_viewport.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Ensure that content transformed from outside the viewport is displayed</title>
+    <link rel="match" href="transform_3d_from_outside_viewport_ref.html">
+    <style>
+        #container {
+          left: 0;
+          top: 0;
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          perspective: 2000px;
+          perspective-origin: 20% 50%;
+          background: yellow;
+        }
+
+        #transformed {
+          height: 200px;
+          transform: translate3d(0px, 0px, -1300px) rotateY(45deg);
+          background: green;
+        }
+  </style>
+</head>
+
+<body>
+  <div id="container">
+    <div id="transformed"></div>
+  </div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/css/transform_3d_from_outside_viewport_ref.html b/tests/wpt/mozilla/tests/css/transform_3d_from_outside_viewport_ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Ensure that content transformed from outside the viewport is displayed</title>
+    <style>
+        body {
+            background: yellow;
+        }
+  </style>
+</head>
+
+<body>
+</body>
+</html>