blob: 4a3526425d7add2eb9b144ac3f8498bcbcf7890e [file] [log] [blame]
<!DOCTYPE html>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
'use strict';
const srcs = [
"/feature-policy/experimental-features/resources/image.svg",
"/feature-policy/experimental-features/resources/image.jpg",
"/feature-policy/experimental-features/resources/image.png",
];
// Set new attribute, and wait til the media element is repainted.
function updateAttribute(e, attribute, value) {
return new Promise(resolve => {
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
e.setAttribute(attribute, value);
});
}
// Test intrinsicSize attribute with image element.
for (var src of srcs) {
promise_test(async() => {
var img = document.createElement('IMG');
document.body.appendChild(img);
img.src = src;
await new Promise(resolve =>
img.addEventListener('load', () => resolve(), {once: true}));
await updateAttribute(img, 'intrinsicSize', '400 x 500');
assert_equals(img.width, 400, 'width');
assert_equals(img.height, 500, 'height');
assert_equals(img.naturalWidth, 400, 'naturalWidth');
assert_equals(img.naturalHeight, 500, 'naturalHeight');
await updateAttribute(img, 'width', '800');
assert_equals(img.width, 800, 'width');
assert_equals(img.height, 1000, 'height');
assert_equals(img.naturalWidth, 400, 'naturalWidth');
assert_equals(img.naturalHeight, 500, 'naturalHeight');
await updateAttribute(img, 'style', 'height:800px;');
assert_equals(img.width, 800, 'width');
assert_equals(img.height, 800, 'height');
assert_equals(img.naturalWidth, 400, 'naturalWidth');
assert_equals(img.naturalHeight, 500, 'naturalHeight');
await updateAttribute(img, 'width', '');
assert_equals(img.width, 640, 'width');
assert_equals(img.height, 800, 'height');
assert_equals(img.naturalWidth, 400, 'naturalWidth');
assert_equals(img.naturalHeight, 500, 'naturalHeight');
await updateAttribute(img, 'style', 'height:800px; writing-mode: vertical-rl;');
assert_equals(img.width, 640, 'width');
assert_equals(img.height, 800, 'height');
assert_equals(img.naturalWidth, 400, 'naturalWidth');
assert_equals(img.naturalHeight, 500, 'naturalHeight');
await updateAttribute(img, 'style', 'height:800px; writing-mode: horizontal-tb;');
assert_equals(img.width, 640, 'width');
assert_equals(img.height, 800, 'height');
assert_equals(img.naturalWidth, 400, 'naturalWidth');
assert_equals(img.naturalHeight, 500, 'naturalHeight');
}, 'Test image with src=' + src);
}
// Test intrinsicSize attribute with video element.
promise_test(async() => {
var video = document.createElement('video');
document.body.appendChild(video);
video.src = "/feature-policy/experimental-features/resources/video.ogv";
await new Promise(resolve =>
video.addEventListener('canplaythrough', () => resolve(), {once: true}));
video.intrinsicSize = '400 x 500';
assert_equals(video.getBoundingClientRect().width, 400, 'width');
assert_equals(video.getBoundingClientRect().height, 500, 'height');
assert_equals(video.videoWidth, 400, 'naturalWidth');
assert_equals(video.videoHeight, 500, 'naturalHeight');
video.width = '800';
assert_equals(video.getBoundingClientRect().width, 800, 'width');
assert_equals(video.getBoundingClientRect().height, 1000, 'height');
assert_equals(video.videoWidth, 400, 'naturalWidth');
assert_equals(video.videoHeight, 500, 'naturalHeight');
video.style = 'height:800px;';
assert_equals(video.getBoundingClientRect().width, 800, 'width');
assert_equals(video.getBoundingClientRect().height, 800, 'height');
assert_equals(video.videoWidth, 400, 'naturalWidth');
assert_equals(video.videoHeight, 500, 'naturalHeight');
video.removeAttribute('width');
assert_equals(video.getBoundingClientRect().width, 640, 'width');
assert_equals(video.getBoundingClientRect().height, 800, 'height');
assert_equals(video.videoWidth, 400, 'naturalWidth');
assert_equals(video.videoHeight, 500, 'naturalHeight');
}, 'Test video');
</script>
</body>