When setting CSS variables in the Web Inspector only the last variable takes effect. This is most likely due to CSS variables all sharing the same CSSPropertyID. Example: #test { padding-left: -webkit-var(a); padding-top: -webkit-var(b); -webkit-var-a: 100px; -webkit-var-b: 200px; } If these values are entered via the Web Inspector only padding-top will have the correct value. padding-left will remain unset.
Created attachment 194999 [details] Patch
Comment on attachment 194999 [details] Patch Attachment 194999 [details] did not pass mac-wk2-ews (mac-wk2): Output: http://webkit-commit-queue.appspot.com/results/17295382 New failing tests: inspector/styles/add-multiple-inline-css-variables.html
Created attachment 195033 [details] Archive of layout-test-results from webkit-ews-09 for mac-mountainlion-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: webkit-ews-09 Port: mac-mountainlion-wk2 Platform: Mac OS X 10.8.2
Comment on attachment 194999 [details] Patch Attachment 194999 [details] did not pass mac-ews (mac): Output: http://webkit-commit-queue.appspot.com/results/17289514 New failing tests: inspector/styles/add-multiple-inline-css-variables.html
Created attachment 195130 [details] Archive of layout-test-results from webkit-ews-01 for mac-future The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: webkit-ews-01 Port: mac-future Platform: Mac OS X 10.8.2
Created attachment 195205 [details] Patch
(In reply to comment #6) > Created an attachment (id=195205) [details] > Patch Removed test from Mac port (CSS variables not enabled there).
Comment on attachment 195205 [details] Patch The Web Inspector test looks good. View in context: https://bugs.webkit.org/attachment.cgi?id=195205&action=review > Source/WebCore/css/StylePropertySet.cpp:759 > + ASSERT(value->isVariableValue()); toHTMLElement() and friends check for !value as well. Do you want to do the same here? > Source/WebCore/css/StylePropertySet.cpp:765 > + ASSERT(value->isVariableValue()); Ditto > Source/WebCore/css/StylePropertySet.cpp:771 > + for (int i = propertyCount() - 1; i >= 0; i--) { Most for-loops in this file seem to use the prefix-decrement. > LayoutTests/inspector/styles/variables/add-inline-css-variable.html:14 > + var idToDOMNode = WebInspector.domAgent._idToDOMNode; You can use InspectorTest.expandedNodeWithId(idValue) for brevity (since you have selected it in the tree) from elements-test.js (and then use node.id)
Created attachment 195261 [details] Patch
(In reply to comment #8) > (From update of attachment 195205 [details]) > The Web Inspector test looks good. > > View in context: https://bugs.webkit.org/attachment.cgi?id=195205&action=review > Thanks for the review. > > Source/WebCore/css/StylePropertySet.cpp:759 > > + ASSERT(value->isVariableValue()); > > toHTMLElement() and friends check for !value as well. Do you want to do the same here? > > > Source/WebCore/css/StylePropertySet.cpp:765 > > + ASSERT(value->isVariableValue()); > > Ditto > Added check for !value. > > Source/WebCore/css/StylePropertySet.cpp:771 > > + for (int i = propertyCount() - 1; i >= 0; i--) { > > Most for-loops in this file seem to use the prefix-decrement. > Changed to prefix. > > LayoutTests/inspector/styles/variables/add-inline-css-variable.html:14 > > + var idToDOMNode = WebInspector.domAgent._idToDOMNode; > > You can use InspectorTest.expandedNodeWithId(idValue) for brevity (since you have selected it in the tree) from elements-test.js (and then use node.id) I'm glad there was an easier way, I'm not so familiar with the Web Inspector to know much better, just copied what another test was doing. Changed to use expandedNodeWithId.
CSS variables got yanked.