Snap to screen pixels instead of px

servo · Oct 8, 2015 · 0c4ca2b · 0c4ca2b
1 parent 409fbaf
commit 0c4ca2b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 4 deletions.
diff --git a/components/gfx/display_list/mod.rs b/components/gfx/display_list/mod.rs
@@ -279,6 +279,8 @@ impl DisplayList {
             layer_kind: paint_context.layer_kind,
         };
 
+        let pixels_per_px = paint_subcontext.screen_pixels_per_px();
+
         if opts::get().dump_display_list_optimized {
             self.print(format!("Optimized display list. Tile bounds: {:?}",
                                 paint_context.page_rect));
@@ -306,11 +308,11 @@ impl DisplayList {
                 transform.translate(positioned_kid.bounds
                                                   .origin
                                                   .x
-                                                  .to_nearest_px() as AzFloat,
+                                                  .to_nearest_pixel(pixels_per_px) as AzFloat,
                                     positioned_kid.bounds
                                                   .origin
                                                   .y
-                                                  .to_nearest_px() as AzFloat,
+                                                  .to_nearest_pixel(pixels_per_px) as AzFloat,
                                     0.0);
             positioned_kid.optimize_and_draw_into_context(&mut paint_subcontext,
                                                           &new_transform,
@@ -348,11 +350,11 @@ impl DisplayList {
                 transform.translate(positioned_kid.bounds
                                                   .origin
                                                   .x
-                                                  .to_nearest_px() as AzFloat,
+                                                  .to_nearest_pixel(pixels_per_px) as AzFloat,
                                     positioned_kid.bounds
                                                   .origin
                                                   .y
-                                                  .to_nearest_px() as AzFloat,
+                                                  .to_nearest_pixel(pixels_per_px) as AzFloat,
                                     0.0);
             positioned_kid.optimize_and_draw_into_context(&mut paint_subcontext,
                                                           &new_transform,

diff --git a/tests/ref/basic.list b/tests/ref/basic.list
@@ -292,6 +292,8 @@ flaky_cpu == linebreak_simple_a.html linebreak_simple_b.html
 == percentage_height_root.html percentage_height_root_ref.html
 == percentage_width_inline_block_a.html percentage_width_inline_block_ref.html
 device-pixel-ratio=2 != pixel_snapping_border_a.html pixel_snapping_border_ref.html
+# resolution=300x300 so it doesn't create a giant window, making the test flaky
+resolution=300x300,device-pixel-ratio=2 != pixel_snapping_position_a.html pixel_snapping_position_ref.html
 == png_rgba_colorspace_a.html png_rgba_colorspace_b.html
 == position_abs_cb_with_non_cb_kid_a.html position_abs_cb_with_non_cb_kid_b.html
 == position_abs_height_width_a.html position_abs_height_width_b.html

diff --git a/tests/ref/pixel_snapping_position_a.html b/tests/ref/pixel_snapping_position_a.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Pixel snapping position test</title>
+    <style>
+      div {
+        position: absolute;
+        height: 100px;
+        width: 100px;
+        top: 11.5px;
+        background: red;
+        transform: scale(1);
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/tests/ref/pixel_snapping_position_ref.html b/tests/ref/pixel_snapping_position_ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Pixel snapping position reference</title>
+    <style>
+      div {
+        position: absolute;
+        height: 100px;
+        width: 100px;
+        top: 12px;
+        background: red;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>