Commit f92f19e6 authored by Byungwoo Lee's avatar Byungwoo Lee Committed by moz-wptsync-bot
Browse files

Bug 1770140 [wpt PR 34124] - Fix potential test error by using different color... 

Bug 1770140 [wpt PR 34124] - Fix potential test error by using different color for testing attribute., a=testonly

Automatic update from web-platform-tests
Fix potential test error by using different color for testing attribute.

The commit 696ebeed0f0475edfc4bd54dfcd8304db774f7cf added additional
tests to check attribute selectors inside :has() for all relationships.

To minimize the change, the CL just added new :has() argument selectors
to the existing style rules, and it has a potential problem of hiding
test failure from one argument selector by another argument selector.

To avoid it, this CL uses different colors for attribute testing.

Bug: 669058
Change-Id: Ic06776bbc47702076a4ec1aff1a14fd5d87e774f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3651933


Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Byungwoo Lee <blee@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1005650}

--

wpt-commits: a06b3fb0dc30fd52db6528387a2facdf6a9015a4
wpt-pr: 34124
parent 8cd59ff5

testing/web-platform/tests/css/selectors/invalidation/has-in-adjacent-position.html

+118 −67
Original line number Diff line number Diff line
@@ -7,12 +7,18 @@ 
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">

<style>

div, main { color: grey }

div:has(.test, [test_attr]) + #subject { color: red }

div:has(> .test, > [test_attr]) + #subject { color: green }

div:has(~ .test, ~ [test_attr]) + #subject { color: yellow }

div:has(+ .test, + [test_attr]) + #subject { color: blue }

div:has(~ div .test, ~ div [test_attr]) + #subject { color: purple }

div:has(+ div .test, + div [test_attr]) + #subject { color: pink }

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>
@@ -32,11 +38,47 @@ div:has(+ div .test, + div [test_attr]) + #subject { color: pink } 
<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() {
@@ -44,27 +86,30 @@ function testColor(test_name, color) { 
    }, test_name);

}



function testClassChange(element, expectedColor)

function testClassChange(element, expectedColorName)

{

    const expectedColorForClassTest = colors[expectedColorName].classTest;

    element.classList.add('test');

    testColor(`add .test to ${element.id}`, expectedColor);

    testColor(`add .test to ${element.id}`, expectedColorForClassTest);

    element.classList.remove('test');

    testColor(`remove .test from ${element.id}`, grey);

}



function testElementInsertionBefore(beforeElement, expectedColor)

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}`, expectedColor);

    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}`, expectedColor);

    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);
@@ -75,7 +120,7 @@ function testElementInsertionBefore(beforeElement, expectedColor) 
    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}`, expectedColor);

    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);
@@ -86,25 +131,27 @@ function testElementInsertionBefore(beforeElement, expectedColor) 
    newElement.setAttribute('test_attr', '');



    beforeElement.before(newElement);

    testColor(`insert element div[test_attr] before ${beforeElement.id}`, expectedColor);

    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, expectedColor)

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}`, expectedColor);

    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}`, expectedColor);

    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);
@@ -115,7 +162,7 @@ function testElementInsertionAfter(afterElement, expectedColor) 
    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}`, expectedColor);

    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);
@@ -126,27 +173,29 @@ function testElementInsertionAfter(afterElement, expectedColor) 
    newElement.setAttribute('test_attr', '');



    afterElement.after(newElement);

    testColor(`insert element div[test_attr] after ${afterElement.id}`, expectedColor);

    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, expectedColor)

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}`, expectedColor);

    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}`, expectedColor);

    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);
@@ -157,7 +206,7 @@ function testTreeInsertionBefore(beforeElement, expectedColor) 
    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}`, expectedColor);

    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);
@@ -168,27 +217,29 @@ function testTreeInsertionBefore(beforeElement, expectedColor) 
    newChild.setAttribute('test_attr', '');



    beforeElement.before(newElement);

    testColor(`insert element div>div[test_attr] before ${beforeElement.id}`, expectedColor);

    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, expectedColor)

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}`, expectedColor);

    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}`, expectedColor);

    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);
@@ -199,7 +250,7 @@ function testTreeInsertionAfter(afterElement, expectedColor) 
    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}`, expectedColor);

    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);
@@ -210,7 +261,7 @@ function testTreeInsertionAfter(afterElement, expectedColor) 
    newChild.setAttribute('test_attr', '');



    afterElement.after(newElement);

    testColor(`insert element div>div[test_attr] after ${afterElement.id}`, expectedColor);

    testColor(`insert element div>div[test_attr] after ${afterElement.id}`, expectedColorForAttributeTest);



    newElement.remove();

    testColor(`remove element div>div[test_attr] after ${afterElement.id}`, grey);
@@ -218,44 +269,44 @@ function testTreeInsertionAfter(afterElement, expectedColor) 


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);

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>

testing/web-platform/tests/css/selectors/invalidation/has-in-ancestor-position.html

+123 −72

File changed.

Preview size limit exceeded, changes collapsed.

testing/web-platform/tests/css/selectors/invalidation/has-in-parent-position.html

+108 −57

File changed.

Preview size limit exceeded, changes collapsed.

testing/web-platform/tests/css/selectors/invalidation/has-in-sibling-position.html

+118 −67

File changed.

Preview size limit exceeded, changes collapsed.