Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-color] add test for LinkText and dark color-scheme #44940

Merged
merged 5 commits into from Mar 6, 2024
Merged

[css-color] add test for LinkText and dark color-scheme #44940

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c39cca3
test for LinkText and dark mode in system-color-consistency.html
mayank99 Mar 5, 2024
814a02b
fix lint
mayank99 Mar 5, 2024
17a2e67
fix test names
mayank99 Mar 5, 2024
556ab86
try testing VisitedTest using `href=""`?
mayank99 Mar 5, 2024
094f7a9
revert
mayank99 Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
27 changes: 19 additions & 8 deletions css/css-color/system-color-consistency.html
View file
Open in desktop
Expand Up @@ -29,31 +29,42 @@
<textarea name="text area"></textarea>
</div>
<mark id="mark">Marked text</mark>
<!-- Link -->
<a href="#" id="link">Link</a>
</div>

<script>
['light', 'dark'].forEach(colorScheme => {
document.documentElement.style.colorScheme = colorScheme;

// Buttons
for (let element of document.getElementById("buttons").children) {
style = document.defaultView.getComputedStyle(element);
test_computed_value('color', 'ButtonBorder', style.getPropertyValue('border-color'), 'resolves to the same color as the border-color of a ' + element.name);
test_computed_value('color', 'ButtonFace', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name);
test_computed_value('color', 'ButtonText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name);
test_computed_value('color', 'ButtonBorder', style.getPropertyValue('border-color'), `resolves to the same color as the border-color of a ${element.name} (${colorScheme})`);
test_computed_value('color', 'ButtonFace', style.getPropertyValue('background-color'), `resolves to the same color as the background-color of a ${element.name} (${colorScheme})`);
test_computed_value('color', 'ButtonText', style.getPropertyValue('color'), `resolves to the same color as text on a ${element.name} (${colorScheme})`);
}

// CanvasText
style = document.defaultView.getComputedStyle(document.getElementsByTagName('html')[0]);
test_computed_value('color', 'CanvasText', style.getPropertyValue('color'), 'has the same color as the color of the html element');
test_computed_value('color', 'CanvasText', style.getPropertyValue('color'), `has the same color as the color of the html element (${colorScheme})`);

// Field and FieldText
for (let element of document.getElementById("fields").children) {
style = document.defaultView.getComputedStyle(element);
test_computed_value('color', 'Field', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name);
test_computed_value('color', 'FieldText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name);
test_computed_value('color', 'Field', style.getPropertyValue('background-color'), `resolves to the same color as the background-color of a ${element.name} (${colorScheme})`);
test_computed_value('color', 'FieldText', style.getPropertyValue('color'), `resolves to the same color as text on a ${element.name} (${colorScheme})`);
}

// Mark and MarkText
style = document.defaultView.getComputedStyle(document.getElementById('mark'));
test_computed_value('color', 'Mark', style.getPropertyValue('background-color'), 'has the same color as the background-color of a mark element');
test_computed_value('color', 'MarkText', style.getPropertyValue('color'), 'has the same color as the color of a mark element');
test_computed_value('color', 'Mark', style.getPropertyValue('background-color'), `has the same color as the background-color of a mark element (${colorScheme})`);
test_computed_value('color', 'MarkText', style.getPropertyValue('color'), `has the same color as the color of a mark element (${colorScheme})`);

// LinkText
style = document.defaultView.getComputedStyle(document.getElementById('link'));
test_computed_value('color', 'LinkText', style.getPropertyValue('color'), `has the same color as the color of an anchor element (${colorScheme})`);
});
</script>
</body>

Expand Down