Commit 4e3108d6 authored by Xiaocheng Hu's avatar Xiaocheng Hu Committed by Commit Bot

Use CORS-enabled loading for -webkit-mask-image

Spec requires (https://drafts.fxtf.org/css-masking-1/#priv-sec):

> User agents must use the potentially CORS-enabled fetch
> method defined by the [FETCH] specification for all
> <mask-source>, <clip-source> and <image> values on the
> mask-image

This patch makes our implementation follow that.

Bug: 786507
Change-Id: Id01fcf9eec6adc7b08f8acb21ec551e43f324db6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1838592
Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>
Reviewed-by: default avatarEmil A Eklund <eae@chromium.org>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#703908}
parent ea691753
...@@ -314,7 +314,8 @@ void ElementStyleResources::LoadPendingImages(ComputedStyle* style) { ...@@ -314,7 +314,8 @@ void ElementStyleResources::LoadPendingImages(ComputedStyle* style) {
mask_layer->GetImage()->IsPendingImage()) { mask_layer->GetImage()->IsPendingImage()) {
mask_layer->SetImage(LoadPendingImage( mask_layer->SetImage(LoadPendingImage(
style, To<StylePendingImage>(mask_layer->GetImage()), style, To<StylePendingImage>(mask_layer->GetImage()),
FetchParameters::kAllowPlaceholder)); FetchParameters::kAllowPlaceholder,
kCrossOriginAttributeAnonymous));
} }
} }
break; break;
......
<!DOCTYPE html>
<style>
body { padding: 50px; }
#expected {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div id="expected"></div>
</body>
<!doctype html>
<style>
#target {
width: 200px;
height: 200px;
background-color: green;
/* Cross-origin request is OK because the "Access-Control-Allow-Origin: *" is returned. */
-webkit-mask-image: url("http://localhost:8080/security/resources/image-access-control.php?file=../../resources/square100.png&allow=true");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
</style>
<div id="target"></div>
<!DOCTYPE html>
<style>
body { padding: 50px; }
#expected {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div id="expected"></div>
</body>
<!DOCTYPE html>
<style>
#target {
width: 200px;
height: 200px;
background-color: green;
/* Data URL access is OK. */
-webkit-mask-image: url('data:image/svg+xml;utf8, \
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> \
<rect x="50px" y="50px" width="100px" height="100px" fill="black" /> \
</svg>');
}
</style>
<div id="target"></div>
CONSOLE ERROR: Access to image at 'http://localhost:8080/security/resources/image-access-control.php?file=../../resources/square100.png&allow=false' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
<!doctype html>
<style>
#target {
width: 200px;
height: 200px;
background-color: green;
/* Cross-origin request is not OK because a "Access-Control-Allow-Origin:" header is not returned. */
-webkit-mask-image: url("http://localhost:8080/security/resources/image-access-control.php?file=../../resources/square100.png&allow=false");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
</style>
<div id="target"></div>
CONSOLE ERROR: Access to image at 'http://localhost:8080/resources/square100.png' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
<!doctype html>
<style>
#target {
width: 200px;
height: 200px;
background-color: green;
/* blocked because the URL's port number doesn't match this document's origin. */
-webkit-mask-image: url("http://localhost:8080/resources/square100.png");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
</style>
<div id="target"></div>
<!DOCTYPE html>
<style>
body { padding: 50px; }
#expected {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div id="expected"></div>
</body>
<!DOCTYPE html>
<style>
#target {
width: 200px;
height: 200px;
background-color: green;
/* Access is OK because the URL and this document have the same origin. */
-webkit-mask-image: url("/resources/square100.png");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
</style>
<div id="target"></div>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment