<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
'use strict';

test(() => {
    let ThreeValuedPositionGradient = 2003; // From UseCounter.h

    let isCounted = () => internals.isUseCounted(document, ThreeValuedPositionGradient);
    var div = document.createElement('div');

    // These properties have their own counters.
    div.style = 'background-position: left 10% top;';
    div.style = 'shape-outside: circle(0px at left 10% top);';
    div.style = 'object-position: left 10% top;';
    div.style = 'perspective-origin: left 10% top;';
    // These values are invalid.
    div.style = 'offset-anchor: left 10% top;';
    div.style = 'offset-position: left 10% top;';
    div.style = 'transform-origin: left 10% top;';
    // These obsolete properties will never ship.
    div.style = 'scroll-snap-coordinate: left 10% top;';
    div.style = 'scroll-snap-destination: left 10% top;';
    assert_false(isCounted(),
                 'non gradient should not be counted');

    div.style = 'background-image: radial-gradient(0em circle at left, blue);';
    div.style = 'background-image: radial-gradient(0em circle at left 10%, yellow, blue);';
    div.style = 'background-image: radial-gradient(0em circle at left 10% top 20%, yellow, blue);';
    assert_false(isCounted(),
                 '1,2,4 values should not be counted');

    div.style = 'background-image: radial-gradient(0em circle at left 10% top, yellow, blue);';
    assert_true(isCounted(),
                'gradient should be counted');
}, 'Three valued position syntax is use counted for radial-gradient');
</script>