Implement a less broken fix for nested transforms and clips.

src/frame.rs

@@ -25,7 +25,7 @@ use std::collections::{HashMap, HashSet};
 use std::hash::BuildHasherDefault;
 use std::mem;
 use texture_cache::TexturePage;
-use util;
+use util::{self, MatrixHelpers};
 use webrender_traits::{AuxiliaryLists, PipelineId, Epoch, ScrollPolicy, ScrollLayerId};
 use webrender_traits::{StackingContext, FilterOp, ImageFormat, MixBlendMode, StackingLevel};
 use webrender_traits::{ScrollEventPhase, ScrollLayerInfo};
@@ -978,9 +978,16 @@ impl Frame {
             SceneItemKind::StackingContext(stacking_context, pipeline_id) => {
                 let stacking_context = &stacking_context.stacking_context;
 
-                let local_clip_rect = parent_info.current_clip_rect
-                                                 .translate(&-stacking_context.bounds.origin)
-                                                 .intersection(&stacking_context.overflow);
+                // FIXME(pcwalton): This is a not-great partial solution to servo/servo#10164.
+                // A better solution would be to do this only if the transform consists of a
+                // translation+scale only and fall back to stenciling if the object has a more
+                // complex transform.
+                let local_clip_rect =
+                    stacking_context.transform
+                                    .invert()
+                                    .transform_rect(&parent_info.current_clip_rect)
+                                    .translate(&-stacking_context.bounds.origin)
+                                    .intersection(&stacking_context.overflow);
 
                 (stacking_context, local_clip_rect, pipeline_id)
             }

src/node_compiler.rs

@@ -65,13 +65,7 @@ impl NodeCompiler for AABBTreeNode {
                     let StackingContextIndex(stacking_context_id) = draw_list.stacking_context_index.unwrap();
                     let context = &stacking_context_info[stacking_context_id];
 
-                    // FIXME(pcwalton): This is a not-great partial solution to servo/servo#10164.
-                    // A better solution would be to do this only if the transform consists of a
-                    // translation+scale only and fall back to stenciling if the object has a more
-                    // complex transform.
-                    let offset_from_layer = context.transform
-                                                   .invert()
-                                                   .transform_point(&context.offset_from_layer);
+                    let offset_from_layer = context.offset_from_layer;
                     builder.set_current_clip_rect_offset(offset_from_layer);
 
                     for index in &draw_list_index_buffer.indices {

tests/bug_servo_10307.html

@@ -0,0 +1,12 @@
+<style>
+  div {
+    width: 200px;
+    height: 200px;
+    margin: 50px;
+    box-shadow: 0 0 0 20px black;
+    transform: translate(20px, 20px);
+    background: red;
+  }
+</style>
+There should be a red square with a black border around it.
+<div></div>