mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-21 15:10:19 +00:00
LibWeb: Import a bunch of :has() selector tests from WPT
This commit is contained in:
Andreas Kling
Andreas Kling
parent
9e080e197c
commit
a640fcc693
Notes:
github-actions[bot]
2024-10-27 12:34:43 +00:00
Author: https://github.com/awesomekling Commit: https://github.com/LadybirdBrowser/ladybird/commit/a640fcc693c Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1997
44 changed files with 4493 additions and 0 deletions
|
|
@ -0,0 +1,24 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 13 tests
|
||||
|
||||
12 Pass
|
||||
1 Fail
|
||||
Details
|
||||
Result Test Name MessagePass :has(:scope) matches expected elements on scope1
|
||||
Pass :has(:scope .c) matches expected elements on scope1
|
||||
Pass :has(.a :scope) matches expected elements on scope1
|
||||
Fail .a:has(:scope) .c matches expected elements on scope1 assert_equals: expected "d02,d03" but got ""
|
||||
Pass .a:has(:scope) .c and :is(.a :scope .c) returns same elements on scope1
|
||||
Pass .a:has(:scope) .c matches expected elements on scope2
|
||||
Pass .a:has(:scope) .c and :is(.a :scope .c) returns same elements on scope2
|
||||
Pass .c:has(:is(:scope .d)) matches expected elements on scope1
|
||||
Pass .c:has(:is(:scope .d)) and :scope .c:has(.d) returns same elements on scope1
|
||||
Pass .c:has(:is(:scope .d)) and .c:has(.d) returns same elements on scope1
|
||||
Pass .c:has(:is(:scope .d)) matches expected elements on scope2
|
||||
Pass .c:has(:is(:scope .d)) and :scope .c:has(.d) returns same elements on scope2
|
||||
Pass .c:has(:is(:scope .d)) and .c:has(.d) returns same elements on scope2
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 18 tests
|
||||
|
||||
18 Pass
|
||||
Details
|
||||
Result Test Name MessagePass :has(#a) matches expected elements
|
||||
Pass :has(.ancestor) matches expected elements
|
||||
Pass :has(.target) matches expected elements
|
||||
Pass :has(.descendant) matches expected elements
|
||||
Pass .parent:has(.target) matches expected elements
|
||||
Pass :has(.sibling ~ .target) matches expected elements
|
||||
Pass .parent:has(.sibling ~ .target) matches expected elements
|
||||
Pass :has(:is(.target ~ .sibling .descendant)) matches expected elements
|
||||
Pass .parent:has(:is(.target ~ .sibling .descendant)) matches expected elements
|
||||
Pass .sibling:has(.descendant) ~ .target matches expected elements
|
||||
Pass :has(> .parent) matches expected elements
|
||||
Pass :has(> .target) matches expected elements
|
||||
Pass :has(> .parent, > .target) matches expected elements
|
||||
Pass :has(+ #h) matches expected elements
|
||||
Pass .parent:has(~ #h) matches expected elements
|
||||
Pass .sibling:has(.descendant) matches expected element
|
||||
Pass closest(.ancestor:has(.descendant)) returns expected element
|
||||
Pass :has(.target ~ .sibling .descendant) matches expectedly
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 12 tests
|
||||
|
||||
12 Pass
|
||||
Details
|
||||
Result Test Name MessagePass :has(child) matches expectedly
|
||||
Pass :has(> child) matches expectedly
|
||||
Pass :has(descendant) matches expectedly
|
||||
Pass :has(> descendant) matches expectedly
|
||||
Pass :has(~ direct_sibling) matches expectedly
|
||||
Pass :has(+ direct_sibling) matches expectedly
|
||||
Pass :has(~ indirect_sibling) matches expectedly
|
||||
Pass :has(+ indirect_sibling) matches expectedly
|
||||
Pass :has(*) matches expectedly
|
||||
Pass :has(> *) matches expectedly
|
||||
Pass :has(~ *) matches expectedly
|
||||
Pass :has(+ *) matches expectedly
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 35 tests
|
||||
|
||||
35 Pass
|
||||
Details
|
||||
Result Test Name MessagePass .x:has(.a) matches expected elements
|
||||
Pass .x:has(.a > .b) matches expected elements
|
||||
Pass .x:has(.a .b) matches expected elements
|
||||
Pass .x:has(.a + .b) matches expected elements
|
||||
Pass .x:has(.a ~ .b) matches expected elements
|
||||
Pass .x:has(> .a) matches expected elements
|
||||
Pass .x:has(> .a > .b) matches expected elements
|
||||
Pass .x:has(> .a .b) matches expected elements
|
||||
Pass .x:has(> .a + .b) matches expected elements
|
||||
Pass .x:has(> .a ~ .b) matches expected elements
|
||||
Pass .x:has(+ .a) matches expected elements
|
||||
Pass .x:has(+ .a > .b) matches expected elements
|
||||
Pass .x:has(+ .a .b) matches expected elements
|
||||
Pass .x:has(+ .a + .b) matches expected elements
|
||||
Pass .x:has(+ .a ~ .b) matches expected elements
|
||||
Pass .x:has(~ .a) matches expected elements
|
||||
Pass .x:has(~ .a > .b) matches expected elements
|
||||
Pass .x:has(~ .a .b) matches expected elements
|
||||
Pass .x:has(~ .a + .b) matches expected elements
|
||||
Pass .x:has(~ .a + .b > .c) matches expected elements
|
||||
Pass .x:has(~ .a + .b .c) matches expected elements
|
||||
Pass .x:has(.d .e) matches expected elements
|
||||
Pass .x:has(.d .e) .f matches expected elements
|
||||
Pass .x:has(> .d) matches expected elements
|
||||
Pass .x:has(> .d) .f matches expected elements
|
||||
Pass .x:has(~ .d ~ .e) matches expected elements
|
||||
Pass .x:has(~ .d ~ .e) ~ .f matches expected elements
|
||||
Pass .x:has(+ .d ~ .e) matches expected elements
|
||||
Pass .x:has(+ .d ~ .e) ~ .f matches expected elements
|
||||
Pass .y:has(> .g .h) matches expected elements
|
||||
Pass .y:has(.g .h) matches expected elements
|
||||
Pass .y:has(> .g .h) .i matches expected elements
|
||||
Pass .y:has(.g .h) .i matches expected elements
|
||||
Pass .d .x:has(.e) matches expected elements
|
||||
Pass .d ~ .x:has(~ .e) matches expected elements
|
||||
|
|
@ -0,0 +1 @@
|
|||
PASS
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 8 tests
|
||||
|
||||
8 Fail
|
||||
Details
|
||||
Result Test Name MessageFail :has(#foo) wins over :has(.foo) assert_equals: expected "PASS" but got ""
|
||||
Fail :has(span#foo) wins over :has(#foo) assert_equals: expected "PASS" but got ""
|
||||
Fail :has(.bar, #foo) has same specificity as :has(#foo, .bar) assert_equals: expected "PASS" but got ""
|
||||
Fail :has(.bar, #foo) wins over :has(.foo, .bar) assert_equals: expected "PASS" but got ""
|
||||
Fail :has(span + span) wins over :has(span) assert_equals: expected "PASS" but got ""
|
||||
Fail :has(span, li, p) wins over :has(span, lo, p) assert_equals: expected "PASS" but got ""
|
||||
Fail latter .baz wins over :has(.foo) assert_equals: expected "PASS" but got ""
|
||||
Fail latter :has(.foo) wins over .baz assert_equals: expected "PASS" but got ""
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 12 tests
|
||||
|
||||
12 Pass
|
||||
Details
|
||||
Result Test Name MessagePass add .test to trigger1 - check subject1_1
|
||||
Pass add .test to trigger1 - check subject1_2
|
||||
Pass remove .test from trigger1 - check subject1_1
|
||||
Pass remove .test from trigger1 - check subject1_2
|
||||
Pass add .test to trigger2 - check subject2_1
|
||||
Pass add .test to trigger2 - check subject2_2
|
||||
Pass remove .test from trigger2 - check subject2_1
|
||||
Pass remove .test from trigger2 - check subject2_2
|
||||
Pass add .test to trigger3 - check subject3_1
|
||||
Pass add .test to trigger3 - check subject3_2
|
||||
Pass remove .test from trigger3 - check subject3_1
|
||||
Pass remove .test from trigger3 - check subject3_2
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 295 tests
|
||||
|
||||
295 Pass
|
||||
Details
|
||||
Result Test Name MessagePass Initial color
|
||||
Pass add .test to previous_sibling
|
||||
Pass remove .test from previous_sibling
|
||||
Pass add .test to previous_sibling_child
|
||||
Pass remove .test from previous_sibling_child
|
||||
Pass add .test to previous_sibling_descendant
|
||||
Pass remove .test from previous_sibling_descendant
|
||||
Pass add .test to subject
|
||||
Pass remove .test from subject
|
||||
Pass add .test to next_sibling
|
||||
Pass remove .test from next_sibling
|
||||
Pass add .test to next_sibling_child
|
||||
Pass remove .test from next_sibling_child
|
||||
Pass add .test to next_sibling_descendant
|
||||
Pass remove .test from next_sibling_descendant
|
||||
Pass insert element div.test before previous_sibling
|
||||
Pass remove the class 'test' from the element inserted before previous_sibling
|
||||
Pass add the class 'test' again to the element inserted before previous_sibling
|
||||
Pass remove element div.test before previous_sibling
|
||||
Pass insert element div before previous_sibling
|
||||
Pass add the class 'test' to the element inserted again before previous_sibling
|
||||
Pass remove the class 'test' from the element inserted again before previous_sibling
|
||||
Pass remove element div before previous_sibling
|
||||
Pass insert element div[test_attr] before previous_sibling
|
||||
Pass remove element div[test_attr] before previous_sibling
|
||||
Pass insert element div.test before previous_sibling_child
|
||||
Pass remove the class 'test' from the element inserted before previous_sibling_child
|
||||
Pass add the class 'test' again to the element inserted before previous_sibling_child
|
||||
Pass remove element div.test before previous_sibling_child
|
||||
Pass insert element div before previous_sibling_child
|
||||
Pass add the class 'test' to the element inserted again before previous_sibling_child
|
||||
Pass remove the class 'test' from the element inserted again before previous_sibling_child
|
||||
Pass remove element div before previous_sibling_child
|
||||
Pass insert element div[test_attr] before previous_sibling_child
|
||||
Pass remove element div[test_attr] before previous_sibling_child
|
||||
Pass insert element div.test before previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted before previous_sibling_descendant
|
||||
Pass add the class 'test' again to the element inserted before previous_sibling_descendant
|
||||
Pass remove element div.test before previous_sibling_descendant
|
||||
Pass insert element div before previous_sibling_descendant
|
||||
Pass add the class 'test' to the element inserted again before previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted again before previous_sibling_descendant
|
||||
Pass remove element div before previous_sibling_descendant
|
||||
Pass insert element div[test_attr] before previous_sibling_descendant
|
||||
Pass remove element div[test_attr] before previous_sibling_descendant
|
||||
Pass insert element div.test before subject
|
||||
Pass remove the class 'test' from the element inserted before subject
|
||||
Pass add the class 'test' again to the element inserted before subject
|
||||
Pass remove element div.test before subject
|
||||
Pass insert element div before subject
|
||||
Pass add the class 'test' to the element inserted again before subject
|
||||
Pass remove the class 'test' from the element inserted again before subject
|
||||
Pass remove element div before subject
|
||||
Pass insert element div[test_attr] before subject
|
||||
Pass remove element div[test_attr] before subject
|
||||
Pass insert element div.test before next_sibling
|
||||
Pass remove the class 'test' from the element inserted before next_sibling
|
||||
Pass add the class 'test' again to the element inserted before next_sibling
|
||||
Pass remove element div.test before next_sibling
|
||||
Pass insert element div before next_sibling
|
||||
Pass add the class 'test' to the element inserted again before next_sibling
|
||||
Pass remove the class 'test' from the element inserted again before next_sibling
|
||||
Pass remove element div before next_sibling
|
||||
Pass insert element div[test_attr] before next_sibling
|
||||
Pass remove element div[test_attr] before next_sibling
|
||||
Pass insert element div.test before next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted before next_sibling_child
|
||||
Pass add the class 'test' again to the element inserted before next_sibling_child
|
||||
Pass remove element div.test before next_sibling_child
|
||||
Pass insert element div before next_sibling_child
|
||||
Pass add the class 'test' to the element inserted again before next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted again before next_sibling_child
|
||||
Pass remove element div before next_sibling_child
|
||||
Pass insert element div[test_attr] before next_sibling_child
|
||||
Pass remove element div[test_attr] before next_sibling_child
|
||||
Pass insert element div.test before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted before next_sibling_descendant
|
||||
Pass add the class 'test' again to the element inserted before next_sibling_descendant
|
||||
Pass remove element div.test before next_sibling_descendant
|
||||
Pass insert element div before next_sibling_descendant
|
||||
Pass add the class 'test' to the element inserted again before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted again before next_sibling_descendant
|
||||
Pass remove element div before next_sibling_descendant
|
||||
Pass insert element div[test_attr] before next_sibling_descendant
|
||||
Pass remove element div[test_attr] before next_sibling_descendant
|
||||
Pass insert element div.test after previous_sibling
|
||||
Pass remove the class 'test' from the element inserted after previous_sibling
|
||||
Pass add the class 'test' again to the element inserted after previous_sibling
|
||||
Pass remove element div.test after previous_sibling
|
||||
Pass insert element div after previous_sibling
|
||||
Pass add the class 'test' to the element inserted again after previous_sibling
|
||||
Pass remove the class 'test' from the element inserted again after previous_sibling
|
||||
Pass remove element div after previous_sibling
|
||||
Pass insert element div[test_attr] after previous_sibling
|
||||
Pass remove element div[test_attr] after previous_sibling
|
||||
Pass insert element div.test after previous_sibling_child
|
||||
Pass remove the class 'test' from the element inserted after previous_sibling_child
|
||||
Pass add the class 'test' again to the element inserted after previous_sibling_child
|
||||
Pass remove element div.test after previous_sibling_child
|
||||
Pass insert element div after previous_sibling_child
|
||||
Pass add the class 'test' to the element inserted again after previous_sibling_child
|
||||
Pass remove the class 'test' from the element inserted again after previous_sibling_child
|
||||
Pass remove element div after previous_sibling_child
|
||||
Pass insert element div[test_attr] after previous_sibling_child
|
||||
Pass remove element div[test_attr] after previous_sibling_child
|
||||
Pass insert element div.test after previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted after previous_sibling_descendant
|
||||
Pass add the class 'test' again to the element inserted after previous_sibling_descendant
|
||||
Pass remove element div.test after previous_sibling_descendant
|
||||
Pass insert element div after previous_sibling_descendant
|
||||
Pass add the class 'test' to the element inserted again after previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted again after previous_sibling_descendant
|
||||
Pass remove element div after previous_sibling_descendant
|
||||
Pass insert element div[test_attr] after previous_sibling_descendant
|
||||
Pass remove element div[test_attr] after previous_sibling_descendant
|
||||
Pass insert element div.test after subject
|
||||
Pass remove the class 'test' from the element inserted after subject
|
||||
Pass add the class 'test' again to the element inserted after subject
|
||||
Pass remove element div.test after subject
|
||||
Pass insert element div after subject
|
||||
Pass add the class 'test' to the element inserted again after subject
|
||||
Pass remove the class 'test' from the element inserted again after subject
|
||||
Pass remove element div after subject
|
||||
Pass insert element div[test_attr] after subject
|
||||
Pass remove element div[test_attr] after subject
|
||||
Pass insert element div.test after next_sibling
|
||||
Pass remove the class 'test' from the element inserted after next_sibling
|
||||
Pass add the class 'test' again to the element inserted after next_sibling
|
||||
Pass remove element div.test after next_sibling
|
||||
Pass insert element div after next_sibling
|
||||
Pass add the class 'test' to the element inserted again after next_sibling
|
||||
Pass remove the class 'test' from the element inserted again after next_sibling
|
||||
Pass remove element div after next_sibling
|
||||
Pass insert element div[test_attr] after next_sibling
|
||||
Pass remove element div[test_attr] after next_sibling
|
||||
Pass insert element div.test after next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted after next_sibling_child
|
||||
Pass add the class 'test' again to the element inserted after next_sibling_child
|
||||
Pass remove element div.test after next_sibling_child
|
||||
Pass insert element div after next_sibling_child
|
||||
Pass add the class 'test' to the element inserted again after next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted again after next_sibling_child
|
||||
Pass remove element div after next_sibling_child
|
||||
Pass insert element div[test_attr] after next_sibling_child
|
||||
Pass remove element div[test_attr] after next_sibling_child
|
||||
Pass insert element div.test after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted after next_sibling_descendant
|
||||
Pass add the class 'test' again to the element inserted after next_sibling_descendant
|
||||
Pass remove element div.test after next_sibling_descendant
|
||||
Pass insert element div after next_sibling_descendant
|
||||
Pass add the class 'test' to the element inserted again after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted again after next_sibling_descendant
|
||||
Pass remove element div after next_sibling_descendant
|
||||
Pass insert element div[test_attr] after next_sibling_descendant
|
||||
Pass remove element div[test_attr] after next_sibling_descendant
|
||||
Pass insert tree div>div.test before previous_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted before previous_sibling
|
||||
Pass add the class 'test' again to the element in the tree inserted before previous_sibling
|
||||
Pass remove tree div>div.test before previous_sibling
|
||||
Pass insert tree div>div before previous_sibling
|
||||
Pass add the class 'test' to the element in the tree inserted again before previous_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted again before previous_sibling
|
||||
Pass remove tree div>div before previous_sibling
|
||||
Pass insert element div>div[test_attr] before previous_sibling
|
||||
Pass remove element div>div[test_attr] before previous_sibling
|
||||
Pass insert tree div>div.test before previous_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted before previous_sibling_child
|
||||
Pass add the class 'test' again to the element in the tree inserted before previous_sibling_child
|
||||
Pass remove tree div>div.test before previous_sibling_child
|
||||
Pass insert tree div>div before previous_sibling_child
|
||||
Pass add the class 'test' to the element in the tree inserted again before previous_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again before previous_sibling_child
|
||||
Pass remove tree div>div before previous_sibling_child
|
||||
Pass insert element div>div[test_attr] before previous_sibling_child
|
||||
Pass remove element div>div[test_attr] before previous_sibling_child
|
||||
Pass insert tree div>div.test before previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted before previous_sibling_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted before previous_sibling_descendant
|
||||
Pass remove tree div>div.test before previous_sibling_descendant
|
||||
Pass insert tree div>div before previous_sibling_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again before previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again before previous_sibling_descendant
|
||||
Pass remove tree div>div before previous_sibling_descendant
|
||||
Pass insert element div>div[test_attr] before previous_sibling_descendant
|
||||
Pass remove element div>div[test_attr] before previous_sibling_descendant
|
||||
Pass insert tree div>div.test before subject
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject
|
||||
Pass remove tree div>div.test before subject
|
||||
Pass insert tree div>div before subject
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject
|
||||
Pass remove tree div>div before subject
|
||||
Pass insert element div>div[test_attr] before subject
|
||||
Pass remove element div>div[test_attr] before subject
|
||||
Pass insert tree div>div.test before next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted before next_sibling
|
||||
Pass add the class 'test' again to the element in the tree inserted before next_sibling
|
||||
Pass remove tree div>div.test before next_sibling
|
||||
Pass insert tree div>div before next_sibling
|
||||
Pass add the class 'test' to the element in the tree inserted again before next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted again before next_sibling
|
||||
Pass remove tree div>div before next_sibling
|
||||
Pass insert element div>div[test_attr] before next_sibling
|
||||
Pass remove element div>div[test_attr] before next_sibling
|
||||
Pass insert tree div>div.test before next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted before next_sibling_child
|
||||
Pass add the class 'test' again to the element in the tree inserted before next_sibling_child
|
||||
Pass remove tree div>div.test before next_sibling_child
|
||||
Pass insert tree div>div before next_sibling_child
|
||||
Pass add the class 'test' to the element in the tree inserted again before next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again before next_sibling_child
|
||||
Pass remove tree div>div before next_sibling_child
|
||||
Pass insert element div>div[test_attr] before next_sibling_child
|
||||
Pass remove element div>div[test_attr] before next_sibling_child
|
||||
Pass insert tree div>div.test before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted before next_sibling_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted before next_sibling_descendant
|
||||
Pass remove tree div>div.test before next_sibling_descendant
|
||||
Pass insert tree div>div before next_sibling_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again before next_sibling_descendant
|
||||
Pass remove tree div>div before next_sibling_descendant
|
||||
Pass insert element div>div[test_attr] before next_sibling_descendant
|
||||
Pass remove element div>div[test_attr] before next_sibling_descendant
|
||||
Pass insert tree div>div.test after previous_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted after previous_sibling
|
||||
Pass add the class 'test' again to the element in the tree inserted after previous_sibling
|
||||
Pass remove tree div>div.test after previous_sibling
|
||||
Pass insert tree div>div after previous_sibling
|
||||
Pass add the class 'test' to the element in the tree inserted again after previous_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted again after previous_sibling
|
||||
Pass remove tree div>div after previous_sibling
|
||||
Pass insert element div>div[test_attr] after previous_sibling
|
||||
Pass remove element div>div[test_attr] after previous_sibling
|
||||
Pass insert tree div>div.test after previous_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted after previous_sibling_child
|
||||
Pass add the class 'test' again to the element in the tree inserted after previous_sibling_child
|
||||
Pass remove tree div>div.test after previous_sibling_child
|
||||
Pass insert tree div>div after previous_sibling_child
|
||||
Pass add the class 'test' to the element in the tree inserted again after previous_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again after previous_sibling_child
|
||||
Pass remove tree div>div after previous_sibling_child
|
||||
Pass insert element div>div[test_attr] after previous_sibling_child
|
||||
Pass remove element div>div[test_attr] after previous_sibling_child
|
||||
Pass insert tree div>div.test after previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted after previous_sibling_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted after previous_sibling_descendant
|
||||
Pass remove tree div>div.test after previous_sibling_descendant
|
||||
Pass insert tree div>div after previous_sibling_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again after previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again after previous_sibling_descendant
|
||||
Pass remove tree div>div after previous_sibling_descendant
|
||||
Pass insert element div>div[test_attr] after previous_sibling_descendant
|
||||
Pass remove element div>div[test_attr] after previous_sibling_descendant
|
||||
Pass insert tree div>div.test after subject
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject
|
||||
Pass remove tree div>div.test after subject
|
||||
Pass insert tree div>div after subject
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject
|
||||
Pass remove tree div>div after subject
|
||||
Pass insert element div>div[test_attr] after subject
|
||||
Pass remove element div>div[test_attr] after subject
|
||||
Pass insert tree div>div.test after next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted after next_sibling
|
||||
Pass add the class 'test' again to the element in the tree inserted after next_sibling
|
||||
Pass remove tree div>div.test after next_sibling
|
||||
Pass insert tree div>div after next_sibling
|
||||
Pass add the class 'test' to the element in the tree inserted again after next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted again after next_sibling
|
||||
Pass remove tree div>div after next_sibling
|
||||
Pass insert element div>div[test_attr] after next_sibling
|
||||
Pass remove element div>div[test_attr] after next_sibling
|
||||
Pass insert tree div>div.test after next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted after next_sibling_child
|
||||
Pass add the class 'test' again to the element in the tree inserted after next_sibling_child
|
||||
Pass remove tree div>div.test after next_sibling_child
|
||||
Pass insert tree div>div after next_sibling_child
|
||||
Pass add the class 'test' to the element in the tree inserted again after next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again after next_sibling_child
|
||||
Pass remove tree div>div after next_sibling_child
|
||||
Pass insert element div>div[test_attr] after next_sibling_child
|
||||
Pass remove element div>div[test_attr] after next_sibling_child
|
||||
Pass insert tree div>div.test after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted after next_sibling_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted after next_sibling_descendant
|
||||
Pass remove tree div>div.test after next_sibling_descendant
|
||||
Pass insert tree div>div after next_sibling_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again after next_sibling_descendant
|
||||
Pass remove tree div>div after next_sibling_descendant
|
||||
Pass insert element div>div[test_attr] after next_sibling_descendant
|
||||
Pass remove element div>div[test_attr] after next_sibling_descendant
|
||||
|
|
@ -0,0 +1,347 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 337 tests
|
||||
|
||||
337 Pass
|
||||
Details
|
||||
Result Test Name MessagePass Initial color
|
||||
Pass add .test to subject_ancestor
|
||||
Pass remove .test from subject_ancestor
|
||||
Pass add .test to subject_parent
|
||||
Pass remove .test from subject_parent
|
||||
Pass add .test to subject
|
||||
Pass remove .test from subject
|
||||
Pass add .test to subject_child
|
||||
Pass remove .test from subject_child
|
||||
Pass add .test to subject_descendant
|
||||
Pass remove .test from subject_descendant
|
||||
Pass add .test to next_sibling
|
||||
Pass remove .test from next_sibling
|
||||
Pass add .test to next_sibling_child
|
||||
Pass remove .test from next_sibling_child
|
||||
Pass add .test to next_sibling_descendant
|
||||
Pass remove .test from next_sibling_descendant
|
||||
Pass insert element div.test before subject_ancestor
|
||||
Pass remove the class 'test' from the element inserted before subject_ancestor
|
||||
Pass add the class 'test' again to the element inserted before subject_ancestor
|
||||
Pass remove element div.test before subject_ancestor
|
||||
Pass insert element div before subject_ancestor
|
||||
Pass add the class 'test' to the element inserted again before subject_ancestor
|
||||
Pass remove the class 'test' from the element inserted again before subject_ancestor
|
||||
Pass remove element div before subject_ancestor
|
||||
Pass insert element div[test_attr] before subject_ancestor
|
||||
Pass remove element div[test_attr] before subject_ancestor
|
||||
Pass insert element div.test before subject_parent
|
||||
Pass remove the class 'test' from the element inserted before subject_parent
|
||||
Pass add the class 'test' again to the element inserted before subject_parent
|
||||
Pass remove element div.test before subject_parent
|
||||
Pass insert element div before subject_parent
|
||||
Pass add the class 'test' to the element inserted again before subject_parent
|
||||
Pass remove the class 'test' from the element inserted again before subject_parent
|
||||
Pass remove element div before subject_parent
|
||||
Pass insert element div[test_attr] before subject_parent
|
||||
Pass remove element div[test_attr] before subject_parent
|
||||
Pass insert element div.test before subject
|
||||
Pass remove the class 'test' from the element inserted before subject
|
||||
Pass add the class 'test' again to the element inserted before subject
|
||||
Pass remove element div.test before subject
|
||||
Pass insert element div before subject
|
||||
Pass add the class 'test' to the element inserted again before subject
|
||||
Pass remove the class 'test' from the element inserted again before subject
|
||||
Pass remove element div before subject
|
||||
Pass insert element div[test_attr] before subject
|
||||
Pass remove element div[test_attr] before subject
|
||||
Pass insert element div.test before subject_child
|
||||
Pass remove the class 'test' from the element inserted before subject_child
|
||||
Pass add the class 'test' again to the element inserted before subject_child
|
||||
Pass remove element div.test before subject_child
|
||||
Pass insert element div before subject_child
|
||||
Pass add the class 'test' to the element inserted again before subject_child
|
||||
Pass remove the class 'test' from the element inserted again before subject_child
|
||||
Pass remove element div before subject_child
|
||||
Pass insert element div[test_attr] before subject_child
|
||||
Pass remove element div[test_attr] before subject_child
|
||||
Pass insert element div.test before subject_descendant
|
||||
Pass remove the class 'test' from the element inserted before subject_descendant
|
||||
Pass add the class 'test' again to the element inserted before subject_descendant
|
||||
Pass remove element div.test before subject_descendant
|
||||
Pass insert element div before subject_descendant
|
||||
Pass add the class 'test' to the element inserted again before subject_descendant
|
||||
Pass remove the class 'test' from the element inserted again before subject_descendant
|
||||
Pass remove element div before subject_descendant
|
||||
Pass insert element div[test_attr] before subject_descendant
|
||||
Pass remove element div[test_attr] before subject_descendant
|
||||
Pass insert element div.test before next_sibling
|
||||
Pass remove the class 'test' from the element inserted before next_sibling
|
||||
Pass add the class 'test' again to the element inserted before next_sibling
|
||||
Pass remove element div.test before next_sibling
|
||||
Pass insert element div before next_sibling
|
||||
Pass add the class 'test' to the element inserted again before next_sibling
|
||||
Pass remove the class 'test' from the element inserted again before next_sibling
|
||||
Pass remove element div before next_sibling
|
||||
Pass insert element div[test_attr] before next_sibling
|
||||
Pass remove element div[test_attr] before next_sibling
|
||||
Pass insert element div.test before next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted before next_sibling_child
|
||||
Pass add the class 'test' again to the element inserted before next_sibling_child
|
||||
Pass remove element div.test before next_sibling_child
|
||||
Pass insert element div before next_sibling_child
|
||||
Pass add the class 'test' to the element inserted again before next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted again before next_sibling_child
|
||||
Pass remove element div before next_sibling_child
|
||||
Pass insert element div[test_attr] before next_sibling_child
|
||||
Pass remove element div[test_attr] before next_sibling_child
|
||||
Pass insert element div.test before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted before next_sibling_descendant
|
||||
Pass add the class 'test' again to the element inserted before next_sibling_descendant
|
||||
Pass remove element div.test before next_sibling_descendant
|
||||
Pass insert element div before next_sibling_descendant
|
||||
Pass add the class 'test' to the element inserted again before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted again before next_sibling_descendant
|
||||
Pass remove element div before next_sibling_descendant
|
||||
Pass insert element div[test_attr] before next_sibling_descendant
|
||||
Pass remove element div[test_attr] before next_sibling_descendant
|
||||
Pass insert element div.test after subject_ancestor
|
||||
Pass remove the class 'test' from the element inserted after subject_ancestor
|
||||
Pass add the class 'test' again to the element inserted after subject_ancestor
|
||||
Pass remove element div.test after subject_ancestor
|
||||
Pass insert element div after subject_ancestor
|
||||
Pass add the class 'test' to the element inserted again after subject_ancestor
|
||||
Pass remove the class 'test' from the element inserted again after subject_ancestor
|
||||
Pass remove element div after subject_ancestor
|
||||
Pass insert element div[test_attr] after subject_ancestor
|
||||
Pass remove element div[test_attr] after subject_ancestor
|
||||
Pass insert element div.test after subject_parent
|
||||
Pass remove the class 'test' from the element inserted after subject_parent
|
||||
Pass add the class 'test' again to the element inserted after subject_parent
|
||||
Pass remove element div.test after subject_parent
|
||||
Pass insert element div after subject_parent
|
||||
Pass add the class 'test' to the element inserted again after subject_parent
|
||||
Pass remove the class 'test' from the element inserted again after subject_parent
|
||||
Pass remove element div after subject_parent
|
||||
Pass insert element div[test_attr] after subject_parent
|
||||
Pass remove element div[test_attr] after subject_parent
|
||||
Pass insert element div.test after subject
|
||||
Pass remove the class 'test' from the element inserted after subject
|
||||
Pass add the class 'test' again to the element inserted after subject
|
||||
Pass remove element div.test after subject
|
||||
Pass insert element div after subject
|
||||
Pass add the class 'test' to the element inserted again after subject
|
||||
Pass remove the class 'test' from the element inserted again after subject
|
||||
Pass remove element div after subject
|
||||
Pass insert element div[test_attr] after subject
|
||||
Pass remove element div[test_attr] after subject
|
||||
Pass insert element div.test after subject_child
|
||||
Pass remove the class 'test' from the element inserted after subject_child
|
||||
Pass add the class 'test' again to the element inserted after subject_child
|
||||
Pass remove element div.test after subject_child
|
||||
Pass insert element div after subject_child
|
||||
Pass add the class 'test' to the element inserted again after subject_child
|
||||
Pass remove the class 'test' from the element inserted again after subject_child
|
||||
Pass remove element div after subject_child
|
||||
Pass insert element div[test_attr] after subject_child
|
||||
Pass remove element div[test_attr] after subject_child
|
||||
Pass insert element div.test after subject_descendant
|
||||
Pass remove the class 'test' from the element inserted after subject_descendant
|
||||
Pass add the class 'test' again to the element inserted after subject_descendant
|
||||
Pass remove element div.test after subject_descendant
|
||||
Pass insert element div after subject_descendant
|
||||
Pass add the class 'test' to the element inserted again after subject_descendant
|
||||
Pass remove the class 'test' from the element inserted again after subject_descendant
|
||||
Pass remove element div after subject_descendant
|
||||
Pass insert element div[test_attr] after subject_descendant
|
||||
Pass remove element div[test_attr] after subject_descendant
|
||||
Pass insert element div.test after next_sibling
|
||||
Pass remove the class 'test' from the element inserted after next_sibling
|
||||
Pass add the class 'test' again to the element inserted after next_sibling
|
||||
Pass remove element div.test after next_sibling
|
||||
Pass insert element div after next_sibling
|
||||
Pass add the class 'test' to the element inserted again after next_sibling
|
||||
Pass remove the class 'test' from the element inserted again after next_sibling
|
||||
Pass remove element div after next_sibling
|
||||
Pass insert element div[test_attr] after next_sibling
|
||||
Pass remove element div[test_attr] after next_sibling
|
||||
Pass insert element div.test after next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted after next_sibling_child
|
||||
Pass add the class 'test' again to the element inserted after next_sibling_child
|
||||
Pass remove element div.test after next_sibling_child
|
||||
Pass insert element div after next_sibling_child
|
||||
Pass add the class 'test' to the element inserted again after next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted again after next_sibling_child
|
||||
Pass remove element div after next_sibling_child
|
||||
Pass insert element div[test_attr] after next_sibling_child
|
||||
Pass remove element div[test_attr] after next_sibling_child
|
||||
Pass insert element div.test after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted after next_sibling_descendant
|
||||
Pass add the class 'test' again to the element inserted after next_sibling_descendant
|
||||
Pass remove element div.test after next_sibling_descendant
|
||||
Pass insert element div after next_sibling_descendant
|
||||
Pass add the class 'test' to the element inserted again after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted again after next_sibling_descendant
|
||||
Pass remove element div after next_sibling_descendant
|
||||
Pass insert element div[test_attr] after next_sibling_descendant
|
||||
Pass remove element div[test_attr] after next_sibling_descendant
|
||||
Pass insert tree div>div.test before subject_ancestor
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject_ancestor
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject_ancestor
|
||||
Pass remove tree div>div.test before subject_ancestor
|
||||
Pass insert tree div>div before subject_ancestor
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject_ancestor
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject_ancestor
|
||||
Pass remove tree div>div before subject_ancestor
|
||||
Pass insert element div>div[test_attr] before subject_ancestor
|
||||
Pass remove element div>div[test_attr] before subject_ancestor
|
||||
Pass insert tree div>div.test before subject_parent
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject_parent
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject_parent
|
||||
Pass remove tree div>div.test before subject_parent
|
||||
Pass insert tree div>div before subject_parent
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject_parent
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject_parent
|
||||
Pass remove tree div>div before subject_parent
|
||||
Pass insert element div>div[test_attr] before subject_parent
|
||||
Pass remove element div>div[test_attr] before subject_parent
|
||||
Pass insert tree div>div.test before subject
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject
|
||||
Pass remove tree div>div.test before subject
|
||||
Pass insert tree div>div before subject
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject
|
||||
Pass remove tree div>div before subject
|
||||
Pass insert element div>div[test_attr] before subject
|
||||
Pass remove element div>div[test_attr] before subject
|
||||
Pass insert tree div>div.test before subject_child
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject_child
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject_child
|
||||
Pass remove tree div>div.test before subject_child
|
||||
Pass insert tree div>div before subject_child
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject_child
|
||||
Pass remove tree div>div before subject_child
|
||||
Pass insert element div>div[test_attr] before subject_child
|
||||
Pass remove element div>div[test_attr] before subject_child
|
||||
Pass insert tree div>div.test before subject_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject_descendant
|
||||
Pass remove tree div>div.test before subject_descendant
|
||||
Pass insert tree div>div before subject_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject_descendant
|
||||
Pass remove tree div>div before subject_descendant
|
||||
Pass insert element div>div[test_attr] before subject_descendant
|
||||
Pass remove element div>div[test_attr] before subject_descendant
|
||||
Pass insert tree div>div.test before next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted before next_sibling
|
||||
Pass add the class 'test' again to the element in the tree inserted before next_sibling
|
||||
Pass remove tree div>div.test before next_sibling
|
||||
Pass insert tree div>div before next_sibling
|
||||
Pass add the class 'test' to the element in the tree inserted again before next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted again before next_sibling
|
||||
Pass remove tree div>div before next_sibling
|
||||
Pass insert element div>div[test_attr] before next_sibling
|
||||
Pass remove element div>div[test_attr] before next_sibling
|
||||
Pass insert tree div>div.test before next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted before next_sibling_child
|
||||
Pass add the class 'test' again to the element in the tree inserted before next_sibling_child
|
||||
Pass remove tree div>div.test before next_sibling_child
|
||||
Pass insert tree div>div before next_sibling_child
|
||||
Pass add the class 'test' to the element in the tree inserted again before next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again before next_sibling_child
|
||||
Pass remove tree div>div before next_sibling_child
|
||||
Pass insert element div>div[test_attr] before next_sibling_child
|
||||
Pass remove element div>div[test_attr] before next_sibling_child
|
||||
Pass insert tree div>div.test before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted before next_sibling_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted before next_sibling_descendant
|
||||
Pass remove tree div>div.test before next_sibling_descendant
|
||||
Pass insert tree div>div before next_sibling_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again before next_sibling_descendant
|
||||
Pass remove tree div>div before next_sibling_descendant
|
||||
Pass insert element div>div[test_attr] before next_sibling_descendant
|
||||
Pass remove element div>div[test_attr] before next_sibling_descendant
|
||||
Pass insert tree div>div.test after subject_ancestor
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject_ancestor
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject_ancestor
|
||||
Pass remove tree div>div.test after subject_ancestor
|
||||
Pass insert tree div>div after subject_ancestor
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject_ancestor
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject_ancestor
|
||||
Pass remove tree div>div after subject_ancestor
|
||||
Pass insert element div>div[test_attr] after subject_ancestor
|
||||
Pass remove element div>div[test_attr] after subject_ancestor
|
||||
Pass insert tree div>div.test after subject_parent
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject_parent
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject_parent
|
||||
Pass remove tree div>div.test after subject_parent
|
||||
Pass insert tree div>div after subject_parent
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject_parent
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject_parent
|
||||
Pass remove tree div>div after subject_parent
|
||||
Pass insert element div>div[test_attr] after subject_parent
|
||||
Pass remove element div>div[test_attr] after subject_parent
|
||||
Pass insert tree div>div.test after subject
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject
|
||||
Pass remove tree div>div.test after subject
|
||||
Pass insert tree div>div after subject
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject
|
||||
Pass remove tree div>div after subject
|
||||
Pass insert element div>div[test_attr] after subject
|
||||
Pass remove element div>div[test_attr] after subject
|
||||
Pass insert tree div>div.test after subject_child
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject_child
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject_child
|
||||
Pass remove tree div>div.test after subject_child
|
||||
Pass insert tree div>div after subject_child
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject_child
|
||||
Pass remove tree div>div after subject_child
|
||||
Pass insert element div>div[test_attr] after subject_child
|
||||
Pass remove element div>div[test_attr] after subject_child
|
||||
Pass insert tree div>div.test after subject_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject_descendant
|
||||
Pass remove tree div>div.test after subject_descendant
|
||||
Pass insert tree div>div after subject_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject_descendant
|
||||
Pass remove tree div>div after subject_descendant
|
||||
Pass insert element div>div[test_attr] after subject_descendant
|
||||
Pass remove element div>div[test_attr] after subject_descendant
|
||||
Pass insert tree div>div.test after next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted after next_sibling
|
||||
Pass add the class 'test' again to the element in the tree inserted after next_sibling
|
||||
Pass remove tree div>div.test after next_sibling
|
||||
Pass insert tree div>div after next_sibling
|
||||
Pass add the class 'test' to the element in the tree inserted again after next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted again after next_sibling
|
||||
Pass remove tree div>div after next_sibling
|
||||
Pass insert element div>div[test_attr] after next_sibling
|
||||
Pass remove element div>div[test_attr] after next_sibling
|
||||
Pass insert tree div>div.test after next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted after next_sibling_child
|
||||
Pass add the class 'test' again to the element in the tree inserted after next_sibling_child
|
||||
Pass remove tree div>div.test after next_sibling_child
|
||||
Pass insert tree div>div after next_sibling_child
|
||||
Pass add the class 'test' to the element in the tree inserted again after next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again after next_sibling_child
|
||||
Pass remove tree div>div after next_sibling_child
|
||||
Pass insert element div>div[test_attr] after next_sibling_child
|
||||
Pass remove element div>div[test_attr] after next_sibling_child
|
||||
Pass insert tree div>div.test after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted after next_sibling_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted after next_sibling_descendant
|
||||
Pass remove tree div>div.test after next_sibling_descendant
|
||||
Pass insert tree div>div after next_sibling_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again after next_sibling_descendant
|
||||
Pass remove tree div>div after next_sibling_descendant
|
||||
Pass insert element div>div[test_attr] after next_sibling_descendant
|
||||
Pass remove element div>div[test_attr] after next_sibling_descendant
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 211 tests
|
||||
|
||||
211 Pass
|
||||
Details
|
||||
Result Test Name MessagePass Initial color
|
||||
Pass add .test to subject_ancestor
|
||||
Pass remove .test from subject_ancestor
|
||||
Pass add .test to subject_parent
|
||||
Pass remove .test from subject_parent
|
||||
Pass add .test to subject
|
||||
Pass remove .test from subject
|
||||
Pass add .test to subject_child
|
||||
Pass remove .test from subject_child
|
||||
Pass add .test to subject_descendant
|
||||
Pass remove .test from subject_descendant
|
||||
Pass insert element div.test before subject_ancestor
|
||||
Pass remove the class 'test' from the element inserted before subject_ancestor
|
||||
Pass add the class 'test' again to the element inserted before subject_ancestor
|
||||
Pass remove element div.test before subject_ancestor
|
||||
Pass insert element div before subject_ancestor
|
||||
Pass add the class 'test' to the element inserted again before subject_ancestor
|
||||
Pass remove the class 'test' from the element inserted again before subject_ancestor
|
||||
Pass remove element div before subject_ancestor
|
||||
Pass insert element div[test_attr] before subject_ancestor
|
||||
Pass remove element div[test_attr] before subject_ancestor
|
||||
Pass insert element div.test before subject_parent
|
||||
Pass remove the class 'test' from the element inserted before subject_parent
|
||||
Pass add the class 'test' again to the element inserted before subject_parent
|
||||
Pass remove element div.test before subject_parent
|
||||
Pass insert element div before subject_parent
|
||||
Pass add the class 'test' to the element inserted again before subject_parent
|
||||
Pass remove the class 'test' from the element inserted again before subject_parent
|
||||
Pass remove element div before subject_parent
|
||||
Pass insert element div[test_attr] before subject_parent
|
||||
Pass remove element div[test_attr] before subject_parent
|
||||
Pass insert element div.test before subject
|
||||
Pass remove the class 'test' from the element inserted before subject
|
||||
Pass add the class 'test' again to the element inserted before subject
|
||||
Pass remove element div.test before subject
|
||||
Pass insert element div before subject
|
||||
Pass add the class 'test' to the element inserted again before subject
|
||||
Pass remove the class 'test' from the element inserted again before subject
|
||||
Pass remove element div before subject
|
||||
Pass insert element div[test_attr] before subject
|
||||
Pass remove element div[test_attr] before subject
|
||||
Pass insert element div.test before subject_child
|
||||
Pass remove the class 'test' from the element inserted before subject_child
|
||||
Pass add the class 'test' again to the element inserted before subject_child
|
||||
Pass remove element div.test before subject_child
|
||||
Pass insert element div before subject_child
|
||||
Pass add the class 'test' to the element inserted again before subject_child
|
||||
Pass remove the class 'test' from the element inserted again before subject_child
|
||||
Pass remove element div before subject_child
|
||||
Pass insert element div[test_attr] before subject_child
|
||||
Pass remove element div[test_attr] before subject_child
|
||||
Pass insert element div.test before subject_descendant
|
||||
Pass remove the class 'test' from the element inserted before subject_descendant
|
||||
Pass add the class 'test' again to the element inserted before subject_descendant
|
||||
Pass remove element div.test before subject_descendant
|
||||
Pass insert element div before subject_descendant
|
||||
Pass add the class 'test' to the element inserted again before subject_descendant
|
||||
Pass remove the class 'test' from the element inserted again before subject_descendant
|
||||
Pass remove element div before subject_descendant
|
||||
Pass insert element div[test_attr] before subject_descendant
|
||||
Pass remove element div[test_attr] before subject_descendant
|
||||
Pass insert element div.test after subject_ancestor
|
||||
Pass remove the class 'test' from the element inserted after subject_ancestor
|
||||
Pass add the class 'test' again to the element inserted after subject_ancestor
|
||||
Pass remove element div.test after subject_ancestor
|
||||
Pass insert element div after subject_ancestor
|
||||
Pass add the class 'test' to the element inserted again after subject_ancestor
|
||||
Pass remove the class 'test' from the element inserted again after subject_ancestor
|
||||
Pass remove element div after subject_ancestor
|
||||
Pass insert element div[test_attr] after subject_ancestor
|
||||
Pass remove element div[test_attr] after subject_ancestor
|
||||
Pass insert element div.test after subject_parent
|
||||
Pass remove the class 'test' from the element inserted after subject_parent
|
||||
Pass add the class 'test' again to the element inserted after subject_parent
|
||||
Pass remove element div.test after subject_parent
|
||||
Pass insert element div after subject_parent
|
||||
Pass add the class 'test' to the element inserted again after subject_parent
|
||||
Pass remove the class 'test' from the element inserted again after subject_parent
|
||||
Pass remove element div after subject_parent
|
||||
Pass insert element div[test_attr] after subject_parent
|
||||
Pass remove element div[test_attr] after subject_parent
|
||||
Pass insert element div.test after subject
|
||||
Pass remove the class 'test' from the element inserted after subject
|
||||
Pass add the class 'test' again to the element inserted after subject
|
||||
Pass remove element div.test after subject
|
||||
Pass insert element div after subject
|
||||
Pass add the class 'test' to the element inserted again after subject
|
||||
Pass remove the class 'test' from the element inserted again after subject
|
||||
Pass remove element div after subject
|
||||
Pass insert element div[test_attr] after subject
|
||||
Pass remove element div[test_attr] after subject
|
||||
Pass insert element div.test after subject_child
|
||||
Pass remove the class 'test' from the element inserted after subject_child
|
||||
Pass add the class 'test' again to the element inserted after subject_child
|
||||
Pass remove element div.test after subject_child
|
||||
Pass insert element div after subject_child
|
||||
Pass add the class 'test' to the element inserted again after subject_child
|
||||
Pass remove the class 'test' from the element inserted again after subject_child
|
||||
Pass remove element div after subject_child
|
||||
Pass insert element div[test_attr] after subject_child
|
||||
Pass remove element div[test_attr] after subject_child
|
||||
Pass insert element div.test after subject_descendant
|
||||
Pass remove the class 'test' from the element inserted after subject_descendant
|
||||
Pass add the class 'test' again to the element inserted after subject_descendant
|
||||
Pass remove element div.test after subject_descendant
|
||||
Pass insert element div after subject_descendant
|
||||
Pass add the class 'test' to the element inserted again after subject_descendant
|
||||
Pass remove the class 'test' from the element inserted again after subject_descendant
|
||||
Pass remove element div after subject_descendant
|
||||
Pass insert element div[test_attr] after subject_descendant
|
||||
Pass remove element div[test_attr] after subject_descendant
|
||||
Pass insert tree div>div.test before subject_ancestor
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject_ancestor
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject_ancestor
|
||||
Pass remove tree div>div.test before subject_ancestor
|
||||
Pass insert tree div>div before subject_ancestor
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject_ancestor
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject_ancestor
|
||||
Pass remove tree div>div before subject_ancestor
|
||||
Pass insert element div>div[test_attr] before subject_ancestor
|
||||
Pass remove element div>div[test_attr] before subject_ancestor
|
||||
Pass insert tree div>div.test before subject_parent
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject_parent
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject_parent
|
||||
Pass remove tree div>div.test before subject_parent
|
||||
Pass insert tree div>div before subject_parent
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject_parent
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject_parent
|
||||
Pass remove tree div>div before subject_parent
|
||||
Pass insert element div>div[test_attr] before subject_parent
|
||||
Pass remove element div>div[test_attr] before subject_parent
|
||||
Pass insert tree div>div.test before subject
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject
|
||||
Pass remove tree div>div.test before subject
|
||||
Pass insert tree div>div before subject
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject
|
||||
Pass remove tree div>div before subject
|
||||
Pass insert element div>div[test_attr] before subject
|
||||
Pass remove element div>div[test_attr] before subject
|
||||
Pass insert tree div>div.test before subject_child
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject_child
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject_child
|
||||
Pass remove tree div>div.test before subject_child
|
||||
Pass insert tree div>div before subject_child
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject_child
|
||||
Pass remove tree div>div before subject_child
|
||||
Pass insert element div>div[test_attr] before subject_child
|
||||
Pass remove element div>div[test_attr] before subject_child
|
||||
Pass insert tree div>div.test before subject_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject_descendant
|
||||
Pass remove tree div>div.test before subject_descendant
|
||||
Pass insert tree div>div before subject_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject_descendant
|
||||
Pass remove tree div>div before subject_descendant
|
||||
Pass insert element div>div[test_attr] before subject_descendant
|
||||
Pass remove element div>div[test_attr] before subject_descendant
|
||||
Pass insert tree div>div.test after subject_ancestor
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject_ancestor
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject_ancestor
|
||||
Pass remove tree div>div.test after subject_ancestor
|
||||
Pass insert tree div>div after subject_ancestor
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject_ancestor
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject_ancestor
|
||||
Pass remove tree div>div after subject_ancestor
|
||||
Pass insert element div>div[test_attr] after subject_ancestor
|
||||
Pass remove element div>div[test_attr] after subject_ancestor
|
||||
Pass insert tree div>div.test after subject_parent
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject_parent
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject_parent
|
||||
Pass remove tree div>div.test after subject_parent
|
||||
Pass insert tree div>div after subject_parent
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject_parent
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject_parent
|
||||
Pass remove tree div>div after subject_parent
|
||||
Pass insert element div>div[test_attr] after subject_parent
|
||||
Pass remove element div>div[test_attr] after subject_parent
|
||||
Pass insert tree div>div.test after subject
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject
|
||||
Pass remove tree div>div.test after subject
|
||||
Pass insert tree div>div after subject
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject
|
||||
Pass remove tree div>div after subject
|
||||
Pass insert element div>div[test_attr] after subject
|
||||
Pass remove element div>div[test_attr] after subject
|
||||
Pass insert tree div>div.test after subject_child
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject_child
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject_child
|
||||
Pass remove tree div>div.test after subject_child
|
||||
Pass insert tree div>div after subject_child
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject_child
|
||||
Pass remove tree div>div after subject_child
|
||||
Pass insert element div>div[test_attr] after subject_child
|
||||
Pass remove element div>div[test_attr] after subject_child
|
||||
Pass insert tree div>div.test after subject_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject_descendant
|
||||
Pass remove tree div>div.test after subject_descendant
|
||||
Pass insert tree div>div after subject_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject_descendant
|
||||
Pass remove tree div>div after subject_descendant
|
||||
Pass insert element div>div[test_attr] after subject_descendant
|
||||
Pass remove element div>div[test_attr] after subject_descendant
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 295 tests
|
||||
|
||||
295 Pass
|
||||
Details
|
||||
Result Test Name MessagePass Initial color
|
||||
Pass add .test to previous_sibling
|
||||
Pass remove .test from previous_sibling
|
||||
Pass add .test to previous_sibling_child
|
||||
Pass remove .test from previous_sibling_child
|
||||
Pass add .test to previous_sibling_descendant
|
||||
Pass remove .test from previous_sibling_descendant
|
||||
Pass add .test to subject
|
||||
Pass remove .test from subject
|
||||
Pass add .test to next_sibling
|
||||
Pass remove .test from next_sibling
|
||||
Pass add .test to next_sibling_child
|
||||
Pass remove .test from next_sibling_child
|
||||
Pass add .test to next_sibling_descendant
|
||||
Pass remove .test from next_sibling_descendant
|
||||
Pass insert element div.test before previous_sibling
|
||||
Pass remove the class 'test' from the element inserted before previous_sibling
|
||||
Pass add the class 'test' again to the element inserted before previous_sibling
|
||||
Pass remove element div.test before previous_sibling
|
||||
Pass insert element div before previous_sibling
|
||||
Pass add the class 'test' to the element inserted again before previous_sibling
|
||||
Pass remove the class 'test' from the element inserted again before previous_sibling
|
||||
Pass remove element div before previous_sibling
|
||||
Pass insert element div[test_attr] before previous_sibling
|
||||
Pass remove element div[test_attr] before previous_sibling
|
||||
Pass insert element div.test before previous_sibling_child
|
||||
Pass remove the class 'test' from the element inserted before previous_sibling_child
|
||||
Pass add the class 'test' again to the element inserted before previous_sibling_child
|
||||
Pass remove element div.test before previous_sibling_child
|
||||
Pass insert element div before previous_sibling_child
|
||||
Pass add the class 'test' to the element inserted again before previous_sibling_child
|
||||
Pass remove the class 'test' from the element inserted again before previous_sibling_child
|
||||
Pass remove element div before previous_sibling_child
|
||||
Pass insert element div[test_attr] before previous_sibling_child
|
||||
Pass remove element div[test_attr] before previous_sibling_child
|
||||
Pass insert element div.test before previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted before previous_sibling_descendant
|
||||
Pass add the class 'test' again to the element inserted before previous_sibling_descendant
|
||||
Pass remove element div.test before previous_sibling_descendant
|
||||
Pass insert element div before previous_sibling_descendant
|
||||
Pass add the class 'test' to the element inserted again before previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted again before previous_sibling_descendant
|
||||
Pass remove element div before previous_sibling_descendant
|
||||
Pass insert element div[test_attr] before previous_sibling_descendant
|
||||
Pass remove element div[test_attr] before previous_sibling_descendant
|
||||
Pass insert element div.test before subject
|
||||
Pass remove the class 'test' from the element inserted before subject
|
||||
Pass add the class 'test' again to the element inserted before subject
|
||||
Pass remove element div.test before subject
|
||||
Pass insert element div before subject
|
||||
Pass add the class 'test' to the element inserted again before subject
|
||||
Pass remove the class 'test' from the element inserted again before subject
|
||||
Pass remove element div before subject
|
||||
Pass insert element div[test_attr] before subject
|
||||
Pass remove element div[test_attr] before subject
|
||||
Pass insert element div.test before next_sibling
|
||||
Pass remove the class 'test' from the element inserted before next_sibling
|
||||
Pass add the class 'test' again to the element inserted before next_sibling
|
||||
Pass remove element div.test before next_sibling
|
||||
Pass insert element div before next_sibling
|
||||
Pass add the class 'test' to the element inserted again before next_sibling
|
||||
Pass remove the class 'test' from the element inserted again before next_sibling
|
||||
Pass remove element div before next_sibling
|
||||
Pass insert element div[test_attr] before next_sibling
|
||||
Pass remove element div[test_attr] before next_sibling
|
||||
Pass insert element div.test before next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted before next_sibling_child
|
||||
Pass add the class 'test' again to the element inserted before next_sibling_child
|
||||
Pass remove element div.test before next_sibling_child
|
||||
Pass insert element div before next_sibling_child
|
||||
Pass add the class 'test' to the element inserted again before next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted again before next_sibling_child
|
||||
Pass remove element div before next_sibling_child
|
||||
Pass insert element div[test_attr] before next_sibling_child
|
||||
Pass remove element div[test_attr] before next_sibling_child
|
||||
Pass insert element div.test before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted before next_sibling_descendant
|
||||
Pass add the class 'test' again to the element inserted before next_sibling_descendant
|
||||
Pass remove element div.test before next_sibling_descendant
|
||||
Pass insert element div before next_sibling_descendant
|
||||
Pass add the class 'test' to the element inserted again before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted again before next_sibling_descendant
|
||||
Pass remove element div before next_sibling_descendant
|
||||
Pass insert element div[test_attr] before next_sibling_descendant
|
||||
Pass remove element div[test_attr] before next_sibling_descendant
|
||||
Pass insert element div.test after previous_sibling
|
||||
Pass remove the class 'test' from the element inserted after previous_sibling
|
||||
Pass add the class 'test' again to the element inserted after previous_sibling
|
||||
Pass remove element div.test after previous_sibling
|
||||
Pass insert element div after previous_sibling
|
||||
Pass add the class 'test' to the element inserted again after previous_sibling
|
||||
Pass remove the class 'test' from the element inserted again after previous_sibling
|
||||
Pass remove element div after previous_sibling
|
||||
Pass insert element div[test_attr] after previous_sibling
|
||||
Pass remove element div[test_attr] after previous_sibling
|
||||
Pass insert element div.test after previous_sibling_child
|
||||
Pass remove the class 'test' from the element inserted after previous_sibling_child
|
||||
Pass add the class 'test' again to the element inserted after previous_sibling_child
|
||||
Pass remove element div.test after previous_sibling_child
|
||||
Pass insert element div after previous_sibling_child
|
||||
Pass add the class 'test' to the element inserted again after previous_sibling_child
|
||||
Pass remove the class 'test' from the element inserted again after previous_sibling_child
|
||||
Pass remove element div after previous_sibling_child
|
||||
Pass insert element div[test_attr] after previous_sibling_child
|
||||
Pass remove element div[test_attr] after previous_sibling_child
|
||||
Pass insert element div.test after previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted after previous_sibling_descendant
|
||||
Pass add the class 'test' again to the element inserted after previous_sibling_descendant
|
||||
Pass remove element div.test after previous_sibling_descendant
|
||||
Pass insert element div after previous_sibling_descendant
|
||||
Pass add the class 'test' to the element inserted again after previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted again after previous_sibling_descendant
|
||||
Pass remove element div after previous_sibling_descendant
|
||||
Pass insert element div[test_attr] after previous_sibling_descendant
|
||||
Pass remove element div[test_attr] after previous_sibling_descendant
|
||||
Pass insert element div.test after subject
|
||||
Pass remove the class 'test' from the element inserted after subject
|
||||
Pass add the class 'test' again to the element inserted after subject
|
||||
Pass remove element div.test after subject
|
||||
Pass insert element div after subject
|
||||
Pass add the class 'test' to the element inserted again after subject
|
||||
Pass remove the class 'test' from the element inserted again after subject
|
||||
Pass remove element div after subject
|
||||
Pass insert element div[test_attr] after subject
|
||||
Pass remove element div[test_attr] after subject
|
||||
Pass insert element div.test after next_sibling
|
||||
Pass remove the class 'test' from the element inserted after next_sibling
|
||||
Pass add the class 'test' again to the element inserted after next_sibling
|
||||
Pass remove element div.test after next_sibling
|
||||
Pass insert element div after next_sibling
|
||||
Pass add the class 'test' to the element inserted again after next_sibling
|
||||
Pass remove the class 'test' from the element inserted again after next_sibling
|
||||
Pass remove element div after next_sibling
|
||||
Pass insert element div[test_attr] after next_sibling
|
||||
Pass remove element div[test_attr] after next_sibling
|
||||
Pass insert element div.test after next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted after next_sibling_child
|
||||
Pass add the class 'test' again to the element inserted after next_sibling_child
|
||||
Pass remove element div.test after next_sibling_child
|
||||
Pass insert element div after next_sibling_child
|
||||
Pass add the class 'test' to the element inserted again after next_sibling_child
|
||||
Pass remove the class 'test' from the element inserted again after next_sibling_child
|
||||
Pass remove element div after next_sibling_child
|
||||
Pass insert element div[test_attr] after next_sibling_child
|
||||
Pass remove element div[test_attr] after next_sibling_child
|
||||
Pass insert element div.test after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted after next_sibling_descendant
|
||||
Pass add the class 'test' again to the element inserted after next_sibling_descendant
|
||||
Pass remove element div.test after next_sibling_descendant
|
||||
Pass insert element div after next_sibling_descendant
|
||||
Pass add the class 'test' to the element inserted again after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element inserted again after next_sibling_descendant
|
||||
Pass remove element div after next_sibling_descendant
|
||||
Pass insert element div[test_attr] after next_sibling_descendant
|
||||
Pass remove element div[test_attr] after next_sibling_descendant
|
||||
Pass insert tree div>div.test before previous_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted before previous_sibling
|
||||
Pass add the class 'test' again to the element in the tree inserted before previous_sibling
|
||||
Pass remove tree div>div.test before previous_sibling
|
||||
Pass insert tree div>div before previous_sibling
|
||||
Pass add the class 'test' to the element in the tree inserted again before previous_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted again before previous_sibling
|
||||
Pass remove tree div>div before previous_sibling
|
||||
Pass insert element div>div[test_attr] before previous_sibling
|
||||
Pass remove element div>div[test_attr] before previous_sibling
|
||||
Pass insert tree div>div.test before previous_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted before previous_sibling_child
|
||||
Pass add the class 'test' again to the element in the tree inserted before previous_sibling_child
|
||||
Pass remove tree div>div.test before previous_sibling_child
|
||||
Pass insert tree div>div before previous_sibling_child
|
||||
Pass add the class 'test' to the element in the tree inserted again before previous_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again before previous_sibling_child
|
||||
Pass remove tree div>div before previous_sibling_child
|
||||
Pass insert element div>div[test_attr] before previous_sibling_child
|
||||
Pass remove element div>div[test_attr] before previous_sibling_child
|
||||
Pass insert tree div>div.test before previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted before previous_sibling_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted before previous_sibling_descendant
|
||||
Pass remove tree div>div.test before previous_sibling_descendant
|
||||
Pass insert tree div>div before previous_sibling_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again before previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again before previous_sibling_descendant
|
||||
Pass remove tree div>div before previous_sibling_descendant
|
||||
Pass insert element div>div[test_attr] before previous_sibling_descendant
|
||||
Pass remove element div>div[test_attr] before previous_sibling_descendant
|
||||
Pass insert tree div>div.test before subject
|
||||
Pass remove the class 'test' from the element in the tree inserted before subject
|
||||
Pass add the class 'test' again to the element in the tree inserted before subject
|
||||
Pass remove tree div>div.test before subject
|
||||
Pass insert tree div>div before subject
|
||||
Pass add the class 'test' to the element in the tree inserted again before subject
|
||||
Pass remove the class 'test' from the element in the tree inserted again before subject
|
||||
Pass remove tree div>div before subject
|
||||
Pass insert element div>div[test_attr] before subject
|
||||
Pass remove element div>div[test_attr] before subject
|
||||
Pass insert tree div>div.test before next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted before next_sibling
|
||||
Pass add the class 'test' again to the element in the tree inserted before next_sibling
|
||||
Pass remove tree div>div.test before next_sibling
|
||||
Pass insert tree div>div before next_sibling
|
||||
Pass add the class 'test' to the element in the tree inserted again before next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted again before next_sibling
|
||||
Pass remove tree div>div before next_sibling
|
||||
Pass insert element div>div[test_attr] before next_sibling
|
||||
Pass remove element div>div[test_attr] before next_sibling
|
||||
Pass insert tree div>div.test before next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted before next_sibling_child
|
||||
Pass add the class 'test' again to the element in the tree inserted before next_sibling_child
|
||||
Pass remove tree div>div.test before next_sibling_child
|
||||
Pass insert tree div>div before next_sibling_child
|
||||
Pass add the class 'test' to the element in the tree inserted again before next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again before next_sibling_child
|
||||
Pass remove tree div>div before next_sibling_child
|
||||
Pass insert element div>div[test_attr] before next_sibling_child
|
||||
Pass remove element div>div[test_attr] before next_sibling_child
|
||||
Pass insert tree div>div.test before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted before next_sibling_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted before next_sibling_descendant
|
||||
Pass remove tree div>div.test before next_sibling_descendant
|
||||
Pass insert tree div>div before next_sibling_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again before next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again before next_sibling_descendant
|
||||
Pass remove tree div>div before next_sibling_descendant
|
||||
Pass insert element div>div[test_attr] before next_sibling_descendant
|
||||
Pass remove element div>div[test_attr] before next_sibling_descendant
|
||||
Pass insert tree div>div.test after previous_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted after previous_sibling
|
||||
Pass add the class 'test' again to the element in the tree inserted after previous_sibling
|
||||
Pass remove tree div>div.test after previous_sibling
|
||||
Pass insert tree div>div after previous_sibling
|
||||
Pass add the class 'test' to the element in the tree inserted again after previous_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted again after previous_sibling
|
||||
Pass remove tree div>div after previous_sibling
|
||||
Pass insert element div>div[test_attr] after previous_sibling
|
||||
Pass remove element div>div[test_attr] after previous_sibling
|
||||
Pass insert tree div>div.test after previous_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted after previous_sibling_child
|
||||
Pass add the class 'test' again to the element in the tree inserted after previous_sibling_child
|
||||
Pass remove tree div>div.test after previous_sibling_child
|
||||
Pass insert tree div>div after previous_sibling_child
|
||||
Pass add the class 'test' to the element in the tree inserted again after previous_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again after previous_sibling_child
|
||||
Pass remove tree div>div after previous_sibling_child
|
||||
Pass insert element div>div[test_attr] after previous_sibling_child
|
||||
Pass remove element div>div[test_attr] after previous_sibling_child
|
||||
Pass insert tree div>div.test after previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted after previous_sibling_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted after previous_sibling_descendant
|
||||
Pass remove tree div>div.test after previous_sibling_descendant
|
||||
Pass insert tree div>div after previous_sibling_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again after previous_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again after previous_sibling_descendant
|
||||
Pass remove tree div>div after previous_sibling_descendant
|
||||
Pass insert element div>div[test_attr] after previous_sibling_descendant
|
||||
Pass remove element div>div[test_attr] after previous_sibling_descendant
|
||||
Pass insert tree div>div.test after subject
|
||||
Pass remove the class 'test' from the element in the tree inserted after subject
|
||||
Pass add the class 'test' again to the element in the tree inserted after subject
|
||||
Pass remove tree div>div.test after subject
|
||||
Pass insert tree div>div after subject
|
||||
Pass add the class 'test' to the element in the tree inserted again after subject
|
||||
Pass remove the class 'test' from the element in the tree inserted again after subject
|
||||
Pass remove tree div>div after subject
|
||||
Pass insert element div>div[test_attr] after subject
|
||||
Pass remove element div>div[test_attr] after subject
|
||||
Pass insert tree div>div.test after next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted after next_sibling
|
||||
Pass add the class 'test' again to the element in the tree inserted after next_sibling
|
||||
Pass remove tree div>div.test after next_sibling
|
||||
Pass insert tree div>div after next_sibling
|
||||
Pass add the class 'test' to the element in the tree inserted again after next_sibling
|
||||
Pass remove the class 'test' from the element in the tree inserted again after next_sibling
|
||||
Pass remove tree div>div after next_sibling
|
||||
Pass insert element div>div[test_attr] after next_sibling
|
||||
Pass remove element div>div[test_attr] after next_sibling
|
||||
Pass insert tree div>div.test after next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted after next_sibling_child
|
||||
Pass add the class 'test' again to the element in the tree inserted after next_sibling_child
|
||||
Pass remove tree div>div.test after next_sibling_child
|
||||
Pass insert tree div>div after next_sibling_child
|
||||
Pass add the class 'test' to the element in the tree inserted again after next_sibling_child
|
||||
Pass remove the class 'test' from the element in the tree inserted again after next_sibling_child
|
||||
Pass remove tree div>div after next_sibling_child
|
||||
Pass insert element div>div[test_attr] after next_sibling_child
|
||||
Pass remove element div>div[test_attr] after next_sibling_child
|
||||
Pass insert tree div>div.test after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted after next_sibling_descendant
|
||||
Pass add the class 'test' again to the element in the tree inserted after next_sibling_descendant
|
||||
Pass remove tree div>div.test after next_sibling_descendant
|
||||
Pass insert tree div>div after next_sibling_descendant
|
||||
Pass add the class 'test' to the element in the tree inserted again after next_sibling_descendant
|
||||
Pass remove the class 'test' from the element in the tree inserted again after next_sibling_descendant
|
||||
Pass remove tree div>div after next_sibling_descendant
|
||||
Pass insert element div>div[test_attr] after next_sibling_descendant
|
||||
Pass remove element div>div[test_attr] after next_sibling_descendant
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 2 tests
|
||||
|
||||
2 Pass
|
||||
Details
|
||||
Result Test Name MessagePass initial_color: div#subject.color
|
||||
Pass remove descendant: div#subject.color
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 5 tests
|
||||
|
||||
5 Pass
|
||||
Details
|
||||
Result Test Name MessagePass initial color: div#subject.color
|
||||
Pass color after inserting text and div > .descendant: div#subject.color
|
||||
Pass color after wiping #child to remove div > .descendant: div#subject.color
|
||||
Pass color after inserting text and #child > .descendant: div#subject.color
|
||||
Pass color after wiping #child to remove .descendant: div#subject.color
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 28 tests
|
||||
|
||||
28 Pass
|
||||
Details
|
||||
Result Test Name MessagePass subject1: initial color should be rgb(128, 128, 128)
|
||||
Pass subject1: color after #sibling1_1 inserted should be rgb(255, 0, 0)
|
||||
Pass subject2: initial color should be rgb(128, 128, 128)
|
||||
Pass subject2: color after #sibling2_1 removed should be rgb(0, 128, 0)
|
||||
Pass subject3: initial color should be rgb(128, 128, 128)
|
||||
Pass subject3: color after #sibling3_1 inserted should be rgb(0, 0, 255)
|
||||
Pass subject4: initial color should be rgb(128, 128, 128)
|
||||
Pass subject4: color after #sibling4_1 removed should be rgb(255, 255, 0)
|
||||
Pass subject5: initial color should be rgb(255, 0, 0)
|
||||
Pass subject5: color after #sibling5_1 removed should be rgb(128, 128, 128)
|
||||
Pass subject6: initial color should be rgb(0, 128, 0)
|
||||
Pass subject6: color after #sibling6_1 inserted should be rgb(128, 128, 128)
|
||||
Pass subject7: initial color should be rgb(0, 0, 255)
|
||||
Pass subject7: color after #sibling7_1 removed should be rgb(128, 128, 128)
|
||||
Pass subject8: initial color should be rgb(255, 255, 0)
|
||||
Pass subject8: color after #sibling8_1 inserted should be rgb(128, 128, 128)
|
||||
Pass subject9: initial color should be rgb(128, 128, 128)
|
||||
Pass subject9: color after #sibling9_1 inserted should be rgb(255, 0, 0)
|
||||
Pass subject10: initial color should be rgb(128, 128, 128)
|
||||
Pass subject10: color after #sibling10_1 removed should be rgb(0, 128, 0)
|
||||
Pass subject11: initial color should be rgb(128, 128, 128)
|
||||
Pass subject11: color after #sibling11_1 inserted should be rgb(0, 0, 255)
|
||||
Pass subject12: initial color should be rgb(128, 128, 128)
|
||||
Pass subject12: color after #sibling12_1 removed should be rgb(255, 255, 0)
|
||||
Pass subject13: initial color should be rgb(128, 128, 128)
|
||||
Pass subject13: color after #sibling12_1 removed should be rgb(0, 128, 0)
|
||||
Pass subject14: initial color should be rgb(0, 128, 0)
|
||||
Pass subject14: color after #sibling14_2 removed should be rgb(128, 128, 128)
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 71 tests
|
||||
|
||||
71 Pass
|
||||
Details
|
||||
Result Test Name MessagePass initial_color
|
||||
Pass add .test to first_sibling
|
||||
Pass remove .test from first_sibling
|
||||
Pass add .test to second_sibling
|
||||
Pass remove .test from second_sibling
|
||||
Pass add .test to third_sibling
|
||||
Pass remove .test from third_sibling
|
||||
Pass add .test to first_sibling_child
|
||||
Pass remove .test from first_sibling_child
|
||||
Pass add .test to first_sibling_descendant
|
||||
Pass remove .test from first_sibling_descendant
|
||||
Pass add .test to third_sibling_child
|
||||
Pass remove .test from third_sibling_child
|
||||
Pass add .test to third_sibling_descendant
|
||||
Pass remove .test from third_sibling_descendant
|
||||
Pass insert element div.test before first_sibling
|
||||
Pass remove element div.test before first_sibling
|
||||
Pass insert element div.test before second_sibling
|
||||
Pass remove element div.test before second_sibling
|
||||
Pass insert element div.test before third_sibling
|
||||
Pass remove element div.test before third_sibling
|
||||
Pass insert element div.test before first_sibling_child
|
||||
Pass remove element div.test before first_sibling_child
|
||||
Pass insert element div.test before first_sibling_descendant
|
||||
Pass remove element div.test before first_sibling_descendant
|
||||
Pass insert element div.test before third_sibling_child
|
||||
Pass remove element div.test before third_sibling_child
|
||||
Pass insert element div.test before third_sibling_descendant
|
||||
Pass remove element div.test before third_sibling_descendant
|
||||
Pass insert element div.test after first_sibling
|
||||
Pass remove element div.test after first_sibling
|
||||
Pass insert element div.test after second_sibling
|
||||
Pass remove element div.test after second_sibling
|
||||
Pass insert element div.test after third_sibling
|
||||
Pass remove element div.test after third_sibling
|
||||
Pass insert element div.test after first_sibling_child
|
||||
Pass remove element div.test after first_sibling_child
|
||||
Pass insert element div.test after first_sibling_descendant
|
||||
Pass remove element div.test after first_sibling_descendant
|
||||
Pass insert element div.test after third_sibling_child
|
||||
Pass remove element div.test after third_sibling_child
|
||||
Pass insert element div.test after third_sibling_descendant
|
||||
Pass remove element div.test after third_sibling_descendant
|
||||
Pass insert tree div>div.test before first_sibling
|
||||
Pass remove tree div>div.test before first_sibling
|
||||
Pass insert tree div>div.test before second_sibling
|
||||
Pass remove tree div>div.test before second_sibling
|
||||
Pass insert tree div>div.test before third_sibling
|
||||
Pass remove tree div>div.test before third_sibling
|
||||
Pass insert tree div>div.test before first_sibling_child
|
||||
Pass remove tree div>div.test before first_sibling_child
|
||||
Pass insert tree div>div.test before first_sibling_descendant
|
||||
Pass remove tree div>div.test before first_sibling_descendant
|
||||
Pass insert tree div>div.test before third_sibling_child
|
||||
Pass remove tree div>div.test before third_sibling_child
|
||||
Pass insert tree div>div.test before third_sibling_descendant
|
||||
Pass remove tree div>div.test before third_sibling_descendant
|
||||
Pass insert tree div>div.test after first_sibling
|
||||
Pass remove tree div>div.test after first_sibling
|
||||
Pass insert tree div>div.test after second_sibling
|
||||
Pass remove tree div>div.test after second_sibling
|
||||
Pass insert tree div>div.test after third_sibling
|
||||
Pass remove tree div>div.test after third_sibling
|
||||
Pass insert tree div>div.test after first_sibling_child
|
||||
Pass remove tree div>div.test after first_sibling_child
|
||||
Pass insert tree div>div.test after first_sibling_descendant
|
||||
Pass remove tree div>div.test after first_sibling_descendant
|
||||
Pass insert tree div>div.test after third_sibling_child
|
||||
Pass remove tree div>div.test after third_sibling_child
|
||||
Pass insert tree div>div.test after third_sibling_descendant
|
||||
Pass remove tree div>div.test after third_sibling_descendant
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 3 tests
|
||||
|
||||
3 Pass
|
||||
Details
|
||||
Result Test Name MessagePass Initial colors
|
||||
Pass Matches after #blocks_match removed
|
||||
Pass Does not match after #blocks_match added
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 9 tests
|
||||
|
||||
9 Pass
|
||||
Details
|
||||
Result Test Name MessagePass Initial color
|
||||
Pass add test to subject_descendant
|
||||
Pass remove test from subject_descendant
|
||||
Pass add test to sibling_descendant
|
||||
Pass remove test from sibling_descendant
|
||||
Pass add test_inner to subject_child
|
||||
Pass remove test_inner from subject_child
|
||||
Pass add test_inner to sibling_child
|
||||
Pass remove test_inner from sibling_child
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 37 tests
|
||||
|
||||
37 Pass
|
||||
Details
|
||||
Result Test Name MessagePass #anchor1 initially white
|
||||
Pass #anchor1 becomes rgb(0, 0, 255) after adding .ancestor to #grand_parent1
|
||||
Pass #anchor1 becomes rgb(255, 255, 255) after removing .ancestor from #grand_parent1
|
||||
Pass #anchor1 becomes rgb(0, 0, 255) after adding .ancestor to #parent1
|
||||
Pass #anchor1 becomes rgb(255, 255, 255) after removing .ancestor from #parent1
|
||||
Pass #anchor2 initially white
|
||||
Pass #anchor2 becomes rgb(173, 216, 230) after adding .ancestor to #grand_parent2
|
||||
Pass #anchor2 becomes rgb(255, 255, 255) after removing .ancestor from #grand_parent2
|
||||
Pass #anchor2 becomes rgb(173, 216, 230) after adding .ancestor to #parent2
|
||||
Pass #anchor2 becomes rgb(255, 255, 255) after removing .ancestor from #parent2
|
||||
Pass #anchor3 initially white
|
||||
Pass #anchor3 becomes rgb(255, 255, 0) after adding .ancestor_prev to #grand_parent_indirect_prev3
|
||||
Pass #anchor3 becomes rgb(154, 205, 50) after adding .ancestor to #grand_parent3
|
||||
Pass #anchor3 becomes rgb(255, 255, 0) after removing .ancestor from #grand_parent3
|
||||
Pass #anchor3 becomes rgb(255, 255, 255) after removing .ancestor_prev from #grand_parent_indirect_prev3
|
||||
Pass #anchor3 becomes rgb(255, 255, 0) after adding .ancestor_prev to #grand_parent_direct_prev3
|
||||
Pass #anchor3 becomes rgb(255, 255, 255) after removing .ancestor_prev from #grand_parent_direct_prev3
|
||||
Pass #anchor3 becomes rgb(255, 255, 0) after adding .ancestor_prev to #parent_indirect_prev3
|
||||
Pass #anchor3 becomes rgb(154, 205, 50) after adding .ancestor to #parent3
|
||||
Pass #anchor3 becomes rgb(255, 255, 0) after removing .ancestor from #parent3
|
||||
Pass #anchor3 becomes rgb(255, 255, 255) after removing .ancestor_prev from #parent_indirect_prev3
|
||||
Pass #anchor3 becomes rgb(255, 255, 0) after adding .ancestor_prev to #parent_direct_prev3
|
||||
Pass #anchor3 becomes rgb(255, 255, 255) after removing .ancestor_prev from #parent_direct_prev3
|
||||
Pass #anchor3 becomes rgb(255, 255, 0) after adding .ancestor_prev to #anchor_indirect_prev3
|
||||
Pass #anchor3 becomes rgb(255, 255, 255) after removing .ancestor_prev from #anchor_indirect_prev3
|
||||
Pass #anchor3 becomes rgb(255, 255, 0) after adding .ancestor_prev to #anchor_direct_prev3
|
||||
Pass #anchor3 becomes rgb(255, 255, 255) after removing .ancestor_prev from #anchor_direct_prev3
|
||||
Pass #anchor4 initially white
|
||||
Pass #anchor4 becomes rgb(0, 128, 0) after adding .prev to #indirect_prev4
|
||||
Pass #anchor4 becomes rgb(255, 255, 255) after removing .prev from #indirect_prev4
|
||||
Pass #anchor4 becomes rgb(0, 128, 0) after adding .prev to #direct_prev4
|
||||
Pass #anchor4 becomes rgb(255, 255, 255) after removing .prev from #direct_prev4
|
||||
Pass #anchor5 initially white
|
||||
Pass #anchor5 becomes rgb(144, 238, 144) after adding .prev to #indirect_prev5
|
||||
Pass #anchor5 becomes rgb(255, 255, 255) after removing .prev from #indirect_prev5
|
||||
Pass #anchor5 becomes rgb(144, 238, 144) after adding .prev to #direct_prev5
|
||||
Pass #anchor5 becomes rgb(255, 255, 255) after removing .prev from #direct_prev5
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Fail
|
||||
Details
|
||||
Result Test Name MessageFail CSS Selector Invalidation: :has() with nesting parent containing :hover promise_test: Unhandled rejection with value: object "ReferenceError: 'test_driver' is not defined"
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 21 tests
|
||||
|
||||
21 Pass
|
||||
Details
|
||||
Result Test Name MessagePass Initial color
|
||||
Pass remove .test to subject_child
|
||||
Pass add .test from subject_child
|
||||
Pass remove .test to subject_descendant
|
||||
Pass add .test from subject_descendant
|
||||
Pass insert element div before subject_child
|
||||
Pass remove element div before subject_child
|
||||
Pass insert element div before subject_descendant
|
||||
Pass remove element div before subject_descendant
|
||||
Pass insert element div after subject_child
|
||||
Pass remove element div after subject_child
|
||||
Pass insert element div after subject_descendant
|
||||
Pass remove element div after subject_descendant
|
||||
Pass insert tree div>div before subject_child
|
||||
Pass remove tree div>div before subject_child
|
||||
Pass insert tree div>div before subject_descendant
|
||||
Pass remove tree div>div before subject_descendant
|
||||
Pass insert tree div.test after subject_child
|
||||
Pass remove tree div.test after subject_child
|
||||
Pass insert tree div.test after subject_descendant
|
||||
Pass remove tree div.test after subject_descendant
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 5 tests
|
||||
|
||||
5 Pass
|
||||
Details
|
||||
Result Test Name MessagePass Initially red
|
||||
Pass :nth-child() no longer matching after removal
|
||||
Pass :nth-last-child() no longer matching after removal
|
||||
Pass :nth-child() in non-subject no longer matching after removal
|
||||
Pass :nth-last-child() in non-subject no longer matching after removal
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 41 tests
|
||||
|
||||
22 Pass
|
||||
19 Fail
|
||||
Details
|
||||
Result Test Name MessagePass Before set checked on checkbox, testing subject
|
||||
Fail Set checked on checkbox, testing subject assert_equals: expected "rgb(255, 0, 0)" but got "rgb(128, 128, 128)"
|
||||
Pass Unset checked on checkbox, testing subject
|
||||
Fail Set select on option assert_equals: expected "rgb(255, 0, 0)" but got "rgb(128, 128, 128)"
|
||||
Pass Reset select
|
||||
Pass Before set disabled on checkbox, testing subject
|
||||
Pass Set disabled on checkbox, testing subject
|
||||
Fail Unset disabled on checkbox, testing subject assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 0, 0)"
|
||||
Pass Before set disabled on checkbox, testing subject3
|
||||
Pass Set disabled on checkbox, testing subject3
|
||||
Pass Unset disabled on checkbox, testing subject3
|
||||
Fail Before set disabled on option, testing subject assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 0, 0)"
|
||||
Pass Set disabled on option, testing subject
|
||||
Fail Unset disabled on option, testing subject assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 0, 0)"
|
||||
Pass Before set disabled on option, testing subject3
|
||||
Pass Set disabled on option, testing subject3
|
||||
Pass Unset disabled on option, testing subject3
|
||||
Fail Before set disabled on optgroup, testing subject assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 0, 0)"
|
||||
Pass Set disabled on optgroup, testing subject
|
||||
Fail Unset disabled on optgroup, testing subject assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 0, 0)"
|
||||
Fail Before set disabled on optgroup, testing subject2 assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 255, 0)"
|
||||
Pass Set disabled on optgroup, testing subject2
|
||||
Fail Unset disabled on optgroup, testing subject2 assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 255, 0)"
|
||||
Pass Before set disabled on optgroup, testing subject3
|
||||
Pass Set disabled on optgroup, testing subject3
|
||||
Pass Unset disabled on optgroup, testing subject3
|
||||
Fail Before set disabled on optgroup, testing subject4 assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 255, 0)"
|
||||
Pass Set disabled on optgroup, testing subject4
|
||||
Fail Unset disabled on optgroup, testing subject4 assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 255, 0)"
|
||||
Fail Before setting value of text_input, testing subject assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 0, 0)"
|
||||
Fail Set value of text_input, testing subject assert_equals: expected "rgb(255, 255, 0)" but got "rgb(255, 0, 0)"
|
||||
Fail Clear value of text_input, testing subject assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 0, 0)"
|
||||
Fail Before setting value of text_input, testing subject2 assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 255, 0)"
|
||||
Pass Set value of text_input, testing subject2
|
||||
Fail Clear value of text_input, testing subject2 assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 255, 0)"
|
||||
Pass Before setting value of text_input, testing subject3
|
||||
Fail Set value of text_input, testing subject3 assert_equals: expected "rgb(255, 255, 0)" but got "rgb(128, 128, 128)"
|
||||
Pass Clear value of text_input, testing subject3
|
||||
Fail Before setting value of text_input, testing subject4 assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 255, 0)"
|
||||
Pass Set value of text_input, testing subject4
|
||||
Fail Clear value of text_input, testing subject4 assert_equals: expected "rgb(128, 128, 128)" but got "rgb(255, 255, 0)"
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>:has pseudo class behavior with explicit ':scope' in its argument</title>
|
||||
<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
|
||||
<main>
|
||||
<div id=d01 class="a">
|
||||
<div id=scope1 class="b">
|
||||
<div id=d02 class="c">
|
||||
<div id=d03 class="c">
|
||||
<div id=d04 class="d"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d05 class="e"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d06>
|
||||
<div id=scope2 class="b">
|
||||
<div id=d07 class="c">
|
||||
<div id=d08 class="c">
|
||||
<div id=d09></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function formatElements(elements) {
|
||||
return elements.map(e => e.id).sort().join();
|
||||
}
|
||||
|
||||
// Test that |selector| returns the given elements in the given scope element
|
||||
function test_selector_all(scope, selector, expected) {
|
||||
test(function() {
|
||||
let actual = Array.from(scope.querySelectorAll(selector));
|
||||
assert_equals(formatElements(actual), formatElements(expected));
|
||||
}, `${selector} matches expected elements on ${scope.id}`);
|
||||
}
|
||||
|
||||
// Test that |selector1| and |selector2| returns same elements in the given scope element
|
||||
function compare_selector_all(scope, selector1, selector2) {
|
||||
test(function() {
|
||||
let result1 = Array.from(scope.querySelectorAll(selector1));
|
||||
let result2 = Array.from(scope.querySelectorAll(selector2));
|
||||
assert_equals(formatElements(result1), formatElements(result2));
|
||||
}, `${selector1} and ${selector2} returns same elements on ${scope.id}`);
|
||||
}
|
||||
|
||||
// descendants of a scope element cannot have the scope element as its descendant
|
||||
test_selector_all(scope1, ':has(:scope)', []);
|
||||
test_selector_all(scope1, ':has(:scope .c)', []);
|
||||
test_selector_all(scope1, ':has(.a :scope)', []);
|
||||
|
||||
// there can be more simple and efficient alternative for a ':scope' in ':has'
|
||||
test_selector_all(scope1, '.a:has(:scope) .c', [d02, d03]);
|
||||
compare_selector_all(scope1, '.a:has(:scope) .c', ':is(.a :scope .c)');
|
||||
test_selector_all(scope2, '.a:has(:scope) .c', []);
|
||||
compare_selector_all(scope2, '.a:has(:scope) .c', ':is(.a :scope .c)');
|
||||
test_selector_all(scope1, '.c:has(:is(:scope .d))', [d02, d03]);
|
||||
compare_selector_all(scope1, '.c:has(:is(:scope .d))', ':scope .c:has(.d)');
|
||||
compare_selector_all(scope1, '.c:has(:is(:scope .d))', '.c:has(.d)');
|
||||
test_selector_all(scope2, '.c:has(:is(:scope .d))', []);
|
||||
compare_selector_all(scope2, '.c:has(:is(:scope .d))', ':scope .c:has(.d)');
|
||||
compare_selector_all(scope2, '.c:has(:is(:scope .d))', '.c:has(.d)');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Basic matching behavior of :has pseudo class</title>
|
||||
<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
|
||||
<main id=main>
|
||||
<div id=a class="ancestor">
|
||||
<div id=b class="parent ancestor">
|
||||
<div id=c class="sibling descendant">
|
||||
<div id=d class="descendant"></div>
|
||||
</div>
|
||||
<div id=e class="target descendant"></div>
|
||||
</div>
|
||||
<div id=f class="parent ancestor">
|
||||
<div id=g class="target descendant"></div>
|
||||
</div>
|
||||
<div id=h class="parent ancestor">
|
||||
<div id=i class="target descendant"></div>
|
||||
<div id=j class="sibling descendant">
|
||||
<div id=k class="descendant"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function formatElements(elements) {
|
||||
return elements.map(e => e.id).sort().join();
|
||||
}
|
||||
|
||||
// Test that |selector| returns the given elements in #main.
|
||||
function test_selector_all(selector, expected) {
|
||||
test(function() {
|
||||
let actual = Array.from(main.querySelectorAll(selector));
|
||||
assert_equals(formatElements(actual), formatElements(expected));
|
||||
}, `${selector} matches expected elements`);
|
||||
}
|
||||
|
||||
// Test that |selector| returns the given element in #main.
|
||||
function test_selector(selector, expected) {
|
||||
test(function() {
|
||||
assert_equals(main.querySelector(selector), expected);
|
||||
}, `${selector} matches expected element`);
|
||||
}
|
||||
|
||||
// Test that |selector| returns the given closest element.
|
||||
function test_closest(node, selector, expected) {
|
||||
test(function() {
|
||||
assert_equals(node.closest(selector), expected);
|
||||
}, `closest(${selector}) returns expected element`);
|
||||
}
|
||||
|
||||
// Test that |selector| returns matching status.
|
||||
function test_matches(node, selector, expected) {
|
||||
test(function() {
|
||||
assert_equals(node.matches(selector), expected);
|
||||
}, `${selector} matches expectedly`);
|
||||
}
|
||||
|
||||
test_selector_all(':has(#a)', []);
|
||||
test_selector_all(':has(.ancestor)', [a]);
|
||||
test_selector_all(':has(.target)', [a, b, f, h]);
|
||||
test_selector_all(':has(.descendant)', [a, b, c, f, h, j]);
|
||||
test_selector_all('.parent:has(.target)', [b, f, h]);
|
||||
test_selector_all(':has(.sibling ~ .target)', [a, b]);
|
||||
test_selector_all('.parent:has(.sibling ~ .target)', [b]);
|
||||
test_selector_all(':has(:is(.target ~ .sibling .descendant))', [a, h, j]);
|
||||
test_selector_all('.parent:has(:is(.target ~ .sibling .descendant))', [h]);
|
||||
test_selector_all('.sibling:has(.descendant) ~ .target', [e]);
|
||||
test_selector_all(':has(> .parent)', [a]);
|
||||
test_selector_all(':has(> .target)', [b, f, h]);
|
||||
test_selector_all(':has(> .parent, > .target)', [a, b, f, h]);
|
||||
test_selector_all(':has(+ #h)', [f]);
|
||||
test_selector_all('.parent:has(~ #h)', [b, f]);
|
||||
test_selector('.sibling:has(.descendant)', c);
|
||||
test_closest(k, '.ancestor:has(.descendant)', h);
|
||||
test_matches(h, ':has(.target ~ .sibling .descendant)', true);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Matches :has pseudo class to uninserted elements</title>
|
||||
<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
|
||||
<script>
|
||||
// Test that |selector| returns matching status.
|
||||
function test_matches(node, selector, expected) {
|
||||
test(function() {
|
||||
assert_equals(node.matches(selector), expected);
|
||||
}, `${selector} matches expectedly`);
|
||||
}
|
||||
|
||||
subject = document.createElement('subject');
|
||||
|
||||
subject.innerHTML = '<child></child>';
|
||||
test_matches(subject, ':has(child)', true);
|
||||
test_matches(subject, ':has(> child)', true);
|
||||
|
||||
subject.innerHTML = '<child><descendant></descendant></child>';
|
||||
test_matches(subject, ':has(descendant)', true);
|
||||
test_matches(subject, ':has(> descendant)', false);
|
||||
|
||||
subject.innerHTML = '<child></child><direct_sibling></direct_sibling><indirect_sibling></indirect_sibling>';
|
||||
test_matches(subject.firstChild, ':has(~ direct_sibling)', true);
|
||||
test_matches(subject.firstChild, ':has(+ direct_sibling)', true);
|
||||
test_matches(subject.firstChild, ':has(~ indirect_sibling)', true);
|
||||
test_matches(subject.firstChild, ':has(+ indirect_sibling)', false);
|
||||
|
||||
test_matches(subject, ':has(*)', true);
|
||||
test_matches(subject, ':has(> *)', true);
|
||||
test_matches(subject, ':has(~ *)', false);
|
||||
test_matches(subject, ':has(+ *)', false);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>:has pseudo class behavior with various relative arguments</title>
|
||||
<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
|
||||
<main id=main>
|
||||
<div id=d01>
|
||||
<div id=d02 class="x">
|
||||
<div id=d03 class="a"></div>
|
||||
<div id=d04></div>
|
||||
<div id=d05 class="b"></div>
|
||||
</div>
|
||||
<div id=d06 class="x">
|
||||
<div id=d07 class="x">
|
||||
<div id=d08 class="a"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d09 class="x">
|
||||
<div id=d10 class="a">
|
||||
<div id=d11 class="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d12 class="x">
|
||||
<div id=d13 class="a">
|
||||
<div id=d14>
|
||||
<div id=d15 class="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d16 class="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d17>
|
||||
<div id=d18 class="x"></div>
|
||||
<div id=d19 class="x"></div>
|
||||
<div id=d20 class="a"></div>
|
||||
<div id=d21 class="x"></div>
|
||||
<div id=d22 class="a">
|
||||
<div id=d23 class="b"></div>
|
||||
</div>
|
||||
<div id=d24 class="x"></div>
|
||||
<div id=d25 class="a">
|
||||
<div id=d26>
|
||||
<div id=d27 class="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d28 class="x"></div>
|
||||
<div id=d29 class="a"></div>
|
||||
<div id=d30 class="b">
|
||||
<div id=d31 class="c"></div>
|
||||
</div>
|
||||
<div id=d32 class="x"></div>
|
||||
<div id=d33 class="a"></div>
|
||||
<div id=d34 class="b">
|
||||
<div id=d35>
|
||||
<div id=d36 class="c"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d37 class="x"></div>
|
||||
<div id=d38 class="a"></div>
|
||||
<div id=d39 class="b"></div>
|
||||
<div id=d40 class="x"></div>
|
||||
<div id=d41 class="a"></div>
|
||||
<div id=d42></div>
|
||||
<div id=d43 class="b">
|
||||
<div id=d44 class="x">
|
||||
<div id=d45 class="c"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d46 class="x"></div>
|
||||
<div id=d47 class="a">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id=d48 class="x">
|
||||
<div id=d49 class="x">
|
||||
<div id=d50 class="x d">
|
||||
<div id=d51 class="x d">
|
||||
<div id=d52 class="x">
|
||||
<div id=d53 class="x e">
|
||||
<div id=d54 class="f"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d55 class="x"></div>
|
||||
<div id=d56 class="x d"></div>
|
||||
<div id=d57 class="x d"></div>
|
||||
<div id=d58 class="x"></div>
|
||||
<div id=d59 class="x e"></div>
|
||||
<div id=d60 class="f"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id=d61 class="x"></div>
|
||||
<div id=d62 class="x y"></div>
|
||||
<div id=d63 class="x y">
|
||||
<div id=d64 class="y g">
|
||||
<div id=d65 class="y">
|
||||
<div id=d66 class="y h">
|
||||
<div id=d67 class="i"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d68 class="x y">
|
||||
<div id=d69 class="x"></div>
|
||||
<div id=d70 class="x"></div>
|
||||
<div id=d71 class="x y">
|
||||
<div id=d72 class="y g">
|
||||
<div id=d73 class="y">
|
||||
<div id=d74 class="y h">
|
||||
<div id=d75 class="i"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=d76 class="x"></div>
|
||||
<div id=d77 class="j"><div id=d78><div id=d79></div></div></div>
|
||||
</div>
|
||||
<div id=d80 class="j"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function formatElements(elements) {
|
||||
return elements.map(e => e.id).sort().join();
|
||||
}
|
||||
|
||||
// Test that |selector| returns the given elements in #main.
|
||||
function test_selector_all(selector, expected) {
|
||||
test(function() {
|
||||
let actual = Array.from(main.querySelectorAll(selector));
|
||||
assert_equals(formatElements(actual), formatElements(expected));
|
||||
}, `${selector} matches expected elements`);
|
||||
}
|
||||
|
||||
test_selector_all('.x:has(.a)', [d02, d06, d07, d09, d12]);
|
||||
test_selector_all('.x:has(.a > .b)', [d09]);
|
||||
test_selector_all('.x:has(.a .b)', [d09, d12]);
|
||||
test_selector_all('.x:has(.a + .b)', [d12]);
|
||||
test_selector_all('.x:has(.a ~ .b)', [d02, d12]);
|
||||
|
||||
test_selector_all('.x:has(> .a)', [d02, d07, d09, d12]);
|
||||
test_selector_all('.x:has(> .a > .b)', [d09]);
|
||||
test_selector_all('.x:has(> .a .b)', [d09, d12]);
|
||||
test_selector_all('.x:has(> .a + .b)', [d12]);
|
||||
test_selector_all('.x:has(> .a ~ .b)', [d02, d12]);
|
||||
|
||||
test_selector_all('.x:has(+ .a)', [d19, d21, d24, d28, d32, d37, d40, d46]);
|
||||
test_selector_all('.x:has(+ .a > .b)', [d21]);
|
||||
test_selector_all('.x:has(+ .a .b)', [d21, d24]);
|
||||
test_selector_all('.x:has(+ .a + .b)', [d28, d32, d37]);
|
||||
test_selector_all('.x:has(+ .a ~ .b)', [d19, d21, d24, d28, d32, d37, d40]);
|
||||
|
||||
test_selector_all('.x:has(~ .a)', [d18, d19, d21, d24, d28, d32, d37, d40, d46]);
|
||||
test_selector_all('.x:has(~ .a > .b)', [d18, d19, d21]);
|
||||
test_selector_all('.x:has(~ .a .b)', [d18, d19, d21, d24]);
|
||||
test_selector_all('.x:has(~ .a + .b)', [d18, d19, d21, d24, d28, d32, d37]);
|
||||
test_selector_all('.x:has(~ .a + .b > .c)', [d18, d19, d21, d24, d28]);
|
||||
test_selector_all('.x:has(~ .a + .b .c)', [d18, d19, d21, d24, d28, d32]);
|
||||
|
||||
test_selector_all('.x:has(.d .e)', [d48, d49, d50]);
|
||||
test_selector_all('.x:has(.d .e) .f', [d54]);
|
||||
test_selector_all('.x:has(> .d)', [d49, d50]);
|
||||
test_selector_all('.x:has(> .d) .f', [d54]);
|
||||
test_selector_all('.x:has(~ .d ~ .e)', [d48, d55, d56]);
|
||||
test_selector_all('.x:has(~ .d ~ .e) ~ .f', [d60]);
|
||||
test_selector_all('.x:has(+ .d ~ .e)', [d55, d56]);
|
||||
test_selector_all('.x:has(+ .d ~ .e) ~ .f', [d60]);
|
||||
|
||||
test_selector_all('.y:has(> .g .h)', [d63, d71])
|
||||
test_selector_all('.y:has(.g .h)', [d63, d68, d71])
|
||||
test_selector_all('.y:has(> .g .h) .i', [d67, d75])
|
||||
test_selector_all('.y:has(.g .h) .i', [d67, d75])
|
||||
|
||||
test_selector_all('.d .x:has(.e)', [d51, d52])
|
||||
|
||||
test_selector_all('.d ~ .x:has(~ .e)', [d57, d58])
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Selectors Test: Chrome crash issue 1470477</title>
|
||||
<link rel="help" href="https://crbug.com/1470477">
|
||||
<style>
|
||||
:has(> :where(label:first-child + [a="a"]:only-of-type,
|
||||
[a="a"]:only-of-type + label:last-child)) label:last-child {
|
||||
margin-inline: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>PASS if this tests does not crash</p>
|
||||
<script>
|
||||
if (window.internals)
|
||||
window.internals.signalTextTestIsDone("PASS");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Specificity for complex :has selectors</title>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#specificity-rules">
|
||||
<style>
|
||||
main :has(#foo) { --t0:PASS; }
|
||||
main :has(.foo) { --t0:FAIL; }
|
||||
|
||||
main :has(span#foo) { --t1:PASS; }
|
||||
main :has(#foo) { --t1:FAIL; }
|
||||
|
||||
main :has(.bar, #foo) { --t2:FAIL; }
|
||||
main :has(#foo, .bar) { --t2:PASS; }
|
||||
|
||||
main :has(.bar, #foo) { --t3:PASS; }
|
||||
main :has(.foo, .bar) { --t3:FAIL; }
|
||||
|
||||
main :has(span + span) { --t4:PASS; }
|
||||
main :has(span) { --t4:FAIL; }
|
||||
|
||||
main :has(span, li, #foo) { --t5:PASS; }
|
||||
main :has(span, li, p) { --t5:FAIL; }
|
||||
|
||||
main div:has(.foo) { --t6:FAIL; }
|
||||
main div.baz { --t6:PASS; }
|
||||
|
||||
main div.baz { --t7:FAIL; }
|
||||
main div:has(.foo) { --t7:PASS; }
|
||||
</style>
|
||||
<main id=main>
|
||||
<div id=div class=baz><p><span id=foo class=foo></span><span class=bar></span><li></li></p></div>
|
||||
</main>
|
||||
<script>
|
||||
function test_value(name, description) {
|
||||
test(function() {
|
||||
let actual = getComputedStyle(div).getPropertyValue(name);
|
||||
assert_equals(actual, 'PASS');
|
||||
}, description);
|
||||
}
|
||||
|
||||
test_value('--t0', ':has(#foo) wins over :has(.foo)');
|
||||
test_value('--t1', ':has(span#foo) wins over :has(#foo)');
|
||||
test_value('--t2', ':has(.bar, #foo) has same specificity as :has(#foo, .bar)');
|
||||
test_value('--t3', ':has(.bar, #foo) wins over :has(.foo, .bar)');
|
||||
test_value('--t4', ':has(span + span) wins over :has(span)');
|
||||
test_value('--t5', ':has(span, li, p) wins over :has(span, lo, p)');
|
||||
test_value('--t6', 'latter .baz wins over :has(.foo)');
|
||||
test_value('--t7', 'latter :has(.foo) wins over .baz');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>:has() invalidation with nesting where the selector is shared</title>
|
||||
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
#outer1:has(.test) {
|
||||
& #subject1_1 {
|
||||
color: red;
|
||||
}
|
||||
& + #subject1_2 {
|
||||
color: orangered;
|
||||
}
|
||||
}
|
||||
|
||||
#outer2:has(.test) {
|
||||
& .ancestor {
|
||||
& #subject2_1 {
|
||||
color: green;
|
||||
}
|
||||
& + #subject2_2 {
|
||||
color: lightgreen;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#outer3:is(:has(.test) .outer) {
|
||||
& #subject3_1 {
|
||||
color: blue;
|
||||
}
|
||||
& + #subject3_2 {
|
||||
color: skyblue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<main id="main">
|
||||
<div>
|
||||
<div id="outer1">
|
||||
<div id="trigger1"></div>
|
||||
<div id="subject1_1"></div>
|
||||
</div>
|
||||
<div id="subject1_2"></div>
|
||||
</div>
|
||||
<div id="outer2">
|
||||
<div id="trigger2"></div>
|
||||
<div class="ancestor">
|
||||
<div id="subject2_1"></div>
|
||||
</div>
|
||||
<div id="subject2_2"></div>
|
||||
</div>
|
||||
<div id="trigger3">
|
||||
<div id="outer3" class="outer">
|
||||
<div id="subject3_1"></div>
|
||||
</div>
|
||||
<div id="subject3_2"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const orangered = 'rgb(255, 69, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
const lightgreen = 'rgb(144, 238, 144)';
|
||||
const blue = 'rgb(0, 0, 255)';
|
||||
const skyblue = 'rgb(135, 206, 235)';
|
||||
|
||||
const colors = {
|
||||
red: {
|
||||
descendant: red,
|
||||
sibling: orangered,
|
||||
},
|
||||
green: {
|
||||
descendant: green,
|
||||
sibling: lightgreen,
|
||||
},
|
||||
blue: {
|
||||
descendant: blue,
|
||||
sibling: skyblue,
|
||||
},
|
||||
};
|
||||
|
||||
function testColor(testName, element, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(element).color, color);
|
||||
}, testName);
|
||||
}
|
||||
|
||||
function testClassChange(trigger, targetDescendant, targetSibling, expected)
|
||||
{
|
||||
trigger.classList.add('test');
|
||||
testColor(`add .test to ${trigger.id} - check ${targetDescendant.id}`, targetDescendant, colors[expected].descendant);
|
||||
testColor(`add .test to ${trigger.id} - check ${targetSibling.id}`, targetSibling, colors[expected].sibling);
|
||||
trigger.classList.remove('test');
|
||||
testColor(`remove .test from ${trigger.id} - check ${targetDescendant.id}`, targetDescendant, grey);
|
||||
testColor(`remove .test from ${trigger.id} - check ${targetSibling.id}`, targetSibling, grey);
|
||||
}
|
||||
|
||||
testClassChange(trigger1, subject1_1, subject1_2, 'red');
|
||||
testClassChange(trigger2, subject2_1, subject2_2, 'green');
|
||||
testClassChange(trigger3, subject3_1, subject3_2, 'blue');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: :has() in adjacent position</title>
|
||||
<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
div:has(.test) + #subject { color: red }
|
||||
div:has([test_attr]) + #subject { color: orangered }
|
||||
div:has(> .test) + #subject { color: green }
|
||||
div:has(> [test_attr]) + #subject { color: lightgreen }
|
||||
div:has(~ .test) + #subject { color: yellow }
|
||||
div:has(~ [test_attr]) + #subject { color: ivory }
|
||||
div:has(+ .test) + #subject { color: blue }
|
||||
div:has(+ [test_attr]) + #subject { color: skyblue }
|
||||
div:has(~ div .test) + #subject { color: purple }
|
||||
div:has(~ div [test_attr]) + #subject { color: violet }
|
||||
div:has(+ div .test) + #subject { color: pink }
|
||||
div:has(+ div [test_attr]) + #subject { color: lightpink }
|
||||
</style>
|
||||
|
||||
<main id=main>
|
||||
<div id=previous_sibling>
|
||||
<div id=previous_sibling_child>
|
||||
<div id=previous_sibling_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=subject></div>
|
||||
<div id=next_sibling>
|
||||
<div id=next_sibling_child>
|
||||
<div id=next_sibling_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const orangered = 'rgb(255, 69, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
const lightgreen = 'rgb(144, 238, 144)';
|
||||
const blue = 'rgb(0, 0, 255)';
|
||||
const skyblue = 'rgb(135, 206, 235)';
|
||||
const yellow = 'rgb(255, 255, 0)';
|
||||
const ivory = 'rgb(255, 255, 240)';
|
||||
const purple = 'rgb(128, 0, 128)';
|
||||
const violet = 'rgb(238, 130, 238)';
|
||||
const pink = 'rgb(255, 192, 203)';
|
||||
const lightpink = 'rgb(255, 182, 193)';
|
||||
const colors = {
|
||||
grey: {
|
||||
classTest: grey,
|
||||
attributeTest: grey,
|
||||
},
|
||||
red: {
|
||||
classTest: red,
|
||||
attributeTest: orangered,
|
||||
},
|
||||
green: {
|
||||
classTest: green,
|
||||
attributeTest: lightgreen,
|
||||
},
|
||||
blue: {
|
||||
classTest: blue,
|
||||
attributeTest: skyblue,
|
||||
},
|
||||
yellow: {
|
||||
classTest: yellow,
|
||||
attributeTest: ivory,
|
||||
},
|
||||
purple: {
|
||||
classTest: purple,
|
||||
attributeTest: violet,
|
||||
},
|
||||
pink: {
|
||||
classTest: pink,
|
||||
attributeTest: lightpink,
|
||||
},
|
||||
};
|
||||
|
||||
function testColor(test_name, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(subject).color, color);
|
||||
}, test_name);
|
||||
}
|
||||
|
||||
function testClassChange(element, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
element.classList.add('test');
|
||||
testColor(`add .test to ${element.id}`, expectedColorForClassTest);
|
||||
element.classList.remove('test');
|
||||
testColor(`remove .test from ${element.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionBefore(beforeElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
newElement.classList.add('test')
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div.test before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element inserted before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div.test before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' to the element inserted again before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted again before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.setAttribute('test_attr', '');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div[test_attr] before ${beforeElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div[test_attr] before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionAfter(afterElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
newElement.classList.add('test')
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div.test after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element inserted after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div.test after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' to the element inserted again after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted again after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.setAttribute('test_attr', '');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div[test_attr] after ${afterElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div[test_attr] after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionBefore(beforeElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newChild.classList.add('test');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert tree div>div.test before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element in the tree inserted before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div.test before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert tree div>div before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' to the element in the tree inserted again before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted again before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.setAttribute('test_attr', '');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div>div[test_attr] before ${beforeElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div>div[test_attr] before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionAfter(afterElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newChild.classList.add('test');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert tree div>div.test after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element in the tree inserted after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div.test after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert tree div>div after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' to the element in the tree inserted again after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted again after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.setAttribute('test_attr', '');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div>div[test_attr] after ${afterElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div>div[test_attr] after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
testColor('Initial color', grey);
|
||||
|
||||
testClassChange(previous_sibling, "grey");
|
||||
testClassChange(previous_sibling_child, "green");
|
||||
testClassChange(previous_sibling_descendant, "red");
|
||||
testClassChange(subject, "blue");
|
||||
testClassChange(next_sibling, "yellow");
|
||||
testClassChange(next_sibling_child, "purple");
|
||||
testClassChange(next_sibling_descendant, "purple");
|
||||
|
||||
testElementInsertionBefore(previous_sibling, "grey");
|
||||
testElementInsertionBefore(previous_sibling_child, "green");
|
||||
testElementInsertionBefore(previous_sibling_descendant, "red");
|
||||
testElementInsertionBefore(subject, "grey");
|
||||
testElementInsertionBefore(next_sibling, "yellow");
|
||||
testElementInsertionBefore(next_sibling_child, "purple");
|
||||
testElementInsertionBefore(next_sibling_descendant, "purple");
|
||||
|
||||
testElementInsertionAfter(previous_sibling, "grey");
|
||||
testElementInsertionAfter(previous_sibling_child, "green");
|
||||
testElementInsertionAfter(previous_sibling_descendant, "red");
|
||||
testElementInsertionAfter(subject, "yellow");
|
||||
testElementInsertionAfter(next_sibling, "yellow");
|
||||
testElementInsertionAfter(next_sibling_child, "purple");
|
||||
testElementInsertionAfter(next_sibling_descendant, "purple");
|
||||
|
||||
testTreeInsertionBefore(previous_sibling, "grey");
|
||||
testTreeInsertionBefore(previous_sibling_child, "red");
|
||||
testTreeInsertionBefore(previous_sibling_descendant, "red");
|
||||
testTreeInsertionBefore(subject, "green");
|
||||
testTreeInsertionBefore(next_sibling, "purple");
|
||||
testTreeInsertionBefore(next_sibling_child, "purple");
|
||||
testTreeInsertionBefore(next_sibling_descendant, "purple");
|
||||
|
||||
testTreeInsertionAfter(previous_sibling, "green");
|
||||
testTreeInsertionAfter(previous_sibling_child, "red");
|
||||
testTreeInsertionAfter(previous_sibling_descendant, "red");
|
||||
testTreeInsertionAfter(subject, "purple");
|
||||
testTreeInsertionAfter(next_sibling, "purple");
|
||||
testTreeInsertionAfter(next_sibling_child, "purple");
|
||||
testTreeInsertionAfter(next_sibling_descendant, "purple");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,320 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: :has() in ancestor position</title>
|
||||
<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
div:has(.test) #subject { color: red }
|
||||
div:has([test_attr]) #subject { color: orangered }
|
||||
div:has(> .test) #subject { color: green }
|
||||
div:has(> [test_attr]) #subject { color: lightgreen }
|
||||
div:has(~ .test) #subject { color: yellow }
|
||||
div:has(~ [test_attr]) #subject { color: ivory }
|
||||
div:has(+ .test) #subject { color: blue }
|
||||
div:has(+ [test_attr]) #subject { color: skyblue }
|
||||
div:has(~ div .test) #subject { color: purple }
|
||||
div:has(~ div [test_attr]) #subject { color: violet }
|
||||
div:has(+ div .test) #subject { color: pink }
|
||||
div:has(+ div [test_attr]) #subject { color: lightpink }
|
||||
</style>
|
||||
|
||||
<main id=main>
|
||||
<div id=subject_ancestor>
|
||||
<div id=subject_parent>
|
||||
<div id=subject>
|
||||
<div id=subject_child>
|
||||
<div id=subject_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=next_sibling>
|
||||
<div id=next_sibling_child>
|
||||
<div id=next_sibling_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const orangered = 'rgb(255, 69, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
const lightgreen = 'rgb(144, 238, 144)';
|
||||
const blue = 'rgb(0, 0, 255)';
|
||||
const skyblue = 'rgb(135, 206, 235)';
|
||||
const yellow = 'rgb(255, 255, 0)';
|
||||
const ivory = 'rgb(255, 255, 240)';
|
||||
const purple = 'rgb(128, 0, 128)';
|
||||
const violet = 'rgb(238, 130, 238)';
|
||||
const pink = 'rgb(255, 192, 203)';
|
||||
const lightpink = 'rgb(255, 182, 193)';
|
||||
const colors = {
|
||||
grey: {
|
||||
classTest: grey,
|
||||
attributeTest: grey,
|
||||
},
|
||||
red: {
|
||||
classTest: red,
|
||||
attributeTest: orangered,
|
||||
},
|
||||
green: {
|
||||
classTest: green,
|
||||
attributeTest: lightgreen,
|
||||
},
|
||||
blue: {
|
||||
classTest: blue,
|
||||
attributeTest: skyblue,
|
||||
},
|
||||
yellow: {
|
||||
classTest: yellow,
|
||||
attributeTest: ivory,
|
||||
},
|
||||
purple: {
|
||||
classTest: purple,
|
||||
attributeTest: violet,
|
||||
},
|
||||
pink: {
|
||||
classTest: pink,
|
||||
attributeTest: lightpink,
|
||||
},
|
||||
};
|
||||
|
||||
function testColor(test_name, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(subject).color, color);
|
||||
}, test_name);
|
||||
}
|
||||
|
||||
function testClassChange(element, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
element.classList.add('test');
|
||||
testColor(`add .test to ${element.id}`, expectedColorForClassTest);
|
||||
element.classList.remove('test');
|
||||
testColor(`remove .test from ${element.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionBefore(beforeElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
newElement.classList.add('test')
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div.test before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element inserted before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div.test before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' to the element inserted again before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted again before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.setAttribute('test_attr', '');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div[test_attr] before ${beforeElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div[test_attr] before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionAfter(afterElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
newElement.classList.add('test')
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div.test after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element inserted after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div.test after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' to the element inserted again after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted again after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.setAttribute('test_attr', '');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div[test_attr] after ${afterElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div[test_attr] after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionBefore(beforeElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newChild.classList.add('test');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert tree div>div.test before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element in the tree inserted before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div.test before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert tree div>div before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' to the element in the tree inserted again before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted again before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.setAttribute('test_attr', '');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div>div[test_attr] before ${beforeElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div>div[test_attr] before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionAfter(afterElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newChild.classList.add('test');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert tree div>div.test after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element in the tree inserted after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div.test after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert tree div>div after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' to the element in the tree inserted again after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted again after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.setAttribute('test_attr', '');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div>div[test_attr] after ${afterElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div>div[test_attr] after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
testColor('Initial color', grey);
|
||||
|
||||
testClassChange(subject_ancestor, "grey");
|
||||
testClassChange(subject_parent, "green");
|
||||
testClassChange(subject, "green");
|
||||
testClassChange(subject_child, "red");
|
||||
testClassChange(subject_descendant, "red");
|
||||
testClassChange(next_sibling, "blue");
|
||||
testClassChange(next_sibling_child, "pink");
|
||||
testClassChange(next_sibling_descendant, "pink");
|
||||
|
||||
testElementInsertionBefore(subject_ancestor, "grey");
|
||||
testElementInsertionBefore(subject_parent, "green");
|
||||
testElementInsertionBefore(subject, "green");
|
||||
testElementInsertionBefore(subject_child, "red");
|
||||
testElementInsertionBefore(subject_descendant, "red");
|
||||
testElementInsertionBefore(next_sibling, "blue");
|
||||
testElementInsertionBefore(next_sibling_child, "pink");
|
||||
testElementInsertionBefore(next_sibling_descendant, "pink");
|
||||
|
||||
testElementInsertionAfter(subject_ancestor, "blue");
|
||||
testElementInsertionAfter(subject_parent, "blue");
|
||||
testElementInsertionAfter(subject, "green");
|
||||
testElementInsertionAfter(subject_child, "red");
|
||||
testElementInsertionAfter(subject_descendant, "red");
|
||||
testElementInsertionAfter(next_sibling, "yellow");
|
||||
testElementInsertionAfter(next_sibling_child, "pink");
|
||||
testElementInsertionAfter(next_sibling_descendant, "pink");
|
||||
|
||||
testTreeInsertionBefore(subject_ancestor, "grey");
|
||||
testTreeInsertionBefore(subject_parent, "red");
|
||||
testTreeInsertionBefore(subject, "red");
|
||||
testTreeInsertionBefore(subject_child, "red");
|
||||
testTreeInsertionBefore(subject_descendant, "red");
|
||||
testTreeInsertionBefore(next_sibling, "pink");
|
||||
testTreeInsertionBefore(next_sibling_child, "pink");
|
||||
testTreeInsertionBefore(next_sibling_descendant, "pink");
|
||||
|
||||
testTreeInsertionAfter(subject_ancestor, "pink");
|
||||
testTreeInsertionAfter(subject_parent, "pink");
|
||||
testTreeInsertionAfter(subject, "red");
|
||||
testTreeInsertionAfter(subject_child, "red");
|
||||
testTreeInsertionAfter(subject_descendant, "red");
|
||||
testTreeInsertionAfter(next_sibling, "purple");
|
||||
testTreeInsertionAfter(next_sibling_child, "pink");
|
||||
testTreeInsertionAfter(next_sibling_descendant, "pink");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,300 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: :has() in parent position</title>
|
||||
<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
div:has(.test) > #subject { color: red }
|
||||
div:has([test_attr]) > #subject { color: orangered }
|
||||
div:has(> .test) > #subject { color: green }
|
||||
div:has(> [test_attr]) > #subject { color: lightgreen }
|
||||
div:has(~ .test) > #subject { color: yellow }
|
||||
div:has(~ [test_attr]) > #subject { color: ivory }
|
||||
div:has(+ .test) > #subject { color: blue }
|
||||
div:has(+ [test_attr]) > #subject { color: skyblue }
|
||||
div:has(~ div .test) > #subject { color: purple }
|
||||
div:has(~ div [test_attr]) > #subject { color: violet }
|
||||
div:has(+ div .test) > #subject { color: pink }
|
||||
div:has(+ div [test_attr]) > #subject { color: lightpink }
|
||||
</style>
|
||||
|
||||
<main id=main>
|
||||
<div id=subject_ancestor>
|
||||
<div id=subject_parent>
|
||||
<div id=subject>
|
||||
<div id=subject_child>
|
||||
<div id=subject_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const orangered = 'rgb(255, 69, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
const lightgreen = 'rgb(144, 238, 144)';
|
||||
const blue = 'rgb(0, 0, 255)';
|
||||
const skyblue = 'rgb(135, 206, 235)';
|
||||
const yellow = 'rgb(255, 255, 0)';
|
||||
const ivory = 'rgb(255, 255, 240)';
|
||||
const purple = 'rgb(128, 0, 128)';
|
||||
const violet = 'rgb(238, 130, 238)';
|
||||
const pink = 'rgb(255, 192, 203)';
|
||||
const lightpink = 'rgb(255, 182, 193)';
|
||||
const colors = {
|
||||
grey: {
|
||||
classTest: grey,
|
||||
attributeTest: grey,
|
||||
},
|
||||
red: {
|
||||
classTest: red,
|
||||
attributeTest: orangered,
|
||||
},
|
||||
green: {
|
||||
classTest: green,
|
||||
attributeTest: lightgreen,
|
||||
},
|
||||
blue: {
|
||||
classTest: blue,
|
||||
attributeTest: skyblue,
|
||||
},
|
||||
yellow: {
|
||||
classTest: yellow,
|
||||
attributeTest: ivory,
|
||||
},
|
||||
purple: {
|
||||
classTest: purple,
|
||||
attributeTest: violet,
|
||||
},
|
||||
pink: {
|
||||
classTest: pink,
|
||||
attributeTest: lightpink,
|
||||
},
|
||||
};
|
||||
|
||||
function testColor(test_name, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(subject).color, color);
|
||||
}, test_name);
|
||||
}
|
||||
|
||||
function testClassChange(element, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
element.classList.add('test');
|
||||
testColor(`add .test to ${element.id}`, expectedColorForClassTest);
|
||||
element.classList.remove('test');
|
||||
testColor(`remove .test from ${element.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionBefore(beforeElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
newElement.classList.add('test');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div.test before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element inserted before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div.test before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' to the element inserted again before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted again before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.setAttribute('test_attr', '');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div[test_attr] before ${beforeElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div[test_attr] before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionAfter(afterElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
newElement.classList.add('test');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div.test after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element inserted after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div.test after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' to the element inserted again after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted again after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.setAttribute('test_attr', '');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div[test_attr] after ${afterElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div[test_attr] after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionBefore(beforeElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newChild.classList.add('test');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert tree div>div.test before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element in the tree inserted before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div.test before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert tree div>div before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' to the element in the tree inserted again before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted again before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.setAttribute('test_attr', '');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div>div[test_attr] before ${beforeElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div>div[test_attr] before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionAfter(afterElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newChild.classList.add('test');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert tree div>div.test after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element in the tree inserted after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div.test after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert tree div>div after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' to the element in the tree inserted again after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted again after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.setAttribute('test_attr', '');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div>div[test_attr] after ${afterElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div>div[test_attr] after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
testColor('Initial color', grey);
|
||||
|
||||
testClassChange(subject_ancestor, "grey");
|
||||
testClassChange(subject_parent, "grey");
|
||||
testClassChange(subject, "green");
|
||||
testClassChange(subject_child, "red");
|
||||
testClassChange(subject_descendant, "red");
|
||||
|
||||
testElementInsertionBefore(subject_ancestor, "grey");
|
||||
testElementInsertionBefore(subject_parent, "grey");
|
||||
testElementInsertionBefore(subject, "green");
|
||||
testElementInsertionBefore(subject_child, "red");
|
||||
testElementInsertionBefore(subject_descendant, "red");
|
||||
|
||||
testElementInsertionAfter(subject_ancestor, "grey");
|
||||
testElementInsertionAfter(subject_parent, "blue");
|
||||
testElementInsertionAfter(subject, "green");
|
||||
testElementInsertionAfter(subject_child, "red");
|
||||
testElementInsertionAfter(subject_descendant, "red");
|
||||
|
||||
testTreeInsertionBefore(subject_ancestor, "grey");
|
||||
testTreeInsertionBefore(subject_parent, "grey");
|
||||
testTreeInsertionBefore(subject, "red");
|
||||
testTreeInsertionBefore(subject_child, "red");
|
||||
testTreeInsertionBefore(subject_descendant, "red");
|
||||
|
||||
testTreeInsertionAfter(subject_ancestor, "grey");
|
||||
testTreeInsertionAfter(subject_parent, "pink");
|
||||
testTreeInsertionAfter(subject, "red");
|
||||
testTreeInsertionAfter(subject_child, "red");
|
||||
testTreeInsertionAfter(subject_descendant, "red");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: :has() in sibling position</title>
|
||||
<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
div:has(.test) ~ #subject { color: red }
|
||||
div:has([test_attr]) ~ #subject { color: orangered }
|
||||
div:has(> .test) ~ #subject { color: green }
|
||||
div:has(> [test_attr]) ~ #subject { color: lightgreen }
|
||||
div:has(~ .test) ~ #subject { color: yellow }
|
||||
div:has(~ [test_attr]) ~ #subject { color: ivory }
|
||||
div:has(+ .test) ~ #subject { color: blue }
|
||||
div:has(+ [test_attr]) ~ #subject { color: skyblue }
|
||||
div:has(~ div .test) ~ #subject { color: purple }
|
||||
div:has(~ div [test_attr]) ~ #subject { color: violet }
|
||||
div:has(+ div .test) ~ #subject { color: pink }
|
||||
div:has(+ div [test_attr]) ~ #subject { color: lightpink }
|
||||
</style>
|
||||
|
||||
<main id=main>
|
||||
<div id=previous_sibling>
|
||||
<div id=previous_sibling_child>
|
||||
<div id=previous_sibling_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=subject></div>
|
||||
<div id=next_sibling>
|
||||
<div id=next_sibling_child>
|
||||
<div id=next_sibling_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const orangered = 'rgb(255, 69, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
const lightgreen = 'rgb(144, 238, 144)';
|
||||
const blue = 'rgb(0, 0, 255)';
|
||||
const skyblue = 'rgb(135, 206, 235)';
|
||||
const yellow = 'rgb(255, 255, 0)';
|
||||
const ivory = 'rgb(255, 255, 240)';
|
||||
const purple = 'rgb(128, 0, 128)';
|
||||
const violet = 'rgb(238, 130, 238)';
|
||||
const pink = 'rgb(255, 192, 203)';
|
||||
const lightpink = 'rgb(255, 182, 193)';
|
||||
const colors = {
|
||||
grey: {
|
||||
classTest: grey,
|
||||
attributeTest: grey,
|
||||
},
|
||||
red: {
|
||||
classTest: red,
|
||||
attributeTest: orangered,
|
||||
},
|
||||
green: {
|
||||
classTest: green,
|
||||
attributeTest: lightgreen,
|
||||
},
|
||||
blue: {
|
||||
classTest: blue,
|
||||
attributeTest: skyblue,
|
||||
},
|
||||
yellow: {
|
||||
classTest: yellow,
|
||||
attributeTest: ivory,
|
||||
},
|
||||
purple: {
|
||||
classTest: purple,
|
||||
attributeTest: violet,
|
||||
},
|
||||
pink: {
|
||||
classTest: pink,
|
||||
attributeTest: lightpink,
|
||||
},
|
||||
};
|
||||
|
||||
function testColor(test_name, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(subject).color, color);
|
||||
}, test_name);
|
||||
}
|
||||
|
||||
function testClassChange(element, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
element.classList.add('test');
|
||||
testColor(`add .test to ${element.id}`, expectedColorForClassTest);
|
||||
element.classList.remove('test');
|
||||
testColor(`remove .test from ${element.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionBefore(beforeElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
newElement.classList.add('test')
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div.test before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element inserted before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div.test before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.remove('test')
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' to the element inserted again before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted again before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.setAttribute('test_attr', '');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div[test_attr] before ${beforeElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div[test_attr] before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionAfter(afterElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
newElement.classList.add('test')
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div.test after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element inserted after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div.test after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.classList.add('test');
|
||||
testColor(`add the class 'test' to the element inserted again after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element inserted again after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.setAttribute('test_attr', '');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div[test_attr] after ${afterElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div[test_attr] after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionBefore(beforeElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newChild.classList.add('test');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert tree div>div.test before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element in the tree inserted before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div.test before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert tree div>div before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' to the element in the tree inserted again before ${beforeElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted again before ${beforeElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div before ${beforeElement.id}`, grey);
|
||||
|
||||
newChild.setAttribute('test_attr', '');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div>div[test_attr] before ${beforeElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div>div[test_attr] before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionAfter(afterElement, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
const expectedColorForAttributeTest = colors[expectedColorName].attributeTest;
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newChild.classList.add('test');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert tree div>div.test after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' again to the element in the tree inserted after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div.test after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert tree div>div after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.classList.add('test');
|
||||
testColor(`add the class 'test' to the element in the tree inserted again after ${afterElement.id}`, expectedColorForClassTest);
|
||||
|
||||
newChild.classList.remove('test');
|
||||
testColor(`remove the class 'test' from the element in the tree inserted again after ${afterElement.id}`, grey);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div after ${afterElement.id}`, grey);
|
||||
|
||||
newChild.setAttribute('test_attr', '');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div>div[test_attr] after ${afterElement.id}`, expectedColorForAttributeTest);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div>div[test_attr] after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
testColor('Initial color', grey);
|
||||
|
||||
testClassChange(previous_sibling, "grey");
|
||||
testClassChange(previous_sibling_child, "green");
|
||||
testClassChange(previous_sibling_descendant, "red");
|
||||
testClassChange(subject, "blue");
|
||||
testClassChange(next_sibling, "yellow");
|
||||
testClassChange(next_sibling_child, "purple");
|
||||
testClassChange(next_sibling_descendant, "purple");
|
||||
|
||||
testElementInsertionBefore(previous_sibling, "grey");
|
||||
testElementInsertionBefore(previous_sibling_child, "green");
|
||||
testElementInsertionBefore(previous_sibling_descendant, "red");
|
||||
testElementInsertionBefore(subject, "blue");
|
||||
testElementInsertionBefore(next_sibling, "yellow");
|
||||
testElementInsertionBefore(next_sibling_child, "purple");
|
||||
testElementInsertionBefore(next_sibling_descendant, "purple");
|
||||
|
||||
testElementInsertionAfter(previous_sibling, "blue");
|
||||
testElementInsertionAfter(previous_sibling_child, "green");
|
||||
testElementInsertionAfter(previous_sibling_descendant, "red");
|
||||
testElementInsertionAfter(subject, "yellow");
|
||||
testElementInsertionAfter(next_sibling, "yellow");
|
||||
testElementInsertionAfter(next_sibling_child, "purple");
|
||||
testElementInsertionAfter(next_sibling_descendant, "purple");
|
||||
|
||||
testTreeInsertionBefore(previous_sibling, "green");
|
||||
testTreeInsertionBefore(previous_sibling_child, "red");
|
||||
testTreeInsertionBefore(previous_sibling_descendant, "red");
|
||||
testTreeInsertionBefore(subject, "pink");
|
||||
testTreeInsertionBefore(next_sibling, "purple");
|
||||
testTreeInsertionBefore(next_sibling_child, "purple");
|
||||
testTreeInsertionBefore(next_sibling_descendant, "purple");
|
||||
|
||||
testTreeInsertionAfter(previous_sibling, "pink");
|
||||
testTreeInsertionAfter(previous_sibling_child, "red");
|
||||
testTreeInsertionAfter(previous_sibling_descendant, "red");
|
||||
testTreeInsertionAfter(subject, "purple");
|
||||
testTreeInsertionAfter(next_sibling, "purple");
|
||||
testTreeInsertionAfter(next_sibling_child, "purple");
|
||||
testTreeInsertionAfter(next_sibling_descendant, "purple");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>:has() invalidation after removing non-first element</title>
|
||||
<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
#subject:has(descendant) { color: red }
|
||||
</style>
|
||||
<main id="main">
|
||||
<div id="subject">
|
||||
<div></div>
|
||||
<descendant id="descendant"></descendant>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
let grey = 'rgb(128, 128, 128)';
|
||||
let red = 'rgb(255, 0, 0)';
|
||||
|
||||
function test_div(test_name, el, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(el).color, color);
|
||||
}, test_name + ': div#' + el.id + '.color');
|
||||
}
|
||||
|
||||
test_div('initial_color', subject, red);
|
||||
subject.removeChild(descendant);
|
||||
test_div('remove descendant', subject, grey);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>:has() invalidation for wiping an element by means of innerHTML</title>
|
||||
<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
.subject:has(.descendant) { color: green}
|
||||
</style>
|
||||
<main id=main>
|
||||
<div id="subject" class="subject"></div>
|
||||
</main>
|
||||
<script>
|
||||
let grey = 'rgb(128, 128, 128)';
|
||||
let green = 'rgb(0, 128, 0)';
|
||||
|
||||
function test_div(test_name, el, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(el).color, color);
|
||||
}, test_name + ': div#' + el.id + '.color');
|
||||
}
|
||||
|
||||
test_div('initial color', subject, grey);
|
||||
|
||||
subject.innerHTML = "This is a text <div><div class='descendant'></div></div>";
|
||||
|
||||
test_div('color after inserting text and div > .descendant', subject, green);
|
||||
|
||||
subject.innerHTML = "This is a text";
|
||||
|
||||
test_div('color after wiping #child to remove div > .descendant', subject, grey);
|
||||
|
||||
subject.innerHTML = "<div id='child'> This is a text <div class='descendant'></div></div>";
|
||||
|
||||
test_div('color after inserting text and #child > .descendant', subject, green);
|
||||
|
||||
child.innerHTML = "This is a text";
|
||||
|
||||
test_div('color after wiping #child to remove .descendant', subject, grey);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>:has() invalidation for sibling insertion and removal</title>
|
||||
<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
#subject1:has(+ #sibling1_1 + #sibling1_2) { color: red }
|
||||
#subject2:has(+ #sibling2_2) { color: green }
|
||||
#subject3:has(+ #sibling3_1 + #sibling3_2 > #siblingchild3_2_1) { color: blue }
|
||||
#subject4:has(+ #sibling4_2 > #siblingchild4_2_1) { color: yellow }
|
||||
#subject5:has(+ #sibling5_1 + #sibling5_2) { color: red }
|
||||
#subject6:has(+ #sibling6_2) { color: green }
|
||||
#subject7:has(+ #sibling7_1 + #sibling7_2 > #siblingchild7_2_1) { color: blue }
|
||||
#subject8:has(+ #sibling8_2 > #siblingchild8_2_1) { color: yellow }
|
||||
#subject9:has(+ #sibling9_1 + #sibling9_2 ~ #sibling9_3) { color: red }
|
||||
#subject10:has(+ #sibling10_2 ~ #sibling10_3) { color: green }
|
||||
#subject11:has(+ #sibling11_1 + #sibling11_2 ~ #sibling11_3 > #siblingchild11_3_1) { color: blue }
|
||||
#subject12:has(+ #sibling12_2 ~ #sibling12_3 > #siblingchild12_3_1) { color: yellow }
|
||||
.sibling13:has(~ .sibling13) { color: green }
|
||||
#subject14:has(~ #sibling14_1 ~ #sibling14_2 ~ #sibling14_3) { color: green }
|
||||
</style>
|
||||
|
||||
<main id="main">
|
||||
<div id="parent1">
|
||||
<div id="subject1"></div>
|
||||
<div id="sibling1_2"></div>
|
||||
<div id="sibling1_3"></div>
|
||||
</div>
|
||||
<div id="parent2">
|
||||
<div id="subject2"></div>
|
||||
<div id="sibling2_1"></div>
|
||||
<div id="sibling2_2"></div>
|
||||
<div id="sibling2_3""></div>
|
||||
</div>
|
||||
<div id="parent3">
|
||||
<div id="subject3"></div>
|
||||
<div id="sibling3_2">
|
||||
<div id="siblingchild3_2_1"></div>
|
||||
</div>
|
||||
<div id="sibling3_3"></div>
|
||||
</div>
|
||||
<div id="parent4">
|
||||
<div id="subject4"></div>
|
||||
<div id="sibling4_1"></div>
|
||||
<div id="sibling4_2">
|
||||
<div id="siblingchild4_2_1"></div>
|
||||
</div>
|
||||
<div id="sibling4_3"></div>
|
||||
</div>
|
||||
<div id="parent5">
|
||||
<div id="subject5"></div>
|
||||
<div id="sibling5_1"></div>
|
||||
<div id="sibling5_2"></div>
|
||||
<div id="sibling5_3""></div>
|
||||
</div>
|
||||
<div id="parent6">
|
||||
<div id="subject6"></div>
|
||||
<div id="sibling6_2"></div>
|
||||
<div id="sibling6_3"></div>
|
||||
</div>
|
||||
<div id="parent7">
|
||||
<div id="subject7"></div>
|
||||
<div id="sibling7_1"></div>
|
||||
<div id="sibling7_2">
|
||||
<div id="siblingchild7_2_1"></div>
|
||||
</div>
|
||||
<div id="sibling7_3"></div>
|
||||
<div id="parent8">
|
||||
<div id="subject8"></div>
|
||||
<div id="sibling8_2">
|
||||
<div id="siblingchild8_2_1"></div>
|
||||
</div>
|
||||
<div id="sibling8_3"></div>
|
||||
</div>
|
||||
<div id="parent9">
|
||||
<div id="subject9"></div>
|
||||
<div id="sibling9_2"></div>
|
||||
<div id="sibling9_3"></div>
|
||||
<div id="sibling9_4"></div>
|
||||
</div>
|
||||
<div id="parent10">
|
||||
<div id="subject10"></div>
|
||||
<div id="sibling10_1"></div>
|
||||
<div id="sibling10_2"></div>
|
||||
<div id="sibling10_3""></div>
|
||||
<div id="sibling10_4""></div>
|
||||
</div>
|
||||
<div id="parent11">
|
||||
<div id="subject11"></div>
|
||||
<div id="sibling11_2"></div>
|
||||
<div id="sibling11_3">
|
||||
<div id="siblingchild11_3_1"></div>
|
||||
</div>
|
||||
<div id="sibling11_4"></div>
|
||||
</div>
|
||||
<div id="parent12">
|
||||
<div id="subject12"></div>
|
||||
<div id="sibling12_1"></div>
|
||||
<div id="sibling12_2"></div>
|
||||
<div id="sibling12_3">
|
||||
<div id="siblingchild12_3_1"></div>
|
||||
</div>
|
||||
<div id="sibling12_4"></div>
|
||||
</div>
|
||||
<div id="parent13">
|
||||
<div class="sibling13"></div>
|
||||
<div id="subject13" class="sibling13"></div>
|
||||
</div>
|
||||
<div id="parent14">
|
||||
<div id="subject14"></div>
|
||||
<div id="sibling14_1"></div>
|
||||
<div id="sibling14_2"></div>
|
||||
<div id="sibling14_3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
const blue = 'rgb(0, 0, 255)';
|
||||
const yellow = 'rgb(255, 255, 0)';
|
||||
|
||||
function testColor(test_name, element, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(element).color, color);
|
||||
}, test_name);
|
||||
}
|
||||
|
||||
function insertBefore(parent, reference, child_id) {
|
||||
var child = document.createElement("div");
|
||||
child.id = child_id;
|
||||
parent.insertBefore(child, reference);
|
||||
}
|
||||
|
||||
testColor(`subject1: initial color should be ${grey}`, subject1, grey);
|
||||
insertBefore(parent1, sibling1_2, "sibling1_1");
|
||||
testColor(`subject1: color after #sibling1_1 inserted should be ${red}`,
|
||||
subject1, red);
|
||||
|
||||
testColor(`subject2: initial color should be ${grey}`, subject2, grey);
|
||||
sibling2_1.remove();
|
||||
testColor(`subject2: color after #sibling2_1 removed should be ${green}`,
|
||||
subject2, green);
|
||||
|
||||
testColor(`subject3: initial color should be ${grey}`, subject3, grey);
|
||||
insertBefore(parent3, sibling3_2, "sibling3_1");
|
||||
testColor(`subject3: color after #sibling3_1 inserted should be ${blue}`,
|
||||
subject3, blue);
|
||||
|
||||
testColor(`subject4: initial color should be ${grey}`, subject4, grey);
|
||||
sibling4_1.remove();
|
||||
testColor(`subject4: color after #sibling4_1 removed should be ${yellow}`,
|
||||
subject4, yellow);
|
||||
|
||||
testColor(`subject5: initial color should be ${red}`, subject5, red);
|
||||
sibling5_1.remove();
|
||||
testColor(`subject5: color after #sibling5_1 removed should be ${grey}`,
|
||||
subject5, grey);
|
||||
|
||||
testColor(`subject6: initial color should be ${green}`, subject6, green);
|
||||
insertBefore(parent6, sibling6_2, "sibling6_1");
|
||||
testColor(`subject6: color after #sibling6_1 inserted should be ${grey}`,
|
||||
subject6, grey);
|
||||
|
||||
testColor(`subject7: initial color should be ${blue}`, subject7, blue);
|
||||
sibling7_1.remove();
|
||||
testColor(`subject7: color after #sibling7_1 removed should be ${grey}`,
|
||||
subject7, grey);
|
||||
|
||||
testColor(`subject8: initial color should be ${yellow}`, subject8, yellow);
|
||||
insertBefore(parent8, sibling8_2, "sibling8_1");
|
||||
testColor(`subject8: color after #sibling8_1 inserted should be ${grey}`,
|
||||
subject8, grey);
|
||||
|
||||
testColor(`subject9: initial color should be ${grey}`, subject9, grey);
|
||||
insertBefore(parent9, sibling9_2, "sibling9_1");
|
||||
testColor(`subject9: color after #sibling9_1 inserted should be ${red}`,
|
||||
subject1, red);
|
||||
|
||||
testColor(`subject10: initial color should be ${grey}`, subject10, grey);
|
||||
sibling10_1.remove();
|
||||
testColor(`subject10: color after #sibling10_1 removed should be ${green}`,
|
||||
subject10, green);
|
||||
|
||||
testColor(`subject11: initial color should be ${grey}`, subject11, grey);
|
||||
insertBefore(parent11, sibling11_2, "sibling11_1");
|
||||
testColor(`subject11: color after #sibling11_1 inserted should be ${blue}`,
|
||||
subject11, blue);
|
||||
|
||||
testColor(`subject12: initial color should be ${grey}`, subject12, grey);
|
||||
sibling12_1.remove();
|
||||
testColor(`subject12: color after #sibling12_1 removed should be ${yellow}`,
|
||||
subject12, yellow);
|
||||
|
||||
testColor(`subject13: initial color should be ${grey}`, subject13, grey);
|
||||
const d = document.createElement("div");
|
||||
d.classList.add("sibling13");
|
||||
parent13.appendChild(d);
|
||||
testColor(`subject13: color after #sibling12_1 removed should be ${green}`,
|
||||
subject13, green);
|
||||
|
||||
testColor(`subject14: initial color should be ${green}`, subject14, green);
|
||||
sibling14_2.remove();
|
||||
testColor(`subject14: color after #sibling14_2 removed should be ${grey}`, subject14, grey);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: :has() with sibling combinator argument</title>
|
||||
<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
#subject:has(~ .test) { color: red }
|
||||
#subject:has(+ .test) { color: green }
|
||||
#subject:has(~ div .test) { color: blue }
|
||||
#subject:has(~ div > .test) { color: purple }
|
||||
#subject:has(+ div .test) { color: yellow }
|
||||
#subject:has(+ div > .test) { color: pink }
|
||||
</style>
|
||||
|
||||
<main id=main>
|
||||
<div id=subject></div>
|
||||
<div id=first_sibling>
|
||||
<div id=first_sibling_child>
|
||||
<div id=first_sibling_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=second_sibling></div>
|
||||
<div id=third_sibling>
|
||||
<div id=third_sibling_child>
|
||||
<div id=third_sibling_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
const blue = 'rgb(0, 0, 255)';
|
||||
const yellow = 'rgb(255, 255, 0)';
|
||||
const purple = 'rgb(128, 0, 128)';
|
||||
const pink = 'rgb(255, 192, 203)';
|
||||
|
||||
function testColor(test_name, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(subject).color, color);
|
||||
}, test_name);
|
||||
}
|
||||
|
||||
function testClassChange(element, expectedColor)
|
||||
{
|
||||
element.classList.add('test');
|
||||
testColor(`add .test to ${element.id}`, expectedColor);
|
||||
element.classList.remove('test');
|
||||
testColor(`remove .test from ${element.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionBefore(beforeElement, expectedColor)
|
||||
{
|
||||
const newElement = document.createElement('div');
|
||||
newElement.classList.add('test')
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div.test before ${beforeElement.id}`, expectedColor);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div.test before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionAfter(afterElement, expectedColor)
|
||||
{
|
||||
const newElement = document.createElement('div');
|
||||
newElement.classList.add('test')
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div.test after ${afterElement.id}`, expectedColor);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div.test after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionBefore(beforeElement, expectedColor)
|
||||
{
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newChild.classList.add('test');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert tree div>div.test before ${beforeElement.id}`, expectedColor);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div.test before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionAfter(afterElement, expectedColor)
|
||||
{
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newChild.classList.add('test');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert tree div>div.test after ${afterElement.id}`, expectedColor);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div.test after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
testColor('initial_color', grey);
|
||||
|
||||
testClassChange(first_sibling, green);
|
||||
testClassChange(second_sibling, red);
|
||||
testClassChange(third_sibling, red);
|
||||
testClassChange(first_sibling_child, pink);
|
||||
testClassChange(first_sibling_descendant, yellow);
|
||||
testClassChange(third_sibling_child, purple);
|
||||
testClassChange(third_sibling_descendant, blue);
|
||||
|
||||
testElementInsertionBefore(first_sibling, green);
|
||||
testElementInsertionBefore(second_sibling, red);
|
||||
testElementInsertionBefore(third_sibling, red);
|
||||
testElementInsertionBefore(first_sibling_child, pink);
|
||||
testElementInsertionBefore(first_sibling_descendant, yellow);
|
||||
testElementInsertionBefore(third_sibling_child, purple);
|
||||
testElementInsertionBefore(third_sibling_descendant, blue);
|
||||
|
||||
testElementInsertionAfter(first_sibling, red);
|
||||
testElementInsertionAfter(second_sibling, red);
|
||||
testElementInsertionAfter(third_sibling, red);
|
||||
testElementInsertionAfter(first_sibling_child, pink);
|
||||
testElementInsertionAfter(first_sibling_descendant, yellow);
|
||||
testElementInsertionAfter(third_sibling_child, purple);
|
||||
testElementInsertionAfter(third_sibling_descendant, blue);
|
||||
|
||||
testTreeInsertionBefore(first_sibling, pink);
|
||||
testTreeInsertionBefore(second_sibling, purple);
|
||||
testTreeInsertionBefore(third_sibling, purple);
|
||||
testTreeInsertionBefore(first_sibling_child, yellow);
|
||||
testTreeInsertionBefore(first_sibling_descendant, yellow);
|
||||
testTreeInsertionBefore(third_sibling_child, blue);
|
||||
testTreeInsertionBefore(third_sibling_descendant, blue);
|
||||
|
||||
testTreeInsertionAfter(first_sibling, purple);
|
||||
testTreeInsertionAfter(second_sibling, purple);
|
||||
testTreeInsertionAfter(third_sibling, purple);
|
||||
testTreeInsertionAfter(first_sibling_child, yellow);
|
||||
testTreeInsertionAfter(first_sibling_descendant, yellow);
|
||||
testTreeInsertionAfter(third_sibling_child, blue);
|
||||
testTreeInsertionAfter(third_sibling_descendant, blue);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: Invalidate :has() as result of insertion/removal</title>
|
||||
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
#subject:has(+ #next_sibling) { color: red; }
|
||||
#prev_sibling:has(+ #subject + #next_sibling) { color: green; }
|
||||
</style>
|
||||
|
||||
<main id=main>
|
||||
<div id=prev_sibling></div>
|
||||
<div id=subject></div>
|
||||
<div id=blocks_match></div>
|
||||
<div id=next_sibling></div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
|
||||
function testColors(test_name, subject_color, prev_sibling_color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(subject).color, subject_color);
|
||||
assert_equals(getComputedStyle(prev_sibling).color, prev_sibling_color);
|
||||
}, test_name);
|
||||
}
|
||||
|
||||
testColors('Initial colors', grey, grey);
|
||||
|
||||
const d = blocks_match;
|
||||
d.remove();
|
||||
|
||||
testColors('Matches after #blocks_match removed', red, green);
|
||||
subject.after(d);
|
||||
|
||||
testColors('Does not match after #blocks_match added', grey, grey);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: :has() affected by unstyled elements</title>
|
||||
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
.none { display: none; }
|
||||
#subject:has(.test) { color: red; }
|
||||
#subject:has(~ #sibling .test) { color: green; }
|
||||
#subject:has(:is(.test_inner #subject_descendant)) { color: blue; }
|
||||
#subject:has(~ #sibling :is(.test_inner #sibling_descendant)) { color: yellow; }
|
||||
</style>
|
||||
|
||||
<main id=main>
|
||||
<div id=subject>
|
||||
<div id=subject_child class="none">
|
||||
<div id=subject_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=sibling class="none">
|
||||
<div id=sibling_child>
|
||||
<div id=sibling_descendant></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
const blue = 'rgb(0, 0, 255)';
|
||||
const yellow = "rgb(255, 255, 0)";
|
||||
const colors = {
|
||||
grey: {
|
||||
classTest: grey,
|
||||
},
|
||||
red: {
|
||||
classTest: red,
|
||||
},
|
||||
green: {
|
||||
classTest: green,
|
||||
},
|
||||
blue: {
|
||||
classTest: blue,
|
||||
},
|
||||
yellow: {
|
||||
classTest: yellow,
|
||||
},
|
||||
};
|
||||
|
||||
function testColor(test_name, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(subject).color, color);
|
||||
}, test_name);
|
||||
}
|
||||
|
||||
function testClassChange(element, cls, expectedColorName)
|
||||
{
|
||||
const expectedColorForClassTest = colors[expectedColorName].classTest;
|
||||
element.classList.add(cls);
|
||||
testColor(`add ${cls} to ${element.id}`, expectedColorForClassTest);
|
||||
element.classList.remove(cls);
|
||||
testColor(`remove ${cls} from ${element.id}`, grey);
|
||||
}
|
||||
|
||||
testColor('Initial color', grey);
|
||||
|
||||
testClassChange(subject_descendant, 'test', 'red');
|
||||
testClassChange(sibling_descendant, 'test', 'green');
|
||||
testClassChange(subject_child, 'test_inner', 'blue');
|
||||
testClassChange(sibling_child, 'test_inner', 'yellow');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: :has() with nesting parent containing complex selector</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/testdriver.js"></script>
|
||||
<script src="../../../resources/testdriver-actions.js"></script>
|
||||
<script src="../../../resources/testdriver-vendor.js"></script>
|
||||
<style>
|
||||
.anchor { background-color: white; }
|
||||
|
||||
.ancestor .descendant {
|
||||
.anchor:has(&) { background-color: blue; }
|
||||
}
|
||||
|
||||
.ancestor .child {
|
||||
.anchor:has(> &) { background-color: lightblue; }
|
||||
}
|
||||
|
||||
.ancestor_prev ~ div .descendant {
|
||||
.anchor:has(&) { background-color: yellow; }
|
||||
}
|
||||
|
||||
.ancestor_prev ~ div.ancestor .descendant {
|
||||
.anchor:has(&) { background-color: yellowgreen; }
|
||||
}
|
||||
|
||||
.prev ~ .indirect_next {
|
||||
.anchor:has(~ &) { background-color: green; }
|
||||
}
|
||||
|
||||
.prev ~ .direct_next {
|
||||
.anchor:has(+ &) { background-color: lightgreen; }
|
||||
}
|
||||
</style>
|
||||
<div><div id="grand_parent1">
|
||||
<div id="parent1">
|
||||
<div id="anchor1" class="anchor">
|
||||
<div><div class="descendant"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div><div id="grand_parent2">
|
||||
<div id="parent2">
|
||||
<div id="anchor2" class="anchor">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div><div id="grand_parent_indirect_prev3"></div>
|
||||
<div id="grand_parent_direct_prev3"></div>
|
||||
<div id="grand_parent3">
|
||||
<div id="parent_indirect_prev3"></div>
|
||||
<div id="parent_direct_prev3"></div>
|
||||
<div id="parent3">
|
||||
<div id="anchor_indirect_prev3"></div>
|
||||
<div id="anchor_direct_prev3"></div>
|
||||
<div id="anchor3" class="anchor">
|
||||
<div><div class="descendant"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div><div id="indirect_prev4"></div>
|
||||
<div id="direct_prev4"></div>
|
||||
<div id="anchor4" class="anchor"></div>
|
||||
<div></div><div class="indirect_next">
|
||||
</div></div>
|
||||
<div><div id="indirect_prev5"></div>
|
||||
<div id="direct_prev5"></div>
|
||||
<div id="anchor5" class="anchor"></div>
|
||||
<div class="direct_next">
|
||||
</div></div>
|
||||
<script>
|
||||
const white = "rgb(255, 255, 255)";
|
||||
const blue = "rgb(0, 0, 255)";
|
||||
const lightblue = "rgb(173, 216, 230)";
|
||||
const yellow = "rgb(255, 255, 0)";
|
||||
const yellowgreen = "rgb(154, 205, 50)";
|
||||
const green = "rgb(0, 128, 0)";
|
||||
const lightgreen = "rgb(144, 238, 144)";
|
||||
|
||||
function bg_color(element, color, message) {
|
||||
promise_test(async () => {
|
||||
assert_equals(getComputedStyle(element)['background-color'], color);
|
||||
}, message);
|
||||
}
|
||||
|
||||
function add_class_and_check_bg_color(
|
||||
element_to_add, class_name, has_anchor, color) {
|
||||
promise_test(async () => {
|
||||
element_to_add.classList.add(class_name);
|
||||
assert_equals(getComputedStyle(has_anchor)['background-color'], color);
|
||||
}, `#${has_anchor.id} becomes ${color} after adding .${class_name} to #${element_to_add.id}`);
|
||||
}
|
||||
|
||||
function remove_class_and_check_bg_color(
|
||||
element_to_remove, class_name, has_anchor, color) {
|
||||
promise_test(async () => {
|
||||
element_to_remove.classList.remove(class_name);
|
||||
assert_equals(getComputedStyle(has_anchor)['background-color'], color);
|
||||
}, `#${has_anchor.id} becomes ${color} after removing .${class_name} from #${element_to_remove.id}`);
|
||||
}
|
||||
|
||||
bg_color(anchor1, white, "#anchor1 initially white");
|
||||
add_class_and_check_bg_color(grand_parent1, "ancestor", anchor1, blue);
|
||||
remove_class_and_check_bg_color(grand_parent1, "ancestor", anchor1, white);
|
||||
add_class_and_check_bg_color(parent1, "ancestor", anchor1, blue);
|
||||
remove_class_and_check_bg_color(parent1, "ancestor", anchor1, white);
|
||||
|
||||
bg_color(anchor2, white, "#anchor2 initially white");
|
||||
add_class_and_check_bg_color(grand_parent2, "ancestor", anchor2, lightblue);
|
||||
remove_class_and_check_bg_color(grand_parent2, "ancestor", anchor2, white);
|
||||
add_class_and_check_bg_color(parent2, "ancestor", anchor2, lightblue);
|
||||
remove_class_and_check_bg_color(parent2, "ancestor", anchor2, white);
|
||||
|
||||
bg_color(anchor3, white, "#anchor3 initially white");
|
||||
add_class_and_check_bg_color(grand_parent_indirect_prev3, "ancestor_prev",
|
||||
anchor3, yellow);
|
||||
add_class_and_check_bg_color(grand_parent3, "ancestor", anchor3, yellowgreen);
|
||||
remove_class_and_check_bg_color(grand_parent3, "ancestor", anchor3, yellow);
|
||||
remove_class_and_check_bg_color(grand_parent_indirect_prev3, "ancestor_prev",
|
||||
anchor3, white);
|
||||
add_class_and_check_bg_color(grand_parent_direct_prev3, "ancestor_prev",
|
||||
anchor3, yellow);
|
||||
remove_class_and_check_bg_color(grand_parent_direct_prev3, "ancestor_prev",
|
||||
anchor3, white);
|
||||
add_class_and_check_bg_color(parent_indirect_prev3, "ancestor_prev",
|
||||
anchor3, yellow);
|
||||
add_class_and_check_bg_color(parent3, "ancestor", anchor3, yellowgreen);
|
||||
remove_class_and_check_bg_color(parent3, "ancestor", anchor3, yellow);
|
||||
remove_class_and_check_bg_color(parent_indirect_prev3, "ancestor_prev",
|
||||
anchor3, white);
|
||||
add_class_and_check_bg_color(parent_direct_prev3, "ancestor_prev",
|
||||
anchor3, yellow);
|
||||
remove_class_and_check_bg_color(parent_direct_prev3, "ancestor_prev",
|
||||
anchor3, white);
|
||||
add_class_and_check_bg_color(anchor_indirect_prev3, "ancestor_prev",
|
||||
anchor3, yellow);
|
||||
remove_class_and_check_bg_color(anchor_indirect_prev3, "ancestor_prev",
|
||||
anchor3, white);
|
||||
add_class_and_check_bg_color(anchor_direct_prev3, "ancestor_prev",
|
||||
anchor3, yellow);
|
||||
remove_class_and_check_bg_color(anchor_direct_prev3, "ancestor_prev",
|
||||
anchor3, white);
|
||||
|
||||
bg_color(anchor4, white, "#anchor4 initially white");
|
||||
add_class_and_check_bg_color(indirect_prev4, "prev", anchor4, green);
|
||||
remove_class_and_check_bg_color(indirect_prev4, "prev", anchor4, white);
|
||||
add_class_and_check_bg_color(direct_prev4, "prev", anchor4, green);
|
||||
remove_class_and_check_bg_color(direct_prev4, "prev", anchor4, white);
|
||||
|
||||
bg_color(anchor5, white, "#anchor5 initially white");
|
||||
add_class_and_check_bg_color(indirect_prev5, "prev", anchor5, lightgreen);
|
||||
remove_class_and_check_bg_color(indirect_prev5, "prev", anchor5, white);
|
||||
add_class_and_check_bg_color(direct_prev5, "prev", anchor5, lightgreen);
|
||||
remove_class_and_check_bg_color(direct_prev5, "prev", anchor5, white);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: :has() with nesting parent containing :hover</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/testdriver.js"></script>
|
||||
<script src="../../../resources/testdriver-actions.js"></script>
|
||||
<script src="../../../resources/testdriver-vendor.js"></script>
|
||||
<style>
|
||||
dd, dt { background: white; }
|
||||
dd:hover {
|
||||
dt:has(~ &) { background: lime; }
|
||||
}
|
||||
</style>
|
||||
<dt id=dt1>#dt1</dt>
|
||||
<dd id=dd1>#dd1, Hover me, the DT above should go lime</dd>
|
||||
<dt id=dt2>#dt2</dt>
|
||||
<dd id=dd2>#dd2, Hover me, both DTs above should go lime</dd>
|
||||
<script>
|
||||
const white = 'rgb(255, 255, 255)';
|
||||
const lime = 'rgb(0, 255, 0)';
|
||||
|
||||
function bg_color(element, color, message) {
|
||||
assert_equals(getComputedStyle(element)['background-color'], color, message);
|
||||
}
|
||||
|
||||
promise_test(async () => {
|
||||
bg_color(dt1, white, "#dt1 initially white");
|
||||
bg_color(dd1, white, "#dd1 initially white");
|
||||
bg_color(dt2, white, "#dt2 initially white");
|
||||
bg_color(dd2, white, "#dd2 initially white");
|
||||
|
||||
await new test_driver.Actions().pointerMove(0, 0, {origin: dd1}).send();
|
||||
|
||||
bg_color(dt1, lime, "#dt1 should go lime when hover #dd1");
|
||||
bg_color(dd1, white, "#dd1 doesn't change when hover #dd1");
|
||||
bg_color(dt2, white, "#dt2 doesn't change when hover #dd1");
|
||||
bg_color(dd2, white, "#dd2 doesn't change when hover #dd1");
|
||||
|
||||
await new test_driver.Actions().pointerMove(0, 0, {origin: dt1}).send();
|
||||
|
||||
bg_color(dt1, white, "#dt1 should go white when hover #dt2");
|
||||
bg_color(dd1, white, "#dd1 doesn't change when hover #dt2");
|
||||
bg_color(dt2, white, "#dt2 doesn't change when hover #dt2");
|
||||
bg_color(dd2, white, "#dd2 doesn't change when hover #dt2");
|
||||
|
||||
await new test_driver.Actions().pointerMove(0, 0, {origin: dd2}).send();
|
||||
|
||||
bg_color(dt1, lime, "#dt1 should go lime when hover #dd2");
|
||||
bg_color(dd1, white, "#dd1 doesn't change when hover #dd2");
|
||||
bg_color(dt2, lime, "#dt2 should go lime when hover #dd2");
|
||||
bg_color(dd2, white, "#dd2 doesn't change when hover #dd2");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: :has() with :not()</title>
|
||||
<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
div, main { color: grey }
|
||||
#subject:has(:not(.test)) { color: green }
|
||||
#subject:has(.test :not(.test)) { color: red }
|
||||
</style>
|
||||
|
||||
<main id=main>
|
||||
<div id=subject>
|
||||
<div id=subject_child class=test>
|
||||
<div id=subject_descendant class=test></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
const blue = 'rgb(0, 0, 255)';
|
||||
|
||||
function testColor(test_name, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(subject).color, color);
|
||||
}, test_name);
|
||||
}
|
||||
|
||||
function testClassChange(element, expectedColor)
|
||||
{
|
||||
element.classList.remove('test');
|
||||
testColor(`remove .test to ${element.id}`, expectedColor);
|
||||
element.classList.add('test');
|
||||
testColor(`add .test from ${element.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionBefore(beforeElement, expectedColor)
|
||||
{
|
||||
const newElement = document.createElement('div');
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert element div before ${beforeElement.id}`, expectedColor);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testElementInsertionAfter(afterElement, expectedColor)
|
||||
{
|
||||
const newElement = document.createElement('div');
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert element div after ${afterElement.id}`, expectedColor);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove element div after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionBefore(beforeElement, expectedColor)
|
||||
{
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
beforeElement.before(newElement);
|
||||
testColor(`insert tree div>div before ${beforeElement.id}`, expectedColor);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div>div before ${beforeElement.id}`, grey);
|
||||
}
|
||||
|
||||
function testTreeInsertionAfter(afterElement, expectedColor)
|
||||
{
|
||||
const newElement = document.createElement('div');
|
||||
const newChild = document.createElement('div');
|
||||
newElement.appendChild(newChild);
|
||||
|
||||
afterElement.after(newElement);
|
||||
testColor(`insert tree div.test after ${afterElement.id}`, expectedColor);
|
||||
|
||||
newElement.remove();
|
||||
testColor(`remove tree div.test after ${afterElement.id}`, grey);
|
||||
}
|
||||
|
||||
testColor('Initial color', grey);
|
||||
|
||||
testClassChange(subject_child, green);
|
||||
testClassChange(subject_descendant, red);
|
||||
|
||||
testElementInsertionBefore(subject_child, green);
|
||||
testElementInsertionBefore(subject_descendant, red);
|
||||
|
||||
testElementInsertionAfter(subject_child, green);
|
||||
testElementInsertionAfter(subject_descendant, red);
|
||||
|
||||
testTreeInsertionBefore(subject_child, green);
|
||||
testTreeInsertionBefore(subject_descendant, red);
|
||||
|
||||
testTreeInsertionAfter(subject_child, green);
|
||||
testTreeInsertionAfter(subject_descendant, red);
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selectors Test: :has(:nth-child()) invalidation for sibling change</title>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
#test-container > div { background-color: green; }
|
||||
#target1:has(.item:nth-child(3)) { background-color: red; }
|
||||
#target2:has(.item:nth-last-child(3)) { background-color: red; }
|
||||
#target3:has(.item:nth-child(3) > .child) { background-color: red; }
|
||||
#target4:has(.item:nth-last-child(3) > .child) { background-color: red; }
|
||||
</style>
|
||||
<div id="test-container">
|
||||
<div id="target1">
|
||||
<div class="item" id="item1">FAIL if you see this text</div>
|
||||
<div class="item"></div>
|
||||
<div class="item">This text should have a green background</div>
|
||||
</div>
|
||||
<div id="target2">
|
||||
<div class="item">This text should have a green background</div>
|
||||
<div class="item"></div>
|
||||
<div class="item" id="item2">FAIL if you see this text</div>
|
||||
</div>
|
||||
<div id="target3">
|
||||
<div class="item" id="item3">FAIL if you see this text</div>
|
||||
<div class="item"></div>
|
||||
<div class="item">
|
||||
<span class="child">This text should have a green background<span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="target4">
|
||||
<div class="item">
|
||||
<span class="child">This text should have a green background<span>
|
||||
</div>
|
||||
<div class="item"></div>
|
||||
<div class="item" id="item4">FAIL if you see this text</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(target1).backgroundColor, "rgb(255, 0, 0)");
|
||||
assert_equals(getComputedStyle(target2).backgroundColor, "rgb(255, 0, 0)");
|
||||
assert_equals(getComputedStyle(target3).backgroundColor, "rgb(255, 0, 0)");
|
||||
assert_equals(getComputedStyle(target4).backgroundColor, "rgb(255, 0, 0)");
|
||||
}, "Initially red");
|
||||
|
||||
test(() => {
|
||||
item1.remove();
|
||||
assert_equals(getComputedStyle(target1).backgroundColor, "rgb(0, 128, 0)");
|
||||
}, ":nth-child() no longer matching after removal");
|
||||
|
||||
test(() => {
|
||||
item2.remove();
|
||||
assert_equals(getComputedStyle(target2).backgroundColor, "rgb(0, 128, 0)");
|
||||
}, ":nth-last-child() no longer matching after removal");
|
||||
|
||||
test(() => {
|
||||
item3.remove();
|
||||
assert_equals(getComputedStyle(target3).backgroundColor, "rgb(0, 128, 0)");
|
||||
}, ":nth-child() in non-subject no longer matching after removal");
|
||||
|
||||
test(() => {
|
||||
item4.remove();
|
||||
assert_equals(getComputedStyle(target4).backgroundColor, "rgb(0, 128, 0)");
|
||||
}, ":nth-last-child() in non-subject no longer matching after removal");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Selector Invalidation: :has() with pseudo-classes</title>
|
||||
<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<style>
|
||||
main:has(input) div { color: grey }
|
||||
main:has(#checkbox:checked) > #subject { color: red }
|
||||
main:has(#option:checked) > #subject { color: red }
|
||||
main:has(#checkbox:disabled) > #subject { color: green }
|
||||
main:has(#option:disabled) > :is(#subject, #subject2) { color: green }
|
||||
main:has(#optgroup:disabled) > #subject { color: blue }
|
||||
main:not(:has(#checkbox:enabled)) > #subject3 { color: green }
|
||||
main:not(:has(#option:enabled)) :is(#subject3, #subject4) { color: green }
|
||||
main:not(:has(#optgroup:enabled)) > #subject3 { color: blue }
|
||||
main:has(#text_input:valid) > #subject { color: yellow }
|
||||
main:not(:has(#text_input:invalid)) > #subject2 { color: yellow }
|
||||
main:has(#form:valid) > #subject3 { color: yellow }
|
||||
main:not(:has(#form:invalid)) > #subject4 { color: yellow }
|
||||
</style>
|
||||
|
||||
<main id=main>
|
||||
<form id=form>
|
||||
<input type=checkbox id=checkbox></input>
|
||||
<select id=select><optgroup id=optgroup><option>a</option><option id=option>b</option></optgroup></select>
|
||||
<input id=text_input type=text required></input>
|
||||
</form>
|
||||
<div id=subject></div>
|
||||
<div id=subject2></div>
|
||||
<div id=subject3></div>
|
||||
<div id=subject4></div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const grey = 'rgb(128, 128, 128)';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const green = 'rgb(0, 128, 0)';
|
||||
const blue = 'rgb(0, 0, 255)';
|
||||
const yellow = 'rgb(255, 255, 0)';
|
||||
const purple = 'rgb(128, 0, 128)';
|
||||
const pink = 'rgb(255, 192, 203)';
|
||||
|
||||
function testColor(test_name, subject_element, color) {
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(subject_element).color, color);
|
||||
}, test_name);
|
||||
}
|
||||
|
||||
function testPseudoClassChange(element, property, subject_element, expectedColor)
|
||||
{
|
||||
testColor(`Before set ${property} on ${element.id}, testing ${subject_element.id}`, subject_element, grey);
|
||||
|
||||
element[property] = true;
|
||||
testColor(`Set ${property} on ${element.id}, testing ${subject_element.id}`, subject_element, expectedColor);
|
||||
|
||||
element[property] = false;
|
||||
testColor(`Unset ${property} on ${element.id}, testing ${subject_element.id}`, subject_element, grey);
|
||||
}
|
||||
|
||||
function testSelectedChange(option, subject_element, expectedColor)
|
||||
{
|
||||
const oldOption = select.selectedOptions[0];
|
||||
option.selected = true;
|
||||
testColor(`Set select on ${option.id}`, subject_element, expectedColor);
|
||||
oldOption.selected = true;
|
||||
testColor(`Reset select`, subject, grey);
|
||||
}
|
||||
|
||||
function testValueChange(input, subject_element, expectedColor)
|
||||
{
|
||||
testColor(`Before setting value of ${input.id}, testing ${subject_element.id}`, subject_element, grey);
|
||||
|
||||
input.value = "value";
|
||||
testColor(`Set value of ${input.id}, testing ${subject_element.id}`, subject_element, expectedColor);
|
||||
|
||||
input.value = "";
|
||||
testColor(`Clear value of ${input.id}, testing ${subject_element.id}`, subject_element, grey);
|
||||
}
|
||||
|
||||
testPseudoClassChange(checkbox, "checked", subject, red);
|
||||
testSelectedChange(option, subject, red);
|
||||
|
||||
testPseudoClassChange(checkbox, "disabled", subject, green);
|
||||
testPseudoClassChange(checkbox, "disabled", subject3, green);
|
||||
testPseudoClassChange(option, "disabled", subject, green);
|
||||
testPseudoClassChange(option, "disabled", subject3, green);
|
||||
|
||||
testPseudoClassChange(optgroup, "disabled", subject, blue);
|
||||
testPseudoClassChange(optgroup, "disabled", subject2, green);
|
||||
testPseudoClassChange(optgroup, "disabled", subject3, blue);
|
||||
testPseudoClassChange(optgroup, "disabled", subject4, green);
|
||||
|
||||
testValueChange(text_input, subject, yellow);
|
||||
testValueChange(text_input, subject2, yellow);
|
||||
testValueChange(text_input, subject3, yellow);
|
||||
testValueChange(text_input, subject4, yellow);
|
||||
</script>
|
||||
Loading…
Reference in a new issue