diff options
| -rw-r--r-- | components/layout/display_list_builder.rs | 21 | ||||
| -rw-r--r-- | tests/wpt/mozilla/meta/MANIFEST.json | 24 | ||||
| -rw-r--r-- | tests/wpt/mozilla/tests/css/perspective_zero.html | 31 | ||||
| -rw-r--r-- | tests/wpt/mozilla/tests/css/perspective_zero_ref.html | 30 |
4 files changed, 104 insertions, 2 deletions
diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs index 82293921bbb..2b4d4f37efb 100644 --- a/components/layout/display_list_builder.rs +++ b/components/layout/display_list_builder.rs @@ -63,6 +63,23 @@ use util::range::Range; /// The logical width of an insertion point: at the moment, a one-pixel-wide line. const INSERTION_POINT_LOGICAL_WIDTH: Au = Au(1 * AU_PER_PX); +// TODO(gw): The transforms spec says that perspective length must +// be positive. However, there is some confusion between the spec +// and browser implementations as to handling the case of 0 for the +// perspective value. Until the spec bug is resolved, at least ensure +// that a provided perspective value of <= 0.0 doesn't cause panics +// and behaves as it does in other browsers. +// See https://lists.w3.org/Archives/Public/www-style/2016Jan/0020.html for more details. +#[inline] +fn create_perspective_matrix(d: Au) -> Matrix4 { + let d = d.to_f32_px(); + if d <= 0.0 { + Matrix4::identity() + } else { + Matrix4::create_perspective(d) + } +} + pub trait FragmentDisplayListBuilding { /// Adds the display items necessary to paint the background of this fragment to the display /// list if necessary. @@ -1241,7 +1258,7 @@ impl FragmentDisplayListBuilding for Fragment { Matrix4::create_rotation(ax, ay, az, theta) } transform::ComputedOperation::Perspective(d) => { - Matrix4::create_perspective(d.to_f32_px()) + create_perspective_matrix(d) } transform::ComputedOperation::Scale(sx, sy, sz) => { Matrix4::create_scale(sx, sy, sz) @@ -1282,7 +1299,7 @@ impl FragmentDisplayListBuilding for Fragment { -perspective_origin.y, 0.0); - let perspective_matrix = Matrix4::create_perspective(d.to_f32_px()); + let perspective_matrix = create_perspective_matrix(d); pre_transform.mul(&perspective_matrix).mul(&post_transform) } diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json index 57d6980e1b4..bfb4c1bd090 100644 --- a/tests/wpt/mozilla/meta/MANIFEST.json +++ b/tests/wpt/mozilla/meta/MANIFEST.json @@ -3548,6 +3548,18 @@ "url": "/_mozilla/css/percentage_width_inline_block_a.html" } ], + "css/perspective_zero.html": [ + { + "path": "css/perspective_zero.html", + "references": [ + [ + "/_mozilla/css/perspective_zero_ref.html", + "==" + ] + ], + "url": "/_mozilla/css/perspective_zero.html" + } + ], "css/pixel_snapping_border_a.html": [ { "dpi": "2", @@ -9640,6 +9652,18 @@ "url": "/_mozilla/css/percentage_width_inline_block_a.html" } ], + "css/perspective_zero.html": [ + { + "path": "css/perspective_zero.html", + "references": [ + [ + "/_mozilla/css/perspective_zero_ref.html", + "==" + ] + ], + "url": "/_mozilla/css/perspective_zero.html" + } + ], "css/pixel_snapping_border_a.html": [ { "dpi": "2", diff --git a/tests/wpt/mozilla/tests/css/perspective_zero.html b/tests/wpt/mozilla/tests/css/perspective_zero.html new file mode 100644 index 00000000000..abc224ccd6f --- /dev/null +++ b/tests/wpt/mozilla/tests/css/perspective_zero.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <link rel='match' href='perspective_zero_ref.html'> + <style type="text/css"> + html, body { + margin: 0; + } + + #outer { + perspective: 0px; + transform-style: preserve-3d; + } + + #inner { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + background-color: green; + transform: translate3d(0, 0, 0); + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/tests/wpt/mozilla/tests/css/perspective_zero_ref.html b/tests/wpt/mozilla/tests/css/perspective_zero_ref.html new file mode 100644 index 00000000000..3852154dd9d --- /dev/null +++ b/tests/wpt/mozilla/tests/css/perspective_zero_ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <style type="text/css"> + html, body { + margin: 0; + } + + #outer { + perspective: 10px; + transform-style: preserve-3d; + } + + #inner { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + background-color: green; + transform: translate3d(0, 0, 0); + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> |