mirror of
https://github.com/servo/servo.git
synced 2025-08-09 15:35:34 +01:00
Update web-platform-tests to revision 1b2893a628c429d144e2b5f7eb5d93855127cacb
This commit is contained in:
WPT Sync Bot
parent
7f12ee6467
commit
382c7ac026
66 changed files with 421 additions and 229 deletions
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: image-orientation: none</title>
|
||||
<script src=/common/get-host-info.sub.js></script>
|
||||
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
|
||||
<link rel="match" href="reference/image-orientation-none-cross-origin-ref.html">
|
||||
<meta name=fuzzy content="10;100">
|
||||
<style>
|
||||
img {display: none}
|
||||
canvas {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const src1 = 'support/exif-orientation-1-ul.jpg';
|
||||
const src2 = 'support/exif-orientation-3-lr.jpg';
|
||||
function toCors(src) {
|
||||
return src.replace(new URL(src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
|
||||
}
|
||||
function createImage({cors, src, orientation, shouldBeRotated}) {
|
||||
const img = document.createElement('img');
|
||||
img.src = src
|
||||
if (cors)
|
||||
img.src = toCors(img.src)
|
||||
img.style.imageOrientation = orientation
|
||||
img.style.display = 'none'
|
||||
img.dataset.shouldBeRotated = shouldBeRotated
|
||||
document.body.appendChild(img)
|
||||
return img
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
const images = [
|
||||
createImage({cors: true, src: src2, orientation: 'from-image', shouldBeRotated: true}),
|
||||
createImage({cors: true, src: src2, orientation: 'none', shouldBeRotated: true}),
|
||||
createImage({cors: false, src: src2, orientation: 'from-image', shouldBeRotated: true}),
|
||||
createImage({cors: true, src: src1, orientation: 'from-image', shouldBeRotated: false}),
|
||||
createImage({cors: true, src: src1, orientation: 'none', shouldBeRotated: false}),
|
||||
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: 'none', shouldBeRotated: false}),
|
||||
]
|
||||
|
||||
const dimension = 1
|
||||
|
||||
images.forEach(image => {
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = canvas.height = dimension
|
||||
const ctx = canvas.getContext('2d')
|
||||
const sx = image.dataset.shouldBeRotated === 'true' ? image.width * .8 : 0
|
||||
const sy = image.dataset.shouldBeRotated === 'true' ? image.height * .8 : 0
|
||||
ctx.drawImage(image, sx, sy, 1, 1, 0, 0, dimension, dimension)
|
||||
document.body.appendChild(canvas)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see 8 green rectangles, no red.</p>
|
||||
</body>
|
||||
<script>
|
||||
[src1, src2].forEach(src => {
|
||||
const img = document.createElement('img')
|
||||
img.src = src
|
||||
const imgCors = document.createElement('img')
|
||||
imgCors.src = src
|
||||
imgCors.src = toCors(imgCors.src)
|
||||
document.body.appendChild(img)
|
||||
document.body.appendChild(imgCors)
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: image-orientation: none</title>
|
||||
<script src=/common/get-host-info.sub.js></script>
|
||||
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
|
||||
<link rel="match" href="reference/image-orientation-none-cross-origin-ref.html">
|
||||
<meta name=fuzzy content="10;100">
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
image-orientation: none;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The following images should not be identical.</p>
|
||||
<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>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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
|
||||
<meta name=fuzzy content="10;100">
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
image-orientation: none;
|
||||
}
|
||||
img {display: none}
|
||||
canvas {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
.no-orient { image-orientation: none; }
|
||||
</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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
|
||||
<meta name=fuzzy content="10;100">
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
image-orientation: none;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The following images should not be identical.</p>
|
||||
<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>This image should rotate respecting their EXIF orientation because
|
||||
image-orientation: none should be effectively ignored for opaque (cross-origin) images.</p>
|
||||
<div><img src="../support/exif-orientation-3-lr.jpg" style="image-orientation: from-image" /></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue