Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-images/image-orientation/image-orientation-none-cross-origin-canvas-pattern.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>
CSS Images Module Level 3: image-orientation: none for createPattern
</title>
<script src="/common/get-host-info.sub.js"></script>
<link rel="match"
href="reference/image-orientation-none-cross-origin-canvas-ref.html">
<style>
img { display: none; }
canvas {
width: 20px;
height: 20px;
margin: 10px;
}
</style>
<p>You should see 8 green rectangles, no red.</p>
<script>
const src1 = 'support/exif-orientation-1-ul.jpg';
const src2 = 'support/exif-orientation-3-lr.jpg';
function toCors(src) {
const url = new URL(src, location.href);
return url.href.replace(url.origin, get_host_info().HTTP_REMOTE_ORIGIN);
}
function createImage({cors, src, orientation, shouldBeRotated}) {
const img = document.createElement('img');
if (cors) {
img.src = toCors(src);
} else {
img.src = src;
}
img.style.imageOrientation = orientation;
img.style.display = 'none';
img.dataset.shouldBeRotated = shouldBeRotated;
document.body.appendChild(img);
return img;
}
[src1, src2].forEach(src => {
const img = document.createElement('img');
img.src = src;
const imgCors = document.createElement('img');
imgCors.src = toCors(src);
document.body.appendChild(img);
document.body.appendChild(imgCors);
});
window.onload = () => {
const images = [
createImage({
cors: true, src: src1, orientation: 'from-image', shouldBeRotated: false
}),
createImage({
cors: true, src: src1, orientation: 'none', shouldBeRotated: false
}),
createImage({
cors: true, src: src2, orientation: 'from-image', shouldBeRotated: true
}),
createImage({
cors: true, src: src2, orientation: 'none', shouldBeRotated: true
}),
createImage({
cors: false, src: src1, orientation: 'from-image',
shouldBeRotated: false
}),
createImage({
cors: false, src: src1, orientation: 'none', shouldBeRotated: false
}),
createImage({
cors: false, src: src2, orientation: 'from-image', shouldBeRotated: true
}),
createImage({
cors: false, src: src2, orientation: 'none', shouldBeRotated: false
}),
];
const dimension = 1;
images.forEach(image => {
const canvas = document.createElement('canvas');
canvas.width = canvas.height = dimension;
// The source of image-orientation preference for canvas drawImage is
// currently not standardized.
canvas.style.imageOrientation = image.style.imageOrientation;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
const sx =
image.dataset.shouldBeRotated === 'true' ? image.width * 0.8 : 0;
const sy =
image.dataset.shouldBeRotated === 'true' ? image.height * 0.8 : 0;
const pattern = ctx.createPattern(image, 'no-repeat');
pattern.setTransform(new DOMMatrix().translate(-sx, -sy));
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, dimension, dimension);
});
};
</script>