mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-30 12:49:19 +00:00
LibWeb: Import WPT tests for :nth-child and :nth-last-child invalidation
This commit is contained in:
Aliaksandr Kalenik
Jelle Raaijmakers
parent
cfe3dbe99f
commit
5202ae26e0
Notes:
github-actions[bot]
2025-01-24 19:09:39 +00:00
Author: https://github.com/kalenikaliaksandr
Commit: 5202ae26e0
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3358
Reviewed-by: https://github.com/gmta ✅
24 changed files with 1362 additions and 0 deletions
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of S) with ancestor in S</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div style="color: green">Should be green</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,452 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of attribute) with a large DOM</title>
|
||||
<link rel="author" title="Bramus" href="https://www.bram.us/">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr hidden="hidden">
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>8</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>9</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>13</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>14</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>15</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>16</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>17</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>18</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>19</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>21</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>22</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>23</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>24</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>25</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>26</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>27</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>29</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>30</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>31</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>32</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>33</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>34</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>36</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>37</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>38</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>39</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>40</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>41</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>42</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>44</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>45</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>46</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>47</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>48</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>49</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>52</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>53</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>54</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>55</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>56</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>58</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>59</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>60</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>61</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>62</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>63</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>64</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>65</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>66</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>67</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>68</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>69</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>70</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>71</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>72</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>73</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>74</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>75</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>76</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>77</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>78</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>79</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>80</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>81</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>82</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>83</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>84</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>85</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>86</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>88</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>89</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>90</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>91</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>92</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>93</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>94</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>95</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>96</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>97</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>98</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>99</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>101</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>102</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>103</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>104</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>105</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>106</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>107</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>108</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>109</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>110</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>111</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>112</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>113</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>114</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>115</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>116</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>117</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>118</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>119</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>120</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>121</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>122</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>123</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>124</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>125</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>126</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>127</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>128</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>129</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>130</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>131</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>132</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>133</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>134</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>135</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>136</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>137</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>138</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>139</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>140</td>
|
||||
</tr>
|
||||
<tr style="background: lightgrey;">
|
||||
<td>141</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>142</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>143</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>144</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>145</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>146</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of attribute)</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p>Selectively ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of class)</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p>Selectively ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of :has(...))</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p>Selectively ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of class) as ancestor</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<div>
|
||||
<p>Not <span style="color: green">ignored</span></p>
|
||||
<p>Selectively <span>ignored<span></p>
|
||||
<p>Not <span>ignored</span></p>
|
||||
<p>Not <span style="color: green">ignored</span></p>
|
||||
<p>Not <span>ignored</span></p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Test Reference</title>
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Selectively ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of sibling)</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p>Selectively ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of class) when ancestor changes</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<div id="toggler">
|
||||
<p>Ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p style="color: green">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of class) when sibling changes</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Odd; used to be green, should not be since no sibling</p>
|
||||
<p>Even, so should not be green</p>
|
||||
<p>Odd, but no sibling, so should not be green</p>
|
||||
<p>Even, so should not be green</p>
|
||||
<p>Ignored</p>
|
||||
<p style="color: green">Odd, should be green</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of S) with ancestor in S</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-containing-ancestor-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
div:nth-child(odd of .a .b) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div id="toggler">
|
||||
<div>
|
||||
<div>
|
||||
<div class="b">Should be green</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
toggler.classList.toggle("a");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,462 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of attribute) with a large DOM</title>
|
||||
<link rel="author" title="Bramus" href="https://www.bram.us/">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-attr-largedom-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
tr:nth-child(even of :not([hidden])){
|
||||
background: lightgrey;
|
||||
}
|
||||
</style>
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr hidden="hidden">
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>8</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>13</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>14</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>15</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>16</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>17</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>18</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>21</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>22</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>23</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>24</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>25</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>26</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>27</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>30</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>31</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>32</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>33</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>34</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>36</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>38</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>39</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>40</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>41</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>42</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>44</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>46</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>47</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>48</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>49</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>53</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>54</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>55</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>56</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>58</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>59</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>60</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>61</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>62</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>63</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>64</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>65</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>66</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>67</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>68</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>69</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>70</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>71</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>72</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>73</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>74</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>75</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>76</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>77</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>78</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>79</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>80</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>81</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>82</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>83</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>84</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>85</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>86</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>88</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>89</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>90</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>91</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>92</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>93</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>94</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>95</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>96</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>97</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>98</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>99</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>101</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>102</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>103</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>104</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>105</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>106</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>107</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>108</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>109</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>110</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>111</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>112</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>113</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>114</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>115</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>116</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>117</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>118</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>119</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>120</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>121</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>122</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>123</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>124</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>125</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>126</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>127</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>128</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>129</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>130</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>131</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>132</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>133</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>134</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>135</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>136</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>137</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>138</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>139</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>140</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>141</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>142</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>143</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>144</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>145</td>
|
||||
</tr>
|
||||
<tr hidden="hidden">
|
||||
<td>146</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
document.querySelectorAll(`tbody tr:not([data-affiliation=google-llc"])`).forEach($tr => $tr.setAttribute('hidden', 'hidden'));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of attribute)</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-attr-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
p:nth-child(even of [attr="yes"]) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p attr="no">Ignored</p>
|
||||
<p attr="yes">Not ignored</p>
|
||||
<p attr="yes" id="toggler">Selectively ignored</p>
|
||||
<p attr="yes">Not ignored</p>
|
||||
<p attr="yes">Not ignored</p>
|
||||
<p attr="yes">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
toggler.setAttribute("attr", "no");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of class)</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-class-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
p:nth-child(even of .c) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c" id="toggler">Selectively ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
toggler.classList.toggle("c");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of :has(...))</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-has-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
p:nth-child(even of :has(.c)) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p>Not <span class="c">ignored</span></p>
|
||||
<p>Selectively <span><span><span class="c" id="toggler"></span></span></span>ignored</p>
|
||||
<p>Not <span class="c">ignored</span></p>
|
||||
<p>Not <span class="c">ignored</span></p>
|
||||
<p>Not <span class="c">ignored</span></p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
toggler.classList.toggle("c");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of ID prefix)</title>
|
||||
<link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-class-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
p:nth-child(even of [id^=t]) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p id="t1">Not ignored</p>
|
||||
<p id="t2">Selectively ignored</p>
|
||||
<p id="t3">Not ignored</p>
|
||||
<p id="t4">Not ignored</p>
|
||||
<p id="t5">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
t2.id = "new-id";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of IDs)</title>
|
||||
<link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-class-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
p:nth-child(even of #t1, #t2, #t3, #t4, #t5) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p id="t1">Not ignored</p>
|
||||
<p id="t2">Selectively ignored</p>
|
||||
<p id="t3">Not ignored</p>
|
||||
<p id="t4">Not ignored</p>
|
||||
<p id="t5">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
t2.id = "new-id";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of class) as ancestor</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-in-ancestor-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
p:nth-child(odd of .c) span {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p class="c">Not <span>ignored</span></p>
|
||||
<p class="c" id="toggler">Selectively <span>ignored<span></p>
|
||||
<p class="c">Not <span>ignored</span></p>
|
||||
<p class="c">Not <span>ignored</span></p>
|
||||
<p class="c">Not <span>ignored</span></p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
toggler.classList.toggle("c");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selectors Invalidation: :is(:nth-child(... of class))</title>
|
||||
<link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-class-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
p:is(:nth-child(even of .c)) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c" id="toggler">Selectively ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
toggler.classList.toggle("c");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of :is)</title>
|
||||
<link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-class-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
p:nth-child(even of :is(.c)) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p>Ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c" id="toggler">Selectively ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
toggler.classList.toggle("c");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of pseudo-class)</title>
|
||||
<link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-pseudo-class-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
p:nth-child(odd of :defined) {
|
||||
color: green;
|
||||
}
|
||||
|
||||
not-defined, my-element {
|
||||
display: block;
|
||||
margin-block: 1em;
|
||||
margin-inline: 0;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<not-defined>Ignored</not-defined>
|
||||
<not-defined>Ignored</not-defined>
|
||||
<p>Not ignored</p>
|
||||
<my-element>Selectively ignored</my-element>
|
||||
<p>Not ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<p>Not ignored</p>
|
||||
<not-defined>Ignored</not-defined>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
customElements.define("my-element", class MyElement extends HTMLElement{});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of sibling)</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-of-sibling-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
p:nth-child(even of .a + .b) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Ignored</p>
|
||||
<p class="a" id="toggler">Ignored</p>
|
||||
<p class="b">Selectively ignored</p>
|
||||
<p class="a">Ignored</p>
|
||||
<p class="b">Not ignored</p>
|
||||
<p class="a">Ignored</p>
|
||||
<p class="b">Not ignored</p>
|
||||
<p class="a">Ignored</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
toggler.classList.toggle("a");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of class) when ancestor changes</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-when-ancestor-changes-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
.ancestor :nth-child(even of .c) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div id="toggler">
|
||||
<p>Ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p class="c">Not ignored</p>
|
||||
<p>Ignored</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
toggler.classList.toggle("ancestor");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Selectors Invalidation: :nth-child(... of class) when sibling changes</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="sesse@chromium.org">
|
||||
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/invalidation/nth-child-when-sibling-changes-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
|
||||
<style>
|
||||
.sibling + :nth-child(odd of .c) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p class="sibling" id="toggler">Ignored</p>
|
||||
<p class="c">Odd; used to be green, should not be since no sibling</p>
|
||||
<p class="c">Even, so should not be green</p>
|
||||
<p class="c" class="sibling">Odd, but no sibling, so should not be green</p>
|
||||
<p class="c">Even, so should not be green</p>
|
||||
<p class="sibling">Ignored</p>
|
||||
<p class="c">Odd, should be green</p>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.offsetTop;
|
||||
toggler.classList.toggle("sibling");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue