Skip to content

Commit 9f61291

Browse files
heycammoz-wptsync-bot
heycam
authored and
moz-wptsync-bot
committed
Make image-orientation apply to all CSS images associated with an element.
Differential Revision: https://phabricator.services.mozilla.com/D82471 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1650715 gecko-commit: a6c4ee43e194e7dbe4415bb85c50600d7ea74080 gecko-integration-branch: autoland gecko-reviewers: dholbert
1 parent 931e5b7 commit 9f61291

11 files changed

+58
-16
lines changed

‎css/css-images/image-orientation/image-orientation-background-image.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<meta charset="utf-8">
3-
<title>CSS Images Module Level 3: image-orientation does not apply to background-image</title>
3+
<title>CSS Images Module Level 3: image-orientation does apply to background-image</title>
44
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
55
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
66
<link rel="match" href="reference/image-orientation-background-image-ref.html">

‎css/css-images/image-orientation/image-orientation-border-image.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<meta charset="utf-8">
3-
<title>CSS Images Module Level 3: image-orientation does not apply to border images</title>
3+
<title>CSS Images Module Level 3: image-orientation does apply to border images</title>
44
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
55
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
66
<link rel="match" href="reference/image-orientation-border-image-ref.html">

‎css/css-images/image-orientation/image-orientation-cursor.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Images Module Level 3: image-orientation does apply to cursor</title>
4+
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
6+
<link rel="flags" content="interact">
7+
<style>
8+
div { width: 100px; height: 100px; border: solid blue; margin-left: 64px; }
9+
.orient { cursor: url(support/cursor-8-llo.jpg) 33 0, default; }
10+
.no-orient { cursor: url(support/cursor-8-llo.jpg) 64 33, default; image-orientation: none; }
11+
</style>
12+
<p>The test passes if</p>
13+
<ul>
14+
<li>when moved inside either of the blue boxes, the cursor is shown as a
15+
black arrow on a white background, with the point of the arrow at the current
16+
cursor location</li>
17+
<li>in the first box, the cursor points up and to the right</li>
18+
<li>in the second box, the cursor points down and to the right</li>
19+
</ul>
20+
<div class="orient"></div>
21+
<div class="no-orient"></div>

‎css/css-images/image-orientation/image-orientation-iframe.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Images Module Level 3: image-orientation does not apply to iframe contents</title>
4+
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
6+
<link rel="match" href="reference/image-orientation-iframe-ref.html">
7+
<style>
8+
.no-orient { image-orientation: none; }
9+
</style>
10+
<iframe src="support/exif-orientation-2-ur.jpg"></iframe>
11+
<iframe src="support/exif-orientation-2-ur.jpg" class="no-orient"></iframe>

‎css/css-images/image-orientation/image-orientation-list-style-image.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<meta charset="utf-8">
3-
<title>CSS Images Module Level 3: image-orientation does not apply to list-style-image</title>
3+
<title>CSS Images Module Level 3: image-orientation does apply to list-style-image</title>
44
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
55
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
66
<link rel="match" href="reference/image-orientation-list-style-image-ref.html">

‎css/css-images/image-orientation/reference/image-orientation-background-image-ref.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
<meta charset="utf-8">
33
<title>CSS Reference</title>
44
<style>
5-
div { width: 100px; height: 50px; background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
5+
div { width: 100px; height: 50px; }
6+
.orient { background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
7+
.no-orient { background-image: url(../support/exif-orientation-9-u.jpg); }
68
</style>
7-
<div></div>
8-
<div></div>
9-
9+
<div class="orient"></div>
10+
<div class="no-orient"></div>

‎css/css-images/image-orientation/reference/image-orientation-border-image-ref.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
width: 100px;
77
height: 50px;
88
border: 10px solid black;
9-
border-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg) 10;
109
}
10+
.orient { border-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg) 10; }
11+
.no-orient { border-image: url(../support/exif-orientation-9-u.jpg) 10; }
1112
</style>
12-
<div></div>
13-
<div></div>
13+
<div class="orient"></div>
14+
<div class="no-orient"></div>

‎css/css-images/image-orientation/reference/image-orientation-iframe-ref.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Reference</title>
4+
<iframe src="../support/exif-orientation-2-ur.jpg"></iframe>
5+
<iframe src="../support/exif-orientation-2-ur.jpg"></iframe>

‎css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<meta charset="utf-8">
33
<title>CSS Reference</title>
44
<style>
5-
ul { margin-left: 100px; list-style-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
5+
ul { margin-left: 100px; }
6+
.orient { list-style-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
7+
.no-orient { list-style-image: url(../support/exif-orientation-9-u.jpg); }
68
</style>
7-
<ul><li>&nbsp;</li></ul>
8-
<ul><li>&nbsp;</li></ul>
9+
<ul class="orient"><li>&nbsp;</li></ul>
10+
<ul class="no-orient"><li>&nbsp;</li></ul>

‎css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
width: 100px;
77
height: 50px;
88
background: blue;
9-
mask-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg);
109
mask-mode: luminance;
1110
}
11+
.orient { mask-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
12+
.no-orient { mask-image: url(../support/exif-orientation-9-u.jpg); }
1213
</style>
13-
<div></div>
14-
<div></div>
14+
<div class="orient"></div>
15+
<div class="no-orient"></div>

0 commit comments

Comments
 (0)