Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: none</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<style>
body {
overflow: hidden;
image-orientation: none;
}
img {display: none}
canvas {
width: 20px;
height: 20px;
margin: 10px;
}
</style>
<body>
<p>You should see 8 green rectangles, no red.</p>
</body>
<script>
const img = document.createElement('img')
img.src = '../support/exif-orientation-1-ul.jpg'
document.body.appendChild(img)
const dimension = 5
window.onload = () => {
for (let i = 0; i < 8; ++i) {
const canvas = document.createElement('canvas')
canvas.width = canvas.height = dimension
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
document.body.appendChild(canvas)
}
}
</script>
</head>
</html>