зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1673620 [wpt PR 26306] - [scroll-animations] Test that orientation resolves against source, a=testonly
Automatic update from web-platform-tests
[scroll-animations] Test that orientation resolves against source
I made a mistake when writing this test initially: I wrote tests that
verified that logical orientations (inline/block) resolve against the
writing mode of the target element of the animation attached to a
scroll timeline. This is not correct, it's supposed to resolve against
the writing mode of the *source* of the scroll timeline.
Bug: 1074052
Change-Id: I12f54502575e182f1a4b65df36f402b32632a2ce
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2501623
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#821674}
--
wpt-commits: f6deafa6bfa372a86ae542dac0d6dcbfdea7fa5b
wpt-pr: 26306
This commit is contained in:
Родитель
5633049025
Коммит
05c9d7ed3f
|
@ -5,12 +5,18 @@
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
<script src="/web-animations/testcommon.js"></script>
|
<script src="/web-animations/testcommon.js"></script>
|
||||||
<style>
|
<style>
|
||||||
#scroller {
|
#scroller_horizontal_tb, #scroller_vertical_lr{
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
#contents {
|
#scroller_horizontal_tb {
|
||||||
|
writing-mode: horizontal-tb;
|
||||||
|
}
|
||||||
|
#scroller_vertical_lr {
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
}
|
||||||
|
.contents {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
@ -19,35 +25,49 @@
|
||||||
to { width: 200px; }
|
to { width: 200px; }
|
||||||
}
|
}
|
||||||
@scroll-timeline timeline_auto {
|
@scroll-timeline timeline_auto {
|
||||||
source: selector(#scroller);
|
source: selector(#scroller_horizontal_tb);
|
||||||
orientation: auto;
|
orientation: auto;
|
||||||
time-range: 10s;
|
time-range: 10s;
|
||||||
start: 0px;
|
start: 0px;
|
||||||
end: 100px;
|
end: 100px;
|
||||||
}
|
}
|
||||||
@scroll-timeline timeline_vertical {
|
@scroll-timeline timeline_vertical {
|
||||||
source: selector(#scroller);
|
source: selector(#scroller_horizontal_tb);
|
||||||
orientation: vertical;
|
orientation: vertical;
|
||||||
time-range: 10s;
|
time-range: 10s;
|
||||||
start: 0px;
|
start: 0px;
|
||||||
end: 100px;
|
end: 100px;
|
||||||
}
|
}
|
||||||
@scroll-timeline timeline_horizontal {
|
@scroll-timeline timeline_horizontal {
|
||||||
source: selector(#scroller);
|
source: selector(#scroller_horizontal_tb);
|
||||||
orientation: horizontal;
|
orientation: horizontal;
|
||||||
time-range: 10s;
|
time-range: 10s;
|
||||||
start: 0px;
|
start: 0px;
|
||||||
end: 100px;
|
end: 100px;
|
||||||
}
|
}
|
||||||
@scroll-timeline timeline_block {
|
@scroll-timeline timeline_block_in_horizontal {
|
||||||
source: selector(#scroller);
|
source: selector(#scroller_horizontal_tb);
|
||||||
orientation: block;
|
orientation: block;
|
||||||
time-range: 10s;
|
time-range: 10s;
|
||||||
start: 0px;
|
start: 0px;
|
||||||
end: 100px;
|
end: 100px;
|
||||||
}
|
}
|
||||||
@scroll-timeline timeline_inline {
|
@scroll-timeline timeline_inline_in_horizontal {
|
||||||
source: selector(#scroller);
|
source: selector(#scroller_horizontal_tb);
|
||||||
|
orientation: inline;
|
||||||
|
time-range: 10s;
|
||||||
|
start: 0px;
|
||||||
|
end: 100px;
|
||||||
|
}
|
||||||
|
@scroll-timeline timeline_block_in_vertical {
|
||||||
|
source: selector(#scroller_vertical_lr);
|
||||||
|
orientation: block;
|
||||||
|
time-range: 10s;
|
||||||
|
start: 0px;
|
||||||
|
end: 100px;
|
||||||
|
}
|
||||||
|
@scroll-timeline timeline_inline_in_vertical {
|
||||||
|
source: selector(#scroller_vertical_lr);
|
||||||
orientation: inline;
|
orientation: inline;
|
||||||
time-range: 10s;
|
time-range: 10s;
|
||||||
start: 0px;
|
start: 0px;
|
||||||
|
@ -63,33 +83,36 @@
|
||||||
@supports not (animation-timeline:foo) {
|
@supports not (animation-timeline:foo) {
|
||||||
#container > div { animation-play-state: paused; }
|
#container > div { animation-play-state: paused; }
|
||||||
}
|
}
|
||||||
.horizontal { writing-mode: horizontal-tb; }
|
|
||||||
.vertical { writing-mode: vertical-lr; }
|
|
||||||
#element_auto { animation-timeline: timeline_auto; }
|
#element_auto { animation-timeline: timeline_auto; }
|
||||||
#element_vertical { animation-timeline: timeline_vertical; }
|
#element_vertical { animation-timeline: timeline_vertical; }
|
||||||
#element_horizontal { animation-timeline: timeline_horizontal; }
|
#element_horizontal { animation-timeline: timeline_horizontal; }
|
||||||
#element_block_in_horizontal { animation-timeline: timeline_block; }
|
#element_block_in_horizontal { animation-timeline: timeline_block_in_horizontal; }
|
||||||
#element_inline_in_horizontal { animation-timeline: timeline_inline; }
|
#element_inline_in_horizontal { animation-timeline: timeline_inline_in_horizontal; }
|
||||||
#element_block_in_vertical { animation-timeline: timeline_block; }
|
#element_block_in_vertical { animation-timeline: timeline_block_in_vertical; }
|
||||||
#element_inline_in_vertical { animation-timeline: timeline_inline; }
|
#element_inline_in_vertical { animation-timeline: timeline_inline_in_vertical; }
|
||||||
</style>
|
</style>
|
||||||
<div id=scroller>
|
<div id=scroller_horizontal_tb>
|
||||||
<div id=contents></div>
|
<div class=contents></div>
|
||||||
|
</div>
|
||||||
|
<div id=scroller_vertical_lr>
|
||||||
|
<div class=contents></div>
|
||||||
</div>
|
</div>
|
||||||
<div id=container>
|
<div id=container>
|
||||||
<div id=element_auto></div>
|
<div id=element_auto></div>
|
||||||
<div id=element_vertical></div>
|
<div id=element_vertical></div>
|
||||||
<div id=element_horizontal></div>
|
<div id=element_horizontal></div>
|
||||||
<div id=element_block_in_horizontal class="horizontal"></div>
|
<div id=element_block_in_horizontal></div>
|
||||||
<div id=element_inline_in_horizontal class="horizontal"></div>
|
<div id=element_inline_in_horizontal></div>
|
||||||
<div id=element_block_in_vertical class="vertical"></div>
|
<div id=element_block_in_vertical></div>
|
||||||
<div id=element_inline_in_vertical class="vertical"></div>
|
<div id=element_inline_in_vertical></div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
// Animations linked to a vertical scroll-timelines are at 75% progress.
|
// Animations linked to vertical scroll-timelines are at 75% progress.
|
||||||
scroller.scrollTop = 75;
|
scroller_horizontal_tb.scrollTop = 75;
|
||||||
// Animations linked to a horizontal scroll-timelines are at 25% progress.
|
scroller_vertical_lr.scrollTop = 75;
|
||||||
scroller.scrollLeft = 25;
|
// Animations linked to horizontal scroll-timelines are at 25% progress.
|
||||||
|
scroller_horizontal_tb.scrollLeft = 25;
|
||||||
|
scroller_vertical_lr.scrollLeft = 25;
|
||||||
|
|
||||||
promise_test(async (t) => {
|
promise_test(async (t) => {
|
||||||
await waitForNextFrame();
|
await waitForNextFrame();
|
||||||
|
@ -118,13 +141,13 @@
|
||||||
|
|
||||||
promise_test(async (t) => {
|
promise_test(async (t) => {
|
||||||
await waitForNextFrame();
|
await waitForNextFrame();
|
||||||
assert_equals(getComputedStyle(element_block_in_vertical).writingMode, 'vertical-lr');
|
assert_equals(getComputedStyle(scroller_vertical_lr).writingMode, 'vertical-lr');
|
||||||
assert_equals(getComputedStyle(element_block_in_vertical).width, '125px');
|
assert_equals(getComputedStyle(element_block_in_vertical).width, '125px');
|
||||||
}, 'Orientation block behaves as expected in vertical writing-mode');
|
}, 'Orientation block behaves as expected in vertical writing-mode');
|
||||||
|
|
||||||
promise_test(async (t) => {
|
promise_test(async (t) => {
|
||||||
await waitForNextFrame();
|
await waitForNextFrame();
|
||||||
assert_equals(getComputedStyle(element_inline_in_vertical).writingMode, 'vertical-lr');
|
assert_equals(getComputedStyle(scroller_vertical_lr).writingMode, 'vertical-lr');
|
||||||
assert_equals(getComputedStyle(element_inline_in_vertical).width, '175px');
|
assert_equals(getComputedStyle(element_inline_in_vertical).width, '175px');
|
||||||
}, 'Orientation inline behaves as expected in vertical writing-mode');
|
}, 'Orientation inline behaves as expected in vertical writing-mode');
|
||||||
|
|
||||||
|
|
Загрузка…
Ссылка в новой задаче