Bug 1418470 - Part 2: Add a test confirming that mask-image is blocked cross-origin. r=emilio, a=pascalc
authorBrad Werth <bwerth@mozilla.com>
Fri, 14 Sep 2018 12:47:46 -0700
changeset 490075 3886ffc45b71c381bef499937a387a7e28fa4515
parent 490074 f6d84997277d20addda3c185adbb58acb48c41d9
child 490076 725bd7c9fefd617fded177ed20f42239cb3802ee
push id9897
push userryanvm@gmail.com
push dateWed, 26 Sep 2018 16:54:24 +0000
treeherdermozilla-beta@3886ffc45b71 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio, pascalc
bugs1418470
milestone63.0
Bug 1418470 - Part 2: Add a test confirming that mask-image is blocked cross-origin. r=emilio, a=pascalc Differential Revision: https://phabricator.services.mozilla.com/D5910
layout/style/test/mochitest.ini
layout/style/test/support/blue-100x100.png
layout/style/test/test_mask_image_CORS.html
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -246,16 +246,19 @@ skip-if = toolkit == 'android'
 [test_initial_storage.html]
 [test_invalidation_basic.html]
 [test_keyframes_rules.html]
 [test_keyframes_vendor_prefix.html]
 [test_layout_css_xul_display_values_content_enabled.html]
 [test_load_events_on_stylesheets.html]
 support-files = slow_broken_sheet.sjs slow_ok_sheet.sjs
 [test_logical_properties.html]
+[test_mask_image_CORS.html]
+support-files =
+  support/blue-100x100.png
 [test_media_queries.html]
 skip-if = android_version == '18' #debug-only failure; timed out #Android 4.3 aws only; bug 1030419
 [test_media_queries_dynamic.html]
 [test_media_queries_dynamic_xbl.html]
 [test_media_query_list.html]
 [test_media_query_serialization.html]
 [test_mq_prefers_reduced_motion_dynamic.html]
 run-if = os == 'mac' # Currently the test works on only MacOSX
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..3b72d5ce53c07b68fe508bb57aa61a933dbda768
GIT binary patch
literal 40279
zc%1Fru`7gO9KiA4>*{d2$>7orRvDE4fKFU;Nw+A2B(u&97LkoI$s&VAHWMQw1NT3O
zEc_AYy}_VNy6(Q0@8|7#p0{Uu>f5_Ly@yMcxqNOk7ZLgLd}%pdH(FyLo6cLWr`2@H
zt}o1$qS<;b?ygSKox!d7mF<Y3;nqmv?7Wa}_Segcv;8lbLS}OG{qpHKVl2v~>FQ1r
zwf*D0B%;|2Vf1zT0Q$)wFb07!2#i5s3<6^i7=yqV1jZmR27xgMj6q-w0%H&ugTNRB
z#vm{Tf$51LjothD_g#Q)pQV#}BF=we5Ez5N7zD;3Fb07!2#i5s3<6^i7=yqV1jZmR
z27xgMj6q-w0%H&ugTNT1&2E#4qjuc|Fb<4CU<?9d5Ez5N7zD;3Fb07!2#i5s3<6^i
z7=yqV1jZmR27xgMj6q-w0%H)EP6ipsJ#PNT{{sA(Uki*uU<?9d5Ez5N7zD;3Fb07!
z2#i5s3<6^i7=yqV1jZmR27xgMj6q-w0%MTh)h@=15yhLX-UUdeij6l5!59R_ATS1j
zF$j!7U<?9d5Ez5N7zD;3Fb07!2#i5s3<6^i7=yqV1m>gC_wYHgdfs|3&sIv;GiwK5
DD)})y
new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_mask_image_CORS.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Test mask-image CORS anonymous retrieval</title>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/WindowSnapshot.js"></script>
+<style>
+.block100 {
+  width: 100px;
+  height: 100px;
+}
+#allow {
+  /*
+   * shape-outside is unnecessary for the mask, but using it ensures that the first frame
+   * of the image is decoded and reflow is called before onload is fired. Since the
+   * shape-outside uses the same url as the mask, this ensures that the css image resource
+   * is decoded and available for the repaint triggered by the call to snapshotRect.
+   */
+  shape-outside: url("support/blue-100x100.png");
+  mask-image: url("support/blue-100x100.png");
+  background-color: #00FF00
+}
+#refuse {
+  shape-outside: url("http://example.com/tests/layout/style/test/support/blue-100x100.png");
+  mask-image: url("http://example.com/tests/layout/style/test/support/blue-100x100.png");
+  background-color: #FF0000
+}
+</style>
+
+<script>
+SimpleTest.waitForExplicitFinish();
+
+function checkBothSquares() {
+  checkIsColor("allow", "0,255,0,255");
+  checkIsColor("refuse", "255,255,255,255");
+
+  SimpleTest.finish();
+}
+
+function checkIsColor(elementId, color) {
+  let e = document.getElementById(elementId);
+  let r = e.getBoundingClientRect();
+  info("Element " + elementId + " has rect " + r.top + ", " + r.left + ", " + r.width + ", " + r.height + ".");
+
+  let canvas = snapshotRect(window, r);
+  let context = canvas.getContext('2d');
+
+  // Only check the top left pixel.
+  let image = context.getImageData(0, 0, 1, 1);
+  let pixel = image.data.toString();
+  is(pixel, color, "Element " + elementId + " has expected color.");
+}
+</script>
+
+</head>
+<body onload="checkBothSquares()">
+  <p>There should be a green square, but no red square.</p>
+  <div id="allow" class="block100"></div>
+  <div id="refuse" class="block100"></div>
+</body>
+</html>