| <!doctype html> |
| <title>container-type invalidation</title> |
| <link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/cq-testcommon.js"></script> |
| <style> |
| div { |
| color: black; |
| } |
| #outer { |
| width: 300px; |
| } |
| |
| #intermediate { |
| width: 250px; |
| } |
| |
| #inner { |
| width: 200px; |
| } |
| |
| .container { |
| container-type: inline-size; |
| } |
| |
| @container ((max-width: 200px) or (min-width: 300px)) { |
| #child { color: green; } |
| } |
| |
| </style> |
| <div id=outer> |
| <div id=intermediate> |
| <div id=inner> |
| <div id=child>Test</div> |
| </div> |
| </div> |
| </div> |
| <script> |
| setup(() => assert_implements_container_queries()); |
| |
| test(function(t) { |
| t.add_cleanup(() => { |
| for (let e of [outer, intermediate, inner]) |
| e.classList.remove('container'); |
| }); |
| |
| // No container. |
| assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)'); |
| |
| outer.classList.add('container'); |
| assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)'); |
| |
| // The container query does not match widths in the range [201, 299], |
| // and #intermediate has width:250px. |
| intermediate.classList.add('container'); |
| assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)'); |
| |
| inner.classList.add('container'); |
| assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)'); |
| |
| // Should have no effect, #inner is the container. |
| outer.classList.remove('container'); |
| intermediate.classList.remove('container'); |
| assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)'); |
| |
| inner.classList.remove('container'); |
| assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)'); |
| }, 'Changing the container type invalidates relevant descendants'); |
| </script> |
