[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}

third_party/blink/web_tests/external/wpt/scroll-animations/css/at-scroll-timeline-orientation-expected.txt

-This is a testharness.js-based test.
-PASS Orientation auto behaves as expected
-PASS Orientation vertical behaves as expected
-PASS Orientation horizontal behaves as expected
-PASS Orientation block behaves as expected in horizontal writing-mode
-PASS Orientation inline behaves as expected in horizontal writing-mode
-FAIL Orientation block behaves as expected in vertical writing-mode assert_equals: expected "125px" but got "175px"
-FAIL Orientation inline behaves as expected in vertical writing-mode assert_equals: expected "175px" but got "125px"
-Harness: the test ran to completion.
-

third_party/blink/web_tests/external/wpt/scroll-animations/css/at-scroll-timeline-orientation.html

@@ -5,12 +5,18 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="/web-animations/testcommon.js"></script>
 <style>
-  #scroller {
+  #scroller_horizontal_tb, #scroller_vertical_lr{
     overflow: scroll;
     width: 100px;
     height: 100px;
   }
-  #contents {
+  #scroller_horizontal_tb {
+    writing-mode: horizontal-tb;
+  }
+  #scroller_vertical_lr {
+    writing-mode: vertical-lr;
+  }
+  .contents {
     height: 300px;
     width: 300px;
   }
@@ -19,35 +25,49 @@
     to { width: 200px; }
   }
   @scroll-timeline timeline_auto {
-    source: selector(#scroller);
+    source: selector(#scroller_horizontal_tb);
     orientation: auto;
     time-range: 10s;
     start: 0px;
     end: 100px;
   }
   @scroll-timeline timeline_vertical {
-    source: selector(#scroller);
+    source: selector(#scroller_horizontal_tb);
     orientation: vertical;
     time-range: 10s;
     start: 0px;
     end: 100px;
   }
   @scroll-timeline timeline_horizontal {
-    source: selector(#scroller);
+    source: selector(#scroller_horizontal_tb);
     orientation: horizontal;
     time-range: 10s;
     start: 0px;
     end: 100px;
   }
-  @scroll-timeline timeline_block {
-    source: selector(#scroller);
+  @scroll-timeline timeline_block_in_horizontal {
+    source: selector(#scroller_horizontal_tb);
     orientation: block;
     time-range: 10s;
     start: 0px;
     end: 100px;
   }
-  @scroll-timeline timeline_inline {
-    source: selector(#scroller);
+  @scroll-timeline timeline_inline_in_horizontal {
+    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;
     time-range: 10s;
     start: 0px;
@@ -63,33 +83,36 @@
   @supports not (animation-timeline:foo) {
     #container > div { animation-play-state: paused; }
   }
-  .horizontal { writing-mode: horizontal-tb; }
-  .vertical { writing-mode: vertical-lr; }
   #element_auto { animation-timeline: timeline_auto; }
   #element_vertical { animation-timeline: timeline_vertical; }
   #element_horizontal { animation-timeline: timeline_horizontal; }
-  #element_block_in_horizontal { animation-timeline: timeline_block; }
-  #element_inline_in_horizontal { animation-timeline: timeline_inline; }
-  #element_block_in_vertical { animation-timeline: timeline_block; }
-  #element_inline_in_vertical { animation-timeline: timeline_inline; }
+  #element_block_in_horizontal { animation-timeline: timeline_block_in_horizontal; }
+  #element_inline_in_horizontal { animation-timeline: timeline_inline_in_horizontal; }
+  #element_block_in_vertical { animation-timeline: timeline_block_in_vertical; }
+  #element_inline_in_vertical { animation-timeline: timeline_inline_in_vertical; }
 </style>
-<div id=scroller>
-  <div id=contents></div>
+<div id=scroller_horizontal_tb>
+  <div class=contents></div>
+</div>
+<div id=scroller_vertical_lr>
+  <div class=contents></div>
 </div>
 <div id=container>
   <div id=element_auto></div>
   <div id=element_vertical></div>
   <div id=element_horizontal></div>
-  <div id=element_block_in_horizontal class="horizontal"></div>
-  <div id=element_inline_in_horizontal class="horizontal"></div>
-  <div id=element_block_in_vertical class="vertical"></div>
-  <div id=element_inline_in_vertical class="vertical"></div>
+  <div id=element_block_in_horizontal></div>
+  <div id=element_inline_in_horizontal></div>
+  <div id=element_block_in_vertical></div>
+  <div id=element_inline_in_vertical></div>
 </div>
 <script>
-  // Animations linked to a vertical scroll-timelines are at 75% progress.
-  scroller.scrollTop = 75;
-  // Animations linked to a horizontal scroll-timelines are at 25% progress.
-  scroller.scrollLeft = 25;
+  // Animations linked to vertical scroll-timelines are at 75% progress.
+  scroller_horizontal_tb.scrollTop = 75;
+  scroller_vertical_lr.scrollTop = 75;
+  // Animations linked to horizontal scroll-timelines are at 25% progress.
+  scroller_horizontal_tb.scrollLeft = 25;
+  scroller_vertical_lr.scrollLeft = 25;
 
   promise_test(async (t) => {
     await waitForNextFrame();
@@ -118,13 +141,13 @@
 
   promise_test(async (t) => {
     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');
   }, 'Orientation block behaves as expected in vertical writing-mode');
 
   promise_test(async (t) => {
     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');
   }, 'Orientation inline behaves as expected in vertical writing-mode');