<html>

<style media="(max-width: 0px)">
  #test { color: rgb(255, 0, 0); }
</style>
<div id="does-not-match">Should not be red.</div>

<style media="(max-width: 10000px)">
  #matches { color: rgb(255, 0, 0); }
</style>

<div id="matches">Should be red.</div>

<script>
import "../resources/third_party/unittest/unittest.dart";
import "../resources/unit.dart";

import "dart:sky";

void main() {
  initUnit();

  test('should allow sheets to apply when they match', () {
    var element = document.getElementById('matches');
    expect(window.getComputedStyle(element)["color"], equals("rgb(255, 0, 0)"));
  });

  test('should cause sheets to be skipped when they do not match', () {
    var element = document.getElementById('does-not-match');
    expect(window.getComputedStyle(element)["color"], equals("rgb(0, 0, 0)"));
  });
}
</script>
</html>