LayoutTests/fast/css/style-scoped/style-scoped-with-important-rule.html - Issue 216543002: Revert of Remove applyAuthorStyles flag from ShadowRoot.

Side by Side Diff: LayoutTests/fast/css/style-scoped/style-scoped-with-important-rule.html

Issue 216543002: Revert of Remove applyAuthorStyles flag from ShadowRoot. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 6 years, 9 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

« no previous file with comments | « LayoutTests/fast/css/style-scoped/style-scoped-nested-expected.txt ('k') | LayoutTests/fast/css/style-scoped/style-scoped-with-important-rule-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <head>	3 <head>

4 <style>	4 <style>

5 span { border-color: lime ! important; }	5 span { border-color: lime ! important; }

6 div { border-color: orange; }	6 div { border-color: orange; }

7 div#id2 { border-color: yellow; }	7 div#id2 { border-color: yellow; }

8 </style>	8 </style>

9 <script src="../../../resources/js-test.js"></script>	9 <script src="../../../resources/js-test.js"></script>

10 </head>	10 </head>

(...skipping 21 matching lines...) Expand all Loading...
32 div { border-color: blue; }	32 div { border-color: blue; }

33 </style>	33 </style>

34 <div id="id3" style="border-color: red;"></div>	34 <div id="id3" style="border-color: red;"></div>

35 </div>	35 </div>

36 <div>	36 <div>

37 <style scoped>	37 <style scoped>

38 div { border-color: blue !important; }	38 div { border-color: blue !important; }

39 </style>	39 </style>

40 <div id="id4"></div>	40 <div id="id4"></div>

41 </div>	41 </div>

	42 <div id="host1">Shadow Host</div>

42 </div>	43 </div>

43 <div>	44 <div>

44 <style scoped>	45 <style scoped>

45 span#id5 { border-color: blue; }	46 span#id5 { border-color: blue; }

46 </style>	47 </style>

47 <span id="id5"></span>	48 <span id="id5"></span>

48 </div>	49 </div>

49 <div>	50 <div>

50 <style scoped>	51 <style scoped>

51 span { border-color: blue !important; }	52 span { border-color: blue !important; }

52 </style>	53 </style>

53 <span id="id6"></span>	54 <span id="id6"></span>

54 </div>	55 </div>

	56 <div>

	57 <style scoped>

	58 div { border-color: red;}

	59 </style>

	60 <div id="host2">Shadow Host</div>

	61 </div>

55 </body>	62 </body>

56 <script>	63 <script>

57 description("Test that rules in an inner scoped stylesheet don't override !impor tant rules declared in an outer scoped stylesheet.");	64 description("Test that rules in an inner scoped stylesheet don't override !impor tant rules declared in an outer scoped stylesheet.");

58	65

59 var target1 = document.getElementById("id1");	66 var target1 = document.getElementById("id1");

60 debug("Case1: The target element has any matched important rule declared in an o uter scoped stylesheet, and the element also has any matched normal rule declare d in an inner scoped stylesheet.");	67 debug("Case1: The target element has any matched important rule declared in an o uter scoped stylesheet, and the element also has any matched normal rule declare d in an inner scoped stylesheet.");

61 shouldBe('getComputedStyle(target1).borderColor', '"rgb(0, 128, 0)"');	68 shouldBe('getComputedStyle(target1).borderColor', '"rgb(0, 128, 0)"');

62	69

63 debug("Case2: The target element has any matched important rule declared in an o uter scoped stylesheet, and the element also has a matched normal ID rule declar ed in an inner scoped stylesheet.");	70 debug("Case2: The target element has any matched important rule declared in an o uter scoped stylesheet, and the element also has a matched normal ID rule declar ed in an inner scoped stylesheet.");

64 var target2 = document.getElementById("id2");	71 var target2 = document.getElementById("id2");

65 shouldBe('getComputedStyle(target2).borderColor', '"rgb(0, 128, 0)"');	72 shouldBe('getComputedStyle(target2).borderColor', '"rgb(0, 128, 0)"');

66	73

67 debug("Case3: The target element has any matched important rule declared in an o uter scoped stylesheet, and the element also has matched normal rules declared i n an inner scoped stylesheet and in a STYLE attribute.");	74 debug("Case3: The target element has any matched important rule declared in an o uter scoped stylesheet, and the element also has matched normal rules declared i n an inner scoped stylesheet and in a STYLE attribute.");

68 var target3 = document.getElementById("id3");	75 var target3 = document.getElementById("id3");

69 shouldBe('getComputedStyle(target3).borderColor', '"rgb(0, 128, 0)"');	76 shouldBe('getComputedStyle(target3).borderColor', '"rgb(0, 128, 0)"');

70	77

71 debug("Case4: The target element has matched important rules. One is declared in an outer scoped stylesheet and the other is declared in an inner scoped stylesh eet.");	78 debug("Case4: The target element has matched important rules. One is declared in an outer scoped stylesheet and the other is declared in an inner scoped stylesh eet.");

72 var target4 = document.getElementById("id4");	79 var target4 = document.getElementById("id4");

73 shouldBe('getComputedStyle(target4).borderColor', '"rgb(0, 0, 255)"');	80 shouldBe('getComputedStyle(target4).borderColor', '"rgb(0, 0, 255)"');

74	81

75 debug("Case5: The target element has any matched important rule declared in an a uthor stylesheet, and the element also has matched normal rules declared in an i nner scoped stylesheet.");	82 debug("Case5: The target element has any matched important rule declared in an a uthor stylesheet, and the element also has matched normal rules declared in an i nner scoped stylesheet.");

76 var target5 = document.getElementById("id5");	83 var target5 = document.getElementById("id5");

77 shouldBe('getComputedStyle(target5).borderColor', '"rgb(0, 255, 0)"');	84 shouldBe('getComputedStyle(target5).borderColor', '"rgb(0, 255, 0)"');

78	85

79 debug("Case6: The target element has matched important rules. One is declared in an author stylesheet (not scoped) and the other is declared in a scoped stylesh eet.");	86 debug("Case6: The target element has matched important rules. One is declared in an author stylesheet (not scoped) and the other is declared in a scoped stylesh eet.");

80 var target6 = document.getElementById("id6");	87 var target6 = document.getElementById("id6");

81 shouldBe('getComputedStyle(target6).borderColor', '"rgb(0, 0, 255)"');	88 shouldBe('getComputedStyle(target6).borderColor', '"rgb(0, 0, 255)"');

	89

	90 debug("Case7: The target element has any matched important rule declared in an o uter scoped stylesheet. The element is in a shadow dom tree whose shadow root ha s apply-author-styles true. The shadow dom tree has any other normal rules which match the element.");

	91 var host1 = document.getElementById("host1");

	92 var shadowRoot1 = host1.createShadowRoot();

	93 shadowRoot1.applyAuthorStyles = true;

	94 shadowRoot1.innerHTML = '<style>div#shadow1 { color: blue; }</style><div id="sha dow1"></div>';

	95 var target7 = shadowRoot1.getElementById("shadow1");

	96 shouldBe('getComputedStyle(target7).borderColor', '"rgb(0, 128, 0)"');

	97

	98 debug("Case8: The target element in a shadow dom tree has any matched important rule declared in an outer scoped stylesheet in an enclosing shadow dom tree. The target element's shadow root has apply-author-styles true.");

	99 var host2 = document.getElementById("host2");

	100 var shadowRoot2 = host2.createShadowRoot();

	101 shadowRoot2.applyAuthorStyles = false;

	102 shadowRoot2.innerHTML = '<style>div { border-color: green !important; }</style>< div id="shadow2"></div>';

	103

	104 var hostInShadowTree2 = shadowRoot2.getElementById("shadow2");

	105 var shadowRoot3 = hostInShadowTree2.createShadowRoot();

	106 shadowRoot3.applyAuthorStyles = true;

	107 shadowRoot3.innerHTML = '<style>div#shadow3 { border-color: blue; }</style><div id="shadow3"></div>';

	108 var target8 = shadowRoot3.getElementById("shadow3");

	109 shouldBe('getComputedStyle(target8).borderColor', '"rgb(0, 128, 0)"');

	110

	111 debug("Case8': The target element is in a shadow dom tree. An enclosing shadow d om tree has some stylesheet which declares an important rule. The target element 's shadow root has apply-author-styles false.");

	112 shadowRoot3.applyAuthorStyles = false;

	113 shouldBe('getComputedStyle(target8).borderColor', '"rgb(0, 0, 255)"');

	114

82 </script>	115 </script>

83 </html>	116 </html>

OLD	NEW