<html>
<head>
<style>
#inspected
{
  color: green;
}
</style>
<link rel="stylesheet" href="resources/selector-line.css" />
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script>

function test()
{
    var sassMapping = new WebInspector.SASSSourceMapping(WebInspector.cssModel, WebInspector.workspace, WebInspector.networkWorkspaceProvider);
    WebInspector.workspace.addEventListener(WebInspector.UISourceCodeProvider.Events.UISourceCodeAdded, uiSourceCodeAdded, null);
    WebInspector.showPanel("elements");
    step1();

    function uiSourceCodeAdded(event)
    {
        var uiSourceCode = event.data;
        if (uiSourceCode.url.endsWith(".scss"))
            uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.SourceMappingChanged, step2, null);
    }

    function step1()
    {
        WebInspector.resourceTreeModel.forAllResources(callback);
        function callback(resource)
        {
            if (resource.url.endsWith(".css")) {
                sassMapping._resourceAdded(new WebInspector.Event(WebInspector.resourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.ResourceAdded, resource));
                return true;
            }
        }
    }

    function step2()
    {
        InspectorTest.selectNodeAndWaitForStyles("inspected", step3);
    }

    function step3()
    {
        InspectorTest.dumpSelectedElementStyles(true);
        InspectorTest.completeTest();
    }
}

</script>
</head>

<body onload="runTest()">
<p>
Tests that selector line is computed correctly regardless of its start column. <a href="https://bugs.webkit.org/show_bug.cgi?id=110732">Bug 110732</a>.
</p>

<div id="container">
    <div id="inspected">Text</div>
</div>

</body>
</html>