forked from mirrors/gecko-dev
56cb49d4d6
Automatic update from web-platform-tests
Reland "Add WebDriver test for CSS 'resize'"
This is a reland of commit 488fd2c958c9c4a5e38307798f2a1ac25559977e
The commit was reverted because the test was failing when run with
--enable-leak-detection, with this leak log:
({
"numberOfLiveDocuments":[1,2],
"numberOfLiveNodes":[4,37],
"numberOfLiveResourceFetchers":[1,2],
"numberOfLiveResources":[0,5]
})
I think that's a problem of the WebDriver API.
Removing the test cases trying to resize an element with 'resize: none'
avoids the problem, and since that's the initial value, they don't seem
much important.
So I think we can reland the test without these cases.
Original change's description:
> Add WebDriver test for CSS 'resize'
>
> In particular, this tests the change from CL:4308393, i.e. resolving
> 'resize: block' and 'resize: inline' using the writing mode of the
> element itself, instead of the one of the containing block.
>
> Bug: 850004
> Change-Id: I15deae5cabd5e92afd6d0405f46769be525c0bd2
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4738818
> Reviewed-by: Rune Lillesveen <futhark@chromium.org>
> Commit-Queue: Oriol Brufau <obrufau@igalia.com>
> Cr-Commit-Position: refs/heads/main@{#1178430}
Bug: 850004
Change-Id: Ifd4196b15263adb5dd71cc5c83e264a4812e2fa3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4742606
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1179390}
--
wpt-commits: 02eae1753d3229be7052069d02dcb546a4080726
wpt-pr: 41304
109 lines
3.1 KiB
HTML
109 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS resize: interactive behavior</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-ui/#resize">
|
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
|
<meta name="assert" content="This test checks that elements are correctly resized
|
|
when a user interacts with their resizing mechanism (simulated via WebDriver).">
|
|
|
|
<style>
|
|
body {
|
|
margin-bottom: 1000px;
|
|
}
|
|
.test {
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow: scroll;
|
|
}
|
|
.resize-both {
|
|
resize: both;
|
|
}
|
|
.resize-horizontal {
|
|
resize: horizontal;
|
|
}
|
|
.resize-vertical {
|
|
resize: vertical;
|
|
}
|
|
.resize-block {
|
|
resize: block;
|
|
}
|
|
.resize-inline {
|
|
resize: inline;
|
|
}
|
|
.wm-horizontal {
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
.wm-vertical {
|
|
writing-mode: vertical-lr;
|
|
}
|
|
.test::before {
|
|
content: "";
|
|
display: block;
|
|
width: 1000px;
|
|
height: 1000px;
|
|
}
|
|
</style>
|
|
|
|
<div class="test resize-both wm-horizontal"></div>
|
|
<div class="test resize-both wm-vertical"></div>
|
|
<div class="test resize-horizontal wm-horizontal"></div>
|
|
<div class="test resize-horizontal wm-vertical"></div>
|
|
<div class="test resize-vertical wm-horizontal"></div>
|
|
<div class="test resize-vertical wm-vertical"></div>
|
|
<div class="test resize-block wm-horizontal"></div>
|
|
<div class="test resize-block wm-vertical"></div>
|
|
<div class="test resize-inline wm-horizontal"></div>
|
|
<div class="test resize-inline wm-vertical"></div>
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-actions.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
|
|
<script>
|
|
function hasHorizontalWritingMode(cs) {
|
|
return cs.writingMode === "horizontal-tb";
|
|
}
|
|
|
|
function getResolvedResize(cs) {
|
|
let { resize } = cs;
|
|
switch (resize) {
|
|
case "block":
|
|
return hasHorizontalWritingMode(cs) ? "vertical" : "horizontal";
|
|
case "inline":
|
|
return hasHorizontalWritingMode(cs) ? "horizontal" : "vertical";
|
|
default:
|
|
return resize;
|
|
}
|
|
}
|
|
|
|
for (let target of document.querySelectorAll(".test")) {
|
|
promise_test(async () => {
|
|
// Scroll element to the top, to ensure that the pointer stays within the vieport
|
|
// when resizing the element.
|
|
target.scrollIntoView();
|
|
|
|
await new test_driver.Actions()
|
|
// Place pointer on the resizing mechanism.
|
|
.pointerMove(49, 49, {origin: target})
|
|
.pointerDown()
|
|
// Resize the element.
|
|
.pointerMove(149, 149, {origin: target})
|
|
.pointerUp()
|
|
.send();
|
|
|
|
let resize = getResolvedResize(getComputedStyle(target));
|
|
if (resize === "horizontal" || resize === "both") {
|
|
assert_equals(target.offsetWidth, 200, "Width should have grown to 200px");
|
|
} else {
|
|
assert_equals(target.offsetWidth, 100, "Width should have stayed as 100px");
|
|
}
|
|
if (resize === "vertical" || resize === "both") {
|
|
assert_equals(target.offsetHeight, 200, "Height should have grown to 200px");
|
|
} else {
|
|
assert_equals(target.offsetHeight, 100, "Height should have stayed as 100px");
|
|
}
|
|
}, target.className);
|
|
}
|
|
</script>
|