зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1650715 - Make image-orientation apply to all CSS images associated with an element. r=dholbert
Differential Revision: https://phabricator.services.mozilla.com/D82471
This commit is contained in:
Cameron McCormack
Родитель
37e074cdb6
Коммит
c7b8a0ec83
|
|
@ -3873,6 +3873,8 @@ static CursorImage ComputeCustomCursor(nsPresContext* aPresContext,
|
|||
if (!container) {
|
||||
continue;
|
||||
}
|
||||
container = nsLayoutUtils::OrientImage(
|
||||
container, aFrame.StyleVisibility()->mImageOrientation);
|
||||
Maybe<gfx::Point> specifiedHotspot =
|
||||
image.has_hotspot ? Some(gfx::Point{image.hotspot_x, image.hotspot_y})
|
||||
: Nothing();
|
||||
|
|
|
|||
|
|
@ -667,6 +667,8 @@ Maybe<BulletRenderer> nsBulletFrame::CreateBulletRenderer(
|
|||
nsCOMPtr<imgIContainer> imageCon;
|
||||
mImageRequest->GetImage(getter_AddRefs(imageCon));
|
||||
if (imageCon) {
|
||||
imageCon = nsLayoutUtils::OrientImage(
|
||||
imageCon, StyleVisibility()->mImageOrientation);
|
||||
nsRect dest(padding.left, padding.top,
|
||||
mRect.width - (padding.left + padding.right),
|
||||
mRect.height - (padding.top + padding.bottom));
|
||||
|
|
|
|||
|
|
@ -134,6 +134,11 @@ bool nsImageRenderer::PrepareImage() {
|
|||
"If GetImage() is failing, mImage->IsComplete() "
|
||||
"should have returned false");
|
||||
|
||||
if (srcImage) {
|
||||
srcImage = nsLayoutUtils::OrientImage(
|
||||
srcImage, mForFrame->StyleVisibility()->mImageOrientation);
|
||||
}
|
||||
|
||||
if (!mImage->IsRect()) {
|
||||
mImageContainer.swap(srcImage);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
[image-orientation-background-image.html]
|
||||
fuzzy: 2;40
|
||||
fuzzy: 3;49
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
[image-orientation-mask-image.html]
|
||||
fuzzy: 1;22
|
||||
fuzzy: 2;26
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: image-orientation does not apply to background-image</title>
|
||||
<title>CSS Images Module Level 3: image-orientation does apply to background-image</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
|
||||
<link rel="match" href="reference/image-orientation-background-image-ref.html">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: image-orientation does not apply to border images</title>
|
||||
<title>CSS Images Module Level 3: image-orientation does apply to border images</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
|
||||
<link rel="match" href="reference/image-orientation-border-image-ref.html">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: image-orientation does apply to cursor</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
|
||||
<link rel="flags" content="interact">
|
||||
<style>
|
||||
div { width: 100px; height: 100px; border: solid blue; margin-left: 64px; }
|
||||
.orient { cursor: url(support/cursor-8-llo.jpg) 33 0, default; }
|
||||
.no-orient { cursor: url(support/cursor-8-llo.jpg) 64 33, default; image-orientation: none; }
|
||||
</style>
|
||||
<p>The test passes if</p>
|
||||
<ul>
|
||||
<li>when moved inside either of the blue boxes, the cursor is shown as a
|
||||
black arrow on a white background, with the point of the arrow at the current
|
||||
cursor location</li>
|
||||
<li>in the first box, the cursor points up and to the right</li>
|
||||
<li>in the second box, the cursor points down and to the right</li>
|
||||
</ul>
|
||||
<div class="orient"></div>
|
||||
<div class="no-orient"></div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: image-orientation does not apply to iframe contents</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
|
||||
<link rel="match" href="reference/image-orientation-iframe-ref.html">
|
||||
<style>
|
||||
.no-orient { image-orientation: none; }
|
||||
</style>
|
||||
<iframe src="support/exif-orientation-2-ur.jpg"></iframe>
|
||||
<iframe src="support/exif-orientation-2-ur.jpg" class="no-orient"></iframe>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: image-orientation does not apply to list-style-image</title>
|
||||
<title>CSS Images Module Level 3: image-orientation does apply to list-style-image</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
|
||||
<link rel="match" href="reference/image-orientation-list-style-image-ref.html">
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
div { width: 100px; height: 50px; background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
|
||||
div { width: 100px; height: 50px; }
|
||||
.orient { background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
|
||||
.no-orient { background-image: url(../support/exif-orientation-9-u.jpg); }
|
||||
</style>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
<div class="orient"></div>
|
||||
<div class="no-orient"></div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@ div {
|
|||
width: 100px;
|
||||
height: 50px;
|
||||
border: 10px solid black;
|
||||
border-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg) 10;
|
||||
}
|
||||
.orient { border-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg) 10; }
|
||||
.no-orient { border-image: url(../support/exif-orientation-9-u.jpg) 10; }
|
||||
</style>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="orient"></div>
|
||||
<div class="no-orient"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<iframe src="../support/exif-orientation-2-ur.jpg"></iframe>
|
||||
<iframe src="../support/exif-orientation-2-ur.jpg"></iframe>
|
||||
|
|
@ -2,7 +2,9 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
ul { margin-left: 100px; list-style-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
|
||||
ul { margin-left: 100px; }
|
||||
.orient { list-style-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
|
||||
.no-orient { list-style-image: url(../support/exif-orientation-9-u.jpg); }
|
||||
</style>
|
||||
<ul><li> </li></ul>
|
||||
<ul><li> </li></ul>
|
||||
<ul class="orient"><li> </li></ul>
|
||||
<ul class="no-orient"><li> </li></ul>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,10 @@ div {
|
|||
width: 100px;
|
||||
height: 50px;
|
||||
background: blue;
|
||||
mask-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg);
|
||||
mask-mode: luminance;
|
||||
}
|
||||
.orient { mask-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
|
||||
.no-orient { mask-image: url(../support/exif-orientation-9-u.jpg); }
|
||||
</style>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="orient"></div>
|
||||
<div class="no-orient"></div>
|
||||
|
|
|
|||
Двоичные данные
testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg
Normal file
Двоичные данные
testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg
Normal file
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.2 KiB |
Загрузка…
Ссылка в новой задаче