<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
summary.first {
    display: list-item;
}

summary.second {
    display: some-invalid-value;
}

summary.third {
    display: block;
}
</style>
<details><summary>A</summary>B</details>
<script>
'use strict';

test(() => {
    let SummaryElementWithDisplayBlockAuthorRule = 1434; // From UseCounter.h
    let isCounted = () => internals.isUseCounted(document, SummaryElementWithDisplayBlockAuthorRule);
    assert_false(isCounted(),
                 'user agent stylesheet rules should not be counted');

    let summary = document.querySelector('summary');
    assert_equals(
        'block', window.getComputedStyle(summary).display,
        'the user agent stylsheet display property should be in effect');
    assert_false(
        isCounted(),
        'user agent stylesheet rules should not be counted');

    summary.classList.add('first');
    assert_equals(
        'list-item', window.getComputedStyle(summary).display,
        'the author stylsheet display property should be in effect');
    assert_false(
        isCounted(),
        'valid values other than block should not be counted');

    summary.classList.remove('first');
    summary.classList.add('second');
    assert_equals(
        'block', window.getComputedStyle(summary).display,
        'the user agent stylesheet display property should be in effect ' +
        'when the author stylesheet value is invalid');
    assert_false(
        isCounted(),
        'only values from an author rule should be counted');

    summary.classList.remove('second');
    summary.classList.add('third');
    assert_equals(
        'block', window.getComputedStyle(summary).display,
        'the author stylesheet display property should be in effect');
    assert_true(
        isCounted(),
        'author rules for display: block summary should tickle the counter');
}, 'summary with author display: block is use counted');
</script>