Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-11 16:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'4435c35d9085ed2be61e64d0093b8e1b0e7a877b'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-25 01:21:31 +00:00
parent 901b76297d
commit 4031d79cea
383 changed files with 8858 additions and 2734 deletions
Download patch file Download diff file Expand all files Collapse all files

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/color-input-appearance-native-horizontal.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native input[type=color] in horizontal writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="color-input-appearance-native-vertical.optional.html">
<link rel="mismatch" href="color-input-appearance-none-vertical.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The color input below should match the correct writing mode.</p>
<input type="color">

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/color-input-appearance-native-vertical.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native input[type=color] in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="color-input-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="color-input-appearance-none-horizontal.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The color input below should match the correct writing mode.</p>
<input type="color" style="writing-mode: vertical-rl">

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/color-input-appearance-none-horizontal.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled input[type=color] in horizontal writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="color-input-appearance-none-vertical.optional.html">
<link rel="mismatch" href="color-input-appearance-native-vertical.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The color input below should match the correct writing mode.</p>
<input type="color" style="appearance: none;">

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/color-input-appearance-none-vertical.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled input[type=color] in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="color-input-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="color-input-appearance-native-horizontal.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The color input below should match the correct writing mode.</p>
<input type="color" style="writing-mode: vertical-lr; appearance: none;">

0
tests/wpt/web-platform-tests/css/css-writing-modes/form-controls-slr-004.xht → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-slr-007-manual.xht
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/form-controls-slr-005.xht → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-slr-008-manual.xht
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/form-controls-srl-004.xht → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-srl-007-manual.xht
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/form-controls-srl-005.xht → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-srl-008-manual.xht
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-001-manual.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-vlr-001-manual.html
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-002-manual.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-vlr-002-manual.html
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-003-manual.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-vlr-003-manual.html
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-004-manual.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-vlr-004-manual.html
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-005-manual.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-vlr-005-manual.html
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-006-manual.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-vlr-006-manual.html
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/form-controls-vlr-004.xht → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-vlr-007-manual.xht
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/form-controls-vlr-005.xht → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-vlr-008-manual.xht
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/form-controls-vrl-004.xht → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-vrl-007-manual.xht
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/form-controls-vrl-005.xht → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/form-controls-vrl-008-manual.xht
View file

0
tests/wpt/web-platform-tests/css/css-writing-modes/support/form-controls-slr.png → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/support/form-controls-slr.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Before After
Before After

0
tests/wpt/web-platform-tests/css/css-writing-modes/support/form-controls-srl.png → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/support/form-controls-srl.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

Before After
Before After

0
tests/wpt/web-platform-tests/css/css-writing-modes/support/form-controls-vlr.png → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/support/form-controls-vlr.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

Before After
Before After

0
tests/wpt/web-platform-tests/css/css-writing-modes/support/vertical-form.png → tests/wpt/web-platform-tests/css/css-writing-modes/forms/manual/support/vertical-form.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

0
tests/wpt/web-platform-tests/css/css-writing-modes/progress-appearance-native-computed-style.optional.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html
View file

2
tests/wpt/web-platform-tests/css/css-writing-modes/progress-appearance-native-horizontal.optional.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/progress-appearance-native-horizontal.optional.html
View file

@ -9,4 +9,4 @@
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The progress element below should match the correct writing mode.</p>
<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb"></progress>
<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb"></progress>

2
tests/wpt/web-platform-tests/css/css-writing-modes/progress-appearance-native-vertical.optional.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html
View file

@ -9,4 +9,4 @@
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The progress element below should match the correct writing mode.</p>
<progress value="70" min="0" max="100" style="writing-mode: vertical-rl"></progress>
<progress value="70" min="0" max="100" style="writing-mode: vertical-rl"></progress>

4
tests/wpt/web-platform-tests/css/css-writing-modes/progress-appearance-none-horizontal.optional.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html
View file

@ -4,9 +4,9 @@
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>Progress appearance none writing mode horizontal</title>
<meta charset="utf-8">
<link rel="mismatch" href="progress-appearance-native-vertical.optional.html">
<link rel="mismatch" href="progress-appearance-none-vertical.optional.html">
<link rel="mismatch" href="progress-appearance-native-vertical.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The progress element below should match the correct writing mode.</p>
<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb; appearance: none;"></progress>
<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb; appearance: none;"></progress>

4
tests/wpt/web-platform-tests/css/css-writing-modes/progress-appearance-none-vertical.optional.html → tests/wpt/web-platform-tests/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html
View file

@ -4,9 +4,9 @@
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>Progress appearance none writing mode vertical</title>
<meta charset="utf-8">
<link rel="mismatch" href="progress-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="progress-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="progress-appearance-native-horizontal.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The progress element below should match the correct writing mode.</p>
<progress value="70" min="0" max="100" style="writing-mode: vertical-lr; appearance: none;"></progress>
<progress value="70" min="0" max="100" style="writing-mode: vertical-lr; appearance: none;"></progress>

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal-rtl.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native input[type=range] in horizontal writing mode & RTL direction</title>
<meta charset="utf-8">
<link rel="mismatch" href="range-input-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="range-input-appearance-none-horizontal.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The range input below should match the correct writing mode & direction.</p>
<input type="range" min="0" max="100" value="10" style="direction: rtl">

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native input[type=range] in horizontal writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="range-input-appearance-native-vertical.optional.html">
<link rel="mismatch" href="range-input-appearance-none-vertical.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The range input below should match the correct writing mode & direction.</p>
<input type="range" min="0" max="100" value="10">

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-vertical-rtl.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native input[type=range] in vertical writing mode & RTL direction</title>
<meta charset="utf-8">
<link rel="mismatch" href="range-input-appearance-native-vertical.optional.html">
<link rel="mismatch" href="range-input-appearance-none-vertical.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The range input below should match the correct writing mode & direction.</p>
<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-rl; direction: rtl;">

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-vertical.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native input[type=range] in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="range-input-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="range-input-appearance-none-horizontal.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The range input below should match the correct writing mode & direction.</p>
<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-rl">

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal-rtl.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled input[type=range] in horizontal writing mode & RTL direction</title>
<meta charset="utf-8">
<link rel="mismatch" href="range-input-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="range-input-appearance-native-horizontal.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The range input below should match the correct writing mode & direction.</p>
<input type="range" min="0" max="100" value="10" style="direction: rtl; appearance: none;">

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled input[type=range] in horizontal writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="range-input-appearance-none-vertical.optional.html">
<link rel="mismatch" href="range-input-appearance-native-vertical.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The range input below should match the correct writing mode & direction.</p>
<input type="range" min="0" max="100" value="10" style="appearance: none;">

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-vertical-rtl.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled input[type=range] in vertical writing mode & RTL direction</title>
<meta charset="utf-8">
<link rel="mismatch" href="range-input-appearance-none-vertical.optional.html">
<link rel="mismatch" href="range-input-appearance-native-vertical.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The range input below should match the correct writing mode & direction.</p>
<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-lr; direction: rtl; appearance: none;">

12
tests/wpt/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-vertical.optional.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled input[type=range] in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="range-input-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="range-input-appearance-native-horizontal.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The range input below should match the correct writing mode & direction.</p>
<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-lr; appearance: none;">

115
tests/wpt/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-horizontal.optional.html Normal file
View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native select[multiple] in horizontal writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The select below should match the correct writing mode.</p>
<select multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
<option>Option 11</option>
<option>Option 12</option>
<option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
<option>Option 21</option>
<option>Option 22</option>
<option>Option 23</option>
<option>Option 24</option>
<option>Option 25</option>
<option>Option 26</option>
<option>Option 27</option>
<option>Option 28</option>
<option>Option 29</option>
<option>Option 30</option>
<option>Option 31</option>
<option>Option 32</option>
<option>Option 33</option>
<option>Option 34</option>
<option>Option 35</option>
<option>Option 36</option>
<option>Option 37</option>
<option>Option 38</option>
<option>Option 39</option>
<option>Option 40</option>
<option>Option 41</option>
<option>Option 42</option>
<option>Option 43</option>
<option>Option 44</option>
<option>Option 45</option>
<option>Option 46</option>
<option>Option 47</option>
<option>Option 48</option>
<option>Option 49</option>
<option>Option 50</option>
<option>Option 51</option>
<option>Option 52</option>
<option>Option 53</option>
<option>Option 54</option>
<option>Option 55</option>
<option>Option 56</option>
<option>Option 57</option>
<option>Option 58</option>
<option>Option 59</option>
<option>Option 60</option>
<option>Option 61</option>
<option>Option 62</option>
<option>Option 63</option>
<option>Option 64</option>
<option>Option 65</option>
<option>Option 66</option>
<option>Option 67</option>
<option>Option 68</option>
<option>Option 69</option>
<option>Option 70</option>
<option>Option 71</option>
<option>Option 72</option>
<option>Option 73</option>
<option>Option 74</option>
<option>Option 75</option>
<option>Option 76</option>
<option>Option 77</option>
<option>Option 78</option>
<option>Option 79</option>
<option>Option 80</option>
<option>Option 81</option>
<option>Option 82</option>
<option>Option 83</option>
<option>Option 84</option>
<option>Option 85</option>
<option>Option 86</option>
<option>Option 87</option>
<option>Option 88</option>
<option>Option 89</option>
<option>Option 90</option>
<option>Option 91</option>
<option>Option 92</option>
<option>Option 93</option>
<option>Option 94</option>
<option>Option 95</option>
<option>Option 96</option>
<option>Option 97</option>
<option>Option 98</option>
<option>Option 99</option>
<option>Option 100</option>
</select>

115
tests/wpt/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-vlr.optional.html Normal file
View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native select[multiple] in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The select below should match the correct writing mode.</p>
<select multiple style="writing-mode: vertical-lr">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
<option>Option 11</option>
<option>Option 12</option>
<option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
<option>Option 21</option>
<option>Option 22</option>
<option>Option 23</option>
<option>Option 24</option>
<option>Option 25</option>
<option>Option 26</option>
<option>Option 27</option>
<option>Option 28</option>
<option>Option 29</option>
<option>Option 30</option>
<option>Option 31</option>
<option>Option 32</option>
<option>Option 33</option>
<option>Option 34</option>
<option>Option 35</option>
<option>Option 36</option>
<option>Option 37</option>
<option>Option 38</option>
<option>Option 39</option>
<option>Option 40</option>
<option>Option 41</option>
<option>Option 42</option>
<option>Option 43</option>
<option>Option 44</option>
<option>Option 45</option>
<option>Option 46</option>
<option>Option 47</option>
<option>Option 48</option>
<option>Option 49</option>
<option>Option 50</option>
<option>Option 51</option>
<option>Option 52</option>
<option>Option 53</option>
<option>Option 54</option>
<option>Option 55</option>
<option>Option 56</option>
<option>Option 57</option>
<option>Option 58</option>
<option>Option 59</option>
<option>Option 60</option>
<option>Option 61</option>
<option>Option 62</option>
<option>Option 63</option>
<option>Option 64</option>
<option>Option 65</option>
<option>Option 66</option>
<option>Option 67</option>
<option>Option 68</option>
<option>Option 69</option>
<option>Option 70</option>
<option>Option 71</option>
<option>Option 72</option>
<option>Option 73</option>
<option>Option 74</option>
<option>Option 75</option>
<option>Option 76</option>
<option>Option 77</option>
<option>Option 78</option>
<option>Option 79</option>
<option>Option 80</option>
<option>Option 81</option>
<option>Option 82</option>
<option>Option 83</option>
<option>Option 84</option>
<option>Option 85</option>
<option>Option 86</option>
<option>Option 87</option>
<option>Option 88</option>
<option>Option 89</option>
<option>Option 90</option>
<option>Option 91</option>
<option>Option 92</option>
<option>Option 93</option>
<option>Option 94</option>
<option>Option 95</option>
<option>Option 96</option>
<option>Option 97</option>
<option>Option 98</option>
<option>Option 99</option>
<option>Option 100</option>
</select>

115
tests/wpt/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-vrl.optional.html Normal file
View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native select[multiple] in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The select below should match the correct writing mode.</p>
<select multiple style="writing-mode: vertical-rl">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
<option>Option 11</option>
<option>Option 12</option>
<option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
<option>Option 21</option>
<option>Option 22</option>
<option>Option 23</option>
<option>Option 24</option>
<option>Option 25</option>
<option>Option 26</option>
<option>Option 27</option>
<option>Option 28</option>
<option>Option 29</option>
<option>Option 30</option>
<option>Option 31</option>
<option>Option 32</option>
<option>Option 33</option>
<option>Option 34</option>
<option>Option 35</option>
<option>Option 36</option>
<option>Option 37</option>
<option>Option 38</option>
<option>Option 39</option>
<option>Option 40</option>
<option>Option 41</option>
<option>Option 42</option>
<option>Option 43</option>
<option>Option 44</option>
<option>Option 45</option>
<option>Option 46</option>
<option>Option 47</option>
<option>Option 48</option>
<option>Option 49</option>
<option>Option 50</option>
<option>Option 51</option>
<option>Option 52</option>
<option>Option 53</option>
<option>Option 54</option>
<option>Option 55</option>
<option>Option 56</option>
<option>Option 57</option>
<option>Option 58</option>
<option>Option 59</option>
<option>Option 60</option>
<option>Option 61</option>
<option>Option 62</option>
<option>Option 63</option>
<option>Option 64</option>
<option>Option 65</option>
<option>Option 66</option>
<option>Option 67</option>
<option>Option 68</option>
<option>Option 69</option>
<option>Option 70</option>
<option>Option 71</option>
<option>Option 72</option>
<option>Option 73</option>
<option>Option 74</option>
<option>Option 75</option>
<option>Option 76</option>
<option>Option 77</option>
<option>Option 78</option>
<option>Option 79</option>
<option>Option 80</option>
<option>Option 81</option>
<option>Option 82</option>
<option>Option 83</option>
<option>Option 84</option>
<option>Option 85</option>
<option>Option 86</option>
<option>Option 87</option>
<option>Option 88</option>
<option>Option 89</option>
<option>Option 90</option>
<option>Option 91</option>
<option>Option 92</option>
<option>Option 93</option>
<option>Option 94</option>
<option>Option 95</option>
<option>Option 96</option>
<option>Option 97</option>
<option>Option 98</option>
<option>Option 99</option>
<option>Option 100</option>
</select>

115
tests/wpt/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-horizontal.optional.html Normal file
View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled select[multiple] in horizontal writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The select below should match the correct writing mode.</p>
<select multiple style="appearance: none">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
<option>Option 11</option>
<option>Option 12</option>
<option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
<option>Option 21</option>
<option>Option 22</option>
<option>Option 23</option>
<option>Option 24</option>
<option>Option 25</option>
<option>Option 26</option>
<option>Option 27</option>
<option>Option 28</option>
<option>Option 29</option>
<option>Option 30</option>
<option>Option 31</option>
<option>Option 32</option>
<option>Option 33</option>
<option>Option 34</option>
<option>Option 35</option>
<option>Option 36</option>
<option>Option 37</option>
<option>Option 38</option>
<option>Option 39</option>
<option>Option 40</option>
<option>Option 41</option>
<option>Option 42</option>
<option>Option 43</option>
<option>Option 44</option>
<option>Option 45</option>
<option>Option 46</option>
<option>Option 47</option>
<option>Option 48</option>
<option>Option 49</option>
<option>Option 50</option>
<option>Option 51</option>
<option>Option 52</option>
<option>Option 53</option>
<option>Option 54</option>
<option>Option 55</option>
<option>Option 56</option>
<option>Option 57</option>
<option>Option 58</option>
<option>Option 59</option>
<option>Option 60</option>
<option>Option 61</option>
<option>Option 62</option>
<option>Option 63</option>
<option>Option 64</option>
<option>Option 65</option>
<option>Option 66</option>
<option>Option 67</option>
<option>Option 68</option>
<option>Option 69</option>
<option>Option 70</option>
<option>Option 71</option>
<option>Option 72</option>
<option>Option 73</option>
<option>Option 74</option>
<option>Option 75</option>
<option>Option 76</option>
<option>Option 77</option>
<option>Option 78</option>
<option>Option 79</option>
<option>Option 80</option>
<option>Option 81</option>
<option>Option 82</option>
<option>Option 83</option>
<option>Option 84</option>
<option>Option 85</option>
<option>Option 86</option>
<option>Option 87</option>
<option>Option 88</option>
<option>Option 89</option>
<option>Option 90</option>
<option>Option 91</option>
<option>Option 92</option>
<option>Option 93</option>
<option>Option 94</option>
<option>Option 95</option>
<option>Option 96</option>
<option>Option 97</option>
<option>Option 98</option>
<option>Option 99</option>
<option>Option 100</option>
</select>

115
tests/wpt/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-vlr.optional.html Normal file
View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled select[multiple] in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The select below should match the correct writing mode.</p>
<select multiple style="writing-mode: vertical-lr; appearance: none">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
<option>Option 11</option>
<option>Option 12</option>
<option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
<option>Option 21</option>
<option>Option 22</option>
<option>Option 23</option>
<option>Option 24</option>
<option>Option 25</option>
<option>Option 26</option>
<option>Option 27</option>
<option>Option 28</option>
<option>Option 29</option>
<option>Option 30</option>
<option>Option 31</option>
<option>Option 32</option>
<option>Option 33</option>
<option>Option 34</option>
<option>Option 35</option>
<option>Option 36</option>
<option>Option 37</option>
<option>Option 38</option>
<option>Option 39</option>
<option>Option 40</option>
<option>Option 41</option>
<option>Option 42</option>
<option>Option 43</option>
<option>Option 44</option>
<option>Option 45</option>
<option>Option 46</option>
<option>Option 47</option>
<option>Option 48</option>
<option>Option 49</option>
<option>Option 50</option>
<option>Option 51</option>
<option>Option 52</option>
<option>Option 53</option>
<option>Option 54</option>
<option>Option 55</option>
<option>Option 56</option>
<option>Option 57</option>
<option>Option 58</option>
<option>Option 59</option>
<option>Option 60</option>
<option>Option 61</option>
<option>Option 62</option>
<option>Option 63</option>
<option>Option 64</option>
<option>Option 65</option>
<option>Option 66</option>
<option>Option 67</option>
<option>Option 68</option>
<option>Option 69</option>
<option>Option 70</option>
<option>Option 71</option>
<option>Option 72</option>
<option>Option 73</option>
<option>Option 74</option>
<option>Option 75</option>
<option>Option 76</option>
<option>Option 77</option>
<option>Option 78</option>
<option>Option 79</option>
<option>Option 80</option>
<option>Option 81</option>
<option>Option 82</option>
<option>Option 83</option>
<option>Option 84</option>
<option>Option 85</option>
<option>Option 86</option>
<option>Option 87</option>
<option>Option 88</option>
<option>Option 89</option>
<option>Option 90</option>
<option>Option 91</option>
<option>Option 92</option>
<option>Option 93</option>
<option>Option 94</option>
<option>Option 95</option>
<option>Option 96</option>
<option>Option 97</option>
<option>Option 98</option>
<option>Option 99</option>
<option>Option 100</option>
</select>

115
tests/wpt/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-vrl.optional.html Normal file
View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled select[multiple] in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The select below should match the correct writing mode.</p>
<select multiple style="writing-mode: vertical-rl; appearance: none">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
<option>Option 11</option>
<option>Option 12</option>
<option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
<option>Option 21</option>
<option>Option 22</option>
<option>Option 23</option>
<option>Option 24</option>
<option>Option 25</option>
<option>Option 26</option>
<option>Option 27</option>
<option>Option 28</option>
<option>Option 29</option>
<option>Option 30</option>
<option>Option 31</option>
<option>Option 32</option>
<option>Option 33</option>
<option>Option 34</option>
<option>Option 35</option>
<option>Option 36</option>
<option>Option 37</option>
<option>Option 38</option>
<option>Option 39</option>
<option>Option 40</option>
<option>Option 41</option>
<option>Option 42</option>
<option>Option 43</option>
<option>Option 44</option>
<option>Option 45</option>
<option>Option 46</option>
<option>Option 47</option>
<option>Option 48</option>
<option>Option 49</option>
<option>Option 50</option>
<option>Option 51</option>
<option>Option 52</option>
<option>Option 53</option>
<option>Option 54</option>
<option>Option 55</option>
<option>Option 56</option>
<option>Option 57</option>
<option>Option 58</option>
<option>Option 59</option>
<option>Option 60</option>
<option>Option 61</option>
<option>Option 62</option>
<option>Option 63</option>
<option>Option 64</option>
<option>Option 65</option>
<option>Option 66</option>
<option>Option 67</option>
<option>Option 68</option>
<option>Option 69</option>
<option>Option 70</option>
<option>Option 71</option>
<option>Option 72</option>
<option>Option 73</option>
<option>Option 74</option>
<option>Option 75</option>
<option>Option 76</option>
<option>Option 77</option>
<option>Option 78</option>
<option>Option 79</option>
<option>Option 80</option>
<option>Option 81</option>
<option>Option 82</option>
<option>Option 83</option>
<option>Option 84</option>
<option>Option 85</option>
<option>Option 86</option>
<option>Option 87</option>
<option>Option 88</option>
<option>Option 89</option>
<option>Option 90</option>
<option>Option 91</option>
<option>Option 92</option>
<option>Option 93</option>
<option>Option 94</option>
<option>Option 95</option>
<option>Option 96</option>
<option>Option 97</option>
<option>Option 98</option>
<option>Option 99</option>
<option>Option 100</option>
</select>

103
tests/wpt/web-platform-tests/css/css-writing-modes/forms/select-multiple-scrolling.optional.html Normal file
View file

@ -0,0 +1,103 @@
<!doctype html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area">
<title>Test &lt;select&gt; multiple attribute scroll progression</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<select multiple size="5"></select>
<script>
const select = document.querySelector("select");
for (let i = 0; i < 100; i++) {
const option = document.createElement("option");
option.textContent = `Option ${i + 1}`;
select.appendChild(option);
}
for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
if (!CSS.supports(`writing-mode: ${writingMode}`))
continue;
const scrollBlockAxis = (() => {
switch (writingMode) {
case "horizontal-tb":
return "scrollTop";
case "vertical-lr":
case "sideways-lr":
case "vertical-rl":
case "sideways-rl":
return "scrollLeft";
}
})();
const scrollInlineAxis = scrollBlockAxis === "scrollTop" ? "scrollLeft" : "scrollTop";
const isHorizontal = writingMode === "horizontal-tb";
const clientBlock = isHorizontal ? "clientHeight" : "clientWidth";
const clientInline = isHorizontal ? "clientWidth" : "clientHeight";
const scrollBlock = isHorizontal ? "scrollHeight" : "scrollWidth";
const scrollInline = isHorizontal ? "scrollWidth" : "scrollHeight";
test(t => {
select.scrollTop = select.scrollLeft = 0;
select.style.writingMode = writingMode;
t.add_cleanup(() => {
select.removeAttribute("style");
select.scrollTop = select.scrollLeft = 0;
});
assert_true(
select[scrollBlock] > select[clientBlock],
"select should be scrollable in block axis"
);
assert_equals(
select[scrollInline], select[clientInline],
"select should not be scrollable in inline axis"
);
assert_equals(
select[scrollBlockAxis], 0,
`scrolling is initially at block start for writing-mode: ${writingMode}`
);
const isReversedBlockFlowDirection = writingMode.endsWith("-rl");
select[scrollBlockAxis] = 100;
if (!isReversedBlockFlowDirection) {
assert_true(
select[scrollBlockAxis] > 0,
`Setting ${scrollBlockAxis} to a positive value of the list works for writing-mode: ${writingMode}`
);
} else {
assert_equals(
select[scrollBlockAxis], 0,
`Setting ${scrollBlockAxis} to a positive value of the list does not work for writing-mode: ${writingMode}`
);
}
select[scrollBlockAxis] = -100;
if (isReversedBlockFlowDirection) {
assert_true(
select[scrollBlockAxis] < 0,
`Setting ${scrollBlockAxis} to a negative value of the list works for writing-mode: ${writingMode}`
);
} else {
assert_equals(
select[scrollBlockAxis], 0,
`Setting ${scrollBlockAxis} to a negative value of the list does not work for writing-mode: ${writingMode}`
);
}
select[scrollInlineAxis] = 100;
assert_equals(
select[scrollInlineAxis], 0,
`setting ${scrollInlineAxis} to a positive value should not scroll for writing-mode: ${writingMode}`
);
select[scrollInlineAxis] = -100;
assert_equals(
select[scrollInlineAxis], 0,
`setting ${scrollInlineAxis} to a negative value should not scroll for writing-mode: ${writingMode}`
);
}, `select[multiple][style="writing-mode: ${writingMode}"] scrolls correctly`);
};
</script>

137
tests/wpt/web-platform-tests/css/css-writing-modes/forms/select-size-scrolling-and-sizing.optional.html Normal file
View file

@ -0,0 +1,137 @@
<!doctype html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area">
<title>Test &lt;select&gt; size attribute scroll progression and sizing</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<select size="5"></select>
<script>
const select = document.querySelector("select");
for (let i = 0; i < 100; i++) {
const option = document.createElement("option");
option.textContent = `Option ${i + 1}`;
select.appendChild(option);
}
for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
if (!CSS.supports(`writing-mode: ${writingMode}`))
continue;
const scrollBlockAxis = (() => {
switch (writingMode) {
case "horizontal-tb":
return "scrollTop";
case "vertical-lr":
case "sideways-lr":
case "vertical-rl":
case "sideways-rl":
return "scrollLeft";
}
})();
const scrollInlineAxis = scrollBlockAxis === "scrollTop" ? "scrollLeft" : "scrollTop";
const isHorizontal = writingMode === "horizontal-tb";
const clientBlock = isHorizontal ? "clientHeight" : "clientWidth";
const clientInline = isHorizontal ? "clientWidth" : "clientHeight";
const scrollBlock = isHorizontal ? "scrollHeight" : "scrollWidth";
const scrollInline = isHorizontal ? "scrollWidth" : "scrollHeight";
const select = document.querySelector("select");
test(t => {
select.scrollTop = select.scrollLeft = 0;
select.style.writingMode = writingMode;
t.add_cleanup(() => {
select.removeAttribute("style");
select.scrollTop = select.scrollLeft = 0;
});
assert_true(
select[scrollBlock] > select[clientBlock],
"select should be scrollable in block axis"
);
assert_equals(
select[scrollInline], select[clientInline],
"select should not be scrollable in inline axis"
);
assert_equals(
select[scrollBlockAxis], 0,
`scrolling is initially at block start for writing-mode: ${writingMode}`
);
const isReversedBlockFlowDirection = writingMode.endsWith("-rl");
select[scrollBlockAxis] = 100;
if (!isReversedBlockFlowDirection) {
assert_true(
select[scrollBlockAxis] > 0,
`Setting ${scrollBlockAxis} to a positive value of the list works for writing-mode: ${writingMode}`
);
} else {
assert_equals(
select[scrollBlockAxis], 0,
`Setting ${scrollBlockAxis} to a positive value of the list does not work for writing-mode: ${writingMode}`
);
}
select[scrollBlockAxis] = -100;
if (isReversedBlockFlowDirection) {
assert_true(
select[scrollBlockAxis] < 0,
`Setting ${scrollBlockAxis} to a negative value of the list works for writing-mode: ${writingMode}`
);
} else {
assert_equals(
select[scrollBlockAxis], 0,
`Setting ${scrollBlockAxis} to a negative value of the list does not work for writing-mode: ${writingMode}`
);
}
select[scrollInlineAxis] = 100;
assert_equals(
select[scrollInlineAxis], 0,
`setting ${scrollInlineAxis} to a positive value should not scroll for writing-mode: ${writingMode}`
);
select[scrollInlineAxis] = -100;
assert_equals(
select[scrollInlineAxis], 0,
`setting ${scrollInlineAxis} to a negative value should not scroll for writing-mode: ${writingMode}`
);
}, `select[size][style="writing-mode: ${writingMode}"] scrolls correctly`);
test(t => {
select.style.writingMode = writingMode;
t.add_cleanup(() => {
select.removeAttribute("style");
select.size = 5;
});
let prevBlockSize = select[clientBlock];
let prevInlineSize = select[clientInline];
select.size = 10;
assert_true(
select[clientBlock] > prevBlockSize,
`${clientBlock} increased when increasing size`
);
assert_equals(
select[clientInline], prevInlineSize,
`${clientInline} did not change when increasing size`
);
prevBlockSize = select[clientBlock];
prevInlineSize = select[clientInline];
select.size = 8;
assert_true(
select[clientBlock] < prevBlockSize,
`${clientBlock} decreased when decreasing size`
);
assert_equals(
select[clientInline], prevInlineSize,
`${clientInline} did not change when decreasing size`
);
}, `select[size][style="writing-mode: ${writingMode}"] sizing works correctly`);
};
</script>

44
tests/wpt/web-platform-tests/css/css-writing-modes/forms/text-input-block-size.optional.html Normal file
View file

@ -0,0 +1,44 @@
<!doctype html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-input-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>Test block-size of text-based inputs is consistent across writing-modes</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
input { appearance: none }
</style>
<input id="horizontalInput">
<input id="verticalInput">
<script>
for (const inputType of ["text", "email", "password", "search", "tel", "url", "number"]) {
horizontalInput.type = inputType;
verticalInput.type = inputType;
for (const writingMode of ["vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
if (!CSS.supports(`writing-mode: ${writingMode}`))
continue;
test(t => {
verticalInput.style.writingMode = writingMode;
t.add_cleanup(() => {
verticalInput.removeAttribute("style");
});
const verticalRect = verticalInput.getBoundingClientRect();
assert_true(
verticalRect.width < verticalRect.height,
"input has correct aspect ratio for default input size"
);
const horizontalRect = horizontalInput.getBoundingClientRect();
assert_equals(
Math.round(verticalRect.width),
Math.round(horizontalRect.height),
"width of vertical input matches height of horizontal input"
);
}, `Test input[type=${inputType}] block-size in writing-mode: ${writingMode}`);
}
}
</script>

14
tests/wpt/web-platform-tests/css/css-writing-modes/forms/textarea-appearance-native-horizontal.optional.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native textarea in horizontal writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The textarea below should match the correct writing mode.</p>
<textarea>Some sample text</textarea>

14
tests/wpt/web-platform-tests/css/css-writing-modes/forms/textarea-appearance-native-vlr.optional.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native textarea in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The textarea below should match the correct writing mode.</p>
<textarea style="writing-mode: vertical-lr">Some sample text</textarea>

14
tests/wpt/web-platform-tests/css/css-writing-modes/forms/textarea-appearance-native-vrl.optional.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native textarea in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The textarea below should match the correct writing mode.</p>
<textarea style="writing-mode: vertical-rl">Some sample text</textarea>

14
tests/wpt/web-platform-tests/css/css-writing-modes/forms/textarea-appearance-none-horizontal.optional.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled textarea in horizontal writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The textarea below should match the correct writing mode.</p>
<textarea style="appearance: none;">Some sample text</textarea>

14
tests/wpt/web-platform-tests/css/css-writing-modes/forms/textarea-appearance-none-vlr.optional.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled textarea in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The textarea below should match the correct writing mode.</p>
<textarea style="writing-mode: vertical-lr; appearance: none;">Some sample text</textarea>

14
tests/wpt/web-platform-tests/css/css-writing-modes/forms/textarea-appearance-none-vrl.optional.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled textarea in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The textarea below should match the correct writing mode.</p>
<textarea style="writing-mode: vertical-rl; appearance: none;">Some sample text</textarea>

105
tests/wpt/web-platform-tests/css/css-writing-modes/forms/textarea-rows-cols-sizing.html Normal file
View file

@ -0,0 +1,105 @@
<!doctype html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>Textarea rows/cols size mapping in different writing modes</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<textarea></textarea>
<script>
for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
if (!CSS.supports(`writing-mode: ${writingMode}`))
continue;
const isHorizontal = writingMode === "horizontal-tb";
const textarea = document.querySelector("textarea");
test(t => {
textarea.style.writingMode = writingMode;
t.add_cleanup(() => {
textarea.removeAttribute("style");
textarea.removeAttribute("rows");
});
const rowsDimension = isHorizontal ? "height" : "width";
const colsDimension = isHorizontal ? "width" : "height";
let previousRect = textarea.getBoundingClientRect();
textarea.rows = 10;
assert_equals(
textarea.getBoundingClientRect()[colsDimension],
previousRect[colsDimension],
`${colsDimension} shouldn't change when changing rows`
);
previousRect = textarea.getBoundingClientRect();
textarea.rows = 9;
assert_true(
textarea.getBoundingClientRect()[rowsDimension] < previousRect[rowsDimension],
`${rowsDimension} should decrease when decreasing rows`
);
assert_equals(
textarea.getBoundingClientRect()[colsDimension],
previousRect[colsDimension],
`${colsDimension} shouldn't change when changing rows`
);
previousRect = textarea.getBoundingClientRect();
textarea.rows = 11;
assert_true(
textarea.getBoundingClientRect()[rowsDimension] > previousRect[rowsDimension],
`${rowsDimension} should increase when increasing rows`
);
assert_equals(
textarea.getBoundingClientRect()[colsDimension],
previousRect[colsDimension],
`${colsDimension} shouldn't change when changing rows`
);
}, `textarea[style="writing-mode: ${writingMode}"] rows attribute changes the size correctly`);
test(t => {
textarea.style.writingMode = writingMode;
t.add_cleanup(() => {
textarea.removeAttribute("style");
textarea.removeAttribute("cols");
});
const rowsDimension = isHorizontal ? "height" : "width";
const colsDimension = isHorizontal ? "width" : "height";
let previousRect = textarea.getBoundingClientRect();
textarea.cols = 40;
assert_equals(
textarea.getBoundingClientRect()[rowsDimension],
previousRect[rowsDimension],
`${rowsDimension} shouldn't change when changing cols`
);
previousRect = textarea.getBoundingClientRect();
textarea.cols = 30;
assert_true(
textarea.getBoundingClientRect()[colsDimension] < previousRect[colsDimension],
`${colsDimension} should decrease when decreasing cols`
);
assert_equals(
textarea.getBoundingClientRect()[rowsDimension],
previousRect[rowsDimension],
`${rowsDimension} shouldn't change when changing cols`
);
previousRect = textarea.getBoundingClientRect();
textarea.cols = 50;
assert_true(
textarea.getBoundingClientRect()[colsDimension] > previousRect[colsDimension],
`${colsDimension} should increase when increasing cols`
);
assert_equals(
textarea.getBoundingClientRect()[rowsDimension],
previousRect[rowsDimension],
`${rowsDimension} shouldn't change when changing cols`
);
}, `textarea[style="writing-mode: ${writingMode}"] cols attribute changes the size correctly`);
};
</script>