| <!doctype html> |
| <meta charset="utf-8"> |
| <title>CSSOM: getComputedStyle with ::picker(select)</title> |
| |
| <link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle"> |
| <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> |
| |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| |
| <style> |
| select, |
| select::picker(select) { |
| appearance: base-select; |
| } |
| |
| #test-select::picker(select) { |
| background-color: rgb(0, 128, 0); |
| } |
| |
| #test-div::picker(select) { |
| background-color: rgb(0, 0, 255); |
| } |
| </style> |
| |
| <select id="test-select"> |
| <option>The only option</option> |
| </select> |
| |
| <div id="test-div"></div> |
| |
| <div id="test-div-no-rules"></div> |
| |
| <script> |
| test(() => { |
| const select = document.getElementById('test-select'); |
| const style = getComputedStyle(select, '::picker(select)'); |
| assert_equals(style.backgroundColor, 'rgb(0, 128, 0)'); |
| }, '::picker(select) returns picker element style'); |
| |
| test(() => { |
| const div = document.getElementById('test-div'); |
| const style = getComputedStyle(div, '::picker(select)'); |
| assert_equals(style.backgroundColor, 'rgb(0, 0, 255)'); |
| }, '::picker(select) on non-select element resolves the style'); |
| |
| test(() => { |
| const div = document.getElementById('test-div-no-rules'); |
| const style = getComputedStyle(div, '::picker(select)'); |
| assert_equals(style.backgroundColor, 'rgba(0, 0, 0, 0)'); |
| }, '::picker(select) on non-select element with no rules resolves the style'); |
| |
| [ |
| "::picker", |
| "::picker()", |
| "::picker(div)", |
| ":picker(select)", |
| "::picker(select)a", |
| "::picker( )", |
| ].forEach(pseudo => { |
| test(() => { |
| const select = document.getElementById('test-select'); |
| const style = getComputedStyle(select, pseudo); |
| assert_equals(style.length, 0); |
| }, `Invalid pseudo-element should return empty style: ${pseudo}`); |
| }); |
| </script> |
