| <!DOCTYPE html> |
| <script src='../resources/testharness.js'></script> |
| <script src='../resources/testharnessreport.js'></script> |
| <style> |
| div { color: red; } |
| </style> |
| <div id='host'></div> |
| <div id='dummy'></div> |
| <script> |
| 'use strict'; |
| |
| var root = host.createShadowRoot(); |
| root.innerHTML = '<style>:host(#host) { color: green; }</style>'; |
| |
| test(() => { |
| assert_equals(window.getComputedStyle(host).color, 'rgb(0, 128, 0)', |
| 'V0 cascade order should be used by default.'); |
| |
| // Adding V1 user-agent shadow should not switch cascading order. |
| var option = document.createElement('option'); |
| dummy.appendChild(option); |
| assert_equals(window.getComputedStyle(host).color, 'rgb(0, 128, 0)', |
| 'Adding UA shadow should not change the cascade order.'); |
| |
| // Adopting V1 user-agent shadow should not switch cascading order. |
| var doc2 = document.implementation.createHTMLDocument(); |
| var option2 = doc2.createElement('option'); |
| dummy.appendChild(option2); |
| assert_equals(window.getComputedStyle(host).color, 'rgb(0, 128, 0)', |
| 'Adopting UA shadow should not change the cascade order.'); |
| |
| // Trigger "V1" shadow cascading order. |
| dummy.attachShadow({mode: 'open'}); |
| assert_equals(window.getComputedStyle(host).color, 'rgb(255, 0, 0)', |
| 'Adding author V1 shadow should change the cascade order.'); |
| }, 'Upgrading V0 to V1 should cause style recalculation.'); |
| </script> |
