mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1804583 - image orientation should be used for data url requests. r=emilio 

- Images with a data url source should be treated as same-origin requests,
   meaning that the image-orientation should be respected.
 - Add web platform test for a image with a data url source and
   image-orientation: none.
 - Fix the blob url test for image-orientation: none.

Differential Revision: https://phabricator.services.mozilla.com/D164237
This commit is contained in:
Dan Robertson 2023-01-09 18:21:19 +00:00
Родитель 56be5080d2
Коммит ab82eb7020
3 изменённых файлов: 54 добавлений и 16 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

9
layout/style/nsStyleStruct.cpp
Просмотреть файл

@ -2787,7 +2787,6 @@ StyleImageOrientation nsStyleVisibility::UsedImageOrientation(
nsCOMPtr<nsIPrincipal> triggeringPrincipal =
aRequest->GetTriggeringPrincipal();
nsCOMPtr<nsIURI> uri = aRequest->GetURI();
// If the request was for a blob, the request may not have a triggering
// principal and we should use the input orientation.
@ -2795,10 +2794,16 @@ StyleImageOrientation nsStyleVisibility::UsedImageOrientation(
return aOrientation;
}
nsCOMPtr<nsIURI> uri = aRequest->GetURI();
// If the image request is a data uri, then treat the request as a
// same origin request.
bool isSameOrigin =
uri->SchemeIs("data") || triggeringPrincipal->IsSameOrigin(uri);
// If the image request is a cross-origin request, do not enforce the
// image orientation found in the style. Use the image orientation found
// in the exif data.
if (!triggeringPrincipal->IsSameOrigin(uri)) {
if (!isSameOrigin) {
return StyleImageOrientation::FromImage;
}

57
testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html
Просмотреть файл

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: none</title>
@ -28,20 +28,49 @@
<p>This image should rotate respecting their EXIF orientation because
image-orientation: none should be effectively ignored for opaque (cross-origin) images.</p>
<div><img id="corsImage" src="support/exif-orientation-3-lr.jpg"/></div>
<script>
const img = document.getElementById('corsImage')
img.src = img.src.replace(new URL(img.src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
</script>
<p>The image should not rotate respecting their EXIF orientation because
image-orientation: none is specified.</p>
<div><img id="blobImage" src="support/exif-orientation-3-lr.jpg"/></div>
<script>
fetch(img.src).then((resp) {
return blob;
}).then((blob) => {
const img = document.getElementById('blobImage')
img.src = blob;
});
</script>
<div><img id="blobImage"/></div>
<p>The image should not rotate respecting their EXIF orientation because
image-orientation: none is specified.</p>
<div><img id="dataImage"/></div>
</body>
<script>
const testImage = 'support/exif-orientation-3-lr.jpg';
let sPendingImagesToLoad = 3;
function pendingImageLoaded() {
if (!--sPendingImagesToLoad) {
document.documentElement.removeAttribute('class');
}
}
const img = document.getElementById('corsImage')
img.onload = pendingImageLoaded;
img.src = img.src.replace(new URL(img.src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
const blobImg = document.getElementById('blobImage');
fetch(testImage).then((resp) => {
return resp.blob();
}).then((blob) => {
blobImg.onload = pendingImageLoaded;
blobImg.src = URL.createObjectURL(blob);
});
const dataImg = document.getElementById('dataImage');
fetch(testImage).then((resp) => {
return resp.blob();
}).then((blob) => {
const reader = new FileReader();
reader.addEventListener("load", () => {
dataImg.onload = pendingImageLoaded;
dataImg.src = reader.result;
});
reader.readAsDataURL(blob);
});
</script>
</html>

4
testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html
Просмотреть файл

@ -29,5 +29,9 @@
<p>The image should not rotate respecting their EXIF orientation because
image-orientation: none is specified.</p>
<div><img src="../support/exif-orientation-3-lr.jpg"/></div>
<p>The image should not rotate respecting their EXIF orientation because
image-orientation: none is specified.</p>
<div><img src="../support/exif-orientation-3-lr.jpg"/></div>
</body>
</html>