Paint worklet size should agree with Chrome.

servo · bors-servo · Jun 22, 2017 · Jun 21, 2017 · Jun 22, 2017 · dded87e402707514f4a0627709db95da454912dc
commit dded87e402707514f4a0627709db95da454912dc
diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs
@@ -1154,10 +1154,14 @@ impl FragmentDisplayListBuilding for Fragment {
                                                        paint_worklet: &PaintWorklet,
                                                        index: usize)
     {
-        // TODO: check that this is the servo equivalent of "concrete object size".
+        // This should be the "concrete object size" of the fragment.
         // https://drafts.css-houdini.org/css-paint-api/#draw-a-paint-image
         // https://drafts.csswg.org/css-images-3/#concrete-object-size
-        let size = self.content_box().size.to_physical(style.writing_mode);
+        // Experimentally, chrome is using the size in px of the box,
+        // including padding, but not border or margin, so we follow suit.
+        // https://github.com/w3c/css-houdini-drafts/issues/417
+        let unbordered_box = self.border_box - style.logical_border_width();
+        let size = unbordered_box.size.to_physical(style.writing_mode);
         let name = paint_worklet.name.clone();
 
         // If the script thread has not added any paint worklet modules, there is nothing to do!

diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -6772,6 +6772,18 @@
      ],
      {}
     ]
+   ],
+   "mozilla/worklets/test_paint_worklet_size.html": [
+    [
+     "/_mozilla/mozilla/worklets/test_paint_worklet_size.html",
+     [
+      [
+       "/_mozilla/mozilla/worklets/test_paint_worklet_ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
    ]
   },
   "reftest_node": {
@@ -11264,6 +11276,16 @@
      {}
     ]
    ],
+   "mozilla/worklets/test_paint_worklet_size.js": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/worklets/test_paint_worklet_size_ref.html": [
+    [
+     {}
+    ]
+   ],
    "mozilla/worklets/test_worklet.js": [
     [
      {}

    "e9cfa945824a8ecf07c41a269f82a2c2ca002406",
    "support"
   ],
+  "mozilla/worklets/test_paint_worklet_size.html": [
+   "6ddcf8ad81eaf4a5112de39a87cbd3d290fd9ab4",
+   "reftest"
+  ],
+  "mozilla/worklets/test_paint_worklet_size.js": [
+   "07bbe5099c4e721da1ca9cc8cbf5196e7e6e9510",
+   "support"
+  ],
+  "mozilla/worklets/test_paint_worklet_size_ref.html": [
+   "7c92e508e08d7d146354a5be7fa256ccbd465dde",
+   "support"
+  ],
   "mozilla/worklets/test_worklet.html": [
    "fe9c93a5307c616f878b6623155e1b04c86dd994",
    "testharness"
diff --git a/tests/wpt/mozilla/meta/mozilla/worklets/test_paint_worklet_size.html.ini b/tests/wpt/mozilla/meta/mozilla/worklets/test_paint_worklet_size.html.ini
@@ -0,0 +1,3 @@
+[test_paint_worklet_size.html]
+  type: reftest
+  expected: FAIL
diff --git a/tests/wpt/mozilla/tests/mozilla/worklets/test_paint_worklet_size.html b/tests/wpt/mozilla/tests/mozilla/worklets/test_paint_worklet_size.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html class="reftest-wait">
+    <head>
+        <meta charset=utf-8>
+        <title>Test the size parameter of paint worklets</title>
+        <link rel=match href=/_mozilla/mozilla/worklets/test_paint_worklet_ref.html>
+    </head>
+    <body>
+        <div style="height: 100px; width: 200px; background: paint(test);
+                    margin: 10px; border: 3px solid blue; padding: 5px;"></div>
+    </body>
+    <script>
+        window.paintWorklet
+            .addModule("test_paint_worklet_size.js")
+            .then(function() { document.documentElement.classList.remove("reftest-wait"); });
+    </script>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/worklets/test_paint_worklet_size.js b/tests/wpt/mozilla/tests/mozilla/worklets/test_paint_worklet_size.js
@@ -0,0 +1,8 @@
+registerPaint("test", class {
+    paint(ctx, size) {
+        if ((size.width === 210) && (size.height === 110)) {
+            ctx.fillStyle = "green";
+            ctx.fillRect(0, 0, size.width, size.height);
+        }
+    }
+});
diff --git a/tests/wpt/mozilla/tests/mozilla/worklets/test_paint_worklet_size_ref.html b/tests/wpt/mozilla/tests/mozilla/worklets/test_paint_worklet_size_ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+    <body>
+        <div style="height: 100px; width: 200px; background: green;
+                    margin: 10px; border: 3px solid blue; padding: 5px;"></div>
+    </body>
+</html>